The Board of Icons Screen type is one of our data perusal screens. It allows a custom set of icons to be added with numerous user interactions that control what happens when a user selects an icon in the app. Ideal for organizing a set of screens that can be drilled into from a single icon on the default or custom app screen.
To add a details screen, navigate to Design Tools -> Forms/Screens. Click on the ADD NEW+ button
Name your Board of Icons Screen
- Select a suitable icon
- Select your data source (optional)
- Click on the CREATE+ button
Once created, the page will automatically load into your new Board of Icons Screen. This is where you will be able to add icons and configure what happens when a user selects an icon in the app.
The basic initial steps to follow when adding and configuring icons are as follows:
- Add icon
- Select an icon to configure, the selected icon's properties will display on the right
- Customize the icon, text, and color
- Set a user interaction
- Set the target for the chosen user interaction (Note, some interactions require parameters that can be passed into a screen or web page launched from within the app.)
- Save any changes before testing in the app (Note, force syncing the app on a user's device might be required for rapid testing)
Configuring the Title bar
1. Screen Title – This will be populated with the name of your screen and can be changed. This displays on the Title bar, left of center, or you can choose to display your company logo instead.
It is not visible if “Show Logo as Title” (Check Box) is selected.
2. Show Logo as Title – Superimposes the default company logo over the Screen Title, as shown in the above example using the YourCompanyName logo.
3. Automatically Generate Icons (Check Box) – When selected, icons will be added for each Screen/Doc that the current user can access, and removes the ability to add a custom icon to the screen. However, icons added when this box was unselected are still displayed.
4. Action Buttons – Define buttons to appear on the title bar.
- Select which button you'd like to configure: LEFT, RIGHT1 or RIGHT2
- Select an icon
- Add the button text
- Select the button colors
- Select the user interaction. E.g.,
- Visibility selection check box
5. Button Visibility - Control the visibility of this button using a formula
Large Icon
Select add an icon onto the screen to create a new entry.
Note – Not visible if “Automatically Generate Icons (Check Box)” is selected.
Basic Properties
1. Icon Settings - Select which button you'd like to configure: LEFT, RIGHT1 or RIGHT2
- Select an icon
- Add the button text or dynamically control using functions.
- Select the button color, transparency, and size.
- Select the user interaction. E.g., same as above
2. Icon Visibility - Control the visibility of this icon using a formula.
Advanced Options
1. Badge Settings - Displays the given text as a circular badge on the icon.
- Add the badge text, using functions if desired.
- Select the badge background, text color, transparency, and size.
2. Badge Visibility - Control the visibility of this button using a formula.
Tray Icon
Select Add a tray icon to the screen to create a new entry.
Basic Properties
1. Icon Settings - Configure icon display and behavior.
- Choose an Icon to display
- Change the icon to one color if desired. Selecting the transparent option (Check Box) removes color and returns the icon back to default.
- Icon Visibility - Control the visibility of this icon using a formula.
Advanced Options
1. Badge Settings - Displays the given text as a circular badge on the icon.
- Add the badge text, using functions if desired.
- Select the badge background and text color, transparency, and size.
2. Badge Visibility - Control the visibility of this button using a formula.