> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Renderer SDKs

> This guide assists in migrating from FlowX v3.4.x to v4.0.

## Web SDK migration guide

### Theming changes

<Warning>
  All old configurations linked with the previous theming setup (versions prior to 4.0) must be removed from your SDK deployment:
</Warning>

1. Review Usage: Identify where you have applied theming v1 configurations in your project.

#### 3.4.x example:

```yaml theme={"system"}
...
themePaths: {
    components: 'assets/theme/theme_components.json',
    tokens: 'assets/theme/theme_tokens.json',
...
},
```

2. Update to Theming 4.0: Revise your theming configurations to use the latest theming v2 approach. Refer to our documentation or migration resources for guidance on transitioning to the new theming.

<Card title="Theming setup" href="/4.0/sdks/angular-renderer#theming" icon="link">
  Learn more
</Card>

### Authorization token

* **AuthToken Management**: The ui-sdk no longer relies on the authToken being stored in LOCAL\_STORAGE. Instead, the 'access\_token' is now passed as an input to the `<flx-process-renderer>` component through a private variable.

<Warning>
  **Breaking change**: This update is mandatory for proper functionality of SSE (Server-Sent Events).
</Warning>

<Info>
  By adopting this approach, clients gain the flexibility to implement the most secure token management strategy tailored to their specific security needs. Moreover, shifting the responsibility to the container application for updating the 'access\_token' input ensures that any changes or refreshes to the authToken are securely managed within the application's domain. This proactive approach effectively mitigates potential security vulnerabilities associated with token management, offering a robust and adaptable solution.
</Info>

<Card title="Authorization" href="/4.0/sdks/angular-renderer#authorization" icon="link">
  Learn more
</Card>

***

## iOS SDK migration guide

### Integration changes

The module name has changed from `FlowX` to `FlowXRenderer`.
Any files importing the SDK should be updated with the new module name.

```
//replace this
import FlowX

//with this
import FlowXRenderer
```

### Initialization config changes

A new configuration parameter, named `enginePath` was added to `FXConfig`. It represents the URL path component to the process engine.

```swift theme={"system"}
FXConfig.sharedInstance.configure { (config) in
    config.baseURL = myBaseURL
    config.enginePath = "engine"
    config.imageBaseURL = myImageBaseURL
    config.language = "en" 
    config.logLevel = .verbose
}
```

### Theming changes

The theming setup mechanism was updated.

<Card title="iOS Theming setup" href="/4.0/sdks/ios-renderer#theming" icon="link">
  Learn more
</Card>

### Custom components

* The type of `data` property of custom components has changed from `[String: Any]` to `Any`.
* As a consequence, type checking, casting and extracting the needed data must be part of the implementation details of the custom component.

<Card title="Custom components" href="/4.0/sdks/ios-renderer#custom-components" icon="link">
  Learn more
</Card>

### Start process updates

* The API for starting a process has changed.
* There are now 3 methods available.

<Card title="How to start a process" href="/4.0/sdks/ios-renderer#how-to-start-a-process" icon="link">
  Learn more
</Card>

### Continue process updates

* The API for resuming an existing process has changed.
* There are now 3 methods available.

<Card title="How to resume an existing process" href="/4.0/sdks/ios-renderer#how-to-resume-an-existing-process" icon="link">
  Learn more
</Card>

***

## Android SDK migration guide

### Initialization config changes

A new configuration parameter, named `enginePath` was added for identifying the FlowX Process Engine microservice.

When the SDK initialization happens through the `FlowxSdkApi.getInstance().init(...)` method, the argument has to be set inside the `config: SdkConfig` parameter value:

```kotlin theme={"system"}
FlowxSdkApi.getInstance().init(
    ...
    config = SdkConfig(
        baseUrl = "URL to FlowX backend",
        imageBaseUrl = "URL to FlowX CMS Media Library",
        enginePath = "some_path",
        language = "en",
        validators = mapOf("exact_25_in_length" to { it.length == 25 }),
    ),
    ...
)
```

### Authentication changes

The authentication mechanism has changed, so instead of passing the `String` value for the access token, a `FlowxSdkApi.Companion.AccessTokenProvider` must be used instead.

This provider is defined as a functional interface returning the actual value of the access token:

```kotlin theme={"system"}
fun interface AccessTokenProvider {
    fun get(): String
}
```

