Skip to main content
Matrix42 Self-Service Help Center

Car Tracking 2: Introduce Custom Control "Map"

Goal

The article demonstrates how in case of the use the Layout Designer Control Library can be extended with the new custom Control. 

Requirement

The article implements one of the parts of the "Car GPS Tracking" feature, which introduce the new control "Map". The control has to be available in Layout Designer.

 

Implementation

To implement new control we going to follow the steps described in the article "Add New Control to Layout Designer"

Step 1: Find open-source "Map" AngularJS control

The Internet is full of free open-source controls, which could meet your requirements.  The most popular resource for such control is GitHub.com.  Besides, there are hundreds of vendors of the Control Libraries provides various powerful controls for AngularJs.  For our case, we take the first reference to "Map" control for AngularJs which Google found (ng-map control) and try to embed it to Layout designer.

 

Step 2: Create new UUX Workspace

To store all the custom assets of the Application like JS Scripts, Images, CSS, the Solution Builder suggests to create a dedicated folder for your Project under "ApplicationFolder}\WM\workspaces", which are dynamically incorporated to UUX. More about concept please check "UUX Front-end Workspaces".

  1. In folder "WM\workspaces" create a new folder "FleetManagment"
  2. Copy the found control Javascript to just created folder
  3. Create "module.js", for registering new added AngularJS artifacts in the System
  4. Add references to new added Javascript to index.htm. 

Changing index.html is a temporary approach until the dynamic loading of the Custom UUX Workspaces has not been introduced

Step 3: Implement a new AngularJS Directive

 

Step 4:  Create Control Descriptor "Map" 

To let the Layout Designer know about the control, the new object of the Control Descriptor has to be created. 

 

  • Was this article helpful?