Run Flow From Tiles
  • Updated on 20 Jan 2017
  • 3 minutes to read
  • Print
  • Dark
    Light

Run Flow From Tiles

  • Print
  • Dark
    Light

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.
2018-01-09_092035-1024x605.png

Then, Name the Flow and select CREATE to proceed to the Flow Designer.
2018-01-09_092344-1024x614.png

In the Flow Designer addShow Form step from Favorite Steps category.
2018-01-09_092523.png

Then, we Name a Form and click Create to proceed to the Form Designer.
2018-01-09_092739-1024x766.png

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.
2018-01-09_093035.png

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.
2018-01-09_093158.png

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 clickAction > Manage > Get Flow ID.
2018-01-09_093519-1024x470.png

Then, we copy Flow Id to the clipboard.
2018-01-09_093709.png

In the Designer Folder we click Create Flow on the Folder Actions Panel.
2018-01-09_093839.png

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.
2018-01-09_094338.png

In the Flow Designer we add Create Tile Return step fromAll Steps [Catalog] > Communication > Dashboards category.
2018-01-09_094826.png

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 .
2018-01-09_095034.png

Next, from the Tile Action Type drop-down we pick RunFlow .
2018-01-09_095148.png

In Actions settings we locate Flow Id , define Constant Mapping Type , and provide Value with Flow Id that we copied previously in this tutorial.
2018-01-09_095716.png

Then, we locate Tile Data settings. For the Html Text we pick Text Merge.HTML Mapping Type.
2018-01-09_100105.png

And, we click Show Editor for the Merged text.
2018-01-09_100500.png

In the Merge Text Editor we design our HTML text for the Tile and click Ok to save and continue.
2018-01-09_100626-1024x637.png

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 selectBuild Array Mapping Type.
2018-01-09_101114.png

Then, for the first Item in our Array weSelect Value of the Tile Data outcome fromCreate Tile Return step in our Flow .
2018-01-09_101319.png

This completes our Tile Flow . We can save the Flow and close Flow Designer.
2018-01-09_101546.png

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.
2018-01-09_102122.png

In the resulting window we Name the Page and click Ok to proceed to the Page Designer.
2018-01-09_102956-1024x614.png

In the Page Designer we search for Tiles Part component and add it to our Page .
2018-01-09_103233.png

In the Common Properties for the Tile component we Pick Flow .
2018-01-09_103429.png

Then, we locate our Tiles Demo Flow and click PICK .
2018-01-09_103525.png

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.
2018-01-09_104925-1024x306.png

Our Page displays and we can see HTML text on the Tile Component.
2018-01-09_105147.png

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 .
2018-01-09_105249.png

Was this article helpful?