Skip to main content
Matrix42 Self-Service Help Center

UUX Front-end Workspaces

Overview

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

UUX Workspace

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

Principals

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 then UUX applications. This architecture allows easily integrate custom assets (front-end resources) in UUX, which stay on place after the Product Updates.

The he dynamic loading of the Workspaces is not fully implemented yet, and meanwhile all the resources which needs to be referenced in index.html. After the Product Update the index.html be overwritten, and need to be adjusted again.

The Workspace is just a subfolder, under the system File Folder "/workspaces" in Solution Builder Front-end application.

For the Service Store platform, you can find this folder in "{ApplicationFolder}\WM\workspaces"

By default the "worspaces" folder already keeps the Workspaces required for building standard UUX applications. 

How to Register Custom UUX Workspace

 

  1. Open …\WM\index.html
  2. Add your module.js to <!-- customer:module-js --> section.
  3. Add your js files with your components and services to <!-- customer:ws_js --> section.

index.htm:

<!-- customer:module-js -->
<script src="js/ServiceStore/app.main.js?ver=1.11.2"></script>
<script src="js/ServiceStore/module.js?ver=1.11.2"></script>
<!-- endinject -->
<!-- endbuild -->

<!-- bower:js -->
<script src="bower.js?ver=1.11.2"></script>
<!-- endinject -->
<!-- endbuild -->

<!-- customer:app_js -->
<!-- customer:core_js -->
<script src="js/app.core.all.js?ver=1.11.2"></script>
<script src="js/ServiceStore/app.main.js?ver=1.11.2"></script>
<!-- endinject -->
<!-- customer:ws_js -->
<script src="workspaces/SolutionBuilderAgent/SolutionBuilderAgent.all.js?ver=1.11.2"></script>
<script src="workspaces/ServiceStore/mx.ServiceStore.all.js?ver=1.11.2"></script>
<!-- endinject -->
<!-- endinject -->
<!-- endbuild -->

module.js sample:

(function (w) {
   'use strict';

   w.mx = w.mx || {};
   w.mx.workspacesConfig = w.mx.workspacesConfig || {};
   w.mx.workspacesConfig.modules = w.mx.workspacesConfig.modules || {};
   w.mx.workspacesConfig.modules.add = w.mx.workspacesConfig.modules.add || function (name, config) {
      w.mx.workspacesConfig.modules[name] = config;
   };

   w.mx.workspacesConfig.modules.add('yourModule', {
      name: 'yourModule',
      loadDiFile: true,//true or false. true - you can remap SB services and providers with your owns, using diMap section. false - turn off di for your module.
      diMap: {
         //'mx.shell.BackgroundProcessProvider': 'yourModule.BackgroundProcessProvider',
         //'mx.shell.ActionManagerService': 'yourModule.ActionManagerService',
         //'mx.shell.RoutingConfigurationService': 'yourModule.RoutingConfigurationService',
      },
      config: ['$provide', 'mx.components.DataProviderRegistryProvider', '$httpProvider', '$mdIconProvider',
         function ($provide, dataProviderRegistry, $httpProvider, $mdIconProvider) {
            //init config for your module, using this section
         }],
      run: ['mx.shell.Config', 'mx.shell.UserProfileService',    '$stateParams',    'mx.shell.EventService', 'mx.SolutionBuilderAgent.Http','mx.shell.NotificationService',
         function (config, userProfileService, $stateParams, eventService, http, notificationService) {
            // put there your Rub Blocks
         }]
   });
}(window));


 

  • Was this article helpful?