<< Building Views with IBM Engineering Lifecycle Optimization – Engineering Insights (ENI) Part Three – Customizing the Look and Feel of Views (The Basics)

In this article, we’ll introduce Actions that allow us to make the views more interactive and dynamic. We will start by creating a new View that we can use as a launchpad, opening the traceability view we created earlier for any selected Story. Then we will add a Story selector to the traceability view itself so that the user can click a Story in that same view and see its traceability. (Typically we would only use one of these options)

As a reminder here is the traceability view we’ve built in the previous articles:

Adding a Launchpad

Let’s now add a second View which will serve as our launchpad. We can add a Story container to it and set the number of columns to (for example) 5 to create a dashboard:

Actions

In the previous article, we used Nodes to customize the look and feel of resources in our view. Nodes also allow us to define Actions (as well as customize the rich hover).

There are two types of Action:

Command: Internal ENI commands such as opening another ENI View (see below)

URL Link: When invoked simply navigates to a web page – either in this web browser tab or in a new one

There are three Commands:

openView: Opens another ENI View, optionally passing in parameters

reloadContainer: Reloads a container on this view – again optionally passing in parameters

reloadConnections: Reloads any custom connections defined by queries in this view

We will use the openView action to open our Story Traceability view. When a view is selected, any available parameters are presented along with their default values (if you recall when we built the traceability view we filtered the initial Story container on a specific ID)

By changing the parameter value to Id (and this is a selector that presents attributes of the underlying resource for the Node) we are saying “When this action is invoked, open this other view and use the ID of the resource we clicked on to invoke it as the new parameter value”

The options at the bottom of the dialog are:

Target: Open the new view in this web browser tab or a new one

Default Action: If selected then the user can left-click a resource to invoke the action (whether selected or not the action always appears on the right-click context menu, using the label specified in the Action Label field)

After applying that we can open a traceability view for any Story simply by clicking it (in View mode) or right-clicking and select Explore Traceability (in either Edit or View mode)

Creating a Dynamic View

Let’s now make the traceability view dynamic – starting by adding a second Story container to it. Note that it is automatically formatted based on the Node we modified for Stories in the previous article:

Next, we can add an Action to the Story, this time using the reloadContainer command. Other than that it is almost identical to how we configured the previous action – instead of selecting a view, we select a container in this view (you can always use the properties of a container to view/change its ID)

Now our user can change the traceability pictures displayed simply by clicking any Story in the same view:

That’s all for now; in the next article we’ll explore a very useful layout feature – grids.

Andy Lapping
Technical Enablement Specialist
Watson IoT & Engineering Lifecycle Management