--- title: "Diagram Tiles" slug: "diagram-tiles" description: "This document shows users how to create and use Diagram Tiles in Decisions. Diagram Tiles allow users the ability to display captured data in a visually appealing way by using info-graphics. " tags: ["Diagram Tiles", "Tiles", "Page Designer", "Page Design", "Page Components "] updated: 2025-08-08T15:54:07Z published: 2025-08-08T15:54:07Z canonical: "documentation.decisions.com/diagram-tiles" --- > ## 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. # Diagram Tiles ## Overview **Diagram Tiles** are components on a [**Page/Dashboard**](https://documentation.decisions.com/v9/docs/pages-dashboards), and controls on [Forms](https://documentation.decisions.com/docs/forms) that are used to present data with infographics. These **Tiles** have a unique **Designer** **Studio** that resembles a **Flow** **Designer** but uses visual **Charts**, **Shapes**, **Labels**, **Images**, and more to create the content displayed on the Tile. **Diagram** **Tiles** require both a **Diagram Tile Flow** as well as an **Input Flow** to supply the Tile Flow with source data. The following document demonstrates how to create a Diagram Tile that displays an image as well as a **Label** of the number of **Accounts** within a Decisions environment. --- ## Utilizing Diagram Tiles on a Page/Dashboard 1. [**Create**](https://documentation.decisions.com/v9/docs/create-pages-dashboards) a new **Page** in a **Project**. 2. From the **Page** **Designer**, under **Toolbox > TILES**, add a **Diagram** **Tile** to the workspace. From the **Properties** tab of the **Diagram** **Tile**, select PICK OR CREATE DIAGRAM TILE FLOW. Then, CREATE a new Diagram Tile. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h44_48.png) 3. From the **Diagram Tile Designer**, under the top Action Bar, click SETUP INPUT DATA. From the Input Data window, provide a NAME for the data. Then, select **Int32** from the TYPE dropdown, and **Save** and close the window. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h45_53.png) 4. Under **Toolbox > ANNOTATION**, drag an **Image** component into the workspace.  If desired, under CONFIGURATION DEFAULTS, adjust the **Background Color**, **Border** **Width**, **Z-Order**, and/or provide a **Label**. Then, under IMAGE, select the **Edit** button and the **Pick** **Image** window to select the desired Image.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h46_52.png) 5. While still in the ANNOTATION category, add a **Label - Medium** to the workspace. From the **Properties** tab of the **Label**, under CONFIGURATION RULES, enable **Label From Data**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h48_05.png) 6. **Save** the **Diagram Tile Flow**, then close via **X**. 7. Back in the **Page** **Designer**, under the **Properties** for the **Diagram Tile**, select EDIT [PAGE NAME] INPUT FLOW. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h48_42.png) 8. From the **Flow Designer** for the **Input** **Flow**, attach a [**Fetch Entities**](https://documentation.decisions.com/v9/docs/retrieving-entities-with-the-fetch-entities-flow-step) step from FAVORITE STEPS to the **Start** step. Then connect both **Outcome** **Paths** to the **End** step. 9. From the **Properties** tab of the **Fetch** **Entities** step, under ENTITY FETCH DEFINITION, search for and select **Account** from the **Type** **Name** dropdown. Account cannot be selected from the initial dropdown list, it has to be searched for first.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h49_35.png) 10. From the **Properties** of the **End** step, map **EntityResults.All AccountID.Count** to the **Input** **Data**.End Step Input Data Mapping the **Output** **Entity Results.All AccountID.Count** to the **Input Data** of the **End** step will allow the **Tile** to display a count of the retrieved **Account ID's** in the environment.  ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h50_21.png) 11. **Save** and close the **Flow** **Designer**. 12. Back in the **Page** **Designer**, select the **Preview** button on the top Action Bar; verify that the Diagram is displaying the Image and Label text as configured. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-06-24_11h51_01.png) --- ## Utilizing Diagram Tiles on a Form The following example demonstrates how to utilize Diagram tiles within a Form. The example will produce a tile that displays a name, date of birth, and their age. 1. Start by creating a Form with a **Diagram Tile Control** and **Button**(change the name to **Close**) - Both of these controls can be found in the **Toolbox**. 2. Navigate to the **Properties Panel** and select **Edit Diagram Tile Flow** under **Diagram Tile**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-08-07_16h20_30(1).png) 3. From here, click **Setup Input Data.**  ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-08-08_11h51_53.png) - This action will display the **Input Data** Form. Add the following Inputs to the table**:** - **Name(String)** - **DateofBirth(DateTime)** - **Age(Int32)** - **String(Text)![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/image-1754664911927.png)** 4. Then, navigate to the **Annotation** category and drag three **Label-Medium** Steps to the workspace. 5. Navigate to the **Steps** category and place a **S****tart** and **End** Step onto the workspace. 6. Once all the Steps have been added to the workspace, add the following **Input** information. These inputs will be what is displayed on the Diagram Tiles once the Form is debugged. | Step Name | Inputs | Mapping | | --- | --- | --- | | Name | Text (String) | Name | | Date | Text(String) | DateofBirth.Formatting.ShortDate | | Age | Text(String) | Age.Default.AllDecimals | ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2025-08-08_11h05_24.png) 7. Once all the Inputs have been added, click **Debug** to run the Flow. Inputs that were mapped on the Form will be displayed on the Diagram Tiles. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/Recording2025-08-08110256-ezgif.com-video-to-gif-converter.gif) For further information on Pages, visit the [Decisions Forum](https://community.decisions.com/categories/Pages).