Imprint
2021 September Release

JavaScript FunctionsPermanent link for this heading

An overview of all JavaScript functions that can be used in the context of GUI controls can be found here: https://help.appducx.fabasoft.com/index.php?topic=doc/GUI-Controls-API/index.htm.

Attention: JavaScript functions not listed on that page are only for internal use.

In this chapter you can find examples for some of these functions.

Five Functions at a Stroke Permanent link for this heading

In the following example you are going to create a control that allows calling an application. It demonstrates the usage of GetId, GetObject, GetUrl, GetElement, StartOverlayApp and a user-defined helper function.

Example

app.ducx Object Model Language

objmodel FSCCONTROLSAMPLE@1.3285
{
  import COOSYSTEM@1.1;
  import FSCVAPP@1.1001;
  import COOATTREDIT@1.1;

  fields {
    Object obj;
    string url;
  }

  class CtrlSampleString : BasicObject {
    common = true;
    string startapp;
  }

  // creates an instance of a control
  instance ControljQuery CustomStringControl {
    // the control should be applicable for integer properties
    controltypes = { STRING }
    // provides the JavaScript implementation of the control
    lookelements<lookbasename, COOSYSTEM@1.1:component, lookcontent> = {
      { "rendercustomstring.js", FSCCONTROLSAMPLE@1.3285,
        file("resources/rendercustomstring.js") }
    }  
  }
}

app.ducx User Interface Language

userinterface FSCCONTROLSAMPLE@1.3285
{
  import COOSYSTEM@1.1;
  import COOATTREDIT@1.1;
  import COODESK@1.1;
  import COOSEARCH@1.1;
  import FSCVAPP@1.1001;
  import FSCEXPEXT@1.1001;

// when reading or editing the FormCtrlSample form should be used
  extend class CtrlSampleString {
    forms {
      ReadObjectAttributes {
        FormCtrlSampleString;
      }
      EditObjectAttributes {
        FormCtrlSampleString;
      }
    }
  }

  // a form displaying the integer property
  form FormCtrlSampleString {
   inherit = false;
   formgeneric = false;  
    formpage PageCtrlSampleString {
      dataset {
        startapp;
      }

      layout {
        row {
         CustomStringControl startapp {
            colspan = 4;
            labelposition = left;
          }
        }
      }    
    }
  }

  // a form that is used for the called application
  form CustomDataForm {
    audience = enduser;

    formpage CustomDataPage {
      audience = enduser;

      dataset {
        field obj {
          get = expression {
            containerobject;
          }
        }
        field url {
          get = expression {
            ctrlurl
          }
        }
      }

      layout {
        row {
          obj {
            colspan = 4;
            labelposition = left;
          }
        }
        row {
          url {
            colspan = 4;
            labelposition = left;
          }
        }
      }
    }
  }
}

app.ducx Use Case Language

usecases FSCCONTROLSAMPLE@1.3285
{
  import COOSYSTEM@1.1;
  import FSCVAPP@1.1001;
  import FSCVENV@1.1001;
  import FSCVIEW@1.1001;

  // call the application
  usecase ShowCustomControlData(Object containerobject, string ctrlurl) {
    variant Object {
      impl = application {
        expression {
          ->CustomControlDataDialog;
        }

        dialog CustomControlDataDialog {
          form = CustomDataForm;
          target = coouser;
          edittype = EDITTYPE_VIEW;
          overlaysize = OVERLAYSIZE_SMALL;
          nextbranch;
        }
      }
    }
  }

}

rendercustomstring.js

function jQueryFSCCONTROLSAMPLE_1_3285_CustomStringControl()
{
  this.OnRender = function CustomStringControl_OnRender(output)
  {
    // use GetId to get an ID that is unique on the whole page
    output.Push("<a id=\"" + this.GetId("StartOverlayApp") + "\" href=\"#\">Start App</a>");
    output.Push("<div id=\"" + this.GetId("MessageBox") + "\"></div>");
  };  

  this.OnLoad = function CustomStringControl_OnLoad()
  {
    var ctrl = this;
    var args = {
      // the COO address of the current object
      containerobject: this.GetObject(),
      // concatenates the web service URL and the given URL part
      ctrlurl: this.GetUrl("/my/url")
    };

    fscjq("#" + this.GetId("StartOverlayApp")).click(function() {
      // start the overlay application
      // you have to replace "COO.1.3285.3.10" with your application's address
      ctrl.StartOverlayApp("COO.1.3285.3.10", args, ctrl.OverlayAppCallback);
    });
  };

  // this function gets called when closing the overlay
  this.OverlayAppCallback = function CustomTestControl_OverlayAppCallback()
  {
    // get the element defined by GetId("MessageBox")
    this.GetElement("MessageBox").innerHTML += "<br/><b>Overlay Callback</b>";
  };

}

You can click “Start Overlay App”. The overlay shows the passed parameters.

