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.
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.
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.
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.
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.