Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
The SimpleWidget and SimpleWidgets client-side classes provide the methods for widget structure and functionality customization:
Use the s_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 of the 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.
SimpleWidget
s_widget
Use the s_widget object to perform the current widget customization with the methods below.
Info | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
To manually invoke the method, pass the widget instance ID as the first parameter in the console. For example, to call the following method:
use the following approach:
|
s_widget.addTemplate(id, template, script, type)
Use this method 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 value | 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
| the
| parameter
| Add the script of the template. It is only ran once, after the template is added. | N | s_widget.addTemplate("cards", s_widget.getFieldValue("template"), "console.log('Hello world!');", "inner"); | ||||
type | String | N | |||||||||
Info | Specify the template type. It defines, where the template is added. Available options:
| ,
| , after
| inner | before | .
Return:
Type | Description |
---|---|
Void | This method does not return a value. |
Example:
Code Block | ||||
---|---|---|---|---|
| ||||
<div id="steps"></div> |
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widget.addTemplate('steps', '<div class="main">', '', 'inner'); |
s_widget.getElements()
Use this method 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:
Type | Description |
---|---|
Array of HTML elements | This method returns an array of the widget structure elements. |
Example:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
s_widget.getElements(); |
s_widget.getFieldValue(key)
Use this method to return the data value of the widget that is defined by the key option.
Parameter:
Name | Type | Mandatory | Description | Default value | 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 | This method returns the value of the field that is defined by the key. |
Example:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
s_widget.getFieldValue('element'); |
s_widget.getId()
Use this method to return a widget instance ID.
Return:
Type | Description |
---|---|
String | This method returns a widget instance ID. |
Example:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
s_widget.getId(); |
s_widget.getOptionValue(key)
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 value | Example |
---|---|---|---|---|---|
key | String | Y | Specify the key of the option from the widget Schema option values. | N | label |
Return:
Type | Description |
---|---|
Any | This method returns a value of the widget option that is defined by the key. |
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widget.getOptionValue('label'); |
s_widget.removeTemplate(id)
Use the method 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 value | 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<div id="element1"> Remove </div> <button buttonType="approve" event-click="window.s_widget_custom.remove();"> Add </button> |
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
#element1 { background-color: yellow; height: 20px; } |
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
; (() => { window.s_widget_custom = window.s_widget_custom || {}; window.s_widget_custom.remove = function () { s_widget.removeTemplate('element1'); } })(); |
s_widget.setFieldValue(key, value)
Use this method to set a value for the key.
Info |
---|
If the value parameter is equal tonull, for example, |
Parameters:
Name | Type | Mandatory | Description | Default value | 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
; (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(); })(); |
s_widget.serverUpdate()
Use this method 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 object that contains a server response. |
Example:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
; (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); })(); |
s_widget.setOptionValue(key, value)
Use this method to set a value using the key of the widget option.
Parameters:
Name | Type | Mandatory | Description | Default value | 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widget.setOptionValue('label', 'Name'); |
s_widget.showData()
Use the method 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widget.showData(); |
SimpleWidgets
s_widgets
Invoke the methods of the s_widgets object within your scripts, when adding a widget to a form or a page for widget interaction.
s_widgets.getFieldValue(widgetInstanceID, key)
Use this method to return the data value of the widget field for the key and widget instance ID.
Parameters:
Name | Type | Mandatory | Description | Default value | Example |
---|---|---|---|---|---|
widgetInstanceID | String | 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 | This methd method returns the object value. |
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widgets.getFieldValue('157555401214600424', 'name'); |
s_widgets.getForm()
Use this method to return a form object that is placed using the <Form> or <remform> tag.
Parameter:
Name | Type | Mandatory | Default value |
---|---|---|---|
name | String | Y | N |
Return:
Type | Description |
---|---|
Object | This method returns a SimpleForm object. |
Example:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
const builtInForm = s_widgets.getForm('custom'); await builtInForm.save(); |
s_widgets.getWidgets()
Use this method 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 | This method returns a list of all the IDs of the widgets instances located on the page. |
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widgets.getWidgets(); |
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
['160767740511016793', '160767742115787725', '160767742915897037', '160767743612372124', '158965632914393037', '158965975317960937', '161062077113210360'] |
s_widgets.setFieldValue(widgetInstanceID, key, value)
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 value | Example |
---|---|---|---|---|---|
widgetInstanceID | String | 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widgets.setFieldValue('157555401214600424', 'name', 'Alex'); |
Table of Contents | ||||
---|---|---|---|---|
|