Tile Source Flow Behavior

This tutorial demonstrates how to use Tile Source Flow Behavior to use Tiles when designing dynamic Portal Pages in Decisions 3.5 and newer.

Example:

In this example we are going to create a dynamic Page with Tiles that will make this Page exclusive for each Folder Extension Entity.

We are going to start with creating simple Folder Extension. In the Designer Folder we click Datatypes/Database > User Defined Types > Folder Extension on the Folder Actions Panel.

Then, we define our Folder Extension Data Structure as following… In this example we define an Employee Folder Extension. Our Employee will have First Name, Last Name, Email Address and Favorite Color. When finished, we can click Ok to save and close Folder Extension Data Structure editor.

System creates two entities: Folder Extension Data Structure and Folder Extension Configuration.

Next, we are going to create a Flow that will serve as a source for the Tile. Click Create Flow on the Folder Actions Panel.

In the resulting window we Name the Flow and pick Tile Source Flow Behavior. Then, click Create to proceed to the Flow Designer.

In the Flow Designer we should be able to see a template with Create Tile Data step. Mention, that we cannot define any additional inputs for this Flow Behavior. We only have Folder Id and Page Name input data. Lastly, we should output Tile Data to source our Tile.

We need to get selected Employee entity first to use its information on the Tile. We add Get Employee step from Integrations > My Integrations > User Defined Types > Folder Extensions > Employee category right after Start Step in our Flow.

Then, with Get Employee Step selected on the workspace we set Id Input as following… We use Select Value Mapping type and pick FolderId Flow Input for Path.

Next, we connect Done outcome from Get Employee Step to Create Tile Data Step on the workspace and select Create Tile Data step to configure it. First, in the Tile Setup section we pick Tile Type Name. In this example we pick TileHTMLText.

Then, in Tile Action Type we can set up an Action for our Tile.

Next, in Tile Data section we use Text Merge.HTML Mapping type for HTML Text and click Show Editor button.

In the HTML Text Editor we create text for our Tile using data fields from Get Employee outcome and some text styling. When finished, we can click Ok to save and close HTML Text Editor.

Back in the Step configurations we click Show Mapping Editor.

In the Mapping Editor we map Entity Id and Entity Type Name from the Get Employee Result. Then we Build Data for BackgroundColor property. Map Employee’s FavoriteColor property to the ColorName property of BackgroundColor. Save and close Mapping Editor.

Then, back in the Flow Designer we select End Step on the workspace, pick Select Value Mapping type for Tile Data, and using Path picker select Tile Data output from the Create Tile Data step.

This completes our Flow. We can save the Flow and close Flow Designer.

Back in our Designer Folder we open Folder Extension Configuration for Employee Folder Extension.

Then on the Folder Actions Panel we click Create Report/Page > Create Page/Dashboard.

In the resulting window we Name our Page and click Create to proceed to the Page Designer.

We are going to use only one component on our Page. Add Tile Part component from Basic > Tiles category.

Then, we locate Flow To Execute setting and pick Tile Source Flow that we have created previously in this tutorial.

This completes our Page. We can save and close Page Designer.

Next, we get back to our Designer Folder. From the Folder Actions we click Add > Employee.

In the resulting window we define Employee Folder Extension and click Ok to save.

Then, we open our Employee Folder Extension…

And our Page with Tiles shows up by default. Page background is Employee’s Favorite Color. Also Page displays Employee’s information as we designed in the Tile.

Finally, we create and open different Employee Folder Extension… We can see that the same Page now looks different for each Employee Folder Extension.

Additional Resources

• Creating and Using Folder Extension Data Structures
• Creating Your First Flow
• Using the Mapping Editor