Run Flow From Tiles

Last Updated: 12/06/2018 Introduced in Version: 4.0

This tutorial demonstrates how to Run a Flow on Tile click on the Page. In Decisions 4.0 it is possible to launch a Flow when user clicks on Tile component on the Page.

 

Example:

Begin in the Designer Folder with selecting Create Flow on the Folder Actions Panel.

Then, Name the Flow and select CREATE to proceed to the Flow Designer.

 

In the Flow Designer add Show Form step from Favorite Steps category.

Then, we Name a Form and click Create to proceed to the Form Designer.

Our Form has only a Label and a Button control for user to be able to submit the Form. When we finished designing the Form we can save the Form and close Form Designer.

Back in the Flow Designer we connect outcome from the Form to the End Step in our Flow. This completes our Flow. We can save the Flow and close Flow Designer.

Next, we are going to create our Tile Flow. In our Tile Flow we are going to need FlowId of the Flow we want to run. We locate our simple Flow. On the thumbnail menu we click Action > Manage > Get Flow ID.

 

Then, we copy Flow Id to the clipboard.

In the Designer Folder we click Create Flow on the Folder Actions Panel.

Then, we Name the Flow and select CREATE  this opens Flow Designer. In the Properties panel under Settings pick Tiles Source Flow from Behavior drop-down.

In the Flow Designer we add Create Tile Return step from All Steps [Catalog] > Communication > Dashboards category.

Then, we select Create Tile Return on the work-space to configure it. We locate Tile Setup settings, and from Tile Type Name drop-down we select TileHTMLText.

 

Next, from the Tile Action Type drop-down we pick RunFlow.

 

In Actions settings we locate Flow Id, define Constant Mapping Type, and provide Value with Flow Id that we copied previously in this tutorial.

Then, we locate Tile Data settings. For the Html Text we pick Text Merge.HTML Mapping Type.

And, we click Show Editor for the Merged text.

In the Merge Text Editor we design our HTML text for the Tile and click Ok to save and continue.

Next, we connect the outcome from Create Tile Return step to the End Step in our Flow. Our End Step should output Tile Data collection of Tile Return Type. We locate Tile Data Input on the End Step, and select Build Array Mapping Type.

Then, for the first Item in our Array we Select Value of the Tile Data outcome from Create Tile Return step in our Flow.

 

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

Back in the Designer Folder we are going to create a simple Page to test our Tile. We click Create Report/Page > Create Page/Dashboard on the Folder Actions Panel.

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

In the Page Designer we search for Tiles Part component and add it to our Page.

In the Common Properties for the Tile component we Pick Flow.

Then, we locate our Tiles Demo Flow and click PICK.

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

Back in the Designer Folder we locate our Page, and from the thumbnail’s Action menu we click View > Preview Page.

Our Page displays and we can see HTML text on the Tile Component.

If we click on the Tile component, our simple Flow launches and we can see the Form that we designed in that Flow. We click Done to close the Form and complete the Flow.