Editing Data Objects in a Wizard Property Grid
  • Updated on 09 May 2013
  • 5 minutes to read
  • Print
  • Dark
    Light

Editing Data Objects in a Wizard Property Grid

  • Print
  • Dark
    Light

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 .
result4.png

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.png

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.png

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.png

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

2017-01-04_101302.png

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.png

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.png

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.png

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.png

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 theNext Button as Done .

2017-01-04_102710.png

We'll define thePrevious Button as Previous .

2017-01-04_102743.png

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.png

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.png

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.png

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.png

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 selectRun 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.png

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 isEmailAddress . 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.png

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

2017-01-04_104412.png

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

2017-01-04_104534.png

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.png

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.png

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

Was this article helpful?