Create a Template - Basic

Boilerplate templates provide a foundation for creating Dise templates, eliminating the need to start from scratch. They come pre-loaded with essential elements, which can be easily customized and expanded to suit your specific needs.

See the Boilerplate Templates guide for more information.

Copy a Boilerplate Template

1. It’s recommended to create a new folder for new, custom built templates. This folder should be located alongside the ‘Boilerplates’, ‘PlayerSimulator’ and ‘Samples’ folders.

2. Select a suitable ‘Boilerplates’ template. The ‘SimpleMediaTemplate’ is recommended to help get started.

3. Copy the entire folder of the selected boilerplate template to the new folder you created for your templates.

4. Rename the folder, css and ts files to an appropriate new name.

5. Create a copy of the ‘Debug.html’ and rename it to ‘template.html’.

6. Open the ‘template.html’ and remove the meta tags as described by the comments in the file’s code, ensuring the stylesheet and script are referenced correctly.

7. Create a ‘deployment’ folder in the root of the template folder. You can reference a sample template in the ‘Samples’ folder for an example folder structure.

8. Create a template.json file in the newly created ‘deployment’ folder, the sample manifest can be used as an example.

9. Add build and zip scripts to the ‘package.json’ found in the root folder alongside the main ‘index.html’ file, replacing the relevant names within the <>.

"build-<templateName>": "cd <template/folder/location> && tsc -p . & lessc css/<templateName>.less css/<templateName>.css & lessc --clean-css css/<templateName>.less css/<templateName>.min.css",
"zip-<templateName>": "node build/zipDiseTemplate.js <template/folder/location> <templateName>-CX.zip CX"

• The template is mainly created in the TypeScript (.ts) file that was renamed in the steps above.

• It is advised to read through the remaining guides in the Template SDK before creating a custom template.

Build the Template

1. Ensure the build and zip scripts have been added, see above steps.

2. Run npm run build-<templateName> , replacing <templateName> with the relevant name of the template.

   1. The build script will compile the TypeScript and CSS.

3. Run npm run zip-<templateName> , replacing <templateName> with the relevant name of the template.

   1. The zip script will compress all relevant files into a zip for upload to the CX Portal.