> ## 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 v4.1.x to v4.6.0. ## Android SDK migration guide ### Initialization config changes A new configuration parameter named `locale` was added to improve formatting the dates, numbers and currencies. When the SDK initialization happens through the `FlowxSdkApi.getInstance().init(...)` method, the argument must be included 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", locale = Locale.getDefault(), // e.g. Locale("en", "US"), Locale("fr", "CA") validators = mapOf("exact_25_in_length" to { it.length == 25 }), enableLog = false, ), ... ) ``` ### Changes when starting a Flowx process Two new parameters were added: | Name | Description | Type | Requirement | | ---------------- | -------------------------------------------------------------------------------------- | --------------- | -------------------------------- | | `projectId` | The id of the project containing the process to be started | `String` | Mandatory | | `onProcessEnded` | Callback function where you can do additional processing when the started process ends | `(() -> Unit)?` | Optional. It defaults to `null`. | ```kotlin theme={"system"} fun startProcess( projectId: String, processName: String, params: JSONObject = JSONObject(), isModal: Boolean = false, onProcessEnded: (() -> Unit)? = null, closeModalFunc: ((processName: String) -> Unit)? = null, ): @Composable () -> Unit ``` ### Changes when resuming a Flowx process One new parameter was added: | Name | Description | Type | Requirement | | ---------------- | ---------------------------------------------------------------------------------------- | --------------- | -------------------------------- | | `onProcessEnded` | Callback function where you can do additional processing when the continued process ends | `(() -> Unit)?` | Optional. It defaults to `null`. | ```kotlin theme={"system"} fun continueProcess( processUuid: String, isModal: Boolean = false, onProcessEnded: (() -> Unit)? = null, closeModalFunc: ((processName: String) -> Unit)? = null, ): @Composable () -> Unit ``` ### Changes regarding the implementation of Custom Components The support for classical **[Android View](https://developer.android.com/reference/android/view/View)** system has been dropped.
A Custom Component can now be implemented only by using the **[Compose](https://developer.android.com/compose)** UI system. This means that the `CustomViewComponent` is now ignored in the internals of the SDK and has been marked as `@Deprecated` and will be completely removed in the next release. There is no immediate need to update any of the existing components. ### Public API changes The `changeLanguage` method has been updated and renamed to `changeLocaleSettings` to accommodate the newly added `locale` config parameter: ```kotlin theme={"system"} fun changeLocaleSettings(locale: Locale, language: String) ``` ### Library dependencies updates * **[Kotlin](https://kotlinlang.org/)**: 1.9.22 **↗** **1.9.24** * **[Compose BOM](https://developer.android.com/jetpack/compose/bom/bom-mapping)**: 2024.02.00 **↗** **2024.06.00** * **[Compose Compiler](https://developer.android.com/jetpack/androidx/releases/compose-compiler)**: 1.5.9 **↗** **1.5.14** * **[Gson](https://github.com/google/gson)**: 2.10.1 **↗** **2.11.0** *** ## iOS SDK migration guide ### Initialization config changes A new configuration parameter, named `locale` was added to improve formatting the dates, numbers and currencies. The locale needs to be set on the `FXConfig.sharedInstance.configure` method ```swift theme={"system"} FXConfig.sharedInstance.configure { (config) in config.locale = "en-US" ... } ``` ### Changes when starting a process Two new parameters were added on the 3 available start process methods: | Name | Description | Type | Requirement | | ---------------- | -------------------------------------------------------------------------------------- | --------------- | ------------------------------- | | `projectId` | The uuid string of the project containing the process to be started | `String` | Mandatory | | `onProcessEnded` | Callback function where you can do additional processing when the started process ends | `(() -> Void)?` | Optional. It defaults to `nil`. | ```swift theme={"system"} func startProcess(projectId: String, name: String, params: [String : Any]?, isModal: Bool = false, showLoader: Bool = false, completion: ((UIViewController?) -> Void)?, onProcessEnded: (() -> Void)? = nil) ``` ### Changes when resuming a Flowx process One new parameter was added on the 3 available continue process methods: | Name | Description | Type | Requirement | | ---------------- | -------------------------------------------------------------------------------------- | --------------- | ------------------------------- | | `onProcessEnded` | Callback function where you can do additional processing when the started process ends | `(() -> Void)?` | Optional. It defaults to `nil`. | ```swift theme={"system"} func continueExistingProcess(uuid: String, name: String, isModal: Bool = false, completion: ((UIViewController?) -> Void)? = nil, onProcessEnded: (() -> Void)? = nil) ``` ### Updated FXDataSource protocol A new method has been added to the `FXDataSource` protocol. Update conformance to protocol by adding the implementation of the new func. ```swift theme={"system"} func newProcessStarted(processInstanceUuid: String) { } ``` ### Public API changes The `changeLanguage` method has been updated and renamed to `changeLocaleSettings` to accommodate the newly added `locale` config parameter: ```swift theme={"system"} func changeLocaleSettings(locale: String?, language: String?) ``` *** ## Angular SDK migration guide ### Upgrading to the new SDK libraries The Angular SDK node packages have been updated and will use the latest versions Angular (version 19), thus all container apps that want to use the new SDKs should first update the Angular version of the container apps. In the following we cover the migration guide for a container app from Angular v17 to v19 and the new SDKs. * remove `material-moment-adapter` unless it is used in custom components (usually together with material datepicker) and also the `moment` package (unless used elsewhere in the project ) ```bash theme={"system"} npm uninstall @angular/material-moment-adapter npm uninstall moment ``` * remove old FlowX SDK libraries: ```bash theme={"system"} npm uninstall @flowx/ui-sdk @flowx/ui-theme @flowx/ui-toolkit ``` * in `angular.json` remove references to old stylesheets: ```bash theme={"system"} "./node_modules/@flowx/ui-sdk/src/assets/scss/style.scss" "./node_modules/paperflow-web-components/src/assets/scss" "./node_modules/@flowx/ui-sdk/src/assets/scss" ``` * remove old FlowX SDKs explicit dependencies. Please check before removing that packages are not used in the container app or custom components. ```bash theme={"system"} npm uninstall date-fns event-source-polyfill inputmask ng2-pdfjs-viewer vanillajs-datepicker @ngneat/input-mask deepmerge-ts marked-mangle ``` * remove deprecated `Angular Flex` library (the new sdks don't use it anymore and the package has been deprecated by the Angular team) unless it is not used in container app or custom components ```bash theme={"system"} npm uninstall @angular/flex-layout ``` * Make sure to have the Angular CLI installed at version 18 (check with `ng --version`) ```bash theme={"system"} npm install -g @angular/cli@18 ``` * Run the Angular update for version 18 ```bash theme={"system"} ng update @angular/core@18 @angular/cli@18 ``` * Update Angular CDK or Angular Material ```bash theme={"system"} ng update @angular/cdk@18 ``` or, if the container app uses Angular Material, run: ```bash theme={"system"} ng update @angular/material@18 ``` * Optionally, if your project uses other angular packages (ex. `NgRx`) please run migrations to v18 for each of them before proceeding. You can find details on the libraries documentation pages. * Angular has changed the default build path in the `dist` folder, it now uses a `browser` folder for the build output. To place the output of the build command directly in the `dist/[APP_NAME]` folder, add the following change in `angular.json`: ```json theme={"system"} { ... "architect": { ... "build": { ... "options": { ... "outputPath": { "base": "dist/flowx-demo-app", "browser": "" <-- add this line }, } } } } ``` * Make sure to have the Angular CLI installed at version 19 (check with `ng --version`) ```bash theme={"system"} npm install -g @angular/cli@19 ``` * Run the Angular update for version 19 ```bash theme={"system"} ng update @angular/core@19 @angular/cli@19 ``` * Update Angular CDK or Angular Material ```bash theme={"system"} ng update @angular/cdk@19 ``` or, if the container app uses Angular material, run: ```bash theme={"system"} ng update @angular/material@19 ``` * Optionally, if your project uses other Angular packages (ex. `NgRx`) please run migrations to v19 for each of them before proceeding. You can find details on the libraries documentation pages. * Also, it is recommended that you update the `target` and `module` settings in the `tsconfig.json` file to the new version, although be advised that this might require additional changes in the codebase due to new compilation errors that might arise. ```json theme={"system"} { ... "compilerOptions": { ... "target": "ES2022", "module": "ES2022" } } ``` **Adding overrides for libraries that have a dependency on Angular version \< 19** For some libraries, the required angular version might not be up to date or compatible with the new Angular version. In this case, you can add an override in the `package.json` file to force the library to use the new Angular version. * For example, the `ng2-pdfjs-viewer` library has a dependency on Angular version 18 and will not work with the installed Angular version 19. To force the library to use the new Angular version, add the following override in the `package.json` file: ```json theme={"system"} { ... "overrides": { "ng2-pdfjs-viewer": { "@angular/common": "^19.0.0", "@angular/core": "^19.0.0", "ng-packagr": "^19.0.0" } } } ``` **Install new packages**: **ACTION REQUIRED**: Update to the latest version 4.6 to ensure optimal performance and compatibility. ```bash theme={"system"} npm install @flowx/core-sdk@5.63.0 @flowx/core-theme@5.63.0 @flowx/angular-sdk@5.63.0 @flowx/angular-theme@5.63.0 @flowx/angular-ui-toolkit@5.62.1 ``` * Install a type dependency for the SSE library: ```bash theme={"system"} npm install --save-dev @types/event-source-polyfill ``` * run through all the migration steps in the [New SDK Api changes](#new-sdk-api-changes) section below. Each migration requires a 'clean' repository state. Make sure to commit all changes before starting the next migration step. After each Angular update it is recommended you restart your editor or TS Server, to use the new TS version since some import errors might appear. ### New SDK API changes #### Renderer SDK component usage In the Angular SDK, the `` component has two new parameters have been introduced: `projectInfo` and `locale`. These additions help support localization and project-specific configurations. | Name | Description | Type | Requirement | | ------------- | ----------------------------------------------------------------------------------------------- | --------------------- | ----------- | | `projectInfo` | Object containing an `projectId` key, which identifies the project of the process to be started | `{projectId: string}` | Mandatory | | `locale` | Provides region-specific settings for localization. | `string` | Mandatory | Add the definitions for these properties in the class file of the component that uses the process renderer component: ```typescript theme={"system"} projectInfo = { projectId: 'your-project-id' }, locale = 'en-US', ``` Use these parameters in the template as inputs for the `` component: ```html theme={"system"} ``` #### API changes Process Renderer: | Category | Old Approach | New Approach | | -------------------- | --------------------------------- | ------------------------------------ | | **Process Renderer** | `FlxProcessModule.forRoot({...})` | `FlxProcessModule.withConfig({...})` | #### Import path updates | Category | Old Approach | New Approach | | -------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | **Import Paths** | `@flowx/ui-sdk` | `@flowx/angular-sdk` (or, in some cases `@flowx/core-sdk`) | | | `@flowx/ui-theme` | `@flowx/angular-theme` | | | `@flowx/ui-toolkit` | `@flowx/angular-ui-toolkit` | | **Process Module** | `import {FlxProcessModule} from '@flowx/ui-sdk';` | `import {FlxProcessModule} from @flowx/angular-sdk` | | **Localization Module** | `import {FlxLocalizationModule} from '@flowx/ui-sdk';` Include in module imports | `import {FlxLocalizePipe} from '@flowx/angular-sdk';` Remove from module imports | | **Task Management** | `import {FlxTaskManagementModule} from '@flowx/ui-sdk';` | `import {FlxTasksManagementComponent} from '@flowx/angular-sdk';` | | **Client Store Interface** | `import {ClientStoreInterface} from '@flowx/ui-sdk';` | `import {ClientStoreInterface} from '@flowx/core-sdk';` | You can also remove the `FlxLocalizationModule` from any `imports` arrays in modules, and import the `FlxLocalizePipe` instead ### Icon module update The `withExtraIconSet` method has been replaced with `provideExtraIconSet`, which should now be used in the providers array. ```typescript theme={"system"} @NgModule({ imports: [ IconModule, // Import the IconModule ], providers: [ // Use provideExtraIconSet to add your custom icon set provideExtraIconSet({ customIcon1: 'path/to/custom-icon1.svg', customIcon2: 'path/to/custom-icon2.svg', // Add more icons as needed }) ] }) export class AppModule {} ``` ### Custom Interceptors The new FlowX SDKs do not depend on Angular's `HttpClient` to make API calls, so existing interceptors must be adapted to a new format, for Request Interceptos (eg. custom headers) and Response Interceptors (eg. error handling) For an overview of implementation details, please refer to the respective sections of the renderer documentation for the new API changes.