2022 April Release

JavaScript FunctionsPermanent link for this heading

This chapter provides an overview of all JavaScript functions usable in the context of GUI controls.

Available FunctionsPermanent link for this heading

JavaScript functions not listed here are only for internal use.

Alert(str)Permanent link for this heading

Shows an overlay dialog displaying a message. The message can be transferred as a string object (defined by a COO address) or as a string.

Parameters:

  • (string) str
    The COO address of a string object or an arbitrary string.

Branch(ident)Permanent link for this heading

Calls a branch that is defined in the dialog.

Parameters:

  • (string) ident
    The server-side defined identifier of the branch.

GetArgs(obj, view)Permanent link for this heading

Returns an HTML attribute string to enable the context menu for a DOM element.

Parameters:

  • (string) obj
    The COO address of the object for which the context menu should be enabled.
  • view

Returns:

  • (string)
    The argument string that is needed to enable the context menu.

GetContainer()Permanent link for this heading

Returns the DOM element that contains the HTML of the control.

Returns:

  • (Element)
    The container DOM element.

GetContainerId()Permanent link for this heading

Returns the ID of the DOM element that contains the HTML of the control.

Returns:

  • (string)
    The ID of the container DOM element.

GetElement(id)Permanent link for this heading

Returns the DOM element specified by an ID. The ID has to be created with the GetId method.

Example

// set the ID of the span element:
output.Push("<span id=\"" + this.GetId("MessageBox") + "\"></span>");
// access the span element:
this.GetElement("MessageBox").innerHTML = "Warning";

Parameters:

  • (string) id
    The identifier of a DOM element.

Returns:

  • (Element)
    The DOM element.

GetHeight()Permanent link for this heading

Returns the server-side defined height of the control. The height is specified via FSCVAPP@1.1:initexpr, COOATTREDIT@1.1:controlargument, or the result of the controloption behavior but is extracted from the objects returned by GetInit() or GetOptions().
Note: If there is only one control displayed in the dialog and the height is not set or it is set to "auto" or "100%", the control automatically takes up all available space.

Returns:

  • (string)
    The server-side defined height.

GetId(id)Permanent link for this heading

Returns a unique ID that can be used to identify a DOM element. This method ensures uniqueness on the whole page.

Example

// set the ID of the span element
output.Push("<span id=\"" + this.GetId("MessageBox") + "\"></span>");
// access the span element
this.GetElement("MessageBox").innerHTML = "Warning";

Parameters:

  • (string) id
    The identifier prefix. It must only contain characters that are allowed in DOM IDs.

Returns:

  • (string)
    A unique identifier starting with the string given as parameter.

GetInit()Permanent link for this heading

Returns a JSON object containing the values defined in the server-side "Control Initialization Expression" (FSCVAPP@1.1:initexpr).

Returns:

  • (object)
    The JSON object.

GetObject()Permanent link for this heading

Returns the COO address of the current object.

Returns:

  • (string)
    The COO address.

GetOptions()Permanent link for this heading

Returns a JSON object containing the values defined in the server-side "Control Options Expression" (a combination of the "Control Argument" (COOATTREDIT@1.1:controlargument) and the result of the controloption behavior in a form layout).

Returns:

  • (object)
    The JSON object.

GetSymbolPath(ident, size)Permanent link for this heading

Returns the path to the symbol file.

Parameters:

  • (string) ident
    The COO address of a symbol.
  • (string) size
    The requested size of the symbol. Allowed values are: small (16 x 16 pixels), medium (20 x 20 pixels). The default value is small.

Returns:

  • (string)
    The path to the symbol file.

GetUrl()Permanent link for this heading

Concatenates the web service URL (for example: https://mycomp.com/fsc) and the given URL part (for example: /webdav). The return value for the example will be https://mycomp.com/fsc/webdav.

Parameters:

  • (string) urlpart
    The last part of a URL <protocol>://<server>/<vdir><urlpart>.

Returns:

  • (string)
    The absolute URL.

GetValue()Permanent link for this heading

Returns the current value of the control. If no FSCVAPP@1.1:ctrlgetexpr is specified, the value is returned as an array, even if the value belongs to an item that is not multiple. Otherwise the type of the value corresponds to the result of the FSCVAPP@1.1:ctrlgetexpr expression.

Returns:

  • (object)
    The current value.

GetWidth()Permanent link for this heading

Returns the server-side defined width of the control. The width is specified via FSCVAPP@1.1:initexpr, COOATTREDIT@1.1:controlargument, or the result of the controloption behavior but is extracted from the objects returned by GetInit() or GetOptions().

Returns:

  • (string)
    The server-side defined width.

IsEdit()Permanent link for this heading

Returns whether the control is editable.

Returns:

  • (boolean)
    If true, the value of the control can be changed via the GUI.

IsReady()Permanent link for this heading

Checks if the dialog is completely loaded and that no request is running.

Returns:

  • (boolean)
    If true, the dialog is ready.

Refresh()Permanent link for this heading

Reloads the current dialog.

SetReady(isready)Permanent link for this heading

Sets the ready state of the dialog. You should set the state to false if you start an Ajax request to ensure that no second request can be started. After the request has finished you have to set the state to true.

Parameters:

  • (boolean) isready
    The ready state to be set.

SetValue(value)Permanent link for this heading

Sets the value of the control (if it is editable). If no FSCVAPP@1.1:ctrlsetexpr is specified, the value is expected as an array, even if the value belongs to an item that is not multiple. Otherwise the value is interpreted by the FSCVAPP@1.1:ctrlsetexpr expression.

Parameters:

  • (object) value
    The new value of the control.

StartOverlayApp(application, parameters, callback, width, height)Permanent link for this heading

Starts an application in a new overlay.

Parameters:

  • (string) application
    The COO address of an application.
  • (object) parameters
    The parameters for the application (optional).
  • (function) callback
    A function that is called after the overlay has been closed (optional).
  • (string) width
    The width (px or em) of the overlay (optional). If no measuring unit is provided, pixels are assumed. Example: 100px
  • (string) height
    The height (auto, px or em) of the overlay (optional). In case of auto the overlay takes the needed height.

Example: 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 App”. The overlay shows the parameters passed. After clicking “Next”, the callback function modifies the HTML and prints “Overlay Callback”.

Example: 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”. Object from be removed from the list via the “Remove” button.