Dynamic Form Based On Report Selected Row
  • Updated on 18 Jul 2017
  • 3 minutes to read
  • Print
  • Dark
    Light

Dynamic Form Based On Report Selected Row

  • Print
  • Dark
    Light

This tutorial demonstrates how to update Form in Flow Run Part on the Page based on Report Selected row on the same Page .
Example:
In this example we are going to build a Page in Decisions that has a Report on the left-hand side and a Flow displaying Form on the right-hand side. Form is going to display some information from the Report’s selected row. When user selects different row, our Form should be updated with the new information from selected row.
For this example we created a simple Accounts Report.
To learn how to build your first Report, please click here .
First and most important thing to make Report row selection update Flow on the same Page is that one of the Report columns has to ‘Send Data As Filter Change Source’.
In a Report Designer we pick one of the columns and Edit it.
2018-01-09_101951-1024x259.png

Then, we locate and check Send Data As Filter Change Source check-box.
In Filter Change Source Name we provide a Name for our Data . Click Ok to save and continue.
Note: this Name should be exactly the same as our Flow Input Data name later in this tutorial.
This completes our Report settings. We can save Report and close Report Designer.
2018-01-09_102130.png

Next, we are going to create a Flow to display Form .
In the Designer Folder we click Create Flow on theActions Panel.
2018-06-27_1333403.png

Then, we Name the Flow and click Ok to proceed to the Flow Designer.
2018-01-09_102417-1024x615.png

As mentioned previously in this tutorial, our Flow has to have a Flow Input named the same as we named Filter Change Source in Report . We selectStart Step in our Flow , locate Flow Input Data settings, and click Show Editor.
2018-01-09_102529-1024x768.png

In Data Definitions window we name our data exactly as we named Filter Change Source in Report (EmailAddress) . Then, Close this window to save and continue.
2018-01-09_102630.png

Next, we add Show Form step from Favorite Steps category.
2018-01-09_102653-1024x768.png

In the resulting window we Name the Form and click Create to proceed to the Form Designer.
2018-01-09_102723-1024x768.png

Our Form is designed as following… It has a Button control and Email Address Label Of Data Value to display Email Address from the selected row on the Report . When finished designing Form we can save it and close Form Designer.
2018-01-09_103100-1024x540.png

Back in the Flow Designer we connect the outcome from our Form Step to the End Step . This completes our Flow . We can save the Flow and close Flow Designer.
2018-01-09_103311.png

Finally, we are going to create a Page and put all pieces together.
In the Designer Folder we click Manage > Page > Add Page on the Folder Actions Panel.
2018-01-09_103523-1024x593.png

Then, we Name the Page and click Ok to proceed to the Page Designer.
2018-01-09_103612.png

In the Page Designer we add Report Viewer to the left-hand side of our Page and pick Accounts Report as a Default Report.
2018-01-09_103751-1024x540.png

Next, we add Flow Run Part component to the right-hand side of our Page .
2018-01-09_104002.png

For the Flow Run Part we locate Flow ID setting and using Entity Picker pick our Flow .
2018-01-09_104031-1024x540.png

Finally, we check Update On Report Row Selection check-box option for Flow Run Part component.
This completes our Page . We can save the Page and close Page Designer.
2018-01-09_104126.png

Our Accounts Page view looks as following… First row on Report is selected by default and our Form displays respective Email Address.
pageLoaded.png

When we select different row on the Report , Flow automatically reruns and displays newEmail Address on the Form .
reportSelectionChanged.png

Was this article helpful?