Using the Property Grid Component to Edit Objects with a Form

Last Updated: 04/09/2018 Introduced in Version: 2.0

Some data structures contain many members stored in different formats. For example, the account object stores data about user accounts in text, date format, true or false values, and other types. It could be difficult to create a form that contains all of the account fields that a user could edit.

The Property Grid form component automatically populates a form with fields representing all of the editable properties of a complex data structure.

It can be found in the Form Designer, in the Components panel, under the category Data > Property Grid.

Example

Our example flow will open an example form which will display all of the fields necessary to edit an Account object. The example flow will have already been configured to output an Account object.

Building our example form field-by-field could take an hour or more, but placing all of the fields at once with the Property Grid component will take only minutes.

Because the properties of an Account do not all accept the same kinds of data, some fields should be of a type that accepts plain text while others should accept dates, true or false values, list selections, or other types. Each field should be accurately and clearly labeled. Once configured, the Property Grid will add all of the fields necessary to the form in the proper format.

Our form will conclude with a button component named “Button.”

result

 

We’ll begin by navigating to a project folder and clicking the Create Flow button.

 

 

We’ll give the new flow a name and click OK to open it in the Flow Designer.

 

 

We’ll begin building our flow by configuring the data type for the flow input as an account object.

In the Properties panel, in the Flow Input Data section, we’ll click the Add button.

 

We’ll enter a name for the flow input data and click the Type selector.

In the resulting pop-up, we locate the account object using the search box. We enter “account” then select the object and click OK.

 

 

Back in the Edit object pop-up, we’ll select Save.

Next, we’ll create the form to hold the property grid.

In the Components panel, in the category Forms [Interaction], we’ll drag a Pick or Create Form component to the workspace, then select the Edit Form link in the Properties panel.

 

 

We’ll give the new form a name, ensure the Create New Form option is selected and click OK.

 

 

This opens our new form in the Form Designer.

We add a property grid to the form using the Toolbox panel. We expand the category Data > Property Grid, then drag a Property Grid component to the workspace.

 

 

We will enlarge the frame for our new Property Grid component by dragging our anchors. If the frame’s contents are larger than the frame, our form will display a scroll bar to navigate them. We will also add a button to the form, by dragging a Button component from under the Basic category to the workspace.

 

 

Next, we will configure the options for our Property Grid component, beginning with its inputs, in the Properties panel. Because we want the fields of our Property Grid to be based on the properties of the data object Account, we will select the Type selector, under the heading Input Data.

 

 

 

 

In the resulting Select Entity pop-up we will locate and select Account as our input data type and click OK.

 

 

Just for our example, we will give both Input Data Name and Output Data Name the value “data.”

 

 

This completes our form. It’s now ready to be saved and used in our flow.

Note that our Property Grid component still displays “Nothing selected” in our canvas. This is not an indication of whether our form has correctly been configured. By giving the Property Grid a valid Type and Name, we’ve correctly configured it to display form fields for updating an Account object’s properties.

We’ll close the Form Designer.

Back in the Flow Designer, we connect the outcome paths in the flow. An alert icon over [Form] Grid Form informs us that it has unresolved validation issues.
 
 

The first validation issue we will address is regarding the input data,” which we defined for the Property Grid in the Form Designer. To create the necessary form fields, Property Grid must be given an Account object to introspect.

We configured the Start Step of our flow ahead of time to output an Account object. We will configure [Form] Grid  Form to use this Account object as an input. In the Properties panel, under the heading Inputs > data, we change the Mapping Type to Select Value. We click the Path selector.

 

In the resulting pop-up, we will select the available output account and click OK.

 

 

This completes our example flow, so we’ll save it and close the Flow Designer

To view the form and flow in action, we select the new flow’s thumbnail, click the Action menu and select Run > Run Flow.

We will be prompted to define a specific Account to use as an input. We will generate one by clicking the accounts selector.

 

In the resulting Edit object pop-up, we will define only the required properties for an Account object. Both EmailAddress and EntityName will be given the value “a@a.com”. We will then click Save to preserve this new account.

 

 

 Click Run to begin our flow with the Account object, a@a.com.

 

The form we’re presented with contains Button and the frame we drew in the Form Designer, now populated with form fields for every property of the Account object we just created. Each field is labeled correctly and is represented by a control that is appropriate for the type of data it expects (textbox, date picker, checkbox or drop-down list).

 

Changes made to the fields within the property grid frame will also be made in the Account object we created, and made available for any steps following the Button outcome.

Additional Resources