Tag Attributes

Set true, to align text to the right.

Specify a minimum possible date for a field.

<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime>

const nowDate = new SimpleDateTime();
data.beginDate = nowDate.getDate();
nowDate.addDays(3);
data.endDate = nowDate.getDate();

Specify button displaying style for forms and lists. The disabled buttons appear in gray. 

Button colors:

• unstyled – a white color button
• primary – a blue color button
• approve – a green color button
• destructive – a red color button

• secondary – a transparent background for the button

Use the following button types along with the svg attribute:

• icon-mini – a small square button

• icon – a square button

• icon-primary – a square button with blue background
• icon-border – a square button with borders
• expand – a rectangular button with blue background, and specified svg is colored in blue as well

<button class="btn" event-click="window.s_widget_custom.forceUpdate();" buttonType="destructive">
  Force
</button>

Set the attribute to true to make it possible to leave the field with no items selected.

<multiselect model="data.values" canExcludeAll="true" values='["1", "2"]' options='[{"database_value":"","display_value":""},{"database_value":"1","display_value":"First"},{"database_value":"2","display_value":"Second"}]'></multiselect>

Set the attribute equal to true to add the button  for creating a new record.

Specify a table column that contains category icons. 

Specify a table field that contains category descriptions. 

Specify the depth of the child categories.

Define the columns that contain data of the Choice type to specify choice options in your condition. 

Specify a CSS class name defined in the CSS field of the widget.

Define the attribute it in the Template field of the widget. Then, describe it in the CSS field.

<button
  id="addBtn"
  class="button disable"
  event-click="window.s_widget_custom.addParticipants()">
  {data.createCABbuttonTitle}
</button>

.button {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  border-radius: 4px;
  padding: 0 14px;
  line-height: 30px;
  letter-spacing: 0.2px;
  background-color: #0f8af9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  height: 32px;
}
.button.disable {
  cursor: not-allowed;
  pointer-events: none;
  color: #c0c0c0;
  background-color: #ffffff;
 }

Specify the condition. It is an equivalent of Reference Qualifier

<reference
  isFixed="true"
  condition="{data.condition}"
  label="{data.instanceTitle}"
  tableName="sys_cmdb_ci_instance"
  model="data.instance"
  event-change="s_widget_custom.instanceSelected();">
</reference>

if (!!input.tableName && !!input.caller) {
  data.condition =
    `owned_by=${input.caller}^ORDERBYDESCsys_created_at`;
}

Configure the Activity Feed. Describe the object in JSON format, as in the example below. 

Define the following parameters:

• title – change the title of the Activity Feed.
• journal – specify the Journal Input fields to display.
• columns – filter the fields to display in History.
• classes – add classes to style the Activity Feed. These class styles can be redefined.
• isNotStylized – remove the styling of the Activity Feed.

Specify a column containing the item creation date and time (for more details, see the example below).

Specify a table column that contains dates related to list items. 

Define the columns that contain data of the Date or Date/Time type to specify date ranges in your condition.

Set the attribute to true to disabled the button. A disabled button cannot be clicked.

Specify the number of the column, by clicking on which the record opens.

Specify the function to execute when the modal window or menu is closed.

<modal
  isShow="{data.isShow}"
  doClose="window.s_widget_custom.countClosing();">
</modal>

window.s_widget_custom.countClosing = function () {
  window.closeCount = window.closeCount + 1 || 1
  s_widget.setFieldValue('isShow', false);
}

Specify the number of page items. If not specified, then equal to 5 by default. 

Specify a maximum possible date for a field.

<datetime model="data.dueDate" label="data.dueDateTitle" isMandatory="true" isVisible="true" beginDate="{data.beginDate}" endDate="{data.endDate}"></datetime>

const nowDate = new SimpleDateTime();
data.beginDate = nowDate.getDate();
nowDate.addDays(3);
data.endDate = nowDate.getDate();

Specify the actions to perform after one of the predefined patterns is selected:

• click
• context
• mouseOver

Specify the parameters to exclude from the display.

<durationinput value='{data.duration1}' exclude='["days","seconds"]' alignRight='true' onChange="s_widget_custom.onChange1(arguments[0]);"></durationinput>
<durationinput value='{data.duration2}' exclude='["days","seconds"]' alignRight='true' onChange="s_widget_custom.onChange2(arguments[0]);"></durationinput>

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.

Set the true value to disable the editing of the condition value.

<reference
  isFixed="true"
  isMandatory="true"
  condition="(state!=10)"
  label="Incident"
  model="data.incident_id"
  tableName="itsm_incident">
</reference>

Set the attribute to true to display the modal window in full screen when opened on a mobile device.

To make a field mandatory, set the attribute equal to true.

<select model="data.reason" label="{data.reasonTitle}" options='[{ "database_value": "", "display_value": "--None--" },
      {"database_value": "defect", "display_value": "Defect"},
      {"database_value": "low_test_coverage", "display_value": "Low Test Coverage"},
      {"database_value": "other", "display_value": "Other"}]' value='{"database_value": ""}' isMandatory="true">
