HELP!
© XpertRule

How do I implement a custom user interface (Dialog HTML Form View)?

Dialog HTML Form View

For Dialog deployment there are two views, an XpertForm view and an Dialog HTML Form view, this is set at the top right on the dialog editor.

image title

In the Dialog HTML Form view, the developer is able to create their own Dialogs using either native HTML input controls or the Viabl Platform "XR Tags". The latter option essentially embeds an XpertForm control with the properties controlled by the attributes of the tag, and automatically includes the control validation scheme employed by the XpertForm view. However if native HTML input controls are used the developer must ensure the correct tying of the Viabl Platform objects, both in the getting and the setting of values, and ensure validation is carried out before continuing inference.

XR Tags

Most XpertForm dialog controls can be represented in the HTML view using Viabl XR tags. All XpertForm control properties are defaulted to the same values as in the XpertForm view and can be overridden by assigning them as attributes of the tags.

<XR> examples:

<xr type="dropdown" tieditem="List1" showlabel="false"></xr>
<xr type="buttonset" tieditem="Bool1"></xr>
<xr type="listbox" tieditem="Bool2" showlabel="false"></xr>
<xr type="label" caption="{List1.description} = {List1}"></xr>
<xr type="slider" tieditem="num2"></xr>
<xr type="date" tieditem="Date1"></xr>
<xr type="textedit" tieditem="Text1" showlabel="true"></xr>
<xr type="buttonset" tieditem="Mlist1"></xr>
<xr type="button" caption="Next2"></xr>

The HTML view presents an additional tool icon to aid the developer in cross checking objects defined in the XpertForm view and defined by XR tags in the HTML view. The suggested route to using the HTML view is that dialogs are rapidly constructed with the XpertForm view for checking the knowledge and then the same dialogs re-developed in the HTML view to achieve the desired result. To make sure objects captured by the XpertForm view are also captured in the HTML view the developer can use the 'HTML view check' to get a report; below is a typical report.

Native HTML

The HTML view allows complete control in building dialogs from native HTML input controls.

Native HTML example:

<script>
  function process() {
    $("#processBtn").css("color", "red");
  }
 
  function doValidation() {
    // Validation code!!
    xpertrule.ok();
  }
 
  xpertrule.onPopulate(function() {
    var str = xpertrule.val("myViablObject");
    $("#myname").val(str);
  });
</script>
<div>
  <label for="myname">Name :</label>
  <input id="myname" name="myname" type="text">
  <br>
  <button id="processBtn" onclick="process()">Call Procedure</button>
  <button onclick="doValidation();">Next</button>
</div>

On This Page