Adding general elements to a view

You can add general elements such as section, charts, formatting, and filters to customize your views.
Figure 1. Drag and drop general elements in views
Add fields in header, drag and drop elements in the view.

Adding a section

Information in a view definition is organized into sections.

About this task

Sections are valid in Creation, Task, and Admin Views.

A section contains fields and inline guidance. When you work on the Design tab:

  • You can add a section. When you add a section, it appears as the last section.
  • You can control the order of sections in a view.
  • You can define whether a section is collapsed or expanded when a user initially opens a view.
  • You can expand and collapse individual sections or all sections using the Expand All and Collapse All toggles.
  • You cannot embed a section in another section.
  • You can add fields directly to sections, in which case they are ordered consecutively down the page in the view.
  • You can add groups to sections and then add fields to groups, in which case you can arrange the fields in columns and place them more precisely in the view.
  • If a Task View is used in a workflow, task view overrides can hide a section and override the Initially Collapsed setting. For more information, see Defining a standard stage.

In an Admin View, sections can either be dynamic, which means the fields are automatically added at run time, or static. Creation and Task Views contain only static sections. An Admin View can contain the following dynamic sections:

  • The Other fields section contains fields that are in the profile but not already in the view. Fields in Other fields are not imported or exported by FastMap. If you want a field to be exported or imported, add the field to a nondynamic section.
  • The Parents section automatically displays grid fields for all enabled parent relationship types.
  • The Children section automatically displays grid fields for all enabled child relationship types.
  • The Parent and child relationships section displays a relationship tree with parents and children.

On the JSON tab, a section is defined in a sections element.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. If the view is an Admin View and you want to add a dynamic section, click New Dynamic Section and select the type of dynamic section you want to add.
    If all of the dynamic sections are already in the view, you can't add a new dynamic section and New Dynamic Section is not displayed.
  3. If you want to add a static section, click New Section.
  4. Enter a Label for the section. Click Edit to enter localized values.

    If it is displayed, click Auto Translate button to populate translated values to languages. For more information, see Translation services.

  5. Set Initially Collapsed to True or False.
  6. Click Done.
  7. Expand the new section and start adding fields and groups.
    1. To add a field directly to the section, drag it into Section Fields.
      • You can drag a field either from the palette or the canvas and drop it into the section.
      • You can change the order of fields in a section.
    2. To add groups, see Arranging fields in columns.
  8. Optional: Drag an Inline Guidance element from the palette to the section. For more information, see Adding inline guidance.
  9. Click Done.
  10. Move the section up or down to change the display order.

Adding a trend chart based on field value change history

You can add a trend chart with fields to a Task or Admin View to display the trends of numeric fields over time.

You can select the time period, the fields that you want displayed in the chart, and the colors to represent the trend for each field.

You can set colors for trend charts and heat maps within the view, because they are not associated to a specific field. For other chart types, learn how to apply colors to values by reviewing Defining fields and adding them to field groups

The chart shows data from the currently selected reporting period only. If the time period you select for the chart doesn't overlap with the current reporting period, the chart is empty.

All dynamic date ranges are based on the current date, regardless of selected reporting period.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Perform one of the following actions:
    1. From the list of General items in the palette, drag Trend Chart (fields) into any existing section labeled Section Fields.
    2. Click New Section to create a new section in the view. From the list of General items in the palette, drag Trend Chart (fields) into the new section.
      For more information about creating new sections, see Adding a section.
  3. In the Trend Chart (fields) panel, enter a Label. Click Edit to enter localized values.
  4. To edit the Trend Chart Fields Configuration, click Edit.
  5. Select a Time period for the trend chart.
    You can select one of the following options:
    • Static range to choose a Start date and End date.
    • A dynamic date range that specifies a number of months: 1, 3, 6, 12, or 24 months. A dynamic date range uses the current date as the end date of the range.
    • All time.
  6. Select the Trend fields that you want to see in the trend chart.
  7. Select the Chart colors for each field in the trend chart.
  8. Click Done to finish configuring the trend chart fields. Click Done to finish adding the trend chart.
  9. If you have completed your changes in the View Designer, click Publish.

Arranging fields in columns

You can use columns (groups) to control field placement in a view.

About this task

Columns are valid in Creation Views and Task Views.

When you work on the Design tab:
  • A group must be within a section.
  • Groups can contain object fields and relationship fields.
  • A group cannot be embedded in another group.
If multiple columns are defined but horizontal space is limited, the display changes to a single column.

You can find an example in: SysView-Task-SOXControl.

