Version: 1.20.1

Tag Attributes

When creating a widget with a SimpleTag, use the attributes below to configure its functionality.

caution

When a widget is implemented, all tag attribute values are transmitted as a string regardless of the attribute type; and during the processing phase, the attribute value is applied in line with the type specified.

Attribute types

There are two types of widget attributes:

configuration attributes that set form views of widgets.
event-related attributes that set actions when users interact with the widgets.

Configuration attributes

Attribute	Type	Description	Available in
alignRight	Boolean	Set to true to align text to the right.	<durationinput>
beginDate	String	Specify a minimum possible date for a field.	<date> <datetime>
buttonType	String	Specify button displaying style for forms and lists.	<button>
canExcludeAll	Boolean	Set the attribute to true to make it possible to leave the field with no items selected.	<multiselect>
canRead	Boolean	Restrict access to the specified table, set the attribute to false.	<list> <reference>
canCreate	Boolean	Set the attribute equal to true to add the button for creating a new record.	<list> <reference>
categoryDescription	String	Specify a table field that contains category descriptions.	<category> <categoryFlat>
categoryIcon	String	Specify a table column that contains category icons.	<category> <categoryFlat>
categorySubject	String	Specify a table field that contains category subject.	<category> <categoryFlat>
childDepth	Integer	Specify the depth of the child categories.	<sidemenu>
choiceConditionName	String	Define the columns that contain data of the Choice type to specify choice options in your condition.	<listitems>
class	String	Specify a CSS class name defined in the CSS field of the widget. Define the attribute in the Template field of the widget. Then, describe it in the CSS field.	All SimpleTags except for the Common tags <activityFeed> <attachment> <durationinput> <rem> <remform> and Portal tags <breadcrumbs> <sidemenu>
condition	String	Specify the condition. It is an equivalent of Reference Qualifier.	<list> <reference> <report> <listitems> <previewList>
config	String	Configure the Activity Feed. Describe the object in JSON format.	<activityFeed>
date	String	Specify a column containing the item creation date and time (for more details, see the example below).	<categoryFlat>
dateColumn	String	Specify a table column that contains dates related to list items.	<previewList>
dateConditionName	String	Define the columns that contain data of the Date or Date/Time type to specify date ranges in your condition.	<listitems>
disabled	Boolean	Set the attribute to true to disable the button. A disabled button cannot be clicked.	<button>
displayColumnNumber	Integer	Specify the number of the column, by clicking which the record opens.	<listitems>
doClose	Function	Specify the function to execute when the modal window or menu is closed.	<modal> <dropdownMenu>
elementCount	String	Specify the number of page items. If not specified, then equal to 5 by default.	<previewList>
endDate	String	Specify a maximum possible date for a field.	<date> <datetime>
events	String	Specify the actions to perform after one of the predefined patterns is selected: click context mouseOver	<dropdownMenu>
exclude	Array	Specify the parameters to exclude from the display.	<durationinput>
fixedCondition	String	Specify the condition applied to the list. Unlike the condition specified with the condition attribute, this condition is fixed and cannot be removed. It can be only specified more precisely. The attribute work logic is similar to the fixed reference qualifiers.	<listitems>
hint	String	Specify the button text hint.	<button>
includeCategories	Integer	Set the attribute to 1 to add categories to the side menu.	<sidemenu>
includeItems	Integer	Set the attribute to 1 to add items to the side menu.	<sidemenu>
isAlwaysOpen	Boolean	To make the Activity Feed widget always open, set the attribute equal to true. If the widget is always open, it has no chevron icon and option to hide.	<activityFeed>
isFixed	Boolean	Set the true value to disable the editing of the condition value.	<list> <reference>
isFullScreenMode	Boolean	Set the attribute to true to display the modal window in full screen when opened on a mobile device.	<modal>
isMandatory	Boolean	To make a field mandatory, set the attribute equal to true.	Общие Simple-теги, кроме<br/><activityFeed> <attachment> <button> <duration> <durationinput> <modal> <multiselect> <rem> <remform> <report>
isPortal	Boolean	Set the attribute to true to give the tag portal behavior and rendering.	<rem> <remform>
isRegistration	Boolean	Set to true to make registration available to new users of the service portal. By default, the attribute value is false and only existing users can log in.	<authfull>
isRememberMe	Boolean	Set to true to store the user's credentials on the computer.	<authfull>
isResetPassword	Boolean	Set to true to add a password reset link to the widget form. By default, this feature is disabled and the value is false.	<authfull>
isShow	Boolean	Set the attribute to true to display the modal window or menu.	<modal> <dropdownMenu>
isSwitchLang	Boolean	If the attribute value is false, users cannot change the interface language, and it is displayed in the system language.	<authfull>
isTreeShown	Boolean	Set this attribute value to true to group search results and display the results grouping tree.	<results>
isUserScripts/userScripts	Boolean	To disable the client scripts execution, set the false value.	<Form> <rem> <remform>
isVisible	Boolean	To disable the tag, set the false value. The default value is true.	Общие Simple-теги, кроме <activityFeed> <attachment> <button> <durationinput> <Form> <modal> <multiselect> <rem> <remform> <report>
itemDescription	String	Specify a table field that contains item descriptions.	<category> <categoryFlat>
itemIcon	String	Specify a table column that contains item icons.	<category> <categoryFlat>
itemPage	String	Specify the path to a page in the portal structure.	<listitems> <results> <search>
itemSubject	String	Specify a table field that contains item titles.	<category> <categoryFlat>
itemView	String	Specify the view used for item rendering.	<listitems> <previewList> <results> <search>
label	String	Specify the field label with the text information generally describing the field content.	Common SimpleTags except for <activityFeed> <attachment> <button> <durationinput> <Form> <modal> <multiselect> <rem> <remform> <report> <select>
listView/view	String	Specify a list view to use. Note that first you need to create this view in the List View (sys_ui_list).	<listitems> <previewList>
logo	String	Define the absolute path to the logo displayed on the authorization page.	<authfull>
maxValue	Integer	Specify the maximum value in milliseconds.	<durationinput>
model	String	This attribute connects the client controller data object. When the model data changes, it is automatically transferred to data of the client controller.	Common SimpleTags and PortalTag <dropdownMenu>, except for the Common tags <activityFeed> <attachment> <button> <conditions> <durationinput> <Form> <modal> <rem> <remform> <report>
modelId	String	Use this attribute to specify the ID of the RE model to show its attributes.	<rem> <remfrom>
name	String	Specify the card or form name.	<Form> <remfrom> <card>
nodeId	String	Specify the node ID.	<category> <categoryFlat>
options	Array	Specify the options available for selecting. Use the CodeMirror JSON formatting.	<select> <multiselect>
parentsDepth	Integer	Specify the depth of the parent category.	<sidemenu>
placeholder	String	Specify a placeholder for a text field.	<date> <datetime> <select> <string> <textarea> <search>
preview	String	Specify a column that contains information for the card preview.	<categoryFlat>
profileUrl	String	Specify the path to the service portal section that contains the current user's profile page. If specified, the Profile item is available in the user menu. Otherwise, this item is not available, and users cannot open their profiles.	<authheader>
quantity	Integer	Specify the maximum number of the search results per page.	<results>
radioButtonsMode	Boolean	Set the attribute to true to display choice options in the form of radio buttons. Otherwise, the standard drop-down list is used.	<select>
readOnly/isReadOnly	Boolean	To make the field read-only, set the attribute equal to true.	Common SimpleTags except for <activityFeed> <button> <durationinput> <Form> <modal> <rem> <remform> <report>
recordId	String	Specify an ID of an existing record to extend. When using, do not forget to specify a table (use the tableName attribute). See the example code for the <rem> SimpleTag.	<rem> <remform> <IndicatePresence>
redirectTo	String	Specify the path to redirect a user to the service portal after successful authorization.	<authfull>
reportId	String	Specify the report ID for viewing.	<report>
save	Sting	Add a Save button on the form with the customized text (see the code example below). It makes sense to use this attribute when it is impossible to use the UI actions due to any reasons (the uiActions attribute is equal to false).	<Form>
saveButtonCaption	String	Specify a text displayed on the Save button on the portal form.	<remform>
searchUrl	String	Specify the URL path that determines which page the user will be redirected to after clicking the Search button.	<search>
searchQuery	String	Add a search bar initial value.	<search>
searchQuery	String	Add a search bar to perform search requests and display results.	<results>
showTitle	Boolean	To enable the title displaying, set the attribute value equal to true.	<search>
size	String	Specify the search bar size. Available values: lg (large) sm (small)	<search>
size	String	Specify the dropdown menu size by selecting from the predefined options: low (224px) large (464px)	<dropdownMenu>
shortDescription	String	Add a short description for the card.	<card>
stateColumn	String	Specify a table column that contains item states.	<previewList>
style	String	Specify the display settings (size, font, color, and others.) of the tag elements using the CSS syntax.	Common SimpleTags except for <activityFeed> <attachment> <button> <durationinput> <Form>
subjectColumn	String	Specify a table column that contains item subjects.	<previewList>
svg/img	String	Specify the code of the SVG file with the pre-decoded image or a link to the image.	<button> <card>
sysId	String	Specify the ID of the table record. The table should be specified first via the tableName attribute. If the <activityFeed> tag is specified near the <Form> tag, the value of this attribute is populated automatically with the value from the relevant <Form> attribute.	<activityFeed> <Form>
tableId	String	Specify the table ID that the tag refers to.	<conditions>
tableName	String	Specify the table title that the tag refers to.	<activityFeed> <attachment> <conditions> <Form> <IndicatePresence> <list> <reference> <rem> <remform> <listitems> <previewList>
title	String	Specify the modal window or search title.	<modal> <search>
titleHide	Boolean	Set to true to show the form title by default.	<Form>
top	Integer	Specify the number of first matches to display in the search autosuggestion.	<search>
transparent	Boolean	Set this attribute to true to change the style of the list and make its background transparent.	<previewList>
tsGroupId	String	Enter an ID of the table group to specify the search area. Find the necessary information in the Text Search Group (ts_group) table.	<results> <search>
UiActions	Boolean	Set this attribute value to true to make UI actions available to use. Otherwise, their usage is prohibited (except for the Save button specified by the save attribute).	<Form>
url	String	Specify a URL that defines the page for this card.	<card>
user	String	Specify a column that contains the information about the item originator (for more details, see the example below).	<categoryFlat>
useSourceUrl	Boolean	Set to true to keep the original URL after a redirect if the user has not previously logged in. If the attribute value is true, it is a higher priority than the redirectTo attribute value.	<authfull>
value	String (Array for the <list> tag)	Specify the default value for a field.	Common SimpleTags except for <activityFeed> <attachment> <button> <Form> <modal> <multiselect> <reference> <rem> <remform>
values	Array	Specify the default value for a field.	<multiselect>
view	String	Define a view name of the table, for example, Default.	<Form>
wrap	Boolean	Set this attribute to true to set up the quick view.	<previewList>

