Editing Data Objects in a Wizard Property Grid

Last Updated: 05/03/2018 Introduced in Version: 2.0

The Wizard Property Grid form component allows you to easily create a wizard for defining the properties of data objects. By defining the form’s data input as a data object, the wizard property grid automatically includes all of the fields, in their proper formats, related to editing the object. For example, if you define an Account object as the input for a wizard property grid, the wizard that displays to the user will contain all of the fields that can be changed on a user account record, including text fields, data pickers, checkboxes, and drop-down lists.

The user navigates through the wizard property grid using familiar Next and Previous buttons.

Add the Wizard Property Grid to a form in the Form Designer. In the Toolbox panel, under the category Data > Property Grid, drag a Wizard Property Grid component to the workspace.

Example

Our example flow will display a form with which we can edit a single Account object. This account’s properties display in three sections within a wizard property grid. We can navigate between these sections using a Previous button and a Next button. On the first section in the wizard, the Previous button will not display. On the final section in the wizard, the Next button’s label will change to Done.

result

 

We’ll begin our example in a project folder by clicking the Create Flow button at the bottom of the window.

 

2017-01-04_083858

 

In the resulting pop-up, we will name our flow and click the OK button to open it in the Flow Designer.

 

2017-01-04_084656

 

We’ll begin by setting the data type for the flow to use as input.

In the Properties panel, in the Flow Data section, we’ll click the Add New link.

 

2017-01-04_101153

 

In the resulting pop-up, we’ll enter a name for the data, then click the Type Pick selector.

 

2017-01-04_101302

 

Since our flow will be using an Account object as input, we’ll locate it by entering “account” in the search field. We’ll select Account and click OK.

 

2017-01-04_101352

 

Back in the Edit object pop-up, we’ll save the flow input data by clicking Save.

Back in the Flow Designer, we’ll begin building our flow.

In the Toolbox panel, in the Forms [Interaction] category, we’ll drag a Pick or Create Form component to the workspace.

To create the form, we’ll click the Pick or Create Form link in the Properties pop up.

 

2017-01-04_101714

 

 
In the resulting pop-up, we’ll give the form a name, ensure that the Create New Form option is selected, then click Create to open the form in the Form Designer.
 
 
2017-01-04_101914
 

We start building the form by dragging the Wizard Property Grid form Toolbox to the workspace. It can be found in the Toolbox panel, under the category Data > Property Grid.

The wizard property grid component uses two buttons to navigate between sections. The first button we will place will be the Wizard Next Button. When the object being described by the wizard property grid has no more sections to display after the current one, its label changes to Done.

The Wizard Next Button component can be found in the Toolbox panel, under the category Data > Property Grid.

Next, we’ll place the Wizard Previous Button. It too can be found in the Toolbox panel, under the category Data > Property Grid. If there are no more sections preceding the current one, the button will not display.
 

2017-01-04_102520

 

Next, we’ll configure our wizard property grid component to interact with these buttons. We’ll select the Wizard Property Grid component and locate the heading Input Data, under the Properties panel, and define the Next Button as Done.

 

2017-01-04_102710

 

We’ll define the Previous Button as Previous.

 

2017-01-04_102743

 

Next, we will define the type of data which this wizard property grid should accept as input. As with the flow, this form will be using the Account object as input.

In the Properties panel, under the section Input Data, we will click the Type  Pick selector.

In the resulting Select Entity pop-up, we will Search for Account and select Account and click OK to preserve the change.

 

2017-01-04_102852

 

Next, we will name the inputs and outputs to and from our form. We will define Input Data Name and Output Data Name as “data.”

 

2017-01-04_103319

 

This completes our form configuration, so we will click the Save Form link at the top of the Form Designer to save it, then close the Form Designer.

Back in the Flow Designer, we will connect the outcome paths in the flow.

Next, we’ll define the input for this form as an Account object to be supplied at runtime. In the Properties panel, under the section Inputs > Input Data, we will change the Mapping Type to Select Value.

 

2017-01-04_103542

 

Then we’ll click the Path selector by clicking the Pick link.

In the resulting pop-up, we will select Account and click OK to preserve the change.

 

2017-01-04_103758

 

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

To see the flow in action, we’ll select the new flow’s thumbnail, click the Action menu and select Run Flow.

Our flow prompts us to supply it with an Account object. We will give it one by clicking the accounts selector.

 

2017-01-04_104040

 

In the resulting pop-up, we’re given a new, mostly undefined Account object. Note that it is defined by properties which are organized under three headings – [Unclassified], Entity Information, and Person Info.

To be a valid Account, some properties must be defined before we pass it to our form. The first is EmailAddress. Our form won’t be validating whether this is a valid email address, only that something is provided.

We will define this account’s EntityName as “a” and click Define.

 

2017-01-04_104252

 

With our example Account object so defined, we can now run our flow  by clicking the Run button.

 

2017-01-04_104412

 

The first section of our form corresponds to the first section of properties belonging to our example Account object.

 

2017-01-04_104534

 

To view the next section, we will click the Next button.

The second section of our form corresponds to our example account’s second section of properties.

We’ll click the Next button again.

 

2017-01-04_121906

 

We’re taken to the final section of our account’s properties.  We click the Done button to complete the process of editing this Account object.

 

2017-01-04_122005

 

It also ends our example flow, which has completed without errors.

 

 

Additional Resources