Blogs

1. Why choose AMIS instead of Form Fragments or pure Client Extension?

When developing complex applications on Liferay, you can use the available Form Fragments or build a custom front-end application via Client Extension (e.g., React, Angular). However, AMIS offers a more flexible “low-code” approach. Instead of heavy programming, with AMIS you only need to define the interface in JSON, and the framework will automatically generate the corresponding UI[1]. Some outstanding advantages of AMIS compared to standard form fragments or building a front-end from scratch:

• Fast development speed: AMIS has a rich library of UI components (forms, tables, charts, etc.) and many built-in features (validation, API calls, show/hide logic) without needing manual JavaScript code. You can design the interface by drag-and-drop or JSON configuration, which saves a lot of time writing UI code[2].
• High complexity without much code: With Liferay’s Form Fragments, building multi-step forms or complex custom interfaces may require creating many fragments with limited customization. In contrast, AMIS allows defining complex interfaces (multi-screen, nested components, dynamic display logic) using only JSON. This is especially useful when application requirements change frequently – you only need to update the JSON file instead of redeploying source code.
• End-user friendly: A major advantage of AMIS is that non-technical users can customize the interface. Thanks to the AMIS Editor (a visual editor), users can add/remove components, adjust layouts, colors, etc., and save without touching any code[3]. This is far superior to the traditional way of having to ask a developer to modify a fragment or write new code.
• Compared to a pure Client Extension (React/Angular): If you build a separate front-end application (SPA) and embed it into Liferay via Client Extension, you have full flexibility but it requires a lot of coding, maintenance, and strong front-end skills. AMIS provides a ready framework and editor, minimizing the JavaScript/React code you need to write, while still integrating with Liferay via the Client Extension mechanism. In other words, AMIS lets us focus on configuring the interface and business logic instead of UI implementation details. This is an ideal solution for teams that want to leverage Liferay Objects (low-code backend) combined with a low-code frontend like AMIS.

In summary, AMIS offers flexibility and efficiency for developing complex applications on Liferay: it both reduces the workload for developers and empowers end users to customize the interface. In the following sections, we will delve into the details of how to integrate AMIS into Liferay through a specific example.

2. Create an “AMIS Template” Object in Liferay to store AMIS templates

First, we need a place to store the interface templates designed with AMIS. Liferay 7.4 and above supports the Objects feature – allowing creation of custom objects (similar to database tables) via the UI without coding. We will create a custom object named "AMIS Template" to store information for each AMIS template, including the following fields:

• Label – Name of the template (Text type). This is a descriptive name for administrators to easily recognize each interface.
• Path – Path or identifier of the template (Text type). This field can serve as a unique identifier for the template, or store location information if needed (in this example it can be used to store a unique name for the template for retrieval via API).
• Icon – Representative icon (Text or Picklist type). This field stores the icon name (or icon URL) to illustrate the template, helping users distinguish them (you can use bootstrap icons, Liferay icons, etc.).
• Schema – JSON schema content of the AMIS template (Long Text type). This is the most important part, containing the entire AMIS interface configuration in JSON format.

To create the AMIS Template object: Go to the Control Panel → Objects, add a new Object with Label “AMIS Template” (Plural Label “AMIS Templates”). In the Fields tab, add the fields Label, Path, Icon, Schema with the appropriate data types. After creating the fields, click Publish to publish the object. When the object is published, Liferay will automatically create a database table for it and also generate REST APIs and integrate this object into Liferay’s frameworks[4]. Specifically:

• The system automatically generates RESTful APIs for CRUD operations on the AMIS Template object. According to Liferay documentation, the endpoint will be /o/c/ + the plural name of the object (lowercase, no spaces). For the “AMIS Templates” object, the endpoint will be /o/c/amistemplates. With this API, we can programmatically add, edit, or retrieve templates conveniently.
• The object is also integrated into Liferay’s Info Framework[5], meaning we can create Information Templates and Display Pages for AMIS Template entries just like for Web Content or other assets. We will leverage this in a later step to display the AMIS interface on a page.

TIP: When creating the object, you can enable the option "Show Widget in Page Builder" (in the Object’s Details tab). This option has Liferay automatically create a widget to display a list of AMIS Templates and an add/edit form (based on the default Object View and Layout). However, in this scenario we will primarily use a Content Page + Fragment to display, so this widget may not be necessary. Nonetheless, the fact that Liferay auto-creates a widget shows that the object is ready to be displayed on the site if needed[6].

After publishing, try creating a few AMIS Template entries for testing (you can manually input sample JSON into the Schema field). Now, our Liferay platform is ready to store and manage the interface templates provided by AMIS.