On the JSON tab, columns are defined in a columns property.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Drag a Column element from the palette to the section where you want it to display.
  3. Enter a value in Name. This is an internal name that is not displayed in the view.
  4. Select a number in Number of Columns. You can define no more than four columns.
  5. Click Done.
  6. Add fields to the group. You can drag a field either from the palette or the canvas and drop it into Group Fields.
    There is no limit on the number of fields you can have in a column.
  7. Move fields up or down to change the display order.

Configuring fields to be required or read-only in a view

You can configure fields so that they are required or read-only in a view.

About this task

When you work on the Design tab, you can click a field on the palette and set it to required or read-only.

Note: A field that is read-only is not validated when a user modifies fields in a view. For example, if Field A is read-only, then the value of Field A isn't validated when the user modifies other fields in the view and saves their changes.

The same rule applies for dependent fields. For example, suppose that a user has read-only access to Field A and write access to Field B. Also, suppose that the value of Field A must be Yes if Field B is No and Field A must be No if Field B is Yes. When Field A is Yes and the user changes the value of Field B from No to Yes, they can save their changes because Field A is read-only. Field A retains the invalid value and no error message is displayed.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. If the field you want to configure is not on the canvas, drag the field from the palette to the section on the canvas where you want it to display.
  3. Click the field.
    The panel for the field is displayed.
  4. If you want the field to be read-only, set Read Only to True.
  5. If you want the field to be required, set Required to True.
  6. Click Done.

Adding a button to view AI insights

Add a View AI insights button to a view in View Designer so that users can access the insights from a model.

Before you begin

Configure a trained and tested model with the Input type set to View definition or Object fields. For more information about configuring models, see Custom Machine Learning Models.

Configure a Task or Report View that contains the OpenPages fields that you want the model to process.

About this task

You can add a View AI insights button to a Creation View, Task View, Admin View, or Report View. When you configure the button, you specify the model to run and the view to use as input. After you publish the view, the user can click View Insights View Insights button to display the insights from the model.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Drag the View AI Insights element from Buttons in the palette to a section.
  3. Enter a Label.
  4. In Select AI model integration, select the model that you want to associate with the button.
  5. If the model that you selected in the previous step has an Input type of View definition, use Select a view to send to the model to select the model that contains the fields that you want the model to process as input.
  6. Click Done.

Adding inline guidance

Inline guidance displays customer-specific help text that supports users as they complete a task. It is displayed as a field and enclosed in a box.

About this task

Inline guidance is valid in Creation Views and Task Views.

Each section can contain one or more inline guidance elements.

Visible or hidden rules can be applied to each field within an inline guidance section.

When it is displayed in a view, users can expand or collapse the text if it is long.

Figure 2. Example of inline guidance
Example of inline guidance

On the JSON tab, inline help is defined in helpTopic and helpText properties.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Drag an Inline Guidance element from the palette to a section.
  3. Enter a value in Name. This is an internal name that is not displayed in the view.
  4. Enter text in Help Topic. This value is displayed in bold as a header. Click Edit to enter localized values.

    If it is displayed, click Auto Translate button to populate translated values to languages. For more information, see Translation services.

  5. Enter text in Help Text. This value is the informational text to which you can optionally apply formatting. Click Edit to enter localized values.

    If it is displayed, click Auto Translate button to populate translated values to languages. For more information, see Translation services.

  6. Add a hidden or visible rule (optional). For more information, see Defining Visible and Hidden rules.
  7. Optional: Apply formatting. For more information, see Applying light formatting to text.
  8. Click Done.

Adding user guidance

User guidance supports users as they complete a task and resolve issues.

About this task

User guidance is valid in Creation Views and Task Views.

User guidance is displayed in a panel in the upper right corner of a view. It contains informational text, a progress bar, and a list of key items. If a task is part of a workflow that has started, Select an action to validate is also displayed. Messages and field symbols guide users through finishing a task.

When it is displayed in a view, users can expand or collapse the text if it is long.

A view can have one user guidance section. The name user guidance is shown in the View Designer but the section has no title when it is displayed in a view.

For more information about user guidance, see How key items and workflow actions display in user guidance.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Click User Guidance. The User Guidance panel opens.
  3. Enter text in Help Topic. This value is displayed in bold as a header. Click Edit to enter localized values.

    If it is displayed, click Auto Translate button to populate translated values to languages. For more information, see Translation services.

  4. Enter text in Help Text. This value is the informational text to which you can optionally apply formatting. Click Edit to enter localized values.

    If it is displayed, click Auto Translate button to populate translated values to languages. For more information, see Translation services.

  5. Build the list of key fields. There are two methods. For object fields, you can follow this method:
    1. In the User Guidance panel, click Add. A list of object fields is displayed.
    2. Tick the fields that you want to include as key fields.
    3. Move key items up and down to change the display order.
    4. Click Done. The User Guidance panel closes. The panel changes to a list of key fields.
    For object fields and any other fields, for example, relationship fields, that are on the canvas, follow this method:
    1. Close the User Guidance panel if it is open.
    2. Drag fields from the canvas to the list of key fields. A field can be dropped when the list of key fields is framed with a blue box. If the field does not drop, it is already marked as a key field.
    3. Move key items up and down to change the display order.

      You do not have to add required fields as key items. However, if you add them, you can control the display order.

  6. Optional: Apply formatting. For more information, see Applying light formatting to text.

