Creating a CUI Template Using Angular Framework

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' component 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' 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 Camel Case instead of the hyphen - in between them.

1. Create an Angular Project for CUI Template

Step 1: Create an Angular App:

You can create an angular CUI template app by following the instructions present on the Creating an Angular Project for the CUI Template page.

Step 2: Creating Pages in Angular-based CUI Template App:

You can create pages in an angular-based CUI template app by following the instructions present in the Creating a Login Page Using the 'ace-login-form' Component page.

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

2. Publishing an Angular CUI template

Perform the following steps to publish an Angular-based CUI template:

Step 1: Production build for angular app

Run the following command to generate the production build artifacts:
ng build --prod
On a successful build, the production build artifacts are reflected in the dist/hello-cui directory.

Step 2: Add the template-details.json

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

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

Step 3: Create a CUI Template ZIP File

Create a ZIP file of the 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 build 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 that *.ico files are permitted to be uploaded to the tenant, before you start installing this template.

3. Install the CUI Template in the AgileApps Platform

To install the CUI template, perform the following steps mentioned in CUI template deployment.

4. Post-deployment Activity

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 renders the content.

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