3. Integrate AMIS Editor and AMIS SDK into Liferay via Client Extension

Next, we will integrate the AMIS Editor (AMIS’s visual interface editor) and the AMIS SDK (the runtime library for rendering the interface from JSON) into Liferay. Liferay 7.4+ provides the Client Extension (CX) mechanism which allows embedding arbitrary front-end code into Liferay in a flexible, decoupled way without needing to deploy traditional OSGi modules. We will leverage Client Extension to embed AMIS in a clean manner.

3.1 Setting up AMIS Editor as a Client Extension

AMIS Editor is a front-end application (React-based) that allows users to design interfaces by dragging and dropping and configuring components, similar to an advanced form builder. To embed AMIS Editor into Liferay, there are a few approaches:

• Use a Custom Element Client Extension: This approach involves building a front-end application (React) and registering it as a Custom Element in Liferay. We can create a React project (e.g., using yarn create vite or npm init) and then install the AMIS Editor library. The AMIS Editor library (React) can be found on npm (packages amis and amis-editor), or you can use Baidu’s GitHub demo (aisuda)[7][8]. After you have the React code, package it as a Custom Element (using a build tool and configuring liferay-npm-bundler per Liferay’s Client Extension guidelines). The result is a custom element (for example <amis-editor-app>) that can be added to a Liferay page as a widget.
• Use an IFrame Client Extension: A simpler way is to deploy the AMIS Editor as a standalone web application (running at a separate URL) and then use an IFrame-type Client Extension to embed that URL into Liferay. This approach is less “tightly integrated” with Liferay but is quick if you already have the AMIS Editor running externally. However, embedding an iframe may encounter limitations with session sharing or domain differences.

In the scope of this article, I choose the Custom Element approach so that the AMIS Editor integrates well with Liferay (it can communicate via JS if needed). After creating the Client Extension for the editor, you can add it to the Liferay panel by using the panelCategoryKey property in client-extension.yaml[9], or register it directly as a widget that can be dragged into a page.

The AMIS Editor interface embedded in Liferay (React Custom Element). Users can visually drag UI components from the left panel into the middle canvas, then configure properties in the right panel.

Integrating the libraries: Install the necessary packages in your front-end project, including amis (core SDK) and amis-editor (for the editor UI, if needed). According to community guidance, you can use and customize the React version of AMIS Editor from the aisuda/amis-editor-demo project on GitHub[10]. After installing, import the AMIS Editor component in your React code and integrate it into your application.

Adjusting Save/Load functionality: By default, AMIS Editor allows exporting the JSON schema (for example, the “save” button might just save locally in the browser’s local storage or download a file). To integrate with Liferay, we will modify this function to call Liferay’s API. Specifically, we need to:

• Add “Publish to Liferay” feature: When the user clicks save in AMIS Editor, instead of just saving locally, the application will call Liferay’s REST API to create or update an AMIS Template record. For example, we can make an HTTP POST to the endpoint /o/c/amistemplates/ (or equivalent) sending JSON containing fields: label, path, icon, schema. The Liferay API requires authentication (SSO cookie or token). If the editor is running on a Liferay admin page (already logged in), it can use Liferay.Util.fetch or the standard fetch API (the Liferay session cookie will be sent); here I also insert x-Liferay-authToken into the header [x-csrf-token] for API calls to Liferay. The JSON data can be obtained from the state of the AMIS Editor (the designed schema object). After a successful POST, we can show a notification “Template has been published”.
• Add “Load from Liferay” feature: Allows the user to load a template that was published on Liferay back into the AMIS Editor if needed (in case of error or loss). It will call the API to fetch the JSON schema and load it into the AMIS Editor’s local storage. AMIS Editor can load an existing schema into the canvas, so we just update the local storage then refresh, and the editor content will automatically update.

This customization requires you to modify the React application code of the AMIS Editor (add handlers for the Save/Load buttons). Thanks to the Headless API automatically generated by Liferay, this is quite straightforward – you just need to call the correct REST endpoint. According to Liferay documentation, the REST URL structure for a custom object as mentioned follows the format c/[pluralObjectName][11], and it fully supports GET/POST/PUT/PATCH methods for manipulating records. You can use the API Explorer (<yourhost>/o/api) to view the REST documentation for your object and to experiment with it.

