JavaScript

In the browser, JavaScript in particular is well suited for programming. The purpose here is without a doubt to increase usability and enhance the user experience. If, for example, you want to display only certain areas of a form depending on the user's selection, JavaScript is definitely the right way to go. You can also customize the behavior of a page (automatic refreshing of data) or the user guidance in Intrexx with JavaScript. There is a separate Javascript API for this, which makes it easy for you to access the control elements of Intrexx.

Click here for general information about scripting in Intrexx.

For all JavaScript-enabled application elements, you can access the JavaScript editor in the properties on the "Script" tab. Click here for more information.

Libraries

In the JavaScript editor, you have access to the Intrexx library for mobile devices and the Intrexx standard library in the "Libraries" section. If you select an entry in the library, you can access these buttons at the bottom right of this area:

Show description

Shows the description of the currently selected function with an example script.

Open link

Links to the corresponding page that provides more information. The page that opens also shows the classes, interfaces, methods or properties that the currently selected function can be used for.

Intrexx Library for Mobile Devices

Read and write values

Write in a view/edit field

Writes a value to an edit field or a view field.

Example

Browser.setValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"), "Some text");

Snippet

Browser.setValue(oHtml, strValue);

Class Browser

Read a view/edit field

Read a value from a view or edit field.

Example

Browser.getValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"));

Snippet

Browser.getValue(oHtml);

Class Browser

Intrexx Standard Library

Ajax

Trigger a UserWorkflowEvent

Triggers a process through a UserWorkflowEvent. Parameters: The GUID of the UserWorkflowEvent.

triggerUserWorkflowEvent("");

Trigger a UserWorkflowEvent with request parameters

Triggers a process through a UserWorkflowEvent with additional request parameters.

The request parameters are available on the server as request variables.

Parameter 1: The GUID of the UserWorkflowEvent.
Parameter 2: JSON list with parameters

Example

triggerUserWorkflowEvent("BE2514445AC5C88F74891F9B296C283AC06F366C",  {qs_param: paramValue});

Snippet

triggerUserWorkflowEvent("",  {});

Trigger a UserWorkflowEvent and process the result

Triggers a process through a UserWorkflowEvent and checks the status of the process run.

The request parameters are available on the server as request variables.

Parameters: The GUID of the UserWorkflowEvent.

$.when(triggerUserWorkflowEvent('89033337B02D89F2E3CCFCFAA914F4D054897D7C',  {param1: 'value 1', param2: 42}))
.done(function()
	{
		alert("done")
	}
)
.fail(function()
	{
		alert("failed")
	}
);
return true;

Call a Velocity file to retrieve XML (Portal)

Send a form to the server, then send XML from a VM file back to the browser and write it in a edit field.

