--- 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. " updated: 2025-08-08T15:54:07Z published: 2025-08-08T15:54:07Z --- > ## 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).