</select>

Set the attribute to true to display the modal window or menu.

<modal
  model="data.modal"
  title="{data.modalTitle}"
  isShow="{data.isShow}">
</modal>

If the attribute value is false, users cannot change the interface language, and it is displayed in the system language.

To disable the tag, set the false value.

<string
  model="data.additionalComment"
  isVisible="{data.showComment}">
</string>

Specify a table field that contains item descriptions.

Specify a table column that contains item icons.

Specify the view used for item rendering.

Speicy the field label with the text information generally describing the field content.

<textarea
  model="data.name"
  label="Name">
</textarea>

Specify a list view to use. Note that first you need to create this view in the List Views (sys_ui_list) table.

Define the absolute path to the logo displayed on the authorization page.

For example:

https://example.com/logo.png

Specify the maximum value in milliseconds.

This attribute connect the client controller data object. When the model data changes, it is automatically transferred to data of the client controller.

<textarea
  model="data.name"
  label="Name">
</textarea>

Specify the options available for selecting. Use the CodeMirror JSON formatting.

<select model="data.reason" label="{data.reasonTitle}" options='[{ "database_value": "", "display_value": "--None--" },
      {"database_value": "defect", "display_value": "Defect"},
      {"database_value": "low_test_coverage", "display_value": "Low Test Coverage"},
      {"database_value": "other", "display_value": "Other"}]' value='{"database_value": ""}'>
</select>

Specify the depth of the parent category.

Specify a placeholder for a text field.

<textarea
  model="data.name"
  label="Name"
  placeholder="{data.namePlaceholderText}">
</textarea>

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.

Specify the maximum number of the search results per page.

Set the attribute to true to display choice options in the form of radio buttons. Otherwise, the standard drop-down list is used.

To make the field read-only, set the attribute equal to true.

<select model="data.state" label="{data.stateTitle}" options='[
      {"database_value": "registered", "display_value": "Registered"},
      {"database_value": "open", "display_value": "Open"},
      {"database_value": "in_progress", "display_value": "In Progress"}]' value='{"database_value": ""}'
  readOnly="true">
</select>

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 modelId="{data.model_id}" tableName="{data.table_name}" recordId ="{data.record_id}" />

Specify the path to redirect a user to the service portal after successful authorization.

Specify the report ID for viewing.

<report reportid="{data.monthBarReportId}" condition="(group.nameLIKEdesk^state=active)" />

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

Specify a text displayed on the Save button on the portal form.

<remform modelId="{data.model_id}" isPortal="true" tableName="rem_table" saveButtonCaption="Save" />

Specify the URL path that determines which page the user will be redirected to after clicking the Search button.

Add a search bar initial value.

Add a search bar to perform search requests and display results.

To enable the title displaying, set the attribute value equal to true.

Specify the search bar size. Available values: 

• lg (large)
• sm (small)

Specify the dropdown menu size by selecting from the predefined options:

• low (224px)
• large (464px)

Add a short description for the card.

Specify a table column that contains item states.

Specify the display settings (size, font, color, and others.) of the tag elements using the CSS syntax.

<textarea
  model="data.notes"
  label="Notes"
  style="height: 328px; width: 100%; padding: 32px 64px 40px 64px;">
</textarea>

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.

Specify the table ID that the tag refers to.

Specify the table title that the tag refers to.

<reference
  isFixed="true"
  isMandatory="true"
  condition="(state!=10)"
  label="Incident"
  model="data.incident_id"
  tableName="itsm_incident">
</reference>

Specify the modal window or search title.

<modal
  title="{data.modalTitle}"
  isShow="{data.isShow}"
</modal>

Set to true to show the form title by default.

Specify the number of first matches to display in the search autosuggestion.

Set this attribute to true to change the style of the list and make its background transparent.

Enter an ID of the table group to specify the search area. Find the necessary information in the Text Search Group (ts_group) table.

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

Specify a URL that defines the page for this card.

Specify a column that contains the information about the item originator (for more details, see the example below). 

Set to true to keep the original URL after a redirect if the user has not previously logged in.

Specify the default value for a field.

<checkbox
  model="data.locked_out"
  label="{data.lockedOutLabel}"
  value="true">
</checkbox>

<list label="Configuration Item" model="data.element" tableName="cmdb" isMandatory="true" condition="{data.condition}" value='[{"database_value":"1","display_value":"First"},{"database_value":"2","display_value":"Second"}]'></list>

Specify the default value for a field.

<multiselect model="data.values" canExcludeAll="true" values='["1", "2"]' options='[{"database_value":"","display_value":""},{"database_value":"1","display_value":"First"},{"database_value":"2","display_value":"Second"}]'></multiselect>

Define a view name of the table, for example, Default.