Custom Controls with Custom Properties

You can create a custom control with a custom property (which is actually a custom control).

Here the Autocomplete custom control makes use of the PropertyLookup custom control as its custom property (URL).

1. Create a custom control (PropertyLookup) to take inputs from the secondary page.

   The PropertyLookup control is an internal control, which is a control whose Designer Category is not set and therefore does not appear in the Toolbox of the Forms Designer.

   The PropertyLookup control is a read-only text box with an icon on the right and two properties:

   – ImageClass for showing an icon on the right

   – ClickFunction for handling the icon click event

   The PropertyLookup.css CSS file implements the ImageClass property and the PropertyLookup.js JavaScript file implements the ClickFunction property.

2. Create another custom control (Autocomplete) and use the first custom control (PropertyLookup) as a custom property (URL).

   1. To use the PropertyLookup control as a property (URL) for the Autocomplete control, code in the Autocomplete.cs control initialization file as follows:

      [DesignerProperty(376567, Categories.Behaviour, typeof(PopupProperty), "")]

      [Binding(883100, "Skelta.Forms.Core.CommonObjects.CommonStringBindingProperty")]

      public string URL

      {

      get;

      set;

      }

      Here the PopupProperty refers to the PopupProperty.cs control initialization file, which renders the property (URL) for the Autocomplete control using the IControlProperty interface.

   2. To use an inline frame (iframe) in the property page, code in the PropertyLookup.js JavaScript file as follows:

      // Here PropertyLookup.htm is placed in the NextGen folder.

      parent.document.getElementById("propertyLookupFrame").src = "PropertyLookup.htm";

      parent.document.getElementById("propertyLookupFrame").attributes["data-skfsw"].value = 1;

      

      Here the propertyLookupFrame renders the inline frame using the PropertyLookup.htm HTML file. The attributes["data-skfsw"].value = 1 ensures the inline frame is shown on top of the forms control property page.

   3. To access the editPage View Model, code in the PropertyLookup.htm HTML file as follows:

      var editPageVm = window.parent.frames["editframe"].viewModelObject ? window.parent.frames["editframe"].viewModelObject : window.parent.frames["editframe"].contentWindow.viewModelObject;

   4. To close the inline frame on click event, code in the PropertyLookup.htm HTML file as follows:

      parent.document.getElementById("propertyLookupFrame").attributes["data-skfsw"].value = 0;

      parent.document.getElementById("propertyLookupFrame").attributes["src"].value = "";