Skip to main content
Matrix42 Self-Service Help Center

Add new Control to Layout Designer

Overview

The article explains how the custom Control can be created and registered in the Solution Builder, to be available in the Layout Designer toolbox for authoring intricate Layouts. Such an use case could be very helpful for cases when the logic of the new Layout cannot be implemented with the range of the standard Control delivered out-of-the-box, or logic could be built with standard tools, but achieved result is not satisfactory from UI or performance perspective

Goal

The article targets the following goals:

  • Introduce a new control in Layout Designer, which allow to render the <iframe> on the form, with dynamically defined Frame URL.
  • Explain the principles of the construction and usage of the simple Control Descriptor
  • Provide an example of the building custom HTML elements with AngularJS Directives

 

Implementation

Step 1: Build Angular Directive

As described in article Control Descriptor to have a new Control in Layout Designer toolbox,  the new Control Descriptor need to be registered in the Solution Builder. For that case, the Simple Implementation Type of the Control Descriptor fits us the best. Literally, we can build the Control Descriptor based directly on standrad HTML Element <IFRAME>  (e.g. Link Control Descriptor), but for the sake of the sample, as well as for supporting more intricate functionality (e.g. accessing IFrame Document DOM) we build the custom HTML element, using the AngularJS Framework. For more details please read the AngularJS Directive guide. 

In code snippet you can see the simple implementation of such control (see it also in Article attachments):

MxIFrameCtrl.$inject = ['$scope', '$sce'];

function MxIFrameCtrl(scope, $sce) {

   var vm = this;

   vm.$onInit = function () {
   };

   vm.frameSource = null;
   scope.$watch('vm.src', function(val) {
      vm.frameSource = $sce.trustAsResourceUrl(val);
   });
}

angular.module('<YourModuleName>').component('mxIframe', {
      controller: MxIFrameCtrl,
      controllerAs: 'vm',
      bindings: {
         src: '@'
      },
      scope: {},
      template: '<iframe src="{{vm.frameSource}}" style="width:100%;height:100%;border: 1px solid lightgrey;"></iframe>'
   });

 

Step 2: Include the "mxIFrame" Control to UUX Front-end 

To make the implemented control be known by UUX application, references to the Front-end assets (e.g. JS libraries or CSS) need to be properly registered in the UUX platform. For the integrating 3-d party modules, the UUX platform uses "UUX Front-end Workspaces". 

Step 3: Create Control Descriptor

Finally the custom control is implemented and registered in UUX SPA application. The final step to make it visible in Layout Designer is a creation of the Control Descriptor. 

IF_General.png

Inheriting from the "Basic Control" the new registered control automatically gives the basic control properties and behaviours

IF_Transform.png

In our AngularJS Directive we have introduced a single inputer argument "src" which need to be also registered in the Control Descriptor

IF_SrcProperty.png

 

Step 4: Use IFRAME control in Layout Designer

Once the Control Descriptor is created, the new Control is displayed in the Layout Designer, and could be drag&dropped to the designing Canvas.

IF_LayoutDesigner.png

  • Was this article helpful?