After clicking “Next” the callback function modifies the HTML and prints “Overlay Callback”.

Fun With Object ListsPermanent link for this heading

In the following example you are going to create your own object list. It demonstrates the usage of GetInit, GetId, GetArgs, GetSymbolPath, GetValue, SetValue and Refresh.

Example

app.ducx Object Model Language

objmodel FSCCONTROLSAMPLE@1.3285
{
  import COOSYSTEM@1.1;
  import FSCVAPP@1.1001;
  import COOATTREDIT@1.1;
  import FSCVENV@1.1001;
  import FSCEXPEXT@1.1001;

  class CtrlSampleObjectList : BasicObject {
    common = true;  
    Object sourceobject;
    Object[] objectlist;
  }

  // creates an instance of a control
  instance ControljQuery CustomObjectListControl {
    // the control should be applicable for object list properties
    controltypes = { OBJECTLIST }
    // provides the JavaScript implementation of the control
    lookelements<lookbasename, COOSYSTEM@1.1:component, lookcontent> = {
      { "rendercustomobjectlist.js", FSCCONTROLSAMPLE@1.3285,
        file("resources/rendercustomobjectlist.js") }
    }

   // provides initial data for the control
    initexpr = expression {
      string[] names;
      // the names of the objects in the object list  
      for (Object obj : ::value) {
        names += obj.GetName();
      }
      // the dictionary contains a string and the object names
      dictionary initvals = {
        strings: {
          RemoveEntry: #StrRemoveEntry.Print()
        },
        names: names
      };
      // convert the dictionary to a JSON string
      return coouser.Value2JSON(initvals);
    }
  }
}

app.ducx User Interface Language

userinterface FSCCONTROLSAMPLE@1.3285
{

  import COOSYSTEM@1.1;
  import COOATTREDIT@1.1;
  import COODESK@1.1;
  import COOSEARCH@1.1;
  import FSCVAPP@1.1001;
  import FSCEXPEXT@1.1001;

  // when reading or editing the FormCtrlSample form should be used
  extend class CtrlSampleObjectList {
    forms {
      ReadObjectAttributes {
        FormCtrlSampleObjectList;
      }
      EditObjectAttributes {
        FormCtrlSampleObjectList;
      }
    }
  }
  
  // a form displaying the integer property
  form FormCtrlSampleObjectList {
   inherit = false;
   formgeneric = false;  
    formpage PageCtrlSampleObjectList {
      dataset {
        sourceobject;
        objectlist;  
      }
      layout {
        row {
          sourceobject {
            colspan = 4;
            labelposition = left;
            // puts the selected object in the object list
            change = expression {
              if (null != ::value) {
              Object[] @values = cooobj.GetAttribute(cootx,
                                   #FSCCONTROLSAMPLE@1.3285:objectlist);
              @values += ::value;
              cooobj.SetAttribute(cootx, #FSCCONTROLSAMPLE@1.3285:objectlist, @values);
              }
            }
          }
        }
        row {
          CustomObjectListControl objectlist {
            rowspan = 2;
            colspan = 4;
            labelposition = top;
          }
        }
        row {
        }
      }
    }
  }
}

rendercustomobjectlist.js

function jQueryFSCCONTROLSAMPLE_1_3285_CustomObjectListControl()
{
  this.OnInit = function CustomObjectListControl_OnInit()
  {
    // get the values defined in initexpr
    var init = this.GetInit();
    this.strings = init.strings;
    this.names = init.names;
    if (this.names) {
    if (typeof this.names == "string") {
      this.names = [this.names];
      }
    }
  }
  
  this.OnRender = function CustomObjectListControl_OnRender(output)
  {
    if(this.names){
      var values = this.GetValue();
      output.Push("<div id=\"" + this.GetId("CustomObjectList") + "\">");
      // prints all objects in the object list
      for (var idx = 0, cnt = values.length; idx < cnt; idx++) {
        output.Push("<div " + this.GetArgs(values[idx]) + ">");
        // a button to be able to remove the entry
        output.Push("<img class=\"remove\" src=\"");
        output.Push(this.GetSymbolPath("COO.1.1001.1.38424"));
        output.Push("\" alt=\"" + this.strings.RemoveEntry + "\" data-i=\"" + idx +"\" />");
        output.Push(this.names[idx] + "</div>");
      }
      output.Push("</div>");
    }
  };
  
  this.OnLoad = function CustomObjectListControl_OnLoad()
  {
    var ctrl = this;
    // a remove button is clicked
    fscjq(".remove").click(function() {
      var idx = this.getAttribute('data-i');
      var values = ctrl.GetValue();
      // remove the entry from the array
      values.splice(parseInt(idx), 1);
      // store the new array
      ctrl.SetValue(values);
      // refresh the list
      ctrl.Refresh();
    });
  };
}

You can add objects to the customized object list using “sourceobject”. Removing object from the list can be done with the “Remove” button.

Download PDF

Download PDF