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


0 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 50 votes, average: 0.00 out of 5 (0 votes, average: 0.00 out of 5)
You need to be a registered member to rate this post.

Disclaimer: As with everything else at NetIQ Cool Solutions, this content is definitely not supported by NetIQ, so Customer Support will not be able to help you if it has any adverse effect on your environment.  It just worked for at least one person, and perhaps it will be useful for you too.  Be sure to test in a non-production environment.

Leave a Reply

One Comment

Tobin Isenberg
Feb 3, 2014
1:49 pm
Active Directory Authentication Automation Cloud Computing Cloud Security Configuration Customizing Data Breach DirXML Drivers End User Management Identity Manager Importing-Exporting / ICE/ LDIF Intelligent Workload Management IT Security Knowledge Depot LDAP Monitoring Open Enterprise Server Passwords Reporting Secure Access Supported Troubleshooting Workflow