Tutorial: Dynamic tables

Content under development

 

  1. Click LOG IN to log in to the Flow Drawing Tool.
  2. Click Types and select New Type.

    This opens the Types>Type screen.
  3. Copy-paste Picklist option in the Name field.
  4. Click New Property. This opens the Type>Type>Property screen.
  5. Type Label in the Name field.
  6. The What kind of property is this field should say String.
  7. Click Apply Property. This adds Label as a property of the Picklist option type.
  8. Click New Property again.
  9. Type Value in the Name field, the What kind of property is this field should say String.
  10. Click Apply Property.

    This adds Value as a property of the Picklist option type.
  11. Click New Property again. We have one more round to go.
  12. Type Selected in the Name field.
  13. The What kind of property is this field should say String.
  14. Click Apply Property. This adds Selected as a property of the Picklist option type.
  15. Click Save Type.
  16. Click Flows to open the Flows tab and click New Flow.
  17. Select ManyWho Identity Service from the dropdown menu Which Service should be used for authentication.
  18. Click Continue.
  19. Enter a name for the flow in the Name field. Example: Dynamic Tables.
  20. Select Anyone can run this flow in the Access menu. Anyone with the app URL will be able to run the app. Later, we will see how we can configure authentication for the apps we build – so someone with only an approved authentication service like Box or Salesforce can run the app.
  21. Select None from the Social feed for collaboration menu. In subsequent tutorials we will see how we can use a social feed (say, Salesforce Chatter) for collaborating with other users.
  22. Click Start Building! This opens the canvas where we will build our flow.

    This opens the canvas where we will build our flow.
  23. Drag an Operator to the canvas.

    This opens a configuration panel on the right.
  24. Copy-paste Initialize in the Name field.
  25. Click New Operation. This opens the Operator>Operation screen.
  26. Click Select or create a new Value.
  27. Click Create a new Value.
  28. Copy-paste Dynamic Tables: List in the Name field.
  29. Select List for the What kind of Value is this field.

    This opens the option for types.
  30. Click Select a Type.
  31. Select Picklist option.
  32. Click Save.
  33. Select Empty for the How do you want to change the Value field.
  34. Click Apply Operation. This adds the Dynamic Tables: List as an operation.
  35. We will add two more operations. Click New Operation.
  36. Click Select or create a new Value.
  37. Click Create a new Value.
  38. Copy-paste Dynamic Tables: New Row in the Name field.
  39. Select Object for the What kind of Value is this field. This opens the option for types.
  40. Click Select a Type.
  41. Select Picklist option.
  42. Click Save.
  43. Select Create New as the option for How do you want to change the Value.
  44. Click Apply Operation. This adds the Dynamic Tables: New Row as a new operation.
  45. Click New Operation again.
  46. Click Select or create a new Value.
  47. Select the Dynamic Tables: List value.
  48. Select Update as the option for How do you want to change the Value.
  49. Select Value of for the How do you want to retrieve the reference Value field.

    This opens the reference value option.
  50. Click Select or create a new Value.
  51. Select Dynamic Tables: New Row from the list of values.
  52. Click Apply Operation.
  53. Click Save Operator.

    This is what the screen looks like now:
  54. Drag an outcome from Start to InitializeThis opens a configuration panel on the right-hand side.
  55. Type Go in the Name text field.
  56. Click Save Outcome.

    This creates an arrow from Start to Initialize, with the legend Go on it. This is what the canvas looks like now:
  57. Drag a Page to the canvas. This opens the page configuration panel.
  58. Copy-paste Dynamic Table in the Name folder.
  59. Click New Page Layout. This opens a new tab called New Page.
  60. Click the gears icon on the right-hand-side.

    This opens the Settings screen for the page.
  61. Type Dynamic Table in the Name and Label fields.
  62. Click Save.

    This saves the Name and Label for the page.
  63. Click the Save icon the right-hand-side navigation to save the page.

    The page name changes to Dynamic Table.
  64. Drag a Presentation component to Main container.

    This opens the configuration panel for the Page Component.
  65. Type Header in the Name field.
  66. Copy-paste Dynamic Table Example in the Name field.
  67. Click Save Component.

    This saves the presentation component on the page.
  68. Click the Save icon the right-hand-side navigation to save the page. We will continue to save the page as we work.
  69. Drag a Table component from the Data section to Main container.

    This opens the configuration panel for the Page Component.
  70. Type Name in the Name and Label fields.
  71. The box for Required should be checked.
  72. Click Select a Type.
  73. Select the Picklist option type.
  74. Check the Get the data from a List Value option. This brings up the Value that holds the data field.
  75. Click Select or Create a new Value and select Dynamic Tables: List.
  76. The Save the whole selection option should be checked for State.
  77. Click Select or Create a new Value.