The Intrexx JavaScript API serves as a vital tool for developers working within the Intrexx environment, facilitating seamless integration of custom functionalities into their applications.
By using this API, developers can effortlessly manipulate HTML elements, handle events and interact with various components of their Intrexx applications programmatically. Whether it's dynamically updating UI elements, validating user input, or implementing custom business logic, the Intrexx JavaScript API streamlines the development process, allowing developers to create rich and interactive experiences tailored to their specific requirements.
With comprehensive documentation and a wide range of available functionalities, the Intrexx JavaScript API empowers developers to unlock the full potential of their Intrexx applications while maintaining efficiency and consistency in their codebase.
The Intrexx JavaScript API is structured into three primary sections:
api: The ix.api namespace is a dedicated segment within the Intrexx API that encompasses officially supported public functions.
Controls: These functions are accessible directly through the Intrexx control they are associated with. Each control has unique functions that facilitate specific manipulations and interactions with the corresponding control.
Global functions: These functions are globally accessible, implying their use across the entire portal. Global functions represent the more legacy way of accessing Intrexx functions.
To maximize the benefits of the Intrexx JavaScript API, it is suggested to first go through the Usage Guidelines. This will provide crucial insights into the best practices for leveraging the API effectively.
The ix.api namespace, the main entry point, offers officially supported public functions, distinctly separated from non-public ones to ensure a clean, unambiguous API and prevent misuse.
It is categorized by functionality for clear structure and easy navigation within the API documentation, including the following modules:
ix.api |
|
|---|---|
├─ confirm |
Generates and manages confirmation dialogs. |
├─ cookie |
Manages cookies. |
├─ dom |
Interacts with DOM elements, including Intrexx controls. |
├─ is |
Performs type checking and validation. |
├─ loader |
Loads Intrexx application pages into various containers. |
├─ page |
Handles edit and view pages in Intrexx applications. |
├─ request |
Performs asynchronous HTTP (Ajax) requests. |
├─ session |
Manages user login sessions. |
├─ text |
Assists in translation, formatting, and encoding/decoding tasks. |
├─ tooltip |
Creates and manages tooltips. |
├─ url |
Manages URLs and their parameters. |
└─ websocket |
Establishes and manages WebSocket connections. |
Action controls serve to perform essential functions like saving and deleting data records.
These controls can appear as buttons, text links or images and they are customizable to either navigate to a specific destination within an application or a custom URL, or trigger an action like save or delete on a page.
Furthermore, action controls provide advanced configuration options, allowing for the loading of additional pages in various formats such as the main window, a popup window or tooltips, enhancing user experience and interaction.
Edit controls enable users to modify data within linked fields while viewing or interacting with it. These controls are essential for making changes to data, updating records or altering states based on specific criteria.
It is important to note that any modifications made using edit controls directly impact the underlying database. Unlike view controls, edit controls allow users to save changes to the data.
Some edit controls may offer additional functionalities for data manipulation, such as validation rules, formatting options, enabling/disabling fields, setting required states, etc. These features can enhance the user experience and ensure data integrity.
When utilizing edit controls, users should exercise caution to avoid unintended changes to critical data. Refer to the control documentation for detailed instructions on using edit controls effectively.
View controls are designed to present data from linked fields without altering it. They are commonly used for querying data, retrieving specific records or fetching states based on defined criteria.
Any modifications made to view controls are strictly temporary and do not affect the database; they are read-only. For making changes to the data, it is advisable to use edit controls.
Certain view controls may provide methods for setting values. This functionality proves beneficial when you need to adjust a value within a view control solely for display purposes (e.g., obscuring an email address). Refer to the respective control documentation for detailed guidance.
A view table presents data records in a tabular format, where each connected data field corresponds to a table column and each data record occupies a row. Users can dynamically sort the table by clicking on the column headers within their browser. This type of table can showcase data at the same level, from higher-level data groups, and from immediately lower-level data groups.
Free layout tables allow for the integration of application pages that are repeated for each data record. These tables offer flexibility in designing the layout of the integrated page, enabling customization with supported elements.
For more comprehensive details, refer to the Intrexx Help Center.
This section provides additional functionalities for more advanced controls, such as charts, file managers, gauges and more.
Global functions, while being a more legacy method of accessing Intrexx functions, still empower developers by offering capabilities to simplify common tasks and enhance the functionality of Intrexx. While these functions are currently preserved for compatibility, future plans involve their transition and expansion into the more structured ix.api namespace.
Available modules are:
| Globals | |
|---|---|
├─ Portlet |
Enables dynamic grouping of information. |
├─ Table |
Provides advanced table manipulation features. |
├─ VTL |
Facilitates management of Velocity template files. |
├─ Workflow |
Allows interaction with the Intrexx workflow engine. |
├─ Browser |
Streamlines interaction with control elements. |
└─ Notifier |
Displays customized tooltip messages. |
This section provides guidelines for effectively using the Intrexx JavaScript API. It covers topics such as accessing objects, interacting with HTML DOM elements, and utilizing getter and setter functions for control properties.
To ensure optimal utilization of the Intrexx JavaScript API, it is recommended to follow these guidelines:
ix.api NamespaceUsing the ix.api namespace is the primary segment of the Intrexx API that contains officially supported public functions. By utilizing this namespace, developers can access a wide range of functions designed to interact with various components of the Intrexx portal.
When working with the Intrexx JavaScript API, it is advisable to rely on functions within the ix.api namespace to ensure compatibility and consistency across different versions of Intrexx.
The ix.api namespace is divided into several categories, each representing a specific area of functionality. They are organized to provide a clear structure and facilitate easy navigation within the API documentation. Accessing functions within the ix.api namespace is straightforward:
// Accessing a specific function within the `ix.api` namespace
ix.api.NAMESPACE.FUNCTION_NAME();
Each Intrexx control comes with its own set of specific functions, accessible through the control object. To interact with these functions and the control, you need to obtain the control object first. This can be done using the ix.api.dom.getControl() function.
For more detailed information on working with Intrexx controls, please refer to the Controls section.
Example of retrieving a control:
// Retrieve the control using the GUID.
const myControl = ix.api.dom.getControl("<ELEMENT-GUID>");
// Retrieve the control using the ID.
const myControl = ix.api.dom.getControl("<myControlID>");
After obtaining the control object, you can access its properties and functions. Most controls have getter and setter functions or accessors for their properties, for example:
// Get the value of the control
const value = controlXY.getValue();
// Change the value of the control
controlXY.setValue("new value");
The usage of functions may vary slightly depending on the control type. For instance, setting the value of a textfield is different from setting the value of a radiobutton group:
// Set the value of a textfield control
textEditControl.setValue("new value");
// Set the value of a radiobutton group
radioGroupControl.setValue("radio-button-value");
Note: Always refer to the specific control documentation for detailed instructions on how to use its functions effectively.
In some cases, it may be necessary to interact with the HTML DOM element of the control. For this, we provide a convenient function to retrieve the HTML element of a control by its ID or GUID:
// Get the HTML element of the control
const htmlElement = ix.api.dom.getHtml("<ELEMENT-GUID>");
// Returns the HTML element of the control
console.log(htmlElement);
// Example output:
// <input
// class="guid-XYZ"
// form="ixYZ_form"
// id="ID_textcontrolXYZ"
// name="textcontrolXYZ"
// title="Titel"
// type="text"
// value="Example value"
// >
Always use a control's provided functions to manipulate its data, such as setting a new value. Directly setting a value via HTML bypasses the extra logic that comes with these methods. For instance, change detection won't be triggered, validation won't work, among other potential issues. This practice ensures the integrity of your data and the correct functioning of your application.
⚠️ It is recommended to avoid direct access to control objects using syntax like control.oUp.functionName();.
Instead, utilize the functions provided by the control itself. This ensures compatibility with future versions of Intrexx and maintains a consistent API structure.
Directly accessing the control object is highly discouraged as it may result in unexpected behavior and is not guaranteed to work in future versions of Intrexx.
The ix.util.getUp() function has also been deprecated and replaced with ix.api.dom.getControl(). This update enhances naming consistency and ensures clear usage. It is advised to use ix.api.dom.getControl() and update any existing code that relies on ix.util.getUp().
// ✗ NOT RECOMMENDED: Directly accessing the control object
const control = htmlElement.oUp;
// ✗ NOT RECOMMENDED: Using the deprecated `ix.util.getUp()` function
const control = ix.util.getUp("<ELEMENT-GUID>");
// ✓ RECOMMENDED: Accessing the control object using `ix.api.dom.getControl()`
const control = ix.api.dom.getControl("<ELEMENT-GUID>");
Global functions are accessible throughout the entire Intrexx portal, providing functionality that can be utilized across various sections of the portal.
Unlike methods tied to specific controls, global functions can be accessed directly without the need to obtain them first. For instance, to utilize the Notifier module, you can directly invoke its functions:
// Display a modal tooltip with the provided content and headline.
Notifier.modal.notify("Content", "Title");
Namespaces are used to organize the API structure and group related topics together. They provide a way to group classes, functions, and other elements under a common name, making it easier to navigate and understand the API documentation.
Sometimes, namespaces are also called modules or packages, but they all serve the same purpose of organizing the API into logical units.
Classes in Intrexx are essential components that represent both controls and global modules, providing users with versatile functionalities. Global classes are accessible throughout the entire Intrexx Portal, while control classes are confined to specific controls within their scope.
Think of classes as tools with specific purposes, much like a hammer for driving nails into wood. Similarly, each class serves a distinct function, whether it's manipulating data or interacting with the user interface.
Within a class, you'll find a variety of members including methods, properties, accessors, and references. These members define the behavior, characteristics, and relationships of the class, enabling users to effectively utilize its capabilities.
Functions are vital elements in coding that carry out specific tasks within the API.
They act as commands to perform actions such as retrieving the value of a control, locating an HTML element for interaction, or generating a confirmation dialogue with specified settings.
Functions are invoked by using parentheses, as in exampleFunction();, and can also accept additional parameters to tailor their behavior, such as exampleFunctionWithParameter("Example Text");.
Fundamentally, functions act as a mechanism for carrying out operations in code, allowing developers to effectively oversee and control data and interactions within their programs.
Methods are functions that are associated with a class and are used in the same way as regular functions. However, methods are specific to the class they belong to.
Interfaces in the Intrexx API are similar to guidelines or templates that define the structure and behavior expected from functions and methods. They outline a standard set of properties and actions that need to be included, while also allowing for certain elements to be optional.
For instance, imagine an interface for a confirmation dialog. It would specify that every confirmation dialog should have a title and a message, and it might also suggest including buttons. By adhering to this interface, developers can create various confirmation dialogs that all maintain the same structure and functionality.
In essence, interfaces help ensure consistency and coherence across different components within the API.
Properties are attributes linked to an interface or configuration.
In simpler terms, these properties are like unique traits or features that shape how an element or part works within the API. For instance, in the above mentioned example, properties like title and message set certain requirements, such as both needing to be text (string values), while the buttons property indicates the need for a list containing button options.
Accessors are tools used to get or change the values of properties associated with a class. Unlike regular functions, they are not called directly; instead, they act as getters and setters, allowing controlled access to class properties. This mechanism simplifies the process of managing and retrieving property values within the API.
For example, an accessor might be used to retrieve the value of a control's property, such as control.value;, or to set a new value, such as control.value = "NewValue";.
Types are used to define the data type of a variable, function parameter, or return value. They specify the kind of data that can be stored or manipulated by the element.
References provide links or pointers to other elements within the documentation or external resources. They are used to cross-reference related information.
Newer Intrexx controls provide variables that reference available CSS variables, serving as a means to customize the appearance of the control. Essentially, they function as a CSS API, allowing users to modify visual elements according to their preferences.
Enumeration options are a set of named constants that represent a fixed number of possible values. They are used to define a specific type of data that can only have one of the predefined values.
OptionalsThe optional tags are used to indicate that a parameter or property is not required and can be omitted. This means that the function or method can be called without providing a value for the optional parameter.
We continuously try to improve and evolve the Intrexx JavaScript API. If you encounter disparities or missing descriptions, please feel free to contact us over the Intrexx Help & Support Center. We appreciate your feedback and will address your concerns as soon as possible.