Designing User Interfaces

Designing user interfaces for applications is integral to creating intuitive and engaging digital experiences. Liferay DXP provides tools for creating dynamic and responsive user interfaces for your custom solutions. You can use page builder features like fragments and widgets in site pages to design forms, display data, and more. If needed, you can define FreeMarker templates to modify how an object’s widget and entries render in site pages or use client extensions to create custom page widgets. Together, these tools can help create seamless and engaging site experiences for your users.

Here we’ll explore how Clarity can implement custom designs for their international distributor application. For a comprehensive, step-by-step guide on designing objects-based user interfaces, consider taking the Mastering Data Modeling with Liferay Objects course.

Form Pages

Out of the box, Liferay provides object layouts for creating entries. While this display is serviceable for administrative users, they have limited customization options. To create forms for end-users, you should leverage Liferay’s page builder features, including form fragments. These forms can be simple, single step forms or complex multi-step forms.

Build Clarity's multi-step form using display page templates and fragments.

You can use display page templates and fragments to quickly implement multi-step forms. Display page templates define each step, while the step indicator is a custom fragment that leverages the Clay multi-step nav component. The remaining functionality uses OOTB fragments.

Create success pages using Liferay's page builder features.

Using the same tools, Clarity can design a custom success page for users once they submit the form. This above design directs users to view and edit their application or return to the site’s home page.

Data Overview Pages

Administrative users often need a way to review submitted entries. By default, object views display these entries in a simple table with limited customization options. To create a custom overview page, you can build a more tailored design using collections, fragments, and search widgets. Alternatively, you can add the object’s widget to a page and style it using a FreeMarker template.

Build a data overview page using collections, fragments, and search widgets.

Display and Edit Pages

Next, you need a way to display individual entries. This display should enable users to edit their submissions and give internal teams a way to quickly evaluate the records. You can implement this type of design using display page templates and fragments.

Build entry display and edit pages using display page templates and fragments.

Conclusion

Congratulations! You’ve completed Module 10: Extending Liferay DXP. Throughout this module, you’ve learned best practices for extending the Liferay platform with objects, client extensions, and the Liferay Marketplace. You also explored how to implement object-based business logic and engaging user interfaces.

Next, you’ll review what you’ve learned before concluding the course.