Related changes:

1. The provider can be passed if the business logic allows it when calling the `FlowxSdkApi.getInstance().init(...)`.

As a consequence, the new signature for the `FlowxSdkApi.getInstance().init(...)` is:

```kotlin theme={"system"}
fun init(
    context: Context,
    config: SdkConfig,
    accessTokenProvider: AccessTokenProvider? = null,
    customComponentsProvider: CustomComponentsProvider? = null,
)
```

2. The `FlowxSdkApi.getInstance().startProcess(...)` `accessToken` parameter was dropped. It is not needed anymore, as the authentication will rely solely on the `AccessTokenProvider`.

The new signature of this method is:

```kotlin theme={"system"}
fun startProcess(
    processName: String,
    params: JSONObject = JSONObject(),
    isModal: Boolean = false,
    closeModalFunc: ((processName: String) -> Unit)? = null,
): @Composable () -> Unit
```

3. The `FlowxSdkApi.getInstance().continueProcess(...)` `accessToken` parameter was dropped. It is not needed anymore, as the authentication will rely solely on the `AccessTokenProvider`.

The new signature of this method is:

```kotlin theme={"system"}
fun continueProcess(
    processUuid: String,
    isModal: Boolean = false,
    closeModalFunc: ((processName: String) -> Unit)? = null,
): @Composable () -> Unit
```

4. The calls of the `FlowxSdkApi.getInstance().updateAccessToken("some_access_token")` method must be replaced by calls of the `FlowxSdkApi.getInstance().setAccessTokenProvider(accessTokenProvider = { "some_access_token" })`.

<Tip>
  Whenever the access token changes based on your own authentication logic, it must be updated in the renderer by calling the `setAccessTokenProvider` method again.
</Tip>

<Card title="Authentication mechanism" href="/4.0/sdks/android-renderer#authentication" icon="link">
  Learn more
</Card>

### Theming changes

The theming mechanism was replaced by a new approach, which enforces loading a theme before starting or resuming a process.

Related changes:

1. The `ai.flowx.android.sdk.process.model.SdkConfig` theming related parameters (i.e. `themeTokensJsonFileAssetsPath` and `themeComponentsJsonFileAssetsPath`) were dropped.

Because of that, when configuring the library through the `FlowxSdkApi.getInstance().init(...)` method, the `config` parameter will look like this:

```kotlin theme={"system"}
FlowxSdkApi.getInstance().init(
    ...
    config = SdkConfig(
        baseUrl = "URL to FlowX backend",
        imageBaseUrl = "URL to FlowX CMS Media Library",
        enginePath = "some_path",
        language = "en",
        validators = mapOf("exact_25_in_length" to { it.length == 25 }),
    ),
    ...
)
```

2. For styling the UI components displayed when rendering a process while authenticated, the `FlowxSdkApi.getInstance().setupTheme(...)` method must be called before starting or resuming any process:

```kotlin theme={"system"}
suspend fun setupTheme(
    themeUuid: String,
    fallbackThemeJsonFileAssetsPath: String? = null,
    @MainThread onCompletion: () -> Unit
)
```

This will fetch a priorly defined theme in the FlowX Designer, cache it and then load its properties.

A process should be started or resumed only after the `onCompletion` closure is called, signaling the completion of setting up the theme.

<Card title="Theming mechanics" href="/4.0/sdks/android-renderer#theming" icon="link">
  Learn more
</Card>

### Custom components changes

1. All `import ai.flowx.android.sdk.component.*` directives must be changed to `import ai.flowx.android.sdk.ui.components.*`

2. The type of the `data` parameter passed to a custom component through the `populateUi(data: JSONObject)` method, both for `@Composable` and for classical `View` system approaches, changed to `Any?`.<br /><br />
   Therefore, the new signature of the method is `populateUi(data: Any?)`.

As a consequence, type checking, casting and extracting the needed data must be part of the implementation details of the custom component.

<Tip>
  The value for the `data` parameter received in the `populateUi(data: Any?)` could be:

  * `Boolean`
  * `String`
  * `java.lang.Number`
  * `org.json.JSONObject`
  * `org.json.JSONArray`
</Tip>

<Card title="Custom components" href="/4.0/sdks/android-renderer#custom-components" icon="link">
  Learn more
</Card>
