WTV2 Docs

Forms with <wtui:form>

The <wtui:form> tag can be used to make a form from a Node Type by adding a "type" attribute:

  <wtui:form type="Contact" id="editContactForm"/>

You can add a "call" parameter to indicate which PHP function should be sent the values from the form when it is submitted

  <wtui:form type="Contact" id="editContactForm" call="setContactDetails"/>

The corresponding PHP funtion would need to be something like:

<?php

class ModuleNameOffice {
  public static function setContactDetails($args) {
    // $args will contain the values from the form
  }
}

If the form needs to have submit and cancel buttons you need to add "hassubmitbutton" and "hascancelbutton"

  <wtui:form type="Contact" id="editContactForm" hassubmitbutton="yes" hascancelbutton="yes"/>

You can then make JavaScript handers for the form's "submit", "cancel", and "success" events.

WTUI('editContactForm').on('submit', function() {
  // the submit button was clicked

  // return true to submit the form or false to cancel the form
  if(validationFailed) {
    return false;
  }
  return true;
});

WTUI('editContactForm').on('cancel', function() {
// the cancel button was clicked
}

WTUI('editContactForm').on('success', function(response) {
// the form was successfully submitted.
}

If the form needs extra fields, you can put them between the opening <wtui:form> tag and the closing </wtui:form> tag. eg:

<wtui:form type="Contact">
  <wtui:control type="WTUI.HiddenControl" name="controlname" id="controlid" value="0"/>
</wtui:form>

 

Custom Forms

You can also use the <wtui:form> to make a custom form, by adding form fields, eg

<wtui:form hassubmitbutton="yes" hascancelbutton="yes" call="setPreferences">
  <wtui:control type="WTUI.HiddenControl" name="hiddenControl" value="0"/>
  <wtui:formfield required="yes">
    <wtui:label>Send Email To</wtui:label>
    <wtui:control type="WTUI.PlainTextControl" name="sendEmailTo" id="sendEmailTo" value=""/>
  </wtui:formfield>

  <wtui:formfield required="yes">
    <wtui:label>Username is Email Address</wtui:label>
    <wtui:control type="WTUI.RadioGroupControl" name="usernameIsEmailAddress" value="yes">
      <wtui:option value="yes">Yes</wtui:option>
      <wtui:option value="no">No</wtui:option>
    </wtui:control>
  </wtui:formfield>
</wtui:form>

Controls

The following controls are built in:

WTUI.CheckboxGroupControl
WTUI.DateControl
WTUI.DropDownControl
WTUI.FileControl
WTUI.HiddenControl
WTUI.ImageControl
WTUI.InOutControl
WTUI.PlainTextControl
WTUI.RadioGroupControl
WTUI.RichTextControl

The following controls can use the <wtui:option> tag to specify their options:

WTUI.RadioGroupControl
WTUI.CheckboxGroupControl
WTUI.DropDownControl
WTUI.InOutControl


For Example:

<wtui:control type="WTUI.CheckboxGroupControl" id="numbers">
  <wtui:option value="1">One</wtui:option>
  <wtui:option value="2">Two</wtui:option>
  <wtui:option value="3">Three</wtui:option>
</wtui:control>

If you give a control an "id" parameter, the control can then be referenced in JavaScript through the WTUI object. eg, for the above control

// get the value of the control
var selectedNumbers = WTUI('numbers').getValue();

// set the options for the control
WTUI('numbers').setOptions([{"label": "option 1", "value": 1}, {"label": "option 2", "value": 2}]);

The JavaScript API can be found here:

http://docs.webtemplate.com.au/wtuiapi

Standard WebTemplate Tags may also be used in WTUI templates. The <wt:list> tag can be used to populate options:

<wtui:control type="WTUI.RadioGroupControl" name="contactID">
  <wt:list type="Contact" source="/Contacts">
    <wtui:option value="[wt:__guid]">[wt:First Name] [wt:Last Name]</wtui:option>
  </wt:list>
</wtui:control>

Fieldsets

<wtui:fieldset text="User Details">
  <wtui:formfield>
    <wtui:label>First Name</wtui:label>
    <wtui:control type="WTUI.PlainTextControl" name="contactFirstName"/>
  </wtui:formfield>
  <wtui:formfield>
    <wtui:label>First Name</wtui:label>
    <wtui:control type="WTUI.PlainTextControl" name="contactFirstName"/>
  </wtui:formfield>
</wtui:fieldset>

Custom Controls

If none of the built in controls are suitable, you can create a custom control. To create a custom control, create a folder called 'components' under the office folder. The 'office' folder will then contain:

Then create a JavaScript file within the components folder. The JavaScript file should contain an object which has at least the following functions

The control then needs to be registered using WTUI.registerComponentType(componentName, objectName);

Example: a simple control in components/simpleControl.js

 

WTUI.SimpleControl = function() {

  this.init = function(args) {
    this.m_name = this.m_id;
    if(args.name) {
      this.m_name = args.name;
    }

    this.m_value = '';
    if(args.value) {
      this.m_value = args.value;
    }
    this.m_originalValue = this.m_value;
  }

  this.getHTML = function() {
    var html = '';
    var value = '';

    if(this.m_value) {
      value = this.m_value;
      if(this.m_value.escapeHTML) {
        value = this.m_value.escapeHTML();
      }
    }

    html += '<input type="text" id="' + this.m_id + '" name="' + this.m_name + '" value="' + value + '"/>';
    return html;
  }

  this.setValue = function(value) {
    this.m_value = value;
    $('#' + this.m_id).val(value);
  }

  this.getValue = function() {
    return $('#' + this.m_id).val();
  }

  this.reset = function() {
    this.setValue(this.m_originalValue);
  }

}

WTUI.registerComponentType("WTUI.SimpleControl", WTUI.SimpleControl);


The control can then be used in a template like this..:

<wtui:form>
  <wtui:formfield>
    <wtui:label>Please enter a value</wtui:label>
    <wtui:control type="WTUI.SimpleControl" name="simpleControl"/>
  </wtui:formfield>
</wtui:form>

 

or when editing the attribute for a node type the control can be entered into Attribute Settings using 'wtuicontrol'

eg

wtuicontrol=WTUI.SimpleControl