View source for Create a Template

===Template File structure===
Following is the recommended file structure:<br>
{{Note|<br> It is mandatory to have an index.html file and a template-details.json file in the CUI directory.}}

[[File:recommended_directory_structure.png|500px]]

===Boilerplate Template===
'''Creating index.html'''<br>
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.
{{Note|<br>The content present in this boilerplate template file should be present in every HTML file that you create.}}

 <nowiki>
<!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>
 </nowiki>

===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'''<br>
<code>npm run package simple</code>

{{Note|<br> 
:* 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.

:{| border="0" align="left" cellpadding="5" cellspacing="1" 
|
[[Setting up the Local Environment and Workspace|Previous]]
|}
:{| border="0" align="right" cellpadding="5" cellspacing="1" 
|
[[Deployment|Next]]
|}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
:{| border="0" align="Center" cellpadding="5" cellspacing="1" 
|
[[Article Index|Back to Article Index]]
|}