How key items and workflow actions display in user guidance

You can configure key items and how they are ordered in user guidance.

Key items in user guidance

Key items are listed after the informational text under the title Key Items. You configure the list of key items. In addition, required fields and invalid fields are automatically listed as key items. When a user clicks a key item, the cursor moves to that field and places it in edit mode. The symbols next to a field indicate its status. The symbols are fixed and cannot be changed.

Workflow actions and user guidance

If a task is part of a workflow that has started, Select an action to validate is displayed in the user guidance panel.

For more information about defining validations on actions, see Defining a workflow action.

The workflow information card appears above the user guidance and contains summary information.

Neither Select an action to validate nor the workflow information card requires configuration.

Task view overrides can change the user guidance and key items that are displayed. For more information, see Defining a standard stage.

See the IBM OpenPages User Guide for more information about how users work with the user guidance panel.

Applying light formatting to text

You can apply light formatting to text in inline guidance, user guidance, and object text for field guidance.

About this task

HTML and line breaks are not supported.

Procedure

  1. Access a task where you can define text, for example, defining inline guidance for a Task View in the View Designer.
  2. Apply the following formatting to text:
    • To apply italics, enclose text in single asterisks, for example, *text*.
    • To apply bold, enclose text in double asterisks, for example, **text**.
    • To insert a hyperlink, provide a fully qualified URL. For example, https://www.ibm.com displays in a view as a hyperlink named https://www.ibm.com.
    • To insert a hyperlink as a link title, provide it in the [Link title](URL) format. For example, https://www.ibm.com displays in a view as a hyperlink named https://www.ibm.com.
    • To begin a new paragraph, press enter twice.
    • To format text as a bulleted item, enter - (hyphen followed by one space and text) or * (asterisk followed by one space and text).
    • To apply a heading level one, begin the text with ## followed by a space, for example, ## This is a Heading One. Use ### for heading level two, and so on. The maximum is six heading levels.
  3. Alternatively, for inline guidance and user guidance on the JSON tab:
    • Press enter to begin a new line (indented).
    • \n* (\n* followed by one space and text) formats text as a bulleted item.
    • \n\n begins a new paragraph.

Defining a Task View header

A Task View header contains object information and, optionally, an Actions button and fields.

About this task

A task view header is valid only in Task Views.

You can add an Actions button and up to three fields to a Task View header, where the field type can be integer, decimal, currency, simple text, enumerated, user, date, and relationship count. The Task View header has limited space so add fields whose content is short and concise.

If the object type has workflows, the workflow drives the options on the Actions button. For more information, see How users interact with workflows.

The options on the Actions button can be configured to allow a user to enter a comment. The comment can be required or optional. For more information, see Defining a workflow action.

If the object type does not have workflows, you can add one Actions button. The actions facilitate moving the object to the next stage in its lifecycle. The values are from any set of enumerated field values or from the configurable lifecycle transitions for the object. The field type must be enumerated. The label of the Actions button is fixed and cannot be changed.

You cannot add rules to fields in the Task View header.

In this example, the Task View header for the Issue object contains three fields: Issue Status, Priority, and Action Items.

Figure 3. Example of a Task View header for issues
Task View header showing two fields (LCSTatus, Priority) and the Action button.

You can find an example in: SysView-Task-SOXIssue.

On the JSON tab, a task view header is defined in a header element.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Expand the Header panel.
  3. In Lifecycle Action, choose an enumerated field that drives the Actions button.
  4. Add fields to the header. You can drag a field either from the palette or the canvas and drop it into the group.

Applying alternate field labels

You can apply alternate field labels to support localization.

About this task

Alternate field labels are valid in Grid Views, Creation Views, and Task Views.

You can apply labels to fields and UI components in the UI that do not have localized text. The names of sections, inline guidances, and relationship fields are unique to the UI and have no localized text until you create it. For example, a section that is titled Remediation in English has no translated string in German. When you add the German title, a string key is automatically created.

For information about localization, see Localizing text.

You can provide localized text only for labels where an Edit button is displayed.

