For my new application, I had to develop a summary page with all alarms in a single location: a tiles page is perfect for this purpose!

Of course, data has to be fetched using AJAX, however I didn’t have a tiles module ready so this was the right moment to start developing one!

A tiles page is implemented like an unordered list:

I just added a data-ajax-source data column on the ui tag (here’s where we will fetch the counts) and a data-value that specifies the row where to get the counts. The AJAX data source will be in the same format as a datatables data source (because I’m lazy and I can reuse the same module hehe):

The tiles widget will be called as this:

that will create a tiles html structure like the one above:

then the magic starts in the sentosa.js module:

okay, this “init” will load the JSON, parse it in a map data structure, then loop through each li element and put the value accordingly to the data-value tag (or put the - symbol if not available). I will then call it every some seconds:

This link looks interesting if I want to build a more professional and reusable plugin: Basic Plugin Creation

¡Hasta pronto!