Editing Data Objects in a Wizard Property GridLast Updated: 12/07/2015 Introduced in Verision: 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.
We’ll begin our example in our project folder by clicking the Create Flow button at the bottom of the window.
In the resulting pop-up, we will name our flow and click the OK button to open it in the Flow Designer.
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 button.
In the resulting pop-up, we’ll enter a name for the data, then click the Type selector.
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.
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 panel.
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 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.
We’ll define the Previous Button as Previous.
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 selector.
In the resulting Select Entity pop-up, we will Search for Account and select Account and click OK to preserve the change.
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.”
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.
Then we’ll click the Path selector.
In the resulting pop-up, we will select Account and click OK to preserve the change.
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.
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 Save.
With our example Account object so defined, we can now run our flow by clicking the Run button.
The first section of our form corresponds to the first section of properties belonging to our example Account object. Because it’s the first section, no Previous button displays.
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. Note that, because there is a section of properties preceding this one, the Previous button now appears alongside the Next button.
We’ll click the Next button again.
We’re taken to the final section of our account’s properties. The Next button has been relabeled Done. We click the Done button to complete the process of editing this Account object.
It also ends our example flow, which has completed without errors.