Custom Tags for Organization Charts

We have created an interesting example of Backbase Custom Tags. Its goal is to simplify the creation of complex HTML structures by creating tags that have a higher abstraction level.

The example is an organization chart: this is usually somewhat complex to create in HTML and CSS, and requires quite a lot of HTML code: it's difficult to maintain, and it's easy to make mistakes. Therefore we created two shortcut tags 'orgchart' and 'subordinate' that can be used like this:

<b:orgchart b:label="Boss">
     <b:subordinate b:label="My subordinate">
         <b:subordinate b:label="My sub-subordinate"></b:subordinate>
     </b:subordinate>
     <b:subordinate b:label="My subordinate">
         <b:subordinate b:label="My sub-subordinate"></b:subordinate>
         <b:subordinate b:label="My sub-subordinate"></b:subordinate>
     </b:subordinate>
     <b:subordinate b:label="My subordinate"></b:subordinate>
</b:orgchart>

And this is how it looks (we used minimal styling):



The 'orgchart' and 'subordinate' tags are translated to HTML on the client-side, using the <s:htmlstructure> tag. Please have a look at the example: www.backbase.com/samples/grauw/orgchart/: use View Source to see how it's done.

The Custom Tags are defined here:
www.backbase.com/samples/grauw/orgchart/b-orgchart.xml (again use View Source).

And this is the CSS: www.backbase.com/samples/grauw/orgchart/b-orgchart.css

Of course, this is just one example where custom tags can be useful. Everyone can make their own custom tags, for whichever application. And maybe the best thing: slowly we are getting more of these examples on the Backbase Forum, creating an exchange of useful custom tags.