Versions Compared

Key

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

The widget API describes SimpleWidget and SimpleWidgets client-side classes provide the methods for widget structure and functionality customization:

  • Use the s_widget

    and

    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

SimpleWidget


s_widget

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.

SimpleWidget

s_widget

To 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
languagejs
s_widget.getFieldValue(key); 

use the following approach:

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


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.

Parameters:

the  parameter (possible , , )Ninner 
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

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
titleAdd to a template field:Template
<div id="steps"></div>


Code Block
languagejs
themeEclipse
titleAdd to a client Client script
s_widget.addTemplate('steps', '<div class="main">', '', 'inner');

s_widget.getElements()


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:

TypeDescription
array<elements>The
Array of HTML elementsThis method returns an array of the widget structure elements
are collected in an array
.

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
AnyThe This 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()


This Use this method returns 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
AnyA This 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)


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):

NameTypeMandatoryDescriptionDefault valueExample
idStringYSpecify the id of the div tag.Nelement1

Return:

TypeDescription
VoidThis method does not return a value.

Example:

Code Block
languagexml
themeEclipse
titleAdd this to the Template field
linenumberstrue
<div id="element1">
  Remove me
</div>
<button buttonType="approve" event-click="window.s_widget_custom.remove();">
  Click meAdd
</button>


Code Block
languagecss
themeEclipse
titleAdd this to the CSS field
linenumberstrue
#element1 {
  background-color: yellow;
  height: 20px;
}


Code Block
languagejs
themeEclipse
titleAdd this to the Client Script fieldClient 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 to 'null', 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()


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:

TypeDescription
ObjectThis method returns a promise containing 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', 'nameName');

s_widget.showData()


The Use the method displays 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)


This Use this method returns to return the data value of the widget field for the key and widget instance ID.

Parameters:

NameTypeMandatoryDescriptionDefault valueExample
widgetInstanceIDString (the sys_id value)YSpecify the ID of the widget instance.N169598365414458401
keyStringYSpecify the key of the field whose value you need to get.Nname

Return:

TypeDescription
AnyReturns This method returns the object value.

Example:

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

s_widgets.getForm()


This Use this method returns to return a form object that is placed using the <form> <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()


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:

TypeDescription
ArrayA This 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
widgetInstanceIDString (the sys_id value)YSpecify 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