On the JSON tab, localized values are defined in nameLabels properties for fields and UI components.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Select the UI component, for example, a relationship field or a section.
  3. Enter a value in the label. The value you entered is populated to all languages.
  4. Click Edit.
  5. Enter localized text for one or more languages.

    If it is displayed, click Auto Translate button to populate translated values to languages. For more information, see Translation services.

  6. Click Done.

Results

String keys are automatically created for the localized text you add. If values change in the future, repeat the steps and make the changes.

Defining default filters on Grid Views

You can add default filter rules to a Grid View.

About this task

If you define a default filter, a checkbox with the label you provide displays on the grid. It is selected by default. Only objects that match the filter are displayed in a view.

For quicker system performance, apply a default filter to Grid Views that are defined for object types that potentially display many objects.

Filters can be based only on single value enumerated fields. A Grid View can have only one default filter but it can have multiple rules. An object must meet all rules to match the filter.

Grid Views for object types that have workflows display a filter named Active Only. If you define a default filter rule for an object type that has workflows, it overwrites the Active Only filter.

An example of a default filter is that you want a Grid View for SOXRisk objects to display only objects whose Status field is set to Approved. A checkbox labeled Only display approved items is displayed on the grid.

You can use a filter so that a Grid View for SOXRisk objects displays only objects whose Status field is set to Reject and whose Audit Inherent Impact is 1 or 2. One checkbox labeled Only display rejected items is displayed on the grid.

For more information about rules, see Configuring rules.

On the JSON tab, default filter rules are defined in a defaultFilterRules element in a Grid View.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. On the canvas, click Define default filter.
  3. Specify a Label. This name displays on the grid.
  4. Click New Rule.
  5. In Field, choose the field that the filter is based on. Only single value enumerated fields are listed.
  6. In Matches any of, select the value or values that you want to filter on. If you add multiple values, an object must have one of the values to match the filter.
  7. Click Done.
  8. Add more rules, if needed. If you add multiple rules, an object must meet all rules to match the filter.
  9. Click Create.

What to do next

Publish the Grid View to test the filter. Filters are not supported on the Preview tab.

Adding a referenced content field

A Referenced content field in the View Designer gives you the option to enter a generated API URL that is displayed in the Task View. The URL can be automatically refreshed for users in set minute intervals.

About this task

The Referenced content field is valid in a Task View.

You can choose to automatically refresh the API URL to get updated information, which depends on how many minutes you set it to refresh in the View Designer. You can also choose to set the visibility of the field based on other fields in the view.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Drag a Referenced content field element from the palette to a section.
  3. Enter a value in the Label.
  4. Select an API value from the drop-down list.
    API values in the Referenced content field are provided from the API allowlist setting. For more information about viewing or adding APIs to the allowlist, see API allowlist setting.
  5. Optional: If you want the field to automatically refresh the API's content, set Field auto-refresh to True.
    1. In Time interval (minutes), increase or decrease the number of minutes you want to auto-refresh the API URL.
  6. Optional: If you want the Referenced content field to be hidden or visible based on certain fields or field values, click New Rule. For steps on configuring a rule, see Configuring rules.
  7. Click Done.

Defining default layouts on Grid Views

You can set a default layout for Grid Views.

About this task

You can define Grid Views to display objects in a list or card layout. The layout you select is the default layout that users see. Users can still choose which layout they want to view for better readability of the data. For example, if users were using the Grid View on a small mobile screen, then a card layout would be appropriate.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. On the canvas, click Default layout.
  3. Select Card or List to set the default layout.
  4. Click Done and publish the view.
    Previewing layouts is not available.

Adding a table layout

Add a table layout to organize fields in sections for better readability.

About this task

Table layouts are valid in Creation, Task, and Admin Views.

Table layouts contain fields that users can edit or read. The field attributes are the same as other attributes, such as rules.

Procedure

  1. In the View Designer, click the Design tab.
    The palette is displayed.
  2. Drag the Table layout element from the palette to a section.
  3. Enter a value for Label. This is the title of the table.
  4. Enter a numerical value for the Number of columns.
  5. Optional: Set the Show column labels to True if you want the column title to be visible.
  6. Optional: Set the Show row labels to True if you want the row title to be visible.
  7. Click Columns labels to add the title for each column you want to have in the table. Click Done when you entered every label name.
  8. Click Add for adding rows to the table. Repeat these steps for as many rows that you want to include.
    1. Enter a Row label.
    2. Click Add entry and select a field to display its value for that column. Then click Add.
    3. Click Done after you add all the entries for each column.
  9. Click Done. You can preview the table that you created and publish the view to see the result.