Tile Source Flow Behavior

Overview

Tile Source Flow Behavior sources an actionable Page Tile with dynamically mapped data from a Flow. This behavior can also initiate another Flow, navigate to a Folder, open a link, or send parameters to another Page and/or Form components to filter or update an ongoing process. A typical use case of this Behavior involves creating Dashboards with Tiles displaying dynamically updated key performance indicators.

The Tile Source Flow sources data for other tile options as well. The function is universal as long as TileData is being provided to the component. Some components require TileReturn data instead of TileData. TileReturn data uses a similar step with different configuration options for counter, text, and media data.

Example

This example case contains a Tile Source Flow that fetches the number of active accounts and gives that data to the tile.

In a Designer Project, select CREATE FLOW from the Global Action Bar.
When the window appears, select the For Reports/Pages tab on the left.
Select Tile Source Flow.
Provide a name for the Flow, then select CREATE. The Flow Designer opens with the Create Tile Data step already connected to the Start/End step since the Tile Source Flow Behavior was selected on creation.
In the Toolbox on the left, navigate to INTEGRATION > INTERNAL SERVICES > ACCOUNTSERVICE and locate the Get All step, then move it to the workspace between the Start and Create Tile Data step.
Select the Create Tile Data step so that the Properties appear.
Expand the TILE SETUP section.
For Line 1, select Ignore so that the input mapping list appears, then choose the Select From Flow option.
When the Pick Data For Input window appears, select Get All_Output (the list of accounts) > All Account ID (every account ID in the environment) > Count (the number of account IDs in the environment) > Unformatted for the String version of Count data.)
Select DONE once the mapping is complete. This example utilizes the first line, but the other four lines can be mapped to data similarly.
Select the Constant mapping type option for any of these attributes to change their value, as shown with Content Horizontal/Vertical Alignment.
With the End step selected, navigate to INPUTS > Tile Data and change the input mapping from Unknown to Select From Flow, and select Tile Data. This selection will clear the exception on the End step.
Save and Close the Flow.
In the Designer Project, select the CREATE FORM button from the Global Action Bar.
Select the Page tile in the top right of the window that appears.
Provide a name for the Page and select CREATE.
In the Page Designer, expand the TILES section of the Toolbox and add a Simple Tile to the Page workspace.
With the Simple Tile selected in the workspace and the properties exposed, expand the COMMON PROPERTIES section and select PICK FLOW.
When the window appears, select PICK and choose the Tile Source Flow that was created.
Select the Preview button from the top Action Bar of the Page Designer to see that the Flow has successfully executed to retrieve the accounts and provide the count data to the Page tile at runtime.

Tile Source Customization

Users can customize the appearance of data in Tiles utilizing properties in the Create Tile Data step, or with custom CSS.

Customizing Tiles with Create Tile Data Step Properties

The following customization options are available in the Styles section of the Create Tile Data Step:

Background Color
Border Color
Border Width
Content Horizontal Alignment
Content Vertical Alignment
Corner Radius

Users can customize any of these options using the Data dropdown next to the field.

The following example demonstrates customizing the background and border color of a Simple Tile.

Example

Navigate to the Styles section of the Create Tile Data Step properties.
Select Constant using the Dropdown menu and choose a color for the Background Color and Border Color fields.
Once the colors have been chosen, save and exit the Flow, and then save the Page.
After saving the Page, the Tile should update with the selected colors.

Customizing Tiles with Custom CSS

Custom CSS allows Users to adjust the appearance of the Data further, but it does require more configuration. The following example demonstrates how to update the font size of numerical values in a Simple Tile.

Example

To adjust the font size of data within a tile, Users must first toggle Advanced Styling on in the Tile Source Flow. This action will display options to add CSS. To update the font size, Users will need to upload a custom CSS file and mark it as a Tile CSS. This can be done by right-clicking on the CSS file and selecting Mark as Tile CSS.
- Users can customize additional features, such as the Font, by including this information in the CSS file. For more information on using CSS with Pages, visit Using CSS on a Page.
Once the custom CSS is uploaded and marked as Tile CSS, navigate back to the Tile Source Flow. A new field called Style Sheets will appear. Click the checkmark next to the uploaded file and then add the CSS Class in the CSS Class field. This value should match what was added to the uploaded file; otherwise, the changes will not be implemented.
Save and exit the Flow, then save the Page. Once the Page has been saved, click the preview button. The Simple Tile font size should change to the value specified in the CSS file.