Developing reusable views

Edit online

To contain functions or user interface elements that another view or page can use, create a view.

About this task

You can create a view by using the Designer interface of IBM® Business Automation Workflow. The new view can be in a toolkit or in a process application. To reuse the view in multiple process applications, consider creating the view in a toolkit, which makes the view available to all process applications that use that toolkit. However, keep in mind that if someone edits the view, the changes apply to all instances of that view. Fixes can be picked up by all users of the view, but changes can also have unintended consequences in other process applications. To limit your changes to a particular process application, consider creating the view in that process application.

Important: Avoid mixing non-responsive and responsive views in the same view layout.
Creating a view can be an iterative process in which you do steps 3 - 6 in any order. You might start by following the instructions in the order that is listed in the procedure. Based on the results of your test, update the appropriate pages and retest. Continue the iterative process of updating and retesting until you are satisfied with the look and behavior of your view.
Tip: Alternatively, in the Process Designer, you can create a view directly from an existing business object. Click Data > Business Object, then click the twistie next to the business object name, and then click Create View. Complete the wizard to create the view, whose business data is bound to the business object it originated from.

IBM Business Automation Workflow provides sets of views that include standard user interface elements such as text fields, images, and so on. You can use these views to develop more complex views.

Procedure

  1. Click the plus sign next to User Interface and select View from the list of components.
  2. Specify the name of the new view. Unless you are basing the new view on a template, start with a blank view.
    Restriction: The name of the view must be a valid JavaScript ID with the following exceptions: it can have spaces and it cannot have underscores. That is, you can use names like My View or MyView, but you cannot use names like My_View or default; default is a reserved word in JavaScript.
    After you click Finish, the editor opens the new view.
  3. To enable your view to be used in applications that run on multiple devices, select Intended for use on multiple devices either on the New View window when you are creating the view, or in the Overview properties of the view after it has been created.
  4. Under Overview, provide information about the view.
    For information about adding tags, documentation, and icon images, see Providing information about views.
  5. Switch to Behavior and define the behavior for the view.
    For information about adding behavior to your view, see Defining view behavior.
  6. Switch to Variables and define the variables that the view uses.
    For information about defining the data used by the view and defining how users can customize it, see the topics Adding variables to views and User-defined events.
  7. Switch to Layout and define what the view displays to users.
    For information about adding views and other items to the view, see Defining the contents of views.
  8. To apply a custom styling to the view instances displayed by your view, in the Layout properties, add CSS classes and attributes as HTML properties to these instances. Define the CSS classes and attributes in a CSS file and upload that file as an included script in the Behavior properties. As a temporary measure, you can use the inline CSS field to see the impact of the class and attribute definitions as you develop them.
    Important: Ensure that the names of the CSS classes do not collide with the names of the views. A collision can lead to unpredictable styling at run time because the view name is automatically added for scoping purposes to the class attribute of the view wrapper div.
  9. Review the look of the view and how it functions. Based on the review, repeat steps 3 - 7 to make the appropriate adjustments to the view or the items it contains or refers to. Keep iterating through reviews and updates until you have the results that you want.
  10. Test your view:
    1. In a client-side human service or heritage human service, add the view to a page.
    2. Wire the page in the service diagram.
      If you cannot trace from the start node to the page, connect the page to appropriate nodes in the flow.
    3. Bind the variables that the view uses to appropriate data.
    4. Review the configuration for the view and update it if necessary.
    5. To play the client-side human service or heritage human service in Process Inspector or Process Designer, click Run Run.