Working with alerts – Part2

Alerts Tutorial

Difficulty: Advanced

Estimated Completion Time: 20 Mins

Version 1.7+

In part2 of this tutorial we will be performing some analysis of the alerts data that has been returned by the web service to help decide what styles and formatting should be applied to the alerts before displaying them. So let’s get started! You will first need to Login to the dashboard builder to start the tutorial.

Step 1 – Style the alerts table with CSS

Once again locate and press the spanner icon for the Dynamic Text widget and locate the Chart Template property. In this property insert the following code snippet at the top of the window before all the existing code. This CSS will apply styling to the the table. Now scroll to the bottom and press update and then close the dialog.

Note: you may need to drag and expand the Dynamic text box widget to accommodate the new styling

[snippet id=”24″]

 

Step 2 – Check & Set the state colour

Once again locate and press the spanner icon for the Dynamic Text widget and locate the Chart Template property. In this property insert the following code snippet at the top of the window before all the existing code. This is a function to check the state field and return a colour depending on its value. We will use this function in the next step of the tutorial to style this column of the table dynamically.

[snippet id=”25″]

Step3 – Call the function to set the colour of the state field

Scroll down through the code in the Chart Template section until you reach the bottom where the code to populate the table is located. Now replace the entire line that reads <td class=’c4′>${a.ServiceState[0]!}…… with the following code snippet. This is a revised version of the previous line of code that incorporates the function to check the state and assign the correct colour.

[snippet id=”26″]

Step4 – Assign CSS style to State column

Now replace the entire line that reads <td class=’c7′>${a.ObjectState[0]!}….. with the following code snippet. This is a revised version of the previous line of code that checks the Obectstate and assigns it to the CSS class “error” if its is “unavailable”. This CSS class will cause the field to display in red. Finally set the “Refresh Interval” property to a value of 4 so that you alerts table keeps updating regularly. Now scroll to the bottom and press update and then close the dialog.

[snippet id=”27″]

That’s all done!.Please enjoy your improved alert table Advanced users should check out the resources below where you will find a link to the Freemarker Template’s documentation.

TIP: You can use Freemarker Templates in the Chart Data Source too!

Freemarker templating can also be used in the Chart Data Source of the edit properties dialog, not just on the Chart Template section.

For extra information, guidance and troubleshooting consult: