Skip to main content
Matrix42 Self-Service Help Center

Front-End Workspaces

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


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

Front-End Workspaces management is available from 9.1.3 release version.


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


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

The Workspace is just a subfolder, under the system File Folder "<ApplicationFolder>/wm/workspaces" in SolutionBuilder Front-End application. By default, the "workspaces" folder already keeps the standard Workspaces required for building standard Matrix42 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 is described in file workspace.json which is 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": [
  • 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 application. If an 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 Workspace

  1. Create a new folder under  "<ApplicationFolder>/wm/workspaces" with the name matching the pattern "<CompanyName>_WorspaceName"
    You can use WorkspaceTemplate for an easy start.
  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.
  5. Restart IIS or at least recycle Application Pool "m42svc"


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 Workspaces. 

    "description": "Add new SVG icons to Library",
    "resources": [ "customIcons.js"]

To  install and try the example:

  1. Download  "" and extract to Workspaces folder ("<ApplicationFolder>/wm/workspaces" ).
  2. Restart IIS or at least recycle Application Pool "m42svc" 
  3. Open Icon library both in UUX (e.g. Control Descriptor dialog  ) or in Layout Designer (e.g. Layout Container properties )


Adjusting UUX Appearance

Sometimes the situation requires deep customization of the UUX appearance which cannot be implemented just by Theme configuration. In such cases, the related standard CSS styles could be redefined in the Custom UUX Workspace.

The example shows how to introduce the Dialog buttons hover effect. Download the CustomButton workspace, and extract it to wm/workspaces folder

    • Was this article helpful?