Catalog Item Long Descriptions

introduction

In a previous article, Visualizing Azure Templates in CloudForms, we mentioned that the Long Description in the Catalog Items can accept raw HTML. In that case, we used the functionality to add a link, but there are a lot of other possibilities.

what we're after

Essentially we're after more elegant and flexible service catalog descriptions. If you just type a description, along with a long description, you'll get something like this:
basic_text
This is fine, it's informative and simple. But we could improve on it. Imagine a more complex service, one with multiple components, but instead of simply listing everything, we could present it in table format. Something like this:
multi_tier_service_description_1

the code

Really there isn't much limit on what you can do with these other than your imagination and HTML skills. I'm a bit lacking in the latter, so these are just some examples.

For something that just adds a bit of aesthetic sugar, you could try changing the color of the text, or even the background. A long description like this, for example:

<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; padding:10px;">
<h2>JBoss</h2>
<p>This is my service</p>
<p>There are many like it, but this one is mine</p>
</div> 
</body>
</html>

Will give you something like this:
my_service
It might not be what you're looking for, but it's an option.

The code for the table that we showed above would look something like this:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>
<h2>Multi-Tiered Service Description</h2>
<table style="width:100%">
  <tr>
    <th>Component Name</th>
    <th>Component Function</th>		
    <th>Description</th>
  </tr>
  <tr>
    <td>VM 1</td>
    <td>Apache Web Server</td>		
    <td>Front End LB</td>
  </tr>
  <tr>
    <td>VM 2</td>
    <td>JBoss</td>		
    <td>Application Server</td>
  </tr>
  <tr>
    <td>VM 3</td>
    <td>MariaDB</td>		
    <td>Database</td>
  </tr>
</table>

</body>
</html>

Simple. You can even make little changes to improve or customize the look. A little background color, for example, can add a nice touch. Something like this:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
    background-color: #f1f1c1;
}
th, td {
    padding: 8px;
}
</style>
</head>
<body>
<h2>Multi-Tiered Service Description</h2>
<table style="width:100%">
  <tr>
    <th>Component Name</th>
    <th>Component Function</th>		
    <th>Description</th>
  </tr>
  <tr>
    <td>VM 1</td>
    <td>Apache Web Server</td>		
    <td>Front End LB</td>
  </tr>
  <tr>
    <td>VM 2</td>
    <td>JBoss</td>		
    <td>Application Server</td>
  </tr>
  <tr>
    <td>VM 3</td>
    <td>MariaDB</td>		
    <td>Database</td>
  </tr>
</table>

</body>
</html>

Gives us this:
multi_tier_service_description_2
This is the view from the Service catalog, but the view from the Catalog Item itself, under the details tab, is also quite nice:
especially_nice_under_cat_item

When developing descriptions like these, it can be a bit frustrating to have to edit and save your long descriptions to see how your work is coming along. I like to use the Try It editor from w3schools. That way you can see your results quickly and get close to what you're looking for before building the catalog item in CloudForms. The site is also a great reference for HTML syntax, and a great place to explore things like tables and other ideas.

And that's the basic idea. If you can do it with HTML, you can use it to improve your long descriptions. Keep in mind, however, that just because you can, doesn't mean you should....

never_do_this