event-change

Specify the actions performed when the change event occurs.

event-change
<string
  model="data.lastname"
  event-change="s_widget_custom.updateFullname();">
</string>

event-click

Specify the actions that should be performed when the click event occurs.

event-click
<button event-click="window.s_widget_custom.close();">
    {data.closeTitle}
</button>

onChange

Specify a function called when the value is changed. Set the attribute value to the custom s_widget_custom method created in the client script.

note

The attribute is applied to the <durationinput> and <search> tags instead of event-change.

The client controller components:

Template specifies the widget view and the way it displays in HTML format. It also allows end-users to input and to interact with data.
Client script runs a JS script on the client-side. It receives data from the server-side, processes data before rendering, then passes it to the widget template. Also, the client script passes the input data to the server-side.

In the widget template, use data input fields for passing the data values for any purpose. The client script uses the data object to access data received form the server side. After the client script processed the data, invoke the s_widget.serverUpdate() method to send the data to the server controller. When calling this method, the server script data object automatically overwrites the client controller data object.

Input and output fields

Input fields are widget elements. You can manage the entered data according to your purposes.

The code below implements data input using the model tag attribute, after the data gets updated on the client-side, this value passes to the <h1> header.

HTML
<string model="data.input">
</string>
<h1>
    {data.input}
