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:
NoteUse 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.
The widget API describes methods and custom method declarations for widget structure and functionality customization:
- Use s_widget and s_widgets methods in client-side scripts to implement the widget functionality you need.
- If you need to
To create your own widget methods, use thes_widget_custom
method functionality.
Info These methods can only be used on the client-side
.
SimpleWidget
s_widget
To Use the s_widget object to perform the current widget customization you created, 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:
use the method insteadfollowing approach:
|
s_widget.addTemplate(id, template, script, type)
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.
Parameter(s)Parameters:
inner
If not specified.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
|
|
| N | 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 | Specify the template type. It defines, where the template is added. Available options:
| inner | before | type | String (possible options: inner, before, after) | Y | |||||
Tooltip | |||||||||||||
| |||||||||||||
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()
This Use this method returns to return the structure element of a widgetwidget 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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
window.s_widget.getElements(); |
s_widget.getFieldValue(key)
Use this method to return the data value of the widget field value that is defined by the key option.
Parameter
(s):
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 | mixed | The value of the field that is defined by the key defined. |
Example:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
s_widget.getFieldValue('element'); |
s_widget
.getForm()This method returns a form object that is placed using the <Form> or <remform> tags.
Parameter(s):
NameTypeMandatoryDefault ValuenameStringYNReturn:
TypeDescriptionObjectThis method returns a SimpleForm object.
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
const builtInForm = s_widgets.getForm('custom');
await builtInForm.save(); |
getId()
This Use this method returns to return a widget instance ID as a string value.
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 a widget option value the value of an option defined by the key from the widget Schema option values.
Parameter
(s):
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 | mixed | The value of the widget options option that is defined by the key. |
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widget.getOptionValue('label'); |
s_widget.removeTemplate(id)
The Use the method removes to remove all child nodes and content from the specified elementselement. It does not remove the element itself or its attributes.
Parameter(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 me </div> <button buttonType="approve" event-click="window.s_widget_custom.remove();"> Click meAdd </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)
This Use this method sets to set a value using for the key.
Info |
---|
If the value parameter is equal to 'null', 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()
This method transfers widget Use this method to transfer the data to a server, where the widget server script and updates widget data according to the server replyruns. As a result, the widget data is updated.
Return:
Type | Description |
---|---|
Object | This method returns a promise containing specific data 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)
This Use this method sets to set a widget option value using the key of the widget option.
Parameter(s)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', 'nameName'); |
s_widget.showData()
The Use the method displays to display the field 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 methods object within your scripts, when adding a widget to a form , or a page or for widgets widget interaction.
s_widgets.getFieldValue(widgetInstanceID, key)
This Use this method returns to return the objectvalue using data value of the widget field for the key and widget instance ID.
Parameter(s)Parameters:
Name | Type | Mandatory | Description | Default | value | 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 |
---|---|
mixedAny | Returns This method returns the object value. |
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widgets.getFieldValue('157555401214600424', 'name'); |
s_widgets.
getWidgets()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.This method returns all the widget instance IDs of the page.
Return:
Type | Description | ||
---|---|---|---|
Array | This method returns a list of all the IDs of the widgets instances located on the page. | List<String> | A list of ID objects of the String type. |
Example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widgets.getWidgets(); |
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
['160767740511016793', '160767742115787725', '160767742915897037', '160767743612372124', '158965632914393037', '158965975317960937', '161062077113210360'] |
s_widgets.setFieldValue(widgetInstanceID, key, value)
This method sets the value using the key Use this method to set a value for the key in the widget data, and the widget instance ID.
Parameter(s)Parameters:
Name | Type | Mandatory | Description | Default | value | 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 | ||||||
---|---|---|---|---|---|---|
| ||||||
s_widgets.getFieldValuesetFieldValue('157555401214600424', 'name', 'Alex'); |
Within the client-side scripts, you can configure your own widget methods by using the window.s_widget_custom variable:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
window.s_widget_custom.updateFullname = function() {
//
} |
Table of Contents | ||||
---|---|---|---|---|
|