Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Merged branch "DOC0000026" into parent

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:

Code Block
languagejs
s_widget.getFieldValue(key); 

use the following approach:

Code Block
languagejs
s_widget.getFieldValue(widgetId, key);


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:

the  parameter

inner 

, , after.
NameTypeMandatoryDescriptionDefault valueExample
idStringYSpecify the div tag id.Nsteps
templateStringYSpecify the template body.N<div class="main">
scriptString

Note

This parameter is mandatory if you need to define

the type

 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.

Ns_widget.addTemplate("cards", s_widget.getFieldValue("template"), "console.log('Hello world!');", "inner");
typeStringN
Info

Specify the template type. It defines, where the template is added. Available options:

  • inner
  • before
  • after

inner 


before

Return:

TypeDescription
VoidThis method does not return a value.

Example:

Code Block
languagexml
titleTemplate
<div id="steps"></div>


Code Block
languagejs
themeEclipse
titleClient script
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:

TypeDescription
Array of HTML elementsThis method returns an array of the widget structure elements.

Example:

Code Block
languagejs
themeEclipse
titles_widget.getElements()
linenumberstrue
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:

NameTypeMandatoryDescriptionDefault valueExample
keyStringYSpecify the field key that can be used to receive the value of the field.Nelement

Return:

TypeDescription
AnyThis method returns the value of the field that is defined by the key.

Example:

Code Block
languagejs
themeEclipse
titles_widget.getFieldValue
linenumberstrue
s_widget.getFieldValue('element');

s_widget.getId()


Use this method to return a widget instance ID.

Return:

TypeDescription
StringThis method returns a widget instance ID.

Example:

Code Block
languagejs
themeEclipse
titles_widget.getId
linenumberstrue
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:

NameTypeMandatoryDescriptionDefault valueExample
keyStringYSpecify the key of the option from the widget Schema option values.Nlabel

Return:

TypeDescription
AnyThis method returns a value of the widget option that is defined by the key.

Example:

Code Block
languagejs
themeEclipse
titles_widget.getOptionValue
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):

NameTypeMandatoryDescriptionDefault valueExample
idStringYSpecify the id of the div tag.Nelement1

Return:

TypeDescription
VoidThis method does not return a value.

Example:

Code Block
languagexml
themeEclipse
titleTemplate
linenumberstrue
<div id="element1">
  Remove
</div>
<button buttonType="approve" event-click="window.s_widget_custom.remove();">
  Add
</button>


Code Block
languagecss
themeEclipse
titleCSS
linenumberstrue
#element1 {
  background-color: yellow;
  height: 20px;
}


Code Block
languagejs
themeEclipse
titleClient script
linenumberstrue
;
(() => {
    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, s_widget.setFieldValue('subject', null), the defined field is cleared.

Parameters:

NameTypeMandatoryDescriptionDefault valueExample

key

StringYSpecify the key of the field whose value you need to change.Ntable_name
valueAnyYSpecify a new value for the field.NtableName

Return:

TypeDescription
VoidThis method does not return a value.

Example:

Code Block
languagejs
themeEclipse
titles_widget.setFieldValue
linenumberstrue
;
(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:

TypeDescription
ObjectThis method returns a Promise object that contains a server response.

Example:

Code Block
languagejs
themeEclipse
titles_widget.serverUpdate
linenumberstrue
;
(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:

NameTypeMandatoryDescriptionDefault valueExample
keyStringYSpecify the key of the widget option from Schema option values whose value you need to change.Nlabel
valueAnyYSpecify a new value for the option.NName

Return:

TypeDescription
VoidThis method does not return a value.

Example:

Code Block
languagejs
themeEclipse
titles_widget.setOptionValue
s_widget.setOptionValue('label', 'Name');

s_widget.showData()


Use the method to display the data of a widget in the console. 

Return:

TypeDescription
VoidObject

This method does not return a valueThe method returns an object with the widget parameters.

Example:

Code Block
languagejs
themeEclipse
titles_widget.showData
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:

NameTypeMandatoryDescriptionDefault valueExample
widgetInstanceIDStringYSpecify the ID of the widget instance.N169598365414458401
keyStringYSpecify the key of the field whose value you need to get.Nname

Return:

TypeDescription
AnyThis methd method returns the object value.

Example:

Code Block
languagejs
themeEclipse
titles_widgets.getFieldValue
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:

NameTypeMandatoryDefault value
nameStringYN

Return:

TypeDescription
ObjectThis method returns a SimpleForm object.

Example:

Code Block
languagejs
themeEclipse
titles_widgets.getForm
linenumberstrue
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:

TypeDescription
ArrayThis method returns a list of all the IDs of the widgets instances located on the page.

Example:

Code Block
languagejs
themeEclipse
titles_widgets.getWidgets
s_widgets.getWidgets();
Code Block
languagejs
themeEclipse
titleResponse example
['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:

NameTypeMandatoryDescriptionDefault valueExample
widgetInstanceIDStringYSpecify the ID of the widget instance.N169598365414458401
keyStringYSpecify the key of the field whose value you need to set.Nname
valueAnyYSpecify a new value for the field.NAlex

Return:

TypeDescription
VoidThis method does not return a value.

Example:

Code Block
languagejs
themeEclipse
titles_widgets.setFieldValue
s_widgets.setFieldValue('157555401214600424', 'name', 'Alex');


Table of Contents
maxLevel3
classfixedPosition