Creating Dynamic Page Content with Tiles

Last Updated: 07/18/2016 Introduced in Verision: 2.0

Note: this applies to the Decisions 3.2 and older versions.

Portal pages can display dynamic page content with the use of Tile components. Tiles can be placed on any portal page, but the content for each tile must generated by a flow. To display dynamic content, create a flow the outputs a Tile Return data object containing the content you would like to display. In the Page Designer, place a Tile component that corresponds to the type of Tile generated by your flow, then configure the Tile component to listen to your flow.


In our example, we will replace the folder header data component of a Car folder’s Alternative View with a more succinct Tile display.



We will begin by creating the flow which will populate our Tile. We will navigate to a Designer folder and click the Create Flow button.



In the resulting New Flow pop-up, we will name our flow “Get Car Tile” and click OK.



To get our Car data, this flow must be provided with the FolderId of the Car folder. When our Tile component uses this flow, it will provide the FolderId for us, but our flow must be configured to accept it. For this reason, we will begin by defining a flow input called FolderId with a type of String, and then click Save.



Next, we will use this FolderId to get the details of the Car folder. We will find the Get Car component in the Toolbox tab, under the category Integration > Folder Extension Data Structures > Car.



For the Get Car component, we will map FolderId to Id and rename the output to “Car”.



Next, we will turn the details of our Car folder into HTML for display in our Tile. For this, we will use the Custom Merge [NVelocity] component. It can be found in the Toolbox tab, under the category Data > Text.



In the Properties tab, we will define the inputs used by the Custom Merge [NVelocity] component. In the Merge Setup > Template field, we will type the HTML content of our Tile, using $FieldName syntax to define the dynamic variables in our Tile.

Once we’ve written our HTML, the Custom Merge [NVelocty] component will detect the dynamic variables in our template and create inputs into which we’ll map our Car’s data.



In the Mapping Editor, we will map the properties of our Car folder to the respective fields in our template.



Next we will turn the HTML we’ve generated into a TileReturn object. We will find the Create Tile Return component in the Toolbox tab, under the category Communication > Dashboards.



In the Tile Setup section of the Properties tab, we will set Tile Type Name to TileHTMLText.



In the Mapping Editor, we will set the background color of our tile to white by setting the Color field’s mapping to type to Constant and selecting white in the Value selector. We will define the HTML content of our tile by mapping MergedString to HtmlText.



In the end, we want this flow to output a TileReturn object for use in our portal page, so we will select the End Step and define an Output called “TileReturn” with a type of TileReturn.



We will map the TileData output from our Create Tile Return component to the TileReturn output.

This will complete our flow, so we will save it and close the Flow Designer.



Next, we will display the output of our Get Car Tile flow. We will navigate to the location of our portal page: System > Common Data Elements > Folder Behavior Actions > Transportation.CarFolderBehavior. We will select the Alternate View page and click the Edit link to open it in the Page Designer.



We will delete the Folder Header Data component and replace it with the Tile HTML component. We will find in the Toolbox tab, under the category Basic > Tiles.



Next, we will define the flow which provides the content for our Tile. In the Flow To Execute section of the Properties tab, we will select the Get Car Tile flow.



This completes our changes to the Alternate View page, so we will save it and close the Page Designer.



When we navigate back to our Car folder and select the Alternate View, we will see our HTML displayed in a Tile where the folder header data once was.



Additional Resources