Diagram Tile Bar Graph

Overview

Diagram Tiles use a modified Flow Designer to create a Page/Dashboard Tile comprised of large, graphical icons. This article will detail how to set up a Bar graph using a Diagram Tile. 

Example

This example will show how to set up a Bar graph using the Bars step in the Diagram Tile Flow Designer. This particular step expects to receive a list of Decimals. To provide data for this example, an 'Invoices' Data Structure is referenced that has 'SubTotal' as a list of Decimals. 

1. In a Designer Folder, select the CREATE FORM button from the bottom Action Bar. 
2. When the 'Create Form' window appears, select the Page/Dashboard tab on the left, then select CREATE on the Default template. 
3. Provide a name for the Page, then select CREATE again.
   Creating A Page/Dashboard

   To find out more information on how to create a full-fledged Page/Dashboard, please start with our Create Your First Page/Dashboard article.
   
4. In the Page Designer, expand the Tiles section in the Page Elements tab, then move a Diagram Tile into the workspace. 
5. Select the Diagram Tile square to populate the Properties for this Page Element. 
6. Expand the Diagram Tile section of the properties and select CREATE under the Diagram Tile Flow box. 
7. When the window appears, enter a name for this Diagram Tile Flow, then select CREATE.

   

   There are some interesting differences between the Diagram Tile Flow Designer and the regular Flow Designer. Notice that this Designer does not have Start or End steps by default, but they can be added as a graphical icon. In addition, the Steps tab is now catered to Diagram Tile steps specifically. The base Flow Properties have fewer configuration options, but a section is available to configure the inputs for the Diagram Tile.
8. In the Diagram Tile Flow Designer, before any steps are added, select the Show Editor button under the Diagram Tile Inputs box.
9.  Add a piece of input data called ListOfDecimals of the Type Decimal [Number], enable the Is List checkbox.
10. In the Steps tab, expand the Charts section and move the Bars step into the workspace. 
11. Select the Bars icon as it appears in the workspace to populate the Properties for this step.
12. For this example, the Inputs section has the only required configuration needed. The only input for this step is Series1, which is expecting the List of Decimals added as input data.
13. Once the input is mapped, close and save the Diagram Tile Flow Designer. 
14. The other sections in the Bars Properties contain configurable options to alter the appearance, function, outcome paths, and more. This example does utilize the ShowValue option to indicate the scale of dollars for when the SubTotals are populated. which can be found in the Chart Setup - Viewsection. 

    

15. Back in the Page Designer, select the square with the Diagram Tile so that the Properties appear. In the Diagram Tile section, select the Edit button under the Input Data Flow box.
16. Now that the Diagram Tile Flow was created with ListOfDecimals as an input, the Input Data Flow serves to call the data that defines ListOfDecimals. 

    

17. In this Flow Designer, the Fetch Entities step will be used to fetch the entire 'Invoice' Data Structure.
18.  From those results, the End step will take in all of the SubTotals (a list of Decimals) and use them to define the ListOfDecimals in the Bars step of the Diagram Tile. The End step in this Input Flow is already configured to receive the ListOfDecimals input mapping, so that this data can be output to the Diagram Tile.
19. Select the orange arrow at the end of the 'Done' outcome path on the Start step.
20. When the 'Add After' window appears, select the Fetch Entities step from the Favorite Steps section, then add it to the Flow.
21. Connect both the 'Results' and 'No Results' outcome paths to the End step.
22. Select the Fetch Entities icon in the Flow Designer. In the Entity Fetch Definition section, use the Type Name dropdown and the All/Search option to call the 'Invoice' Data Structure to this step.
23. Select the End step icon.
24. In the Inputs section for this step, use the Select From Flow mapping type option to choose Entity Results > All SubTotals. 
25. Close and save the Input Flow once complete, then close and save the Page.
26. In the Designer Folder, right-click the Page name and select Show Preview from the Action Menu. A bar will appear to represent the SubTotal amount for each piece of 'Invoice' data that was added. In this example, there were four amounts from four invoices.
    Diagram Tiles have enormous capabilities for designing graphical Page/Dashboard tiles. The Bars step itself has several different options for customizing the look and feel, these options are available with most steps in the Diagram Tile Flow. There are also options to configure a single Bar that is either vertical or horizontal. All of these different steps use different types of data as inputs, this is the most important part to note when configuring a Diagram Tile and the corresponding Input Flow.