Create a Template

From AgileApps Support Wiki

Template File structure

Following is the recommended file structure:

Notepad.png

Note:
It is mandatory to have an index.html file and a template-details.json file in the CUI directory.

Recommended directory structure.png

Boilerplate Template

Creating index.html
This is the boilerplate template you can use to create your CUI. Read the comments in this file to understand how to use this template to create a CUI.

Notepad.png

Note:
The content present in this boilerplate template file should be present in every HTML file that you create.

<!doctype html>
<html lang="en">
 
<head>
  <base href="./">
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
  <link rel="stylesheet" href="/ace-lib/styles.css" />
  <link rel="stylesheet" href="/ace-lib/assets/themes/default/css/main.css" />
  
  <!--CUI specified css files -->
   <link rel="stylesheet" href="assets/css/styles.css" />
 
  <title>My Custom User Interface for AgileApps </title>
</head>
 
<body>


    ************************************************************************************************
    *                                                                                              *
    *                                                                                              *
    *                                                                                              *
    *                 <!-- The Custom HTML template content goes here -->                          *
    *                                                                                              *
    *                                                                                              *
    *                                                                                              *
    ************************************************************************************************
    
 
  <!-- platform assets -->
  <script type="text/javascript" src="/ace-lib/runtime.js"></script>
  <script type="text/javascript" src="/ace-lib/es2015-polyfills.js" nomodule></script>
  <script type="text/javascript" src="/ace-lib/polyfills.js"></script>
  <script type="text/javascript" src="/ace-lib/scripts.js"></script>
  <script type="text/javascript" src="/ace-lib/vendor.js"></script>
  <script type="text/javascript" src="/ace-lib/main.js"></script>
  
 <!--CUI specified JS files -->
  <script src="assets/js/scripts.js"></script>
 
</body>
 
</html>
 

Package a Template

Archive the developed CUI

After you create the template, you have to package it for deployment. Archive the template you create by running the following command:

Archive command
npm run package simple

Notepad.png

Note:

  • See the 'package.json' file to know the build commands under 'scripts'.
  • simple is the directory name in ~agileapps-cui/src**
  • If you change the directory name or create a new directory, use that value instead of simple. The packaged CUI template is available in the “~/agileapps-cui/dist/” directory.
After you run this command, the application prompts you to provide the following details:
  • template package name: If you do not provide a value here, the default value simple is applied.
  • template package version: If you do not provide a value here, the default value 1.0 is applied.

Deploy the package

After you package the template, the next step is to deploy the package. Learn more about deployment into AgileApps in the next page.

Previous

Next


Back to Article Index