The article demonstrates how in case of the use the Layout Designer Control Library can be extended with the new custom Control.
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.
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".
- In folder "WM\workspaces" create a new folder "FleetManagment"
- Create "module.js", for registering new added AngularJS artifacts in the System
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.