NetIQ Operations Center - Customize a Container Layout

over 7 years ago
I'm sure that most of you are familiar with the default layout (see below) where we use the Gradient Bubble nodestyle and show the elements in a tree manner in the Layout view. I have blogged on how to change the default nodestyles (element icon) for individual views as well as changing the default globally. Today I'm going to discuss a new thing I learned about Containers.


Containers are a nice way to group element children in a row/column view. Typically I go into Edit mode, right click on the white background space and clear the drawing. I then right-click on the background, select Customize, Container, Add, Child Container. The results (below) show how it only shows the children elements. You can change the background color on the container (tip: right-change group, select gray background area and then use pallete to change the color).


Within the Container settings, specifically the one the controls the Grid Layout (Customize, Child Container, Layout, Adjust Grid Layout), you can set the amount of columns for the Container. While this is fine for most views, there are times that you need this setting to be a bit more dynamic. For instance, suppose you set up a Nodestyle for your server view (IE: all servers of a specific type in a Container). In some cases when you only have 8 child elements, you may want to have 3 columns. For another view, where you have 50 servers (child elements), you may want to have 10 columns. Unfortunately, the out of box column setting is a fixed setting.

While in edit mode, if you look at the source SVG code, you will see a fragment similiar to the one below.

<bind:children self="false" id=".g.143e8b29c42">
<bind:layout gap="10" name="grid" columns="3" id=".g.143e8b29c4a" align="center"/>

The first SVG tag (bind:children) is the one that grabs the element children. The next tag (bind:layout) is the one that controls how many columns are in the Container, the one above is set to 3 (columns="3").

The first step is to get rid of the ending of the tag (the "/") at the end of the bind:layout line.  I will then add an additional tag inside of the bind:layout, specifically to set the columns dynamically based on the amount of children. Here is what the final result looks like:

<bind:children self="false" id=".g.143e8b29c4c">
<bind:layout gap="10" name="grid" columns="2" id=".g.143e8b29c52" align="center">
<bind:value attr="columns"><![CDATA[var cols = 4
if( element.children.length < 6 )
cols = 2
if( element.children.length > 5 )
cols = 3
if( element.children.length > 7 )
cols = 4
if( element.children.length > 15 )
cols = 5

In the example above, the bind:children is unchanged. The bind:layout has the close ("/") removed. Next we add a bind:value, specifically the columns (attr="columns") setting. We then jump into java script.  The java script sets a var to have a default column of 4 (ie: var cols=4). Then based on the amount of children elements, it sets the cols var to a different value. At the very end, the last line returns the results of cols (ie: cols]></bind:value>). The /bind:value closed the bind:value SVG tag, then layout and children tags are closed.

At this point depending on the amount of children, the columns in the Container are set to 2, 3, 4 or 5. That's it, the only other thing I would typically do is change the nodestyle, maybe adjust the gap between icons/elements, etc.   Those changes are under the Customize, Child Container menu options.

Have fun with this and remember, try things out on a test system, not production

Comment List
Related Discussions