Skip to main content
Matrix42 Self-Service Help Center

UUX Front-End Workspaces

Overview

The article explains what UUX Workspaces are and how they are used for constructing the UUX applications. 

UUX Workspace

The UUX Workspace is a special module (package) of the UUX Application which keeps a bunch of various front-end resources (like Javascript libraries, CSS, images, HTMLs) required for building User Interfaces in UUX platform. Usually, Workspaces play the role of a"sand-box" and keep all necessary assets required for building business applications. 

Principles

The Workspace is just a bunch of files, located in the specific place of the Solution Builder Front-End application. The Solution Builder automatically detects all present Workspaces in a specified location and dynamically loads the UUX applications. This architecture allows you to easily integrate custom assets (front-end resources) in UUX which stay in place after the Product Updates.

The Workspace is just a subfolder, under the system File Folder "<ApplicationFolder>/wm/workspaces" in Solution Builder Front-End application. By default, the "workspaces" folder already keeps the standard Workspaces required for building standard UUX applications.  

As far as many parties could contribute to the "Workspaces" folder, it is recommended to avoid simple names for Workspace folders to prevent conflicts of usage the same name by different parties. Therefore, please use the following pattern when you name your workspace "<CompanyName>_WorspaceName". E.g. "Imagoverum_FleetManagement"

The structure of the Workspace are described in file workspace.json which are placed in the Workspace root folder /wm/workspaces/<workspaceName>/workspace.json. The file has the following format

{  
    description: "Brief description of the Workspace purpose"
    resources: [
        "module.js",
        "mycustomWs.js",
        "CSS\mycustomWs.css"
    ]
}

"description", optional. Keeps the brief information about the Workspace

"resources", the array of relative paths.  Represents the list and the order of the front-end assets to be loaded to the UUX application. If any asset (JS or CSS) present in the Workspace folder but not referenced in the "resources", it will not be loaded automatically. 

On application start the System searches for all workspaces presented in the wm/workspaces folder with the file workspase.json within, and loads one by one the front-end assets (files) specified in the "resources" property.

How to Register Custom UUX Workspace

  1. Create a new folder under  "<ApplicationFolder>/wm/workspaces" with the name matching the pattern "<CompanyName>_WorspaceName"
  2. Add the Frontend resources required for your project to the created Workspace folder
  3. Register your AngularJS artifacts in the SolutionBuilder
    If the new workspace introduces a new AngularJS artifact, like AngularJS Directive, Factory or Service, it needs to be properly registered in the AngularJS module.  For such case, it is recommended to introduce a dedicated AngularJS Module for each Workspace. For that add the download "module.js", edit it and put it to the Workspace folder.
  4. Describe the Workspace  in the "workspace.json" file
    Create the text file "workspace.json" on the Workspace folder and in the property "resources" list the workspace files which need to be loaded to UUX application on start.

 

Examples

The sections provide samples of Workspace usage

Introduce a new Control in Layout Designer

In most cases, the Workspace is used for introducing a new AngularJS Directive which afterward appears in the Layout Designer Toolbox. For more details see Car Tracking 1: Introduce Custom Control "Map"

Extend Icons Library

A few control in Solution Builder, like Icon or Image Picker, allows displaying an SVG icon on a layout. As far as SVG icons are not a file and cannot be just copied to some folder, as to represent itself just CSS class described in CSS file, it is not easy to extend the default Icon library with new images.  The example provides an example of how to achieve that using the Frontend UUX Workspaces

<TODO>

  • Was this article helpful?