--- title: "Tile Source Flow Behavior" slug: "tile-source-flow-behavior" description: "This document discusses Tile Source Flow Behavior regarding creating dynamic Pages with Tiles. This document shows users some of the settings that can be altered such as, Tile Type Name, Title Text, Tile Data, etc, to demonstrate how much customization users have in displaying their data." tags: ["Create Tile Data", "CSS", "Pages and Dashboards", "Using CSS on a Page"] updated: 2025-10-16T18:12:59Z published: 2025-10-16T18:12:59Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. 1. In a Designer Project, select **CREATE FLOW** from the Global Action Bar. 2. When the window appears, select the **For Reports/Pages** tab on the left. 3. Select **Tile Source Flow.** 4. 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-07-25_16h44_00.png) 5. 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.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_14h34_37.png)![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_14h36_40.png) 6. Select the **Create Tile Data**step so that the Properties appear. 7. Expand the **TILE SETUP** section. 8. For **Line 1**, select**Ignore** so that the input mapping list appears, then choose the **Select From Flow** option. 9. 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.) 10. Select **DONE** once the mapping is complete. This example utilizes the first line, but the other four lines can be mapped to data similarly.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_14h40_49.png) 11. Select the **Constant** mapping type option for any of these attributes to change their value, as shown with **Content Horizontal/Vertical Alignment**. 12. 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. 13. **Save**and Close the Flow.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-23_14h45_00.png) 14. In the Designer Project, select the CREATE FORM button from the Global Action Bar. 15. Select the Page tile in the top right of the window that appears. 16. Provide a name for the Page and select CREATE. 17. In the Page Designer, expand the TILES section of the Toolbox and add a **Simple Tile**to the Page workspace. 18. With the **Simple Tile** selected in the workspace and the properties exposed, expand the COMMON PROPERTIES section and select PICK FLOW. 19. When the window appears, select PICK and choose the **Tile Source Flow** that was created.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-20_13h59_05.png) 20. 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.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-20_15h02_08.png) --- ## 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-16_10h53_13.png) The following example demonstrates customizing the background and border color of a Simple Tile. #### Example 1. Navigate to the Styles section of the **Create Tile Data** Step properties. 2. Select **Constant** using the Dropdown menu and choose a color for the **Background Color** and **Border Color**fields. 3. Once the colors have been chosen, save and exit the Flow, and then save the Page. 4. After saving the Page, the Tile should update with the selected colors. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/TileProperties-ezgif.com-video-to-gif-converter.gif) --- ### 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 1. 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](https://documentation.decisions.com/docs/using-css-page). ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-16_10h29_31.png) 2. 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-10-16_10h31_32.png) 3. 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. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Recording2025-10-16104103-ezgif.com-video-to-gif-converter.gif) ## Related - [Using CSS on a Page](/using-css-page.md) - [Uploading CSS](/uploading-css.md) - [Simple Tiles](/simple-tiles.md) - [Run Flow From Tiles](/run-flow-tiles.md) - [Page Controls Glossary](/page-control-glossary.md) - [Pages / Dashboards](/pages-dashboards.md) - [Configure Page](/configure-pages.md) - [Create Page / Dashboard](/create-pages-dashboards.md) - [About Tiles](/about-tiles.md)