AgileApps: Creating a CUI template using Angular framework

Knowledge base
, , , , , ,
1

Using the Custom User Interface (CUI) template feature available in AgileApps version 10.13.5 and above, you can customize the platform's run-time user interface. The ace-lib components library offers a set of pre-built user interface components that you can use in CUI templates.

Prerequisites:

  • Knowledge of the AgileApps platform - version 10.13.5 and above.
  • Knowledge of Angular framework. - version 8.0 and above.

Using the 'ace-lib' components library:

CUI templates can use the 'ace-lib' library components available in the platform version 10.13.5 and above.

Note: This article uses the 10.13.5 version of the 'ace-lib' component apis.

Handling API 'attributes' and 'events' and from ace-lib components in angular app:

Events: You can handle the events of  ace-lib  components using the angular way of event binding.
Attributes: Transform the attributes of  ace-lib components to camelCase instead of the - in between them.

1. Create an angular project for CUI template:

Step 1: Create an Angular App:

Create an angular CUI template app by following the instructions available at Creating an angular project for CUI template.

Step 2: Creating pages in Angular based CUI template app:

Tip: You can create as many pages (routes) as you wish and add more contents to this angular app.

2. Publishing an Angular CUI template

Step 1: Production build for angular app

Run the following command to generate the production build artifacts:

ng build --prod

On successful build, the production build artifacts are available inside dist/hello-cui directory.

Step 2: Add the template-details.json

Every CUI template should contain a template-details.json with the template name and version. Hence, put this file inside dist/hello-cui/ directory. Following is sample content for the template-details.json

{
  "name":"helloCuiTemplate",
  "version":"1.0"
}

Step 3: Create CUI template zip file

Create a zip file of dist/hello-cui/ directory. Now the CUI template is ready for deployment.

Note: Remove any unsupported file extensions from the zip file.

Tip: Angular apps generally, have a default favicon.ico present in the production built artifacts, you can remove this from the zip file and also its reference from the index.html file. If you want this file to be available, ensure *.ico files are permitted to be uploaded to the tenant, before you start installing this template.

3. Install the CUI template in the platform.

To install the CUI template, follow the documentation for CUI template deployment.

4. Post-deployment activities:

Try accessing the 'access URL'. You should get the default app page up and running.

Tip: If the default page is not loaded, check for any possible console errors. When you do not have any default-route configured in the application, you may see an empty screen. In this scenario, manually activating the route will render the content.

Summary

With the CUI template and ace-lib library, you can convert angular app as CUI template. ace-lib library contains a few ready to use components with SASS based theming support.

The source code used in this tutorial is attached with this article (hello-cui.zip).

hello-cui.zip (660 KB)