Skip to main content

Project Structure

File Structure​

Here is a brief overview of the project file structure:

FolderDescription
/libOutput location for the Typescript compiler
/node_modulesPackage dependencies
/resourcesPlugin resources
/resources/cssCSS assets
/resources/imagesImage assets
/resources/jsJavaScript assets
/resources/translationTranslation files
/resources/uuxUUX web component library assets
/srcPlugin source code
/src/applicationSource code for the main application component
/src/cardsSource code for card components
/src/mockMock responder configuration and data
/src/pagesSource code for page components
/src/utilsSource code for the data store and other utilities
/index.htmlThe entry point for your plugin

Deployment Assets​

When deploying your plugin the only assets required are:

FolderDescription
/resourcesPlugin resources, including all sub-folders
/index.htmlThe entry point for your plugin

index.html​

The entry point for the plugin is the index.html page. It is here where you must import all required assets and initialise the main application component <uwc-starterkit-application> of your plugin:

<html lang="en">
  <head>
    <title>UUX Starter Project</title>

    <!-- Import UUX web component library assets from Temenos Explorer -->
    <script src="../../BaseJs/unified-ux-web.min.js"></script>
    <script src="../../BaseJs/unified-ux-chart.min.js"></script>
    <link href="../../BaseJs/base.css" rel="stylesheet" /> 

    <!-- Import plugin library -->
    <script src="./resources/js/unified-ux-starter.min.js"></script>

    <!-- Import translations -->
    <script src="./resources/translation/system-translations.js"></script>

    <!-- Set up event listeners and other initialisations -->
    <script src="./resources/js/plugin-setup.js"></script>

    <!-- Import CSS -->
    <link href="./resources/css/application.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Load main application component -->
    <uwc-starterkit-application id="main-application"></uwc-starterkit-application>
  </body>
</html>

Some of the includes shown above are explained in more detail below:

UUX Assets​

Temenos Explorer contains UUX assets needed to utilise the UUX web component library and charts library. To utilise these you must have the following in your index.html page:

<!-- Import UUX web component library assets from Temenos Explorer -->
<script src="../../BaseJs/unified-ux-web.min.js"></script>
<script src="../../BaseJs/unified-ux-chart.min.js"></script>
<link href="../../BaseJs/base.css" rel="stylesheet" />

Translations​

Translations for your application are stored in a JavaScript file separate from the main application source code. This is to allow changes to translations without needing to rebuild your application and to allow for the possibility of translations to be managed externally.

<!-- Import translations -->
<script src="./resources/translation/system-translations.js"></script>

Plugin Setup​

There are a number of setup and initialisation tasks to be performed when your application first loads, such as adding event listeners to listen for changes to Temenos Explorer settings and loading the translations into your application. These are all defined in the following JavaScript:

<!-- Set up event listeners and other initialisations -->
<script src="./resources/js/plugin-setup.js"></script>