Overview

For all non-Windows Player-supported platforms, custom Interface Assets must be built using TypeScript.

Before proceeding, be sure to review Interface Asset general concepts and our introduction to creating your own interface asset. Treat these articles as prerequisites to the content below.

Documentation

The Intuiface CDK can be found on GitHub: https://github.com/intuiface/intuiface-cdk

Pre-requisites

You need to install the following components on your development PC:

• NodeJS (to use NPM to manage the project’s dependencies)

• Visual Studio Code (to code, build, and test)

• Angular (to create visual components)

• Angular-Cli (to use Angular command line)

• Schematics-Cli (to use Angular Schematics)

  • npm install -g @angular-devkit/schematics-cli

Create an Interface Asset

1. Create a folder on your drive, and open that folder in Visual Studio Code. 
2. Open a terminal (Ctrl + ù)

3. Install the schematics

   1. npm install @intuiface/interface-asset

4. Use the schematics to create the Interface Asset and follow the prompt to give a name to your IA. 

   1. schematics @intuiface/interface-asset:create

5. Write your code using the template files created and build your IA

   1. npm run build

6. Copy your first build output into a folder in C:\Users\{UserName}\Documents\IntuiFace\Interface Assets and restart your Composer

Your Interface Asset is now available in your Composer. 

Test and debug your Interface Asset

Platform Premier and Enterprise accounts can use Chrome DevTools in Composer's Play Mode. See that article for details, but the process can be summarized as follows:

• Create an experience in Composer that uses your Interface Asset. 
• In the Project menu of Composer, select "Player on all other platforms (Web, Android, etc.)", then hit play to launch your experience. 
• Once in Play Mode, open the dev tools with Ctrl + Shift + i 

Video Walkthrough

Watch as we create a TypeScript-based custom Interface Asset: