getBoundElement()

Returns the outermost DOM node attached to this field for a particular view.

Return=FieldObject.getBoundElement({ViewName})

Arguments

ViewName—name of a View object. If omitted, the field widget for the default view is used.

Return Value

Return—outermost browser DOM node for the widget with the field instance in the current occurrence. For simple widgets such as the EditBox, it returns the input element. For a composite widget such as a RadioGroup, it returns the wrapper table element, which in turn contains the input elements for the choices. For unsupported widgets, the value null is returned.

Description

The getBoundElement() function is only supported only for HTML widgets. It is not supported for DSP Container widgets.

The getBoundElement() function makes it possible to access the underlying DOM nodes for Uniface fields. Using the returned DOM node, you can find out what the parent or sibling nodes are so that you can, for example apply error classes, or integrate third-party JavaScript libraries or CSS tools.

Important: To make changes to a DOM element that is bound to Uniface objects, use only the Uniface JavaScript data accessing APIs. Do not try to manipulate DOM nodes directly.

Returned DOM Node Examples

  • Widget: EditBox
    Edit box widget and element binding

    Returned DOM Node: 

    <input type="text" id="ufld:FLD1.ENT.NOMODEL:DSP_EDIT.1" value="Editbox" class="class1" style="">
  • Widget: Dropdown
    Dropdown widget showing element binding

    Returned DOM Node:

    <select id="ufld:FLD_DROP.ENT.NOMODEL:DSP_DROPDOWN.2" size="1" class="" style="">
   <option value="one">1</option>
</select>
  • Widget: RadioGroup
    RadioGroup widget showing widget binding to table

    Returned DOM Node:

    <span id="ufld:FLD.ENT.MODEL:DSP.1" style="display: inline-block;" class="">
    <table class="unifaceRadioGroup" style="display: inline-table;">
  <tbody>
    <tr>
      <td class="unifaceRadioInput">
        <input type="radio" value="one" name="ufld:FLD.ENT.MODEL:DSP.1" id="ufld:FLD.ENT.NOMODEL:DSP.1.l0" style="">
      </td>
      <td class="unifaceRadioLabel"><label for="ufld:FLD.ENT.NOMODEL:DSP.1.l0" accesskey="0" style="">1</label>
      </td>
    </tr>
  </tbody>
</table>
</span>
  • Widget: Textarea
    TextArea widget showing element binding

    Returned DOM Node:

    <textarea id="ufld:TEXT_AREA.ENT.NOMODEL:DSP_TEXTAREA.3" cols="20" rows="2" class="" style="">Textarea</textarea>
  • Widget: Attributes Only
    AttributeOnly widget showing element binding

    Returned DOM Node:

    <span id="ufld:FLD_ATTRB.ENT.NOMODEL:DSP_ATTRIBSONLY.2" class="" style="">AttributesOnly</span>
  • Widget: RawHTML
    RawHtml widget showing element binding

    Returned DOM Node:

    <span id="ufld:RAW_HTML.ENT.NOMODEL:DSP_RAWHTML.4" class="color1" style="">Raw HTML</span>

Using getBoundElement()

var fld = uniface.getInstance().getEntity("ENT.NOMODEL").vEntity.getOccurrence(0).getField("FLD1"); 
var elem = fld.getBoundElement(); 
if (elem) {
  var parElement = elem.parentNode;
  parElement.className += " anotherClass"; // where "anotherClass" is a CSS class already defined in the layout
}

Changing Syntax Error Reporting

The following example changes the default reporting of client-side syntax errors. When the client encounters a syntax error, webtrigger onSyntaxError is fired. By default, Uniface sets an error class on the element bound to the field that is in error, and CSS can be used to style it appropriately.

The following code overwrites the default behavior and sets the error class to the parent element of the element bound to the field:

webtrigger onSyntaxError
  javascript
    // Get field in the data structure
    var field = this;
    // Get bound element of field in layout
    var fieldEl = field.getBoundElement();
    // Get parent of element
    var parentEl = fieldEl.parentElement;
    // Set error class on parent element instead of the field element itself
    parentEl.classList.add("-highlight-error-");
    // Prevent default error reporting   return false;
  endjavascript
end

Related Topics