Versions Compared

Old Version 1

changes.mady.by.user Anna Kryzhanovskaya

Saved on

compared with

New Version 2

changes.mady.by.user Anna Kryzhanovskaya

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Service Catalog offers forms that allow users to submit 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 sidemenu.
  3. The service request form itself.

>> screenshot <<

Breadcrumbs

widget

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
languagexml
themeEclipse
titlebreadcrumbs
linenumberstrue
<div class="portal__breadcrumbs customized">
  <breadcrumbs>
</div>

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

Code Block
languagecss
themeEclipse
titleBreadcrumbs CSS
linenumberstrue
.customized {
  font-family: Tahoma,Verdana,Segoe,sans-serif;
}

Sidemenu

widget

configuration

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

Code Block
languagejs
themeEclipse
titlesidemenu
linenumberstrue
<SideMenu parentsDepth="1" childrenDepth="1" includeCategories="1" includeItems="1">\
</SideMenu>

Service Catalog

form widget configuration

form configuration 
Anchor
request form
request form

...


Code Block
languagejs
themeEclipse
titleService Catalog form
linenumberstrue
<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>