Creating a custom page with widgets

Edit online
Draft comment:
This topic is shared by BAW, CP4BA. Last updated on 2025-03-13 12:15
Draft comment:
This topic was viewed 2 times since its publication
IBM® Business Automation Workflow includes a set of pages that you can use in your solution. You can customize the pages to meet the requirements of your solution. You can use the custom pages as templates to create extra pages to provide customized views for different roles, case types, and activities.

About this task

By creating custom pages, you can tailor the Case Client user interface to meet specific requirements. For example, you might want two versions of the Case Details page, one for managers and one for caseworker. In the version that is, intended for managers, you include the Timeline Visualizer widget to display the extended case history. In the version that is intended for caseworker, you do not include the Timeline Visualizer widget.

You create and test new pages in your development environment. When you deploy your solution to a production environment, the new pages are automatically copied to that environment.

Tip: For best results when you are designing pages, use a monitor that is the same width and resolution as the monitors that your users are using at run time.

Procedure

To create a page:

  1. Open the solution in Case Builder.
  2. On the Pages tab, add a page of one of the following page types:
    Solution
    Creates a blank page.
    Case Details
    Creates a page that is based on the Case Details page.
    Add Case
    Creates a page that is based on the Add Case page.
    Split Case
    Creates a page that is based on the Split Case page.
    Add Activity
    Creates a page that is based on the Add Activity page.
    Work Details
    Creates a page that is based on the Work Details page.
    Custom Activity Details
    Creates a page that is based on the Custom Activity Details page.

    To create a page that is based on one of the other workflow pages or on a custom page, click the Copy icon for that page.

  3. Click the page name to design and configure the page layout.
  4. In Page Designer, design the page layout:
    1. On the toolbar, click the Page Options icon to open the Page Options window, where you can select and configure the page layout. Click OK.

      You can choose a layout that has a set configuration of rows, columns, or both. Certain layouts also have collapsible sections, which can be configured as collapsed by default to change how the page is displayed initially to the user. Alternatively, you can choose the Free Form layout. With this layout, you use the Column and Tab containers to configure the page exactly as you need.

    2. If you selected the Free Form layout, drag containers onto the page.
      Restriction: If you add separate properties widgets to different tabs in a tab container of a Free Form layout, the erroneous properties might not be visible. This behavior occurs when an invalid value is present in properties of the properties widget of a background tab.
    3. Drag widgets into the appropriate containers on the page.
      Restriction: The solution pages do not monitor for unsaved changes in the widgets that are on the page. To avoid potential loss of user input, do not put the Properties widget, Form widget, or Viewer widget on these pages.
    4. Edit the settings for the widgets.
    5. Edit the wiring for the page and the widgets, if that is needed.
  5. Associate the page with the role, work item, or case type:
    Component Action
    Case type Specify the default page layouts that you want to use for your case type:
    1. On the Case Types tab, open the case type.
    2. In the Default layout for Add Case page drop-down list, select one of the following page or client-side human service options:
      • Add Case
      • Add Case Form
      • Add Case Default (Human Service)
      • Add_Case_Custom_name (Human Service) (if any)
    3. In the Default layout for Split Case page drop-down list, select the following page option:
      • Split Case
    4. In the Default layout for Case Details page drop-down list, select one of the following page or client-side human service options:
      • Case Details
      • Case Details Form
      • Case Details Default (Human Service)
      • Case_Details_Custom_name (Human Service) (if any)

    To override the Default layout for Case Details page selection for a specific role, click Add Role. Select the page or client-side human service that you want to associate with the role.
    Role Specify the new page layout as a Solution page for a role:
    1. On the Roles tab, open the role.
    2. On the Pages tab for the role, click Assign Page and select the page.
    Work item Specify the new page layout as the default Work Details page for a step in any Content Cortex process activity:
    1. On the Case Types tab, open the case type.
    2. On the Activities page, open the Content Cortex activity that contains the step.
    3. Open the activity in Step Designer and select the step.
    4. In the Step Properties area, select the page from the Page Layout list.