Contents:
Accessing Table Customization:
Screen Added on flow
Click on the screen you've added to the onboarding flow.
Press the Pencil button to enter the "Edit Screen" mode.
Customizing a Specific Screen in the Theme:
Customizing a Specific Screen in the Theme:
For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.
For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.
Then edit the screen for the entire theme.
Selected and Unselected Items state Implementation
Unselected Item State: Customization for the default appearance of each item before user interaction. Options for background color, border width, border color, and border radius allow for distinct visual differentiation from the selected state.
Selected Item State: Customization for how an item appears when a user selects it.
Common Features for Both 'Unselected' and 'Selected' Item States
Background Color: Determines the item's background. If the checkbox is unchecked, the background is transparent. Activating this option allows you to choose a color from the palette or use a pipette tool for precision.
Border Width: Sets the thickness of the item's border. Increasing the value thickens the border while decreasing it makes it thinner. Ensure both the "Border-width" and "Border-color" checkboxes are checked for the border to be visible.
Border Color: Alters the color of the border. You can select a hue from the color palette or input a specific HEX color code.
Border Radius: Modifies the curvature of the item's corners. Increasing the value creates rounder corners, and decreasing it results in squarer corners. This setting is applicable even if the "Border Width" is disabled.
Differences in Tables with Single vs. Multiple Selections
Table Single Selection and 2-Column Single Selection: For iOS SDK and Web2App, users won't see the 'selected' state for these table types. The 'Unselected Item State' settings are applied by default.
Table Multiple Selection: Users can see both 'Unselected' and 'Selected' states, allowing for dynamic visual feedback based on their selections.
Special Case: Screen Image Title Subtitle List
This screen type doesn't have a 'Selected State'; hence, its setting is named 'Item State'. Customization options are similar to those mentioned above but apply uniformly as there is no differentiation between selected and unselected states.
Consistency Across Items
Any adjustments made are uniformly applied to all items in the table. When new items are added, they inherit the same settings, ensuring a consistent look and feel across the table
By effectively utilizing these customization options, you can create intuitive and visually appealing tables that enhance the onboarding experience. Whether it’s a single-selection table where the focus is on one choice or a multiple-selection table that encourages various combinations, these settings allow for a high degree of personalization to match the app's design and usability goals.