The widget API describes SimpleWidget and SimpleWidgets client-side classes provide the methods for widget structure and functionality customization:
Use the s_
widget and widget object of the SimpleWidget class to implement the required functionality. The object becomes available when a widget you create is initialized.
Use the s_widgets object
methods in the client-side scripts of the
widgets SimpleWidgets class to implement the required functionality. The object is initialized when you add a widget to a form or a portal page.
To create your own widget methods, use the s_widget_custom.
Info |
---|
These methods can only be used on the client-side. |
note is an object of the SimpleWidget class that becomes available when a widget you create is initialized.
Use the s_widget object to
s_widgets is an object of the SimpleWidgets class initialized when you add a widget to a form or a portal page.
s_widgetTo perform the current widget customization , use with the methods below.
Info |
---|
In the console, to To manually invoke the method, pass the widget instance ID as the first parameter in the console. For example, to call the following method: Code Block |
---|
| s_widget.getFieldValue(key); |
use the following approach: Code Block |
---|
| s_widget.getFieldValue(widgetId, key); |
|
This Use this method adds to add a child template to the existing template by its ID id with one of the following types: inner, before, after.
Parameters:
Name | Type | Mandatory | Description | Default | Valuevalue | Example |
---|
id | String | Y | Specify the div tag id. | N | steps |
template | String | Y | Specify the template body. | N | <div class="main"> |
script | String | N Note |
---|
This parameter is mandatory if you need to define |
| the | parameter parameter. If no script is needed, use an empty string ('') as in the example below. |
| Add the script of the template. It is only ran once, after the template is added. | N | type | String (possible options: inner, before, after) | N | inner
Tooltip |
---|
onlyIcon | true |
---|
appendIcon | info-filled |
---|
iconColor | blue |
---|
|
If not specified. |
s_widget.addTemplate("cards", s_widget.getFieldValue("template"), "console.log('Hello world!');", "inner"); |
type | String | N | Specify the template type. It defines, where the template is added. Available options: | | |
Return:
Type | Description |
---|
Void | This method does not return a value. |
Example:
Code Block |
---|
language | xml |
---|
title | Add to a template field:Template |
---|
|
<div id="steps"></div> |
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | Add to a client Client script |
---|
|
s_widget.addTemplate('steps', '<div class="main">', '', 'inner'); |
This Use this method returns to return the widget structure elements collected in an array. The elements in the response are ordered the same way as on the page.
Return:
array<elements> | The Array of HTML elements | This method returns an array of the widget structure elements |
are collected in an arrayExample:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.getElements() |
---|
linenumbers | true |
---|
|
s_widget.getElements(); |
Use this method to return the data value of the widget field value that is defined by the key option.
Parameter:
Name | Type | Mandatory | Description | Default |
---|
Valuevalue | Example |
---|
key | String | Y | Specify the field key that can be used to receive the value of the field. | N | element |
Return:
Type | Description |
---|
Any | The This method returns the value of the field that is defined by the key. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.getFieldValue |
---|
linenumbers | true |
---|
|
s_widget.getFieldValue('element'); |
This Use this method returns to return a widget instance ID.
Return:
Type | Description |
---|
String | This method returns a widget instance ID. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.getId |
---|
linenumbers | true |
---|
|
s_widget.getId(); |
Use this method to return the value of an option value that is defined by the key from the widget Schema option values.
Parameter:
Name | Type | Mandatory | Description | Default |
---|
Valuevalue | Example |
---|
key | String | Y | Specify the key of the option from the widget Schema option values. | N | label |
Return:
Type | Description |
---|
Any | A This method returns a value of the widget option that is defined by the key. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.getOptionValue |
---|
|
s_widget.getOptionValue('label'); |
The Use the method removes to remove all child nodes and content from the specified element. It does not remove the element itself or its attributes.
ParameterParameter(s):
Name | Type | Mandatory | Description | Default | Valuevalue | Example |
---|
id | String | Y | Specify the id of the div tag. | N | element1 |
Return:
Type | Description |
---|
Void | This method does not return a value. |
Example:
Code Block |
---|
language | xml |
---|
theme | Eclipse |
---|
title | Add this to the Template field |
---|
linenumbers | true |
---|
|
<div id="element1">
Remove me
</div>
<button buttonType="approve" event-click="window.s_widget_custom.remove();">
Click meAdd
</button> |
Code Block |
---|
language | css |
---|
theme | Eclipse |
---|
title | Add this to the CSS field |
---|
linenumbers | true |
---|
|
#element1 {
background-color: yellow;
height: 20px;
} |
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | Add this to the Client Script fieldClient script |
---|
linenumbers | true |
---|
|
;
(() => {
window.s_widget_custom = window.s_widget_custom || {};
window.s_widget_custom.remove = function () {
s_widget.removeTemplate('element1');
}
})(); |
Use this method to set a value for the key.
Info |
---|
If the value parameter is equal to 'null', for example, s_widget.setFieldValue ('subject', null) , the defined field is cleared. |
Parameters:
Name | Type | Mandatory | Description | Default |
---|
Valuevalue | Example |
---|
key | String | Y | Specify the key of the field whose value you need to change. | N | table_name |
value | Any | Y | Specify a new value for the field. | N | tableName |
Return:
Type | Description |
---|
Void | This method does not return a value. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.setFieldValue |
---|
linenumbers | true |
---|
|
;
(async () => {
const tableName = s_form.getTableName();
const recordId = s_form.getUniqueValue();
const serviceId = s_form.getValue('service');
const serviceDisplayValue = s_form.getDisplayValue('service');
s_widget.setFieldValue('table_name', tableName);
s_widget.setFieldValue('record_id', recordId);
s_widget.setFieldValue('service', { database_value: serviceId, display_value: serviceDisplayValue });
await s_widget.serverUpdate();
})(); |
With Use this method you can to transfer the data to a server, where the widget server script runs. As a result, the widget data is updated.
Return:
Type | Description |
---|
Object | This method returns a promise containing Promise object that contains a server response. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.serverUpdate |
---|
linenumbers | true |
---|
|
;
(async () => {
const tableName = s_form.getTableName();
const recordId = s_form.getUniqueValue();
s_widget.setFieldValue('table_name', tableName);
s_widget.setFieldValue('record_id', recordId);
const response = await s_widget.serverUpdate();
console.log(response.getData().data);
})(); |
Use this method to set a value using the key of the widget option.
Parameters:
Name | Type | Mandatory | Description | Default | Valuevalue | Example |
---|
key | String | Y | Specify the key of the widget option from Schema option values whose value you need to change. | N | label |
value | Any | Y | Specify a new value for the option. | N | Name |
Return:
Type | Description |
---|
Void | This method does not return a value. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.setOptionValue |
---|
|
s_widget.setOptionValue('label', 'nameName'); |
The Use the method displays to display the data of a widget in the console.
Return:
Type | Description |
---|
VoidObject | This method does not return a valueThe method returns an object with the widget parameters. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widget.showData |
---|
|
s_widget.showData(); |
Invoke the methods of the s_widgets object within your scripts, when adding a widget to a form or a page for widget interaction.
This Use this method returns to return the data value of the widget field for the key and widget instance ID.
Parameters:
Name | Type | Mandatory | Description | Default | Valuevalue | Example |
---|
widgetInstanceID | String (the sys_id value) | Y | Specify the ID of the widget instance. | N | 169598365414458401 |
key | String | Y | Specify the key of the field whose value you need to get. | N | name |
Return:
Type | Description |
---|
Any | Returns This method returns the object value. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widgets.getFieldValue |
---|
|
s_widgets.getFieldValue('157555401214600424', 'name'); |
This Use this method returns to return a form object that is placed using the <form> <Form> or <remform> tag.
Parameter:
Return:
Type | Description |
---|
Object | This method returns a SimpleForm object. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widgets.getForm |
---|
linenumbers | true |
---|
|
const builtInForm = s_widgets.getForm('custom');
await builtInForm.save(); |
This Use this method returns to return a list of all the IDs of the widgets instances located on the page. The elements in the response are ordered the same way as on the page.
Return:
Type | Description |
---|
Array | A This method returns a list of all the IDs of the widgets instances located on the page. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widgets.getWidgets |
---|
|
s_widgets.getWidgets(); |
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | Response example |
---|
|
['160767740511016793', '160767742115787725', '160767742915897037', '160767743612372124', '158965632914393037', '158965975317960937', '161062077113210360'] |
Use this method to set a value for the key in the widget data, and the widget instance ID.
Parameters:
Name | Type | Mandatory | Description | Default | Valuevalue | Example |
---|
widgetInstanceID | String (the sys_id value) | Y | Specify the ID of the widget instance. | N | 169598365414458401 |
key | String | Y | Specify the key of the field whose value you need to set. | N | name |
value | Any | Y | Specify a new value for the field. | N | Alex |
Return:
Type | Description |
---|
Void | This method does not return a value. |
Example:
Code Block |
---|
language | js |
---|
theme | Eclipse |
---|
title | s_widgets.setFieldValue |
---|
|
s_widgets.setFieldValue('157555401214600424', 'name', 'Alex'); |