var el = getElement("GUID_STATIC_TEXTFIELD");
ajaxVTL("internal/system/vm/custom/.vm", {
    dataType: 'xml',
    data: {
        fr_param1: Browser.getValue(getElement("GUID_FORM_FIELD"))
    },
    success: function (data) {
        Browser.setValue(el, data);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
});

Call a Velocity file to retrieve text (Application)

Send form data and write it in a static edit field. The form value in this example can be read in the application VM file via $Request.get("fr_param1").

var el = getElement("GUID_STATIC_TEXTFIELD");
ajaxAppVTL(".vm", {
    dataType: 'text',
    data: {
        fr_param1: Browser.getValue(getElement("GUID_FORM_FIELD"))
    },
    success: function (data) {
        Browser.setValue(el, data);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
}, el);

Call a Velocity file to retrieve JSON (Application)

Create a custom JSON response within a VM file (from the application package) and send it to the browser.

var el = getElement("GUID_FROM_ANY_CONTROL");
ajaxAppVTL(".vm", {
    dataType: 'json',
    success: function (data) {
        alert(data.myJSONAnswer);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
}, el);

Call a Groovy file to retrieve JSON (Portal)

Calls a global Groovy file via Ajax and returns the response to the browser.

// Path to Groovy file
ix.ajax().requestGroovy('groovy/.groovy', {
    dataType: "json",
    data: {
        "param_a": "1",
        "param_b": "2"
    },
    success: function (data) {
        alert(data);
    }
});

Call a Groovy file to retrieve JSON (Application)

Calls an application Groovy file via Ajax and returns the response to the browser.

var el = getElement("GUID_FROM_ANY_CONTROL");
ix.ajax().requestAppGroovy("file.groovy", {
    dataType: "json",
    data: {
        "param_a": "1",
        "param_b": "2"
    },
    success: function (data) {
        alert(data);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
}, el);

Calculations

Simple arithmetic calculations

Calculates the result of two values from HTML controls using an operator and writes the result in an HTML control.

Example

calculate(getElement("F28BA7351E3C8F5123880548CFA72B64566A1421"), getElement("80467069EA61BD786CFFEB508786723D6451F2F5"), "+", getElement("B52A9E9FC555A820984E63DECF13BCAA33E308CD"));

Snippet

calculate(oHtmlNumber1, oHtmlNumber2, strOperator, oHtmlResult);

Notifier

Simple notifier

Displays a simple status message at the bottom right of the browser. The methods "warn" or "error" can be used instead of "notify". The methods "warn" or "error" can be used instead of "notify".

Notifier.status.notify("Settings were applied");

Display notifier aligned to an HTML element

Displays a simple status message beneath an HTML element (bottom left corner). The method "error" can be used instead of "notify".

Notifier.element.notify(getElement(), "EXAMPLE_TEXT");

Buttons

Set duration to a whole day

Sets two date fields so that they form the duration of a whole day: dateFrom 00:00 a.m., dateTo 00:00 a.m. next day.

Example

(executable in an onclick() event of a checkbox):

setFullDays(getElement("123401F1E55C9A193BE6EC4091B45C6A5A6C8154"), getElement("DD2E01F1E55C9A193BE6EC4091B45C6A5A6C8154"), getElement("4D0708BDECC7D088613F818CE1B09B8D812F5750") );

Snippet

setFullDays(oHtmlCheckbox, oHtmlDateFrom, oHtmlDateTo);

Trigger script after saving / deleting

The "onActionDone" event is triggered whenever a button has performed a "Save" or "Delete" action and this action was successful. With buttons, you can specify that the selected page or table should be reloaded. The event is triggered at this point. In programming terms, a callback for the event can be defined (e.g. when the page is loaded):

Snippet

getElement(<GUID>).oUp.bindEvent("onActionDone", function() {
		// ...
});

Tables

Color columns and rows (number values)

Colors rows and columns in a view table based on a number value. The value of the color can be set by hexadecimal value or by name. The following elements can be colored: "row" = whole row (tr), "cell" = whole cell (td), "span" = text of cell (span).

Example

(color all rows, where value in field viewcontrolD54BA2DD is greater than 10):

inking("viewcontrolD54BA2DD", ">", 10, "#008000", "row");

Snippet

inking(strControlName, strOperator, compareValue, strColor, colored);

Color columns and rows (date values)

Colors rows and columns in a view table based on a date value. Values can be compared with the current date ("date") or with the current and time ("datetime"). The value of the color can be set by hexadecimal value or by name. The following elements can be colored: "row" = whole row (tr), "cell" = whole cell (td), "span" = text of cell (span).

Example

(colors all rows, where date value in field viewcontrolD54BA2DD is less than the current date):

inkingDate("viewcontrolD54BA2DD", "<", "date", "#008000", "row");

Snippet

inkingDate(strControlName, strOperator, dateType, strColor, colored);

Color columns and rows (string values)

Colors rows and columns in a view table based on a string value. The value of the color can be set by hexadecimal value or by name. The following elements can be colored: "row" = whole row (tr), "cell" = whole cell (td), "span" = text of cell (span).

Example

(colors all rows, where status in field viewcontrolD54BA2DD equals "done"):

inkingString("viewcontrolD54BA2DD", "==", "erledigt", "#008000", "row");

Snippet

inkingString(strControlName, strOperator, strValue, strColor, colored);

Get row

Returns the parent node (the row) of the given node.

getRow(node)

Get column

Returns the parent node (the column) of the given node.

getCol(node)

Read and write values

Write in a view/edit field (with ID)

Writes a value in a view field or edit field that is referenced using its DOM ID ("ID" attribute of the HTML element).

Example

setTextValueById("ID_labelcontrol900CB1AB", "Some text");

Snippet

setTextValueById(strHtmlId, strValue);

Write in a view/edit field

Writes a value in a view field or edit field.

Example

Browser.setValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"), "Some text");

Snippet

Browser.setValue(oHtml, strValue);

Class Browser

Read a view/edit field (with ID)

Read a value from a view field or edit field that is referenced using its DOM ID.

Example

getTextValueById("ID_labelcontrol900CB1AB");

Snippet

getTextValueById(strHtmlId);

Read a view/edit field

Read a value from a view field or edit field.

Example

Browser.getValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"));

Snippet

Browser.getValue(oHtml);

Class Browser

Copy text to clipboard

Copies text to clipboard. If sending to clipboard is disabled for security reasons, a tooltip that the text can be copied from will appear instead. Parameters:

param1:
Text or action control. In case of an action control, its target link URL is copied to clipboard.

param2:
Optional parameter as list with following possible values:
strMsgTitle - Title of feedback tooltip.
strMsgBody - Text of feedback tooltip, if text was successfully copied to clipboard.
bFallback - true (default) or false. If text could not be copied to clipboard and bFallback is set to true, the text defined in strMsgBody is displayed.
iTextHeight - Row height within tooltip (default: 1).
iTextWidth - Width of tooltip (default: 50).
strTextStyles - CSS definitions for tooltip.

Example

Helper.sendToClipboard("Hello World!", {strMsgTitle: "Clipboard", strMsgBody: "Text copied to clipboard", bFallback: true, iTextHeight:1, iTextWidth:50};
Helper.sendToClipboard(getElement("56C159AEECD062FC3B273F0E999A67FA842D3FB8").oUp);

Snippet

Helper.sendToClipboard(param1, param2);

Format values

Float from locally formatted string

Parses a locally formatted string into a float (number object).

Example

getFloatByLocalString("1.234");

Snippet

getFloatByLocalString(strValue);

Float string from locally formatted string

Parses a locally formatted string into a string in float format (for example 1,234.56 -> 1234.56).

Example

getFloatStringByLocal("1.234,56");

Snippet

getFloatStringByLocal(strValue);

Integer from locally formatted string

Parses a locally formatted string into an integer (number object).

Example

getIntegerByLocalString("1.234");

Snippet

getIntegerByLocalString(strValue);

Integer string from locally formatted string

Parses a locally formatted string into a string in integer format (for example 1,234 -> 1234).

Example

getIntegerStringByLocal("1.234");

Snippet

getIntegerStringByLocal(strValue);

JavaScript date from HTML control

Creates a JavaScript date object from a "date", "time" or "date & time" HTML control.

Example

getDateObject(getElement("A84E5E7F9EA9ED1A829DB98DBF5459F59961FA3B"));

Snippet

getDateObject(oHtml);

JavaScript number object from HTML control

Creates a JavaScript number object from an "integer", "float" or "currency" HTML control.

Example

getNumberObject(getElement("5F7S5E7F9EA9ED1A829DB98DBF5459F59961FA3B"));

Snippet

getNumberObject(oHtml);

Locally formatted string from a number string or a date string

Creates a locally formatted string from a number string or a datetime string. The parameter "oHtml" creates a reference to an "integer", "float", "currency" or "datetime" HTML input control. This defines type and formating specifications for the value. "strValue" defines the value to be formatted.

Example

toLocalString(getElement("DDB279D4974A17DB27A89F58DB36F7BF4E10DA13"),"123.45");

Snippet

toLocalString(oHtml, strValue);

Format a string and write it in an HTML control

Creates a locally formatted string from a number string or a datetime string and writes the result in an HTML input control.

toLocalString(oHtml, strValue)
oHtml - Reference to an "integer", "float", "currency" or "datetime" HTML input control. This HTML control defines type and formatting properties for the given value. The result is written to this control. strValue - value to be formatted.

Example

writeLocalString(getElement("DDB279D4974A17DB27A89F58DB36F7BF4E10DA13"),"123.45");

Snippet

writeLocalString(oHtml, strValue);

Currency from locally formatted string

Parses a locally formatted string into a currency (number object).

Example

getCurrencyByLocalString("1.234");

Snippet

writeLocalString(oHtml, strValue);

Currency string from locally formatted string

Parses a locally formatted string into a currency value as string (for example 1,234.56 -> 1234.56).

Example

getCurrencyStringByLocal("1.234,56");

Snippet

getCurrencyStringByLocal(strValue);

WebSockets

The JavaScript methods in connection with WebSockets offer the possibility to subscribe and unsubscribe to messages (topics).

ix.websocket

4.8.1 Start subscribing to a topic

Please note: Bear in mind that the following examples are not designed for IE11.

Example 1

const mySubscriber = await ix.websocket.subscribeToTopic("D00F000000000000000000000000000000000000", {
   onmessage: (data) => {
      console.log(data);
   }
});

Example 2

const mySubscriber = await ix.websocket.subscribeToTopic("D00F000000000000000000000000000000000000", {
   key: "key1",
   onmessageJSON: (data) => {
      console.log(data);
   },
   onerror: (error) => {
      console.log(error);
   },
   onclose: (event) => {
      console.log(event);
   }
});

Snippet

ix.websocket.subscribeToTopic(topic, subscriber [, websocketAlias])

Namespace IxWebsocket

4.8.2 Stop subscribing to a topic

Please note: Bear in mind that the following examples are not designed for IE11.

Example 1

ix.websocket.unsubscribeFromTopic(mySubscriber)

Example 2

ix.websocket.unsubscribeFromTopic("key1")

Snippet

ix.websocket.unsubscribeFromTopic(subscriber [, websocketAlias])

Namespace IxWebsocket

Input required

Checks the stated input control as if "Input required" were set OR checks all controls of a stated form group where "Input required" was set. Optionally, an alternative text can be defined as the second parameter. This text is displayed instead of the predefined text in case of errors.

Example

checkRequired(getElement("E94A9FBDADD46039BB62F76870E1EC57C226C6DC"), "An alternative text");

Snippet

checkRequired(oHtml,strMessage);

Compare date

Compares the value of a date control ("date", "time" or "datetime") with the current date. Can be used for input and view controls. For view controls the expert attribute "jsobject = true (Boolean)" has to be set.

Example

dateComparedToNow(getElement("5F7S5E7F9EA9ED1A829DB98DBF5459F59961FA3B"));

Possible return values:
-1 if an error occurred or input field is empty.
0 if value is less than current date.
1 if value equals current date.
2 if value is greater than current date.

Snippet

dateComparedToNow(oHtmlDate);

Add or subtract time interval

Adds or subtracts an interval to/from a given JavaScript date object. Possible parameters:
"ms" - milliseconds / "s" - seconds / "mi" - minutes / "h" - hours / "d" - days / "mo" - months / "y" - years

Example

var dtNow = new Date();
var dtAdd1 = dateAdd("d", 1, dtNow); // adds 1 day to the current date
var dtAdd2 = dateAdd("h", -2, dtNow); // subtracts 2 hours of the current date

Snippet

dateAdd(typeOfInterval, intValue, oHtmlDate);

Open page of an application

Executes an application request and opens an application page in a new window.

Example

makeAppRequest("5C9AA563556C7A98CD03AAFAE9E93EC13B6EBB07", "8875BAC49802DC90A9FE41F5114D8F1E28036891", "1", false, false, false);

Snippet

makeAppRequest(strApplicationGuid, strPageGuid, strRecId, false, false, true);

Disable JavaScript compression

By inserting this comment, the compression of JavaScript files can be deactivated, i.e. for debugging.

// compress = false

Access language constants

Example 1

Example for accessing a global language constant:

ix.text.i18n.get('WIDTH')

Example 2

Example for accessing a language constant from an application:

ix.text.i18n.getByApp('AB4B031834F042FCADB595DF1923B768C7773F00', 'SHARE_FEED_MORE_COMMENTS')

Snippet

ix.text.i18n

Copy record

Function for copying a record when a button is clicked.

Snippet

function copyRecord(p_button) {
   p_button.oUp.setActionModeInsert();
   return true;
}