Service Catalog portal page offers forms for submitting service requests.

Generally, a request form page consists of the following elements:

  1. The breadcrumbs widget allows navigating within the Portal pages structure.
  2. The sidemenu widget adding a side menu.
  3. The request form widget itself.

Breadcrumbs configuration

To configure breadcrumbs correctly, it is preferable to use the attribute values as in the example below (type these values in the Template field of the breadcrumbs widget form):

breadcrumbs
<div class="portal__breadcrumbs customized">
  <breadcrumbs>
</div>

After that, you can define the breadcrumbs view in the CSS field of this form:

Breadcrumbs CSS
.customized {
  font-family: Tahoma,Verdana,Segoe,sans-serif;
}

Sidemenu configuration

To configure a sidemenu widget, use the example below as a pattern:

sidemenu
<SideMenu parentsDepth="1" childrenDepth="1" includeCategories="1" includeItems="1">\
</SideMenu>

Service Request form configuration

Service request form retrieves data from two sources: the fields in a Request Template (itsm_request_template) record and the form of a relevant table itself. Refer to the Administering Service Requests article to learn more.

To configure the Simple Service Catalog Request Form widget, use the example below as a pattern. Expand the blocks to see code examples.

Template 
<div simple-if={data.ok} class="catalog__record">
  <div simple-if={data.sizeDesktop}>
    <div class="body">
      <div id="recordContent">
        <div class="recordTitle">{data.headerTitle}</div>
        <div class="recordType">{data.headerTypeText}</div>
        <div class="recordDescription">{data.headerDescription}</div>
      </div>
      <div class="recordIcon"><img width="176" height="176" alt="" src={data.headerImage}></img></div>
    </div>
    <div class="recordBorder"></div>
  </div>
  <div simple-if={data.sizeMobile}>
    <div class="mobile-recordIcon"><img width="112" height="112" alt="" src={data.headerImage}></img></div>
    <div class="mobile-recordContent">
      <div class="mobile-recordTitle">{data.headerTitle}</div>
      <div class="mobile-recordType">{data.headerTypeText}</div>
      <div class="mobile-recordDescription">{data.headerDescription}</div>
      <div event-click="s_widget_custom.readMore()" class="mobile-recordDescription__readMore" simple-if={data.descriptionReadMore}>
        {data.readMoreText}
      </div>
    </div>
  </div>
  <Form tableName={data.table} view={options.view} save={data.Save} uiActions={options.uiActionsOn} userScripts={options.clientScriptsOn}></Form>
</div>
<div simple-if={data.error} class="catalog__record">
  <div class=catalog__record-error>
    Exception: {data.exceptions}
  </div>
</div>
<div simple-if={data.afterSave} class="catalog__record-aftersave">
  <div class="catalog__record-aftersave-icon"></div>
  <div class="catalog__record-aftersave-title">{data.requestSent}</div>
  <div class="catalog__record-aftersave-button">
    <div id="custom_button" class="catalog__record-aftersave-button-text">{data.newRequest}</div>
  </div>
  <div class="catalog__record-aftersave-link"><a href="/portal/my_tickets">{data.myTickets}<a></div>
</div>
Server Script 
//SERVER
;
(() => {
    if (input.item) {
        data.item = input.item;
        data.error = "false";
        data.ok = "false";
        data.exceptions = "";
        const taskTemplate = new SimpleRecord('task_template');
        taskTemplate.get(data.item);
        if (taskTemplate.sys_id) {
            const requestTable = new SimpleRecord('sys_db_table');
            requestTable.get(taskTemplate.getValue('table_id'));
            if (requestTable.sys_id) {
                const tableView = new SimpleRecord('sys_ui_form');
                tableView.addQuery('title', options.view);
                tableView.addQuery('table_id', requestTable.sys_id);
                tableView.query();
                if (tableView.next()) {
                    data.table = requestTable.name;
                    data.ok = "true";
                } else {
                    data.exceptions = "Such SP view for request_table is not found";
                    data.error = "true";
                }
            } else {
                data.exceptions = "Such a request_table is not found";
                data.error = "true";
            }
            data.headerTitle = taskTemplate.getDisplayValue('name');
            data.headerDescription = taskTemplate.getDisplayValue('description');
            const message = new SimpleMessage();
            const headerTypeTextMessage = message.getMessage('New request in the {category_name} category');
            data.headerTypeText =
                headerTypeTextMessage.replace(/{category_name}/g, `"${taskTemplate.service_category_id.name}"`);
            const headerImageDefault = "data:image/svg+xml;charset=UTF-8,%3csvg width='176' height='176' viewBox='0 0 176 176' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='176' height='176' rx='8' fill='%23B6BBC9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M69.333 66.6667C67.8602 66.6667 66.6663 67.8606 66.6663 69.3333V106.667C66.6663 108.139 67.8602 109.333 69.333 109.333H106.666C108.139 109.333 109.333 108.139 109.333 106.667V69.3333C109.333 67.8606 108.139 66.6667 106.666 66.6667H69.333ZM61.333 69.3333C61.333 64.9151 64.9147 61.3333 69.333 61.3333H106.666C111.085 61.3333 114.666 64.9151 114.666 69.3333V106.667C114.666 111.085 111.085 114.667 106.666 114.667H69.333C64.9147 114.667 61.333 111.085 61.333 106.667V69.3333Z' fill='%236E728F'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M78.6663 77.3333C77.93 77.3333 77.333 77.9303 77.333 78.6667C77.333 79.403 77.93 80 78.6663 80C79.4027 80 79.9997 79.403 79.9997 78.6667C79.9997 77.9303 79.4027 77.3333 78.6663 77.3333ZM71.9997 78.6667C71.9997 74.9848 74.9844 72 78.6663 72C82.3482 72 85.333 74.9848 85.333 78.6667C85.333 82.3486 82.3482 85.3333 78.6663 85.3333C74.9844 85.3333 71.9997 82.3486 71.9997 78.6667Z' fill='%236E728F'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M96.7807 80.781C97.8221 79.7396 99.5106 79.7396 100.552 80.781L113.885 94.1144C114.927 95.1558 114.927 96.8442 113.885 97.8856C112.844 98.927 111.155 98.927 110.114 97.8856L98.6663 86.4379L71.2186 113.886C70.1772 114.927 68.4888 114.927 67.4474 113.886C66.406 112.844 66.406 111.156 67.4474 110.114L96.7807 80.781Z' fill='%236E728F'/%3e%3c/svg%3e";
            if (taskTemplate.image) {
                const templateImage = taskTemplate.image;
                const imageRecord = new SimpleRecord('sys_image');
                imageRecord.get(templateImage);
                if (imageRecord.sys_id) {
                    const image = new SimpleImage();
                    data.headerImage = image.getImageUrlById(templateImage);
                } else {
                    data.headerImage = headerImageDefault;
                }
            } else {
                data.headerImage = headerImageDefault;
            }
        } else {
            data.exceptions = "Such a request is not found";
            data.error = "true";
        }
    }
})();

In the Widget Instance (sys_widget_instance) table, you can additionally configure the widget. These configurations define the set of fields displayed on a form and available UI actions.

Refer to the Portal SimpleTags article to learn more.

Schema Option Values
{
  "view": "SP",
  "defaultSave": "Send Form",
  "uiActionsOn": "false",
  "clientScriptsOn": "true"
}

  • No labels

© 2019-2023, SimpleOne

https://simpleone.ru