Creating Dynamic Page Content with Tiles

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 be 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.

Example

In this example, we will replace the folder header data component of a Car folder's Alternative View with a more succinct Tile display.
Begin by creating the flow which will populate the Tile. Navigate to a Designer Folder and select the Create Flow button.
In the resulting New Flow dialog, name the flow and select CREATE.

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 My Integration > User Defined Types > Folder Extensions > Vehicle.

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 Data component in the Toolbox tab, under the category Communication > Dashboards.

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 Line 1 .

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. Select the Alternate View page and chose the Edit link to open it in the Page Designer.

Add a Simple Tile to the page, under the category Tiles. Define the flow which provides the content for our Tile. In the Flow section of the Properties tab, select Tile Flow Get Car Tile.

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

Navigate back to the Car folder and select the Alternate View, view the HTML displayed in a Tile under Car Details.