Rendering Widgets in Pages

Along with fragments and web content, widgets are one of the fundamental components for building pages in Liferay. Widgets are web applications that provide a wide range of functionalities, enabling you to add search capabilities, navigation elements, interactive content feeds, and more. Liferay provides several widgets out-of-the-box, though you can also develop your own as custom element client extensions. Leveraging widgets is an essential part of designing interactive, engaging web solutions.

Widget templates provide the ability to customize the appearance of widgets without altering their core functionality. By templating widgets, you can ensure that you are providing a consistent user experience throughout your website. As with other templates, the reusability of widget templates accelerates design workflows by reducing duplicated effort and making web applications more accessible to non-technical users.

Like web content templates, widget templates separate the styling and rendering of widgets from the implementation itself. This separation enhances collaboration between designers and developers, and simplifies the maintenance of their respective assets.

Widget templates use a combination of HTML and FreeMarker to determine how widgets are rendered in a page. The HTML controls the static layout of the widget, while the FreeMarker enables the addition of additional business logic to handle dynamic behavior.

Liferay’s out-of-the-box widgets integrate other platform features such as navigation, asset publisher, commerce, search, and more. With widget templates, you can make sure these applications align with your solution’s branding and visual identity. Custom widgets that integrate external applications can also be configured to work with widget templates.

Best Practices for Rendering Widgets

Because widgets are more likely to require dynamic styling and elements, the use of FreeMarker in widget templates is often unavoidable. Liferay recommends a high degree of caution when using FreeMarker, as misuse can lead to performance issues. Injecting too much logic into your widget template will slow down the rendering process.

Avoid calling APIs from widget templates at all costs. Not only do API calls introduce slower rendering times, but they also add the risk of breaking the template entirely if the call is unsuccessful. Any FreeMarker logic that goes beyond conditional checks should be encapsulated in a macro to simplify its use and maintenance.

Conclusion

With widget templates, you can control the look and feel of your integrated web applications without needing to redeploy the widget itself. Widgets are critical for designing rich content solutions with dynamic behavior, and widget templates are an important design element for making them a seamless part of your overall solution. Clarity plans to use a widget template to configure the navigation menu for the distributor section of its website.

Next, you’ll go through the steps to implement and apply this template.