The Structured Condition Builder is for moderate to advanced users who have experience writing conditions. The Structured Condition Builder offers users a simple and structured interface for writing long and complex conditions that contain nests.
Scenario
An order manager creates and edits conditions using operators, variables, and a predefined set of attributes. The order manager needs to be able to quickly and easily build a complex compound condition that includes nesting as well as the AND and OR logical operators.
Layout and Components
The Structured Condition Builder:
- Contains, at a minimum, a Name field and a panel with a toolbar and fields for entering attributes, operators, values, and logical operators
- Enables users to nest conditions and preview their draft condition in a textual format as they write it
Because of the complexity of the interface and the potential length of the condition, you should make sure that the condition renders on a drill-down page.
 |
| Figure 4. Example of a Structured Condition Builder page |
| Screen Components |
| Type |
Component |
| Page |
Pages contains the following elements:
- (Required) A Name text field in which users enter the name of the filter
- (Optional) A Description text box that enables users to enter a brief description of the filter
- (Optional) An Effective Date field that indicates the dates that the condition returns results
- You can add product-specific fields to the form layout if necessary
|
| Table |
Tables contain the following elements:
- An Actions menu that contains these items:
- Add
- Duplicate
----------------
- Delete
----------------
- Add Nest
- Delete Nest
- Toolbar icon buttons:
- Add (
)
- Duplicate (
)
- Delete (
)
----------------
- Add Parentheses (
): Nests and indents selected rows
- Delete Parentheses (
): Deletes the nesting and indention of selected rows.
|
| Conditions Panel |
The work space for the condition contains one row by default and space for four additional rows before the panel height increases.
The Condition panel must contain these columns:
- Row Selector: A check box and row highlighting indicate selection
- Attribute: An LOV choice list that contains a set of attributes predefined by the product team
- Users cannot add new attributes to the choice list.
- The operator is based on the attribute type (numeric, text, date, and so on).
Example: Users select Salary, and the operator will automatically change to < (less than).
- Operator: An LOV choice list of common operators
- Value: A text field that enables users to enter an alphanumeric value
- You can use an LOV choice list for a small predefined set of values.
- Logical Operator: Combines two conditions to return a set of filtered results
- Values: AND or OR
- Set to AND by default
- This field should be hidden in the last row of the table.
Accessibility Note: Field labels (for example, attribute, operator, and so on) are hidden, but you must label them. You must also identify each row in the condition uniquely. Example: Attribute: Row 1, Operator: Row 1
|
|
| Buttons |
Buttons (page actions) must include:
- Validate: The condition is checked for validation errors. If errors are found, a message appears. Users can validate the condition at any time.
- Save: Saves the changes and updates the object information in the base table.
- The condition is checked for errors. If errors are present, a message appears.
- The assumption is that conditions can be saved with errors.
- Save and Close: Saves the changes and closes the window. The condition is checked for validation errors. If errors are present a message appears.
- Cancel: Cancels the transaction, closes the page, and returns users to the referencing page.
| Note: Because of the degree of complexity of any condition, it is recommended that users use the button configuration described previously. You can use an alternative set of buttons (page actions) that includes Validate, OK, and Cancel buttons depending on the save model. |
|
| Condition Text Preview |
The Condition Text Preview text box displays the plain text version of the condition as it would appear if users were typing it as free text.
The condition text preview area is:
- Required
- Read only
- Open by default
|
Condition Panel
This section discusses:
- The row selection model
- Basic row behaviors
- Condition panel behaviors
The Row Selection Model The row selection model differs from standard
table behavior in these ways:
- A check box and highlighting are used to indicate that a row has been selected.
 |