Testing: Deploy the Client Extension to Liferay (if running locally with Gradle, use gradlew deploy or liferay:deploy if in a Liferay Workspace). Add the custom element editor widget to an admin page, or it may already appear in the Liferay panel if you configured it in client-extension.yaml. Try designing a sample interface (for example a registration form, a data table, etc.). Then click “Publish” (if you have customized the editor) or copy the JSON schema from the editor to create a template in Liferay. Open the AMIS Template Object in the Control Panel to check: you will see a new record with the JSON schema saved in the Schema field, along with the associated label/path. Try creating another template and check again. If everything works, we now have an environment to design interfaces directly within Liferay.

4. Create an Information Template to render the AMIS interface on Liferay

In this step, the goal is to display the interface defined by AMIS (JSON schema) on a Liferay page. To do that, we leverage Information Templates – a feature that allows defining display templates (using FreeMarker) for any content in Liferay that supports the Info Framework (including custom objects)[12].

We will create an Information Template for the AMIS Template object and embed code within it to call the AMIS SDK to render the JSON. Steps to proceed:

• Navigate to Site Menu → Design → Templates → Information Templates. Click New to create a new template. Enter a name and select the Item Type as AMIS Template (after publishing the object in step 2, it will appear in the list of content types available for templates[13]). No need to select a subtype (custom objects have no subtype).
• Click Save to go into the FreeMarker template editing screen. Here, we will write a snippet of FreeMarker to retrieve the JSON schema and embed an HTML container along with the AMIS script.

Simple example for the FreeMarker template (illustrative pseudo-code):

Explanation: The variable ${ObjectEntry_objectEntryId.getData()} in FreeMarker represents the AMIS Template object being passed in. The schema attribute is the JSON string of the interface. We use amis.embed(container, schemaJSON) – a function of the AMIS SDK – to render the interface into a specific HTML element[18][19]. The above code snippet directly includes the AMIS SDK from a CDN (cdnjs) to use amis.embed. You can also serve these JS/CSS files from an internal source (e.g., packaged in a Client Extension) depending on your project’s architecture.

After writing the template, click Save to save this Information Template. Now we have a “recipe” to display each AMIS Template record: Liferay will pass the object data into ObjectEntry, and our FreeMarker will generate HTML + script to call the AMIS SDK to display the interface.

5. Display the AMIS Template on a Liferay page via the Content Display Fragment

In the final step, we will create a page and attach the template we just created to an actual webpage. There are many ways to display an object entry on a Liferay page, but the simplest here is to use a Content Page with the Content Display fragment (a built-in Liferay fragment for displaying dynamic content).

Proceed as follows:

• Create a new Content Page or use an existing page on your Liferay site.
• Go into edit mode for the page. From the Fragments panel, find the Content Display fragment (usually under the “Content Display” category). Drag and drop this fragment onto the page.
• Configure the Content Display fragment: In the configuration sidebar on the right, choose Mapping. You will see an option to select the content to display. Here, select AMIS Template as the content type, then choose a specific record (the template you want to display on the page). For example, select the template you designed and saved in step 3.
• After selecting the content, Liferay will automatically apply the corresponding Information Template to render it. If there are multiple Info Templates for the same content type, you can choose which template to use. In this case, we have only the one template created, so Liferay will use it to display. The Content Display fragment will combine the record’s data and the template’s FreeMarker code to produce the final HTML on the page[20].
• Publish the page.

Now, navigate to the page you just created. You will see the application interface rendered exactly according to the AMIS design you created in the editor. All the UI components (form, table, button, etc.) appear and function because the AMIS SDK has processed the JSON schema and generated the corresponding HTML/JS in the browser. For example, if your template is a data entry form, users can fill it out and click Submit (AMIS allows configuring what API the Submit button calls; it can even call a Liferay API or an external API depending on the schema settings). If the template is a table that displays data from an API, AMIS will also automatically fetch the data and display it according to the JSON configuration.

Thus, we have completed integrating AMIS into Liferay: designing the interface with the AMIS Editor and storing it in Liferay, then rendering that interface on a Liferay page. This combination provides a very flexible development experience – both the backend (Liferay Objects) and the frontend (AMIS) are low-code and easily editable and extensible. Admin users can create many “AMIS Templates” for different purposes (e.g., a contact form, a statistics dashboard, etc.) and publish them to the site quickly without needing to build/deploy each time the interface changes.

Conclusion

Integrating the Baidu AMIS UI framework into Liferay brings a fresh approach to building applications: combining the low-code power of Liferay (with Objects, Fragments) and of AMIS (with JSON UI). We can rapidly develop internal applications, complex forms, or data dashboards on Liferay, while also empowering end users to flexibly customize the interface. Hopefully through this sharing, you have gained ideas to apply AMIS in your own Liferay project. Wish you success!