Blogs

If you've been using the Liferay CMS, you are probably familiar with a journal article's Categorization tab wherein you can specify the tags and the categories for the journal article. If you aren't familiar with those terms, you should read up on Categorization. Tags and categories are indispensable to a well-defined content architecture, apart from being the most convenient way to organize your content. More here:

https://web.liferay.com/community/wiki/-/wiki/Main/Tags+and+Categories

 

The rest of this article assumes you are familiar with content categories. One little feature of categories that you may not be aware of is that a category can have one or more properties tied to it. If you knew about that already, you can safely skip this post and save yourself the 15 minutes it will take to read. But if you didn't know that, or you did but never really dug into it, read on.

 

Here is a screenshot of my experimental Versified site that lets you browse some of my classical poems. For the purposes of this post, I originated the following requirement:

 

Present all poems in a card layout wherein each card displays the summary of the poem and is color-coded based on the category it belongs to.

 

You can get to the Categories screen by clicking Admin / Content / Categories. As you can see, I created a new vocabulary on there called poems. Then I added a few categories to that vocabulary to represent some forms of classical poetry.

 

But I didn't stop there. A category can have one or more properties, where a property is any arbitrary name-value pair that makes sense for your business needs. So if you were to click the sonnet category you would see that it has one property named color_code which takes a HEXA HTML color code, as below.

 

You can click Edit to see how that property was added, see below.

 

 

In order to let me code to this specific property name, I went ahead and defined that same property for the remaining categories in my poems vocabulary. In effect, Sonnets are to show up in Midnight Blue (our category of interest in this post), Silly Rhymes in Red, Free verse in Dark Gray, Hybrid metered poems in Orange, and so on.

 

I then created some content items and assigned each of them an appropriate category. Screenshots below are provided for those new to Liferay CMS - they simply show how I (1) viewed the list of content (Admin / Content), (2) selected a content item to edit, and then (3) clicked the Categorization tab to select a category in the poems vocabulary. Don't forget to click Save to publish your changes.

 

 

Now to tie it all together. Here's what I know:

 

In coding my custom ADT, I could use an inelegant algorithm whereby we check the category name and compare it with a known list of categories, and then use a color code associated with each category. But such a programmatic approach is inflexible and confusing to maintain. That is what makes the category properties I created above an attractive declarative option.

 

Here is my final custom ADT that addresses the above. Note: I just hacked in styles rather than define clean CSS classes because I honestly don't care - not the point of this post. (Don't judge me.)

 

In particular, this excerpt shows how the color_code property is extracted from a content item's category.

And here is my asset publisher after it was configured to use that ADT.

Now, if I need to change my sonnets to be green instead of blue, I just have to modify the value of the color_code property I defined for the sonnet category.

 

 

And here's how the Asset Publisher renders after that change.

Furthermore, if I need to define a new category (say, limerick), I can create it with its own color_code property and unique HTML color code value, and then simply assign any content to have the new limerick category via the Categorization tab.

 

Wasn't that easy?