Blogs about Jazz

Blogs > Jazz Team Blog >

Building Views with IBM Engineering Lifecycle Optimization – Engineering Insights (ENI) Part Five – Grids

Overview

If you’ve been following these articles, hopefully you’ve also started to build your own views. In doing so, you may have noticed the lack of alignment tools (at least in the existing release). You may have also found that each container has a Top and a Left property – that you can copy and paste to other containers to align them. Its manual, its hacky, but it works. However, there is a better way; let’s talk about grids.

Grids

You may recall from the previous articles that if you drag an Artifact or a Custom Artifact Element from the palette onto the view, it becomes a container and that container is a grid. As a user you change the Columns property for the container and then ENI lays out the resources row by row. However, at the top of the ENI palette, under the Containers section, there is a specific element called a Grid Layout container:

If we drag that onto a View it becomes an empty container, displaying no resources but with all of the same properties as every other container:

Note: You can actually define a custom query for this container using the SPARQL language and actually populate it with resources. But instead we are going to use it to layout and align other containers.

Nesting Containers

Containers can be nested – they can contain other containers and we can use this to align them by setting properties on the ‘outer’ container. Let’s say we have a traceability view with several linked containers, just as we’ve been building in this series:

If we drag one of these (and remember its easier to drag a resource than it is to try to drag the container) into our empty Grid Container, it gets nested:

If we drag the other containers in then they become nested too. When you drag a container into one that already has a nested container, pay attention to where you drag; if you drag it to the left of an existing nested container, it will go into the column before; if you drag it to the right, it will go into the column after; if you drag it between two existing containers it will slot itself into that column. ENI tries to help you with this by highlighting the container you will be nesting into in purple, and by adding a vertical black line to show you which column your container will end up in:

Caution: Do not be tempted to use multiple select and drag more than one container at a time. At the time of writing this can corrupt the View – save often !

Dragging in the test case container results in three neatly aligned containers:

By adjusting the properties on the outer container, we can easily adjust the spacing and alignment:

By changing the Fill property for all of the containers to an empty value, we can hide the fact that there are nested containers at all and make the resulting view clean and neat:

An Alternative Method for Creating Nested Containers

As a final note I’ll mention an alternative method for creating a grid layout with nested containers. If you have two Artifact containers, drag one onto the other to automatically nest both of them inside a new grid:

If you drag a container onto another container, it will always create a new nested grid – even if the existing target container is already nested – so be careful where you drag (unless another level of nesting is exactly what you want).

As I hope you’ve seen by now, Grids are extremely useful for laying out a view. As a final, slightly more complex example, let’s see a View in User-View mode:

And then the same view in edit mode where we can see all of the containers (note the use of empty grid containers as spacers – taking up a position in the grid and forcing other resource containing containers to ‘move along’)

Thats all for now. In future articles I’ll talk a little more about Custom Artifact Elements and how you can go about designing your own.