Sub Dialog Data Flow
  • 27 Jul 2021
  • 4 Minutes to read
  • Dark
    Light
  This documentation version is deprecated, please click here for the latest version.

Sub Dialog Data Flow

  • Dark
    Light

Article summary

Overview

Sub Dialog Data Flows show a smaller, more targeted informational view of another form component from the parent form. This can extend user interaction while preventing clutter.

Example

This example will display a Form that will have a Data Grid showing a list of all current accounts. There will be two buttons on the Form; one will be a Sub Dialog Button that will create a new account, the second button will close the Form.

  1. Begin in a Designer Folder, select CREATE FLOW from the bottom action panel.
  2. In the Create Flow dialog select Default Flow
  3. Name the Flow “Main Flow”, select Create.2019-09-11_09h46_06.png
  4. In the Flow Designer, add a GetAll step from Integration > Internal Services > Account Service. Name this step "Get All Accounts".
  5. Next, add a Show Form step from the Steps Panel. 
  6. Navigate to the Properties panel and click Pick or Create Form.
  7. In the Create or Pick window, name this Form “Show Account Form”, select CREATE.2019-09-11_09h56_57.png
  8. In the Form Designer, add a Button to the base of the Form. Name this button “Done”.
  9. Next, add a Data Grid to the Form, from Data > Data Grid in the Form Controls panel.
    Please navigate to the Displaying Lists of Objects in a Data Grid article for more information on Data Grids.
  10. Under Input Data > Type, choose Account [DecisionsFramework.ServiceLayer.Services.Accounts].
  11. Type “Account” under Data Name
  12. After the Type is chosen, Column Information > Columns will automatically update with the available fields. Delete all but EmailAddress, FirstName, and LastName.
  13. Finally, in the Form Controls panel, expand Actions > Sub Dialog, drag and drop a Sub Dialog Button next to the “Done” button.
  14. Under Data > Text type “Add New Account” to name the Sub Dialog Button.
  15. To further configure this button, navigate to Input Data > Flow ID select Create
  16. Name the Sub Dialog Flow “Sub Dialog-Add Account”. Click CREATE.
  17. In the Flow Designer select the Start step. In the Properties panel under Flow Data > Flow Input Data select Show Editor.
  18. In the Data Definitions dialog name the Input Data “List of Accounts” with the same Type used earlier: Account [DecisionsFramework.ServiceLayer.Services.Accounts]
  19. Set the Is List to true.
  20. Next, add a Show Form step from the Steps Panel. 
  21. In the Properties panel, click Pick or Create Form
  22. In the Create or Pick window, name this Form “Add New Account Form”, select CREATE.
  23. In the Form Designer, add three Labels, three corresponding Text Boxes, and two Buttons (Save and Cancel) as shown below. Be sure to name the Text Boxes accordingly (Email Address, First Name, Last Name) to make mapping the following steps easy.
  24. Save and Close the Form.
  25. On the Save outcome from the Form, add an Add New Account step from Integration > Internal Services > Account Service in the Steps panel.
  26. In the Properties panel under Inputs>account select Build Data. Then choose the “...” button to choose which Properties to map. In this example choose Email Address, First Name, and Last Name
  27. For each property, choose Select From Flow and choose the matching Text Box.
  28. For member Of select Constant and choose Add New to pick which group the new account will belong to. 
  29. Then type in a Constant password that the new account can change after logging in.
  30. On the outcome of the Add New Account step add an Add Item to List Step from Data > List in the Steps panel.
  31. Under Inputs > New Item select Build Data. Then select the “...” button to choose which Properties to map. In this example choose Email Address, First Name, and Last Name
  32. For each property, choose Select From Flow and choose the matching field.
  33. For Original List select “ListOfAccounts” from the Flow. 
  34. On the Outputs of this step Change Value of New List to New List of Accounts, this will update the old list on the first Form to display the newly added account.
  35. On the outcome of the Add New Account step, add a Get By ID step from Integration > Internal Services > Account Service in the Steps panel.
  36. Under Inputs > id, choose AddNewAccount1_Output. 
  37. On the outcome of the GetByID step, add an Add Item to List Step from Data > List in the Steps panel.
  38. Under Inputs > New Item, choose Select From Flow and choose GetByID1_Output.
  39. For Original List, select ListOfAccounts from the Flow. 
  40. On the Outputs of this step, Change Value of New List to ListOfAccounts will update the old list on the first Form to display the newly added account.
  41. Connect the outcome from Add Item to List to the ChangeData step. Under Data > Output select Show Editor.
  42. In the Data Definitions dialog name the Output Data “Accounts” with the same Type as before: Account [DecisionsFramework.ServiceLayer.Services.Accounts]
  43. Set the Is List to true.
  44. Under Inputs for Accounts select List of Accounts from the Flow.
  45. Save and close to return to the Main Form.
  46. Back in the Form Designer with the Sub Dialog Button selected, under Flow Data > Flow Inputs select Update Inputs.
  47. When the Inputs update select the pencil icon next to Flow Inputs > ListOfAccounts.
  48. For the Input Type choose Form Input Data, type "Account" for the Form Input Name. The Form Input Name should have the same data name as the Data Grid, in this example the Data Grid data name is Account. Select OK to save and close.
  49. Next, select the pencil icon next to Flow Outputs > Account.
  50. Under Behavior > Form Data Name type "Account". The Form Data Name should have the same data name as the Data Grid, in this example the Data Grid data name is Account.
  51. Save and Close the Form Designer. 
  52. In the Main Flow, map the inputs for the Show Form step to the GetAllAccounts_Output.
  53. Connect the Show Form outcome to the End step.

Debug

  1. Select Debug in the top action panel.
  2. Run the debugger; the Form displays showing the list of Accounts. Select the Add New Account button.
  3. The Sub Dialog Flow runs and displays the form. Fill in the TextBoxes and select Add New Account.
  4. When the Sub Dialog Flow closes, the Main Form is still displayed and will show the accounts' updated list.

Was this article helpful?