JavaScript Functions
This chapter provides an overview of all JavaScript functions usable in the context of GUI controls.
Available Functions
JavaScript functions not listed here are only for internal use.
Alert(str)
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)
Calls a branch that is defined in the dialog.
Parameters:
- (string) ident
The server-side defined identifier of the branch.
GetArgs(obj, view)
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()
Returns the DOM element that contains the HTML of the control.
Returns:
- (Element)
The container DOM element.
GetContainerId()
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)
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()
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)
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()
Returns a JSON object containing the values defined in the server-side "Control Initialization Expression" (FSCVAPP@1.1:initexpr).
Returns:
GetObject()
Returns the COO address of the current object.
Returns:
GetOptions()
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:
GetSymbolPath(ident, size)
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()
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()
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()
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()
Returns whether the control is editable.
Returns:
- (boolean)
If true, the value of the control can be changed via the GUI.
IsReady()
Checks if the dialog is completely loaded and that no request is running.
Returns:
- (boolean)
If true, the dialog is ready.
Refresh()
Reloads the current dialog.
SetReady(isready)
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)
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)
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
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 Lists
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.