| Figure 5. Example of a selected and highlighted row |
- After users perform an action, such as duplication or nesting, previously selected rows are deselected and the highlighting is removed.
- New rows do not appear as selected or highlighted when added to the condition panel. If users leave a newly added row selected, they must deselect the row, and this could cause users to mistakenly perform an action on the row.
Basic Row Behaviors
Because users write conditions from the top down, common row interactions, such as Add and Duplicate, behave differently in conditions than they do in standard
tables. Common row interactions include:
- Add New Row (no selection): A new row is inserted after the last row in the table.
- Add New Row (row selected): A new row is added below the selected row.
- Add New Row (multiple rows selected): One new row is added below the last selected row.
- Duplicate Row: The duplicate row is added below the selected row.
- Duplicate Multiple Rows: The group of duplicated rows is added below the selected group.
- Duplicate Noncontiguous Duplication: The group of duplicated rows is added below the selected row or group of rows. For example, if users select rows 2, 3, and 5, and then click the Duplicate icon button, the duplicated rows appear below the 2 and 3 grouping and below row 5.
- Delete Row: The selected row is deleted from the table. All rows below it move up to fill the space.
| Note on noncontiguous row entry: If users leave blank rows between those in which they have entered data, those blank rows are removed and replaced by the next row below it that does contain data. For example, let's say that a user records data in rows 1, 2, and 4, but leaves row 3 blank. The user then saves and closes the Condition dialog box. The result: row 3 (previously blank) is deleted, and row 4 moves up to replace row 3. |
Condition Panel Behaviors
This section specifies the interactions associated with writing a condition:
Adding a New Row (None Selected)
1. Users click the Add icon button or select Add Row from the Actions menu.
 |
| Figure 6. Example of adding a new row without making a selection |
The results of this interaction are:
- A new row is added below the last row of the table.
- The new row is not selected or highlighted.
- The logical operator is added at the end of the second to last row. Default values are:
- Attribute: None
- Operator: "="
- Value: None
- Logical Operator: Add the logical operator to the end of the second-to-last row. This field is never available in the last row of the table.
- If the last row in a condition is nested, and users add a new row without first selecting a row, the new row is added to the end of the condition but is not inside the nest.
Adding a New Row (Row Selected)
- Users select the check box for a row, which highlights the row.
- Users click the Add icon button or select Add from the Actions menu.
 |
| Figure 7. Example of adding a new row with a row selected |
The results of this interaction are:
- A new row (including a logical operator) is inserted below the selected row.
- If several rows are selected, whether contiguous or noncontiguous, the new row is added below the last selected row.
- The previously selected row is deselected, which clears the check box and removes the highlighting.
- The new row is not selected or highlighted.
- Default values of the new row are:
- Attribute: None
- Operator: "="
- Value: None
- Logical Operator: AND. Add the logical operator to the end of the second-to-last row. This field is never available in the last row of the table.
Duplicating a Row
- Users select the check box for a row, which highlights the row.
- Users click the Duplicate icon button or select Duplicate from the Actions menu.
 |
| Figure 8. Example of duplicating a row |
The results of this interaction are:
- A duplicated row (including a logical operator) is inserted below the selected row. If users select several rows, whether contiguous or noncontiguous, the new row is added below the last selected row.
- The previously selected row is deselected, which clears the check box and removes the highlighting.
- The new row is not selected or highlighted.
- Default values of the new row are:
- Attribute: None
- Operator: "="
- Value: None
- Logical Operator: AND. The logical operator is added to the end of the second-to-last row. It is never available in the last row of the table.
Deleting a Row
- Users select the check box for a row, which highlights the row.
- Users click the Delete icon button or select Delete from the Actions menu.
 |
| Figure 9. Example of deleting a row |
The results of this interaction are:
- The row is deleted and subsequent rows move up to fill the space.
- Users can select rows contiguously and noncontiguously and delete them using the delete action.
- If users delete the last row, the logical operator is removed from the new last row.
Adding Parentheses
- Users select the check boxes for one or more rows, which highlights the rows.
- Users click the Add Parentheses icon button or select Add Nest from the Actions menu.
 |
