To continue with this content, please log in with your Data Access ID or create a new account.
Cancel Data Access ID
You may not be authorized to see this content. Please contact Data Access Europe for more information.
Cancel Data Access Europe
You are not authorized to see this content.
Cancel Data Access Europe
Next lesson:
Sending and Receiving Data

Custom Controls

Lesson 5: DOM Manipulation

This lesson is going to show how to add DataFlex events to interact with the Document Object Model (DOM).

  1. Open WebMsgBuilder.js in the text editor
  2. Add logic to the AddBtn, SendBtn and to the form
    //Add a listener to the buttons and form“click”, this._eAddBtn, this.doAddMessageItem, this);“click”, this._eSendBtn, this.sendMessage, this);, this.onKey, this);
  3. Add functions to make the buttons work
    onKey : function(oEvent) {      
    if (oEvent.matchKey(df.settings.formKeys.submit)) {
    doAddMessageItem : function () {
          var sVal = this._eForm.value;
          this._eForm.value = “”;
          var bOk = this.addMessageItem(sVal);

    addMessageItem : function(sVal) {
          var sMsg = this.get_psValue();
          if ((sMsg.length + sVal.length) < this.piMaxLength) {
                sMsg = this.get_psValue();
                this._eResultArea.value = sMsg;
                return true;
          }     else {
                return false;
    sendMessage : function() {
          //Todo: Implement me!

  4. Return to the web browser and refresh the page.
  5. Enter words into the top field, and either press ‘Add’ or the ENTER key to have them applied to the dialogue box.
  6. This can be done until the maximum length of 10 is reached.