Migration Tool: Styling

Our FN Studio Platform provides a module for the automatic migration of legacy styles of Screen Components to the Style Business Object introduced with Appway 7.

Functionality

The migration tool automates the following steps:

  1. Opens the Screen that hosts the component with legacy styles.
  2. Removes all legacy style properties from the component (Inline styles, classes and attributes).
  3. Enables the new Style option and sets the selected 'Style' Business Object.
Notes:
  • The migration tool does not recreate the legacy styling automatically. Rather, you need to create a Style Business Object with comparable settings and assign it during the migration process.
  • The Screens are modified at runtime.
  • The new version of the Screen with the migrated component is not automatically committed.

Using the Tool

To access the migration tool, open FNZ Studio Composition, and go to Packages > Maintenance > Migration Tools > Styling.

Follow these steps to migrate your components:

  1. Select the Screen Component type that you want to migrate from the Find all occurrences of dropdown list. Only Screen Components which allow a transition to new 'Style' Business Objects are available.
  2. Set filters (based on Appway Properties, CSS Properties, and CSS Classes) to further drill down in the list of components and click on the Find button. MigrationToolStyling.png

The tool searches through all the Screen Components in your Library and returns a list of all occurrences of the selected component which match the filters. It also provides you with information about the legacy styles which are currently set on the component.

Note: You can double-click on any entry in the table to drill down and open the Business Object editor for the specific component.

  1. The Auto Migration column of the table on the right side of the tool informs you of potential issues when migrating:

    • Possible – Migrating this Screen Component with the tool is possible and will not cause any issues.
    • Possible with Risks – Expand this entry in the table to view the specific risks related to this migration. "Risks" mean that legacy styles of the component will be lost during migration, but you can still use the tool to migrate the component so that it uses a 'Style' Business Object instead of legacy styling. When migrating components with legacy styles, you generally will want to select a Style Business Object which recreates the legacy styling. The table showing the filtered components and the legacy styles they use.

  2. Select one or multiple components that you want to migrate.

You are recommended to migrate components one by one to review migration results more easily (see step 7). However, you can choose to migrate multiple components at the same time by pressing the SHIFT or CTRL keys while selecting them.

  1. Select the 'Style' Business Object you want to assign to all selected components. Only Styles from the current Package and visible Styles in other Packages on which your current Package depends are listed. Then, click on Assign the Style Business Object button to perform the migration. The selector for the Style BO to assign to the selected components.

  2. The 'Migration Report' is displayed which summarizes the operations the migration tool performed. In the Library, a list called Screen Components Migration is automatically created and populated with all the updated 'Screen' Business Objects. Access the list directly by clicking on the Jump to changelist link in the Migration Report. This list provides easy access to all migrated components when reviewing. The report dialog shown after migration and summarizing the results

  3. Review the result of migration to make sure the appearance of the Screens and the used components meets your expectations.

  4. Commit the migrated Screens.