| Figure 10. Example of adding parentheses |
The results of this interaction are:
- The selected rows are indented (not including the check box).
- An open parenthesis is added before the first row and a close parenthesis is added after the last row. If users select nonsequential rows, single or contiguous rows are grouped into their own nests.
- The last logical operator in the nested group is dropped below the nest to form a distinct visual grouping of the nest.
- If the last row in the condition is part of a nest, it would not have a logical operator.
- Previously selected (newly nested) rows become deselected.
- The new row is not selected or highlighted.
Steps Adding a New Row to a Nest
- The user selects nested row using a check box. The row becomes highlighted.
- The user clicks the Add icon button (or selects Add from the Actions menu).
 |
| Figure 11. Example of adding a new row to a nest |
Results
- A new row (including logical operator) is added to the nest below the selected row.
- The previously selected row becomes deselected.
- The new row is not selected or highlighted.
- Default Values of New Row:
- Attribute: None
- Operator: "="
- Value: None
- Logical Operator: AND
(added to the end of the second-to-last row; never available in the last row of the table)
- If the last row in a condition is nested, and a user adds a new row without selecting a row, the new row will be added to the end of the condition but will not be included in the nest.
Steps Adding a Second Level to a Nest
- The user selects one or more rows using check boxes. The rows become highlighted.
- The user clicks the Add Nest icon button (or selects Add Nest from the Actions menu).
 |
| Figure 12. Example of creating a second level within a nest |
Results
- The selected rows are indented an additional level. An open parenthesis is added before the first row of the new nest, and a close parenthesis is added after the last row of the new nest.
- If the selected rows are at the beginning or the end of a nest, double parentheses will appear.
- If non-sequential rows are selected, each individual row will be added in its own nest.
- The logical operator is dropped below the nest to form distinct visual grouping of the nest.
- If the last row of the condition is part of the nest, it will not have a logical operator.
- The previously selected row becomes deselected.
- The new row is not selected or highlighted.
Steps Adding a Third Level to a Nest
- The user selects the rows using a check box. The rows are highlighted.
- The user clicks the Add Nest icon button (or selects Add Nest from the Actions menu).
 |
| Figure 13. Example of nesting three levels deep |
Results
- The selected rows are indented a third level. An open parenthesis is added before the first row of the new nest, and a close parenthesis is added after the last row of the new nest.
- If the selected rows are at the beginning or the end of a nest double parenthesis will appear.
- If non-sequential rows are selected, each individual row will be added in its own nest.
- The logical operator is dropped below the nest to form distinct visual grouping of the nest.
- If the last row of the condition is part of the nest, it will not have a logical operator.
- The previously selected row becomes deselected.
The new row is not selected or highlighted.
Steps Deleting a Row from a Nest
- The user selects row using a check box. The row is highlighted.
- The user clicks the Delete icon button (or selects Delete from the Actions menu).
 |
| Figure 14. Example of deleting a row from a nest |
Results
The row is deleted and subsequent rows move up to fill the space.
- Users can select rows contiguously and noncontiguously and delete them using the delete action.
- If the deleted row is the last in the nest, the close parenthesis moves up to the next row.
- If users delete all of the rows in a nested group, the parentheses are also deleted.
Steps Deleting Parenthesis
- User selects the rows using a check box. The rows are highlighted.
- User clicks the Delete Nest icon button (or selects Delete Nest from the Actions menu).
 |
| Figure 15. Example of deleting parentheses |
Results
- The rows are no longer indented and the parentheses are removed. If you have multiple levels of nesting (indentation), the selected rows are outdented one level.
- The logical operator moves back up inline with the last row because it is not the last row in the condition. If the last row in the condition is part of the nest, it does not have a logical operator.
- The row is deselected.
- The row cannot be removed from a nest nonsequentially.
For example: If a nest contains three rows, and user selects the second row and then clicks the Delete Nest icon button, all of the rows are unnested.
|