</h1>

The <string> field is a text field that allows a user to enter some text information. The <h1> header dynamically displays this text with the {data.input} object.

Multiple data output

The examples below describe how to place the values into two fields and output the joined value of them formatted with "h1 header" style in two different ways.

Example 1

Template
<string model="data.lastname" event-change=";(( ) => {
    const lastname = s_widget.getFieldValue('lastname') || '';
    const firstname = s_widget.getFieldValue('firstname') || '';
    s_widget.setFieldValue('fullname', lastname + ' ' + firstname)
} )();">
</string>
<string model="data.firstname" event-change=";( () => {
    const lastname = s_widget.getFieldValue('lastname') || '';
    const firstname = s_widget.getFieldValue('firstname') || '';
    s_widget.setFieldValue('fullname', lastname + ' ' + firstname)
})();">
</string>
<h1>{data.fullname}</h1>

Example 2

Client script
;(() => {
    window.s_widget_custom = window.s_widget_custom || {};
    window.s_widget_custom.updateFullname = function() {
        const lastname = s_widget.getFieldValue('lastname') || '';
        const firstname = s_widget.getFieldValue('firstname') || '';
        s_widget.setFieldValue ('fullname2', lastname + ' ' + firstname)
    }
} )();

Template
<string model="data.lastname" event-change=";(( ) => {
    const lastname = s_widget.getFieldValue('lastname') || '';
    const firstname = s_widget.getFieldValue('firstname') || '';
    s_widget.setFieldValue('fullname', lastname + ' ' + firstname)
} )();">
</string>
<string model="data.firstname" event-change=";( () => {
    const lastname = s_widget.getFieldValue('lastname') || '';
    const firstname = s_widget.getFieldValue('firstname') || '';
    s_widget.setFieldValue('fullname', lastname + ' ' + firstname)
})();">
</string>
<h1>{data.fullname}</h1>

Tag Attributes

Attribute types​

Configuration attributes​

Event-related attributes​

event-change​

event-click​

onChange​

Widget data input and output​

Input and output fields​

Multiple data output​