We will show you how to use UUX with the npm package.

The idea is that a developer can use UUX as part of the solution to a bigger npm project. A fully kitted out example is the Transact API demo.

In this example we will simply show the essentail configuration and a screen with a subset of the UUX components.

This file is normally in your home folder. Typically ~/username for linux and C:\user\username for windows. It needs to contain the following

# Map your company's NPM scope ("@example") to the private registry URL:
@unified-ux:registry=https://repo.temenos.com/repository/npm-releases/
strict-ssl=false
# Otherwise, all other packages come from the public NPM registry:
registry=https://registry.npmjs.org/
always-auth=false
# Here we specify how the package manager should authenticate to the private registry.
# For security reasons, CI jobs should obtain their tokens from environment variables.
# The exact syntax depends on your registry provider. If a line references an environment
# variable that is undefined, Rush will ignore that line. This avoids producing an invalid
# string that might interfere with a developer who obtains their credentials from ~/.npmrc.
//repo.temenos.com/repository/npm-releases/:_auth="<your access token here>"
//repo.temenos.com/repository/npm-releases/:always-auth=true

A token can be obtained from Temenos, refer to our downloads page

Add @unified-ux/web as a dependency like this. npm install @unified-ux/web Then a new line in package.json will appear

or manually add this dependency in it "@unified-ux/web": "^2021.11.0"

A full list of available versions is shown on our downloads page

The HTML file that would refer to UUX would contain references in the head section like this

<link href="./node_modules/@unified-ux/web/css/base.css" rel="stylesheet">
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="./index.js"></script>

Warning: Take care not to also include UUX as standard resources as this will cause a double registration error.

Dont forget to import any UUX components before use

import "@unified-ux/web/lib/amount-field";
import "@unified-ux/web/lib/button";
import "@unified-ux/web/lib/button-toggle";
import "@unified-ux/web/lib/card";
import "@unified-ux/web/lib/checkbox";
import "@unified-ux/web/lib/checkbox-group";
import "@unified-ux/web/lib/combobox";
import "@unified-ux/web/lib/compact-flagset";
import "@unified-ux/web/lib/date-picker";
import "@unified-ux/web/lib/date-calendar";
import "@unified-ux/web/lib/expandable-card";
import "@unified-ux/web/lib/grid";
import "@unified-ux/web/lib/navigation-rail";
import "@unified-ux/web/lib/text";
import "@unified-ux/web/lib/text-field";
import "@unified-ux/web/lib/grid";
import "@unified-ux/web/lib/select";

We have taken a number of UUX components and simply laid them out in a single column with default values.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>UUX Hello World</title>
<link href="./node_modules/@unified-ux/web/css/base.css" rel="stylesheet">
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="./index.js"></script>
<style>
uwc-card {
--uwc-card-background-color: lightgray;
}
</style>
</head>
<body style="background:#F2F7FD"> <!-- Temenos/Lightest -->
<uwc-card style="background:#F2F7FD"> <!-- Temenos/Lightest -->
<uwc-text variant="h1" color="temenos-dark" style="";>index.html rendering a subset of UUX components using npm</uwc-text>
<uwc-grid container spacing="3">
<uwc-grid xs="12">
<uwc-text-field id="1" label="Name" value="Jane"></uwc-text-field>
</uwc-grid>
<uwc-grid xs="12">
<uwc-amount-field label="Amount" currencyCode="HKD"></uwc-amount-field>
</uwc-grid>
<uwc-grid xs="12">
<uwc-select id="3" label="Nationality">
<uwc-list-item>German</uwc-list-item>
<uwc-list-item>Indian</uwc-list-item>
<uwc-list-item>American</uwc-list-item>
<uwc-list-item>Norwegian</uwc-list-item>
</uwc-select>
</uwc-grid>
<uwc-grid xs="12">
<uwc-date-picker id="4" label="Date of birth"></uwc-date-picker>
</uwc-grid>
<uwc-grid xs="12">
<uwc-badge position="top-right" content="4" color="temenos-primary">
<uwc-icon color="temenos-dark">star</uwc-icon>
</uwc-badge>
</uwc-grid>
<uwc-grid xs="12">
<uwc-checkbox id="7" label="Monthly" checked></uwc-checkbox>
</uwc-grid>
<uwc-grid xs="12">
<uwc-button-toggle options='[{"label":"One","value":"one"},{"label":"Two","value":"two"},{"label":"Three","value":"three"},{"label":"Four","value":"four"}]'></uwc-button-toggle>
</uwc-grid>
<uwc-grid xs="12">
<uwc-checkbox-group name="mygroup" label="My Checkbox Group" helperText="Additional information about the checkbox group"></uwc-checkbox-group>
<script>const group = document.querySelector("uwc-checkbox-group");
group.options = [{ label: "One" }, { label: "Two" }, { label: "Three" }];
</script>
</uwc-grid>
<uwc-grid xs="12">
<uwc-chip-group options='[{ "label": "Chip One" ,"value": "one", "icon": "grade" },
{ "label": "Chip Two", "value": "two", "icon": "grade" }]'></uwc-chip-group>
</uwc-grid>
<uwc-grid xs="12">
<uwc-compact-flagset flags='[
{
"label": "Spell-check",
"value": "spellCheck",
"checked": false
},
{
"label": "Auto-correct",
"value": "autocorrect",
"checked": false
}]'></uwc-compact-flagset>
</uwc-grid>
<uwc-grid xs="12">
<uwc-button trailingIcon contained id="faceButton" size="large" type="reset" icon="restore" label="Reset" style="display:flex; justify-content:flex-end;"></uwc-button>
</uwc-grid>
</uwc-grid>
</uwc-card>
</body>
</html>

Downloads

Transact API demo