Service Catalog portal page offers forms that allow users to submit for submitting service requests.
Generally, a request form page consists of the following elements:
- The <breadcrumbs> widget allows navigating within the Portal pages structure.
- The <sidemenu> widget adding a sidemenu.
- The service request form 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):
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<div class="portal__breadcrumbs customized"> <breadcrumbs> </div> |
After that, you can define the breadcrumbs view in the CSS field of this form:
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
.customized {
font-family: Tahoma,Verdana,Segoe,sans-serif;
} |
Sidemenu configuration
To configure a <sidemenu> widget, use the example below as a pattern:
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<SideMenu parentsDepth="1" childrenDepth="1" includeCategories="1" includeItems="1">\ </SideMenu> |
Service
CatalogRequest form
configurationconfiguration Anchor request form request form
| request form | |
| request form |
Service request form retrieves data from two sources: the Description and Name fields in a Request Template (itsm_request_template) record and the related form itself. ..Refer to the Administering Service Requests article to learn more.
To configure a service catalog widget, use the example below as a pattern:
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<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.headerPhoto}></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.headerPhoto}></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> |