Creating Dynamic Page Content With Tiles
  • 27 Jul 2022
  • 1 Minute to read
  • Dark
    Light

Creating Dynamic Page Content With Tiles

  • Dark
    Light

Overview

Tiles allow the ability to display content dynamically on a Page in the Decisions Studio/User Portal. Though Tiles can be applied to any Page, the content provided to the Tile is generated by a Flow via a Tile Return Data Object that contains the desired content.

The following article demonstrates how to generate dynamic Page content with the use of a Simple Tile component.


Example

Example Data Structure 
The following example utilizes a Folder Extension entitled [Patient] as a means of transmitting data to the Tile
  1. From a Designer Project, select the CREATE FLOW button from the Global Action Bar. From the Form Reports/Pages category, select and CREATE a Tile Source Flow
  2. From the Toolbox > USER DEFINED TYPES > FOLDER EXTENSIONS > PATIENT category connect a Get Patient control to the Start step. 
  3. From the Properties of Get Patient, map FolderID to the Id Input.  
  4. Navigate to the Toolbox > DATA > TEXT section and attach a Custom Merge [NVelocity] step to the Get Patient steps, to allow the data from the Patient Folder to be converted into HTML for display on the Tile
  5. From the Custom Merge [NVelocity] step's Properties, under MERGE SETUP > Template, provide the following HTML.

    Then, map the respective OUTPUTS from the Get Patient step to their respective INPUTS that were created with the Custom Merge [NVelocity] step.
    NVelocity Formatting 
    Utilizing the $[FieldName] syntax with a Custom Merge step creates new Inputs for the Custom Merge step. 
    <html>
    <body> 
    <p>
    Email: $Email 
    Name: $Name
    PhoneNumber: $PhoneNumber

  6. From Toolbox > DASHBOARD EVENTS, attach a Create Tile Data step to the Custom Merge [Nevelocity] and End steps.

    Then, set STYLES > Background Color to Constant and select the desired Color via the Pick Color window. 
  7. Save the Flow, then close the Flow Designer via X
  8. From a Designer Project, via CREATE REPORT, CREATE a new Page.  
  9. From the Page Designer, under Toolbox > TILES, add a Simple Tile to the Page. From the Properties tab of the Simple Tile, via PICK OR CREATE FLOW, PICK the previously created Tile Source Flow
  10. Save and Close the Page Designer.
  11. From the Decisions Studio, right-click the desired Folder and select Create Patient Data > Entity [User Defined] > Create Patient
  12. From the Create Patient window, fill out each field, being sure to provide a PatientName, Email, and PhoneNumber. Then, click OK. 
  13. From the resulting Folder for the Patient, Add the previously created Page
  14. Via the tabs at the top of the Patient Folder, navigate to the newly added Page and verify that the Patient's information displays as configured in the NVelocity step. 

For further information on Pages, visit the Decisions Forum.

Was this article helpful?