This document provides an overview on the handlebars that are used to create Smart UX responsive HTML pages.

What is a handlebar?

Handlebars mainly reduces the time and it is generic way to use similar kind of syntax.

What does a handlebar expression consists of?

It consists of handlebar and the bind variables wrapped in double curly brackets.

Below shown is an example of handlebars expression:

Handlebar Library

Given below is a list of handlebars that are commonly used in Smart UX development. Each and every field is mapped using psid (Page field id)

Click here to see the list of handlebars...

Handlebars	Usage	Handlebar Tag Attributes
button2	Maps the button on the PS page	wrapper-class, parent, uid, psid, sm-pesudo-child-ref, width, submit-on-enter, notLevel0, class,sm-is-save-btn
buttonAsLink2	Maps a button and displays the button as link on the page	wrapper-class, parent, uid, psid, sm-pesudo-child-ref, notLevel0, class
buttonWithIcon2	Maps a button and displays a button as any custom icon	wrapper-class, parent, uid, psid, sm-pesudo-child-ref, width, submit-on-enter, notLevel0, class, sm-is-save-btn, icon
buttonWithPSImage2	Maps a button and display a button with same image present on the page	wrapper-class, parent, uid, psid, notLevel0
checkbox2	Maps a checkbox and used when we don’t want to display its label	wrapper-class, parent, uid, psid, notLevel0, onValue, offValue, eventExists
checkboxWithLabel2	Maps a checkbox and used when we want to display with label	wrapper-class, parent, uid, psid,notLevel0, onValue, offValue, eventExists, labelClass
date2	Maps a date field and used when we don’t want to display its label	parent , uid, psid, notLevel0, eventExists,
dateWithLabel2	Maps a date field and used when we want to display its label	wrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol, inptCol ,
dropdown2	Maps a drop down field and used when we don’t want to display its label	wrapper-class, parent, uid, psid, notLevel0, eventExists,
dropdownWithLabel2	Maps a drop down field and used when we want to display its label	wrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol,inptCol
editbox2	Maps a edit box field and used when we don’t want to display its label	wrapper-class, parent, uid, psid, notLevel0, eventExists, type, class
editboxWithLabel2	Used to display a edit box with the associated label	wrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol,inptCol, type
gridAddBtn	Maps a button which adds the row in the grid	scroll_psid, parent
gridDeleteBtn	Maps a button which deletes the row in the grid	scroll_psid, parent
gridTabs	Maps the grid tabs if present	scroll_uid, scroll_psid, wrapper-class
label2	Maps a label without any input field	lblCol, uid, psid, notLevel0, parent, class
link2	Maps the hyperlink	wrapper-class, uid,psid, class, parent, notLevel0, target
linkAsButton2	Maps the hyperlink and shows the hyperlink as the button	uid, psid, parent, notLevel0, sm-is-save-btn, onclick
linkAsButtonWithIcon2	Maps the hyperlink and shows it as the button with custom icon	uid, psid, parent, notLevel0, sm-is-save-btn, onclick, wrapper-class, icon
longEditbox2	Maps the long edit box field with no label	uid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType
longEditboxWithLabel2	Maps the long edit box field along with associated label	uid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType, sm-format, inptCol, lblCol, rows
pagetabs	Maps the page tabs on the page	By default maps the page field names of the page tabs.
prompt2	Maps the prompt field on the page without associated label	uid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol
promptWithLabel2	Maps the prompt field on the page along with associated label.	uid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol, lblCol
pssearchtoolbar	Maps Return to search, previous in the list, next in the list buttons on the page	By default uses the page field names of the navigation buttons.
pstoolbar	Maps all the PeopleSoft delivered toolbar buttons	By default uses the page field names of the buttons.
radio2	Maps the radio button field on the page without associated label	uid, psid, parent, notLevel0, eventExists
radioWithLabel2	Maps the radio button field on the page with associated label	uid, psid, parent, notLevel0, eventExists, wrapper-class, labelClass
scrollHeader	Maps the grid heading and Navigation bar properties.	scroll_psid, scroll_uid
text2	Maps the text field	uid, psid, parent, notLevel0, wrapper-class
textAsLabel2	Maps the text field and displays as a label field	uid, psid, parent, notLevel0, wrapper-class, lblCol, class

Handlebar Tag Attributes

Attributes in the handlebar will be substituted with user values.

The below list shows the attributes used in handlebars.

Click here to see Handlebar Tag Attributes..

Attribute	Description
uid	Unique ID. This should be a unique id in the html file.
psid	Page field id generated by PeopleSoft.
wrapper-class	Serves the same purpose as class attribute in general CSS. i.e. adding styles to attribute inside the handlebar.
notlevel0	When any field object on a PeopleSoft page is not in level0 i.e., when it is inside a scroll or a grid, add the attribute notLevel0="true" to the field handlebar.
parent	If the field object is not at level0, the sm-id of the scroll/grid will be the parent of the field i.e., parent=(sm-id value of scroll/grid).
eventExists	When a PeopleSoft object has an event associated, add the attribute as eventExists="true" to that handlebar.
on/off value	This on/off values are the same values that checkbox has in the checkbox field properties. onValue="Y" - checkbox is checked, value is "on". offValue="N" - checkbox is unchecked, value is "off"
width	The default minimum width of the button is 80px. The pixel value of the width is customizable. For example, to increase the width of the button use width:"90px"
sm-is-del-btn	While deleting a row in a grid or scroll in a PeopleSoft page, an automated warning message is populated. This can be accomplished by adding the sm-is-del-btn attribute to button handlebar with sm-is-del-btn="true"
lblCol	The default column width of the PeopleSoft field label is col-md-4. Here, col-md-4 is the bootstrap class which indicates the width in mobile responsive mode. To change this label column width, use attribute lblCol="col-md/col-sm/col-xs/col-lg".
inptCol	The default column width of the PeopleSoft field input is col-md-8. Here, col-md-8 is the bootstrap class which indicates the width in mobile responsive mode. To change this input column width, use inptCol="col-md/col-sm/col-xs/col-lg".
type	This is used when the PS input type is of type password. Ex: type="password"
class	When any style needs to be applied to the field, add this attribute class with style provided in <head> section of the html document. Usually added as class="xxx".
scroll_psid	scroll_psid is generally used in scrollHeader,gridAddBtn and gridDeleteBtn handlebars. This is same as that of the grid/scroll id in "sm-source."
scroll_uid	scroll_uid is generally used in scrollHeader,gridAddBtn and gridDeleteBtn handlebars. The is same as that of the grid/scroll id in "sm-id.
icon	Takes the custom icon specified. Here, font-awesome icon is used. Ex: icon="plus-square" displays the plus-square icon.
isRTE	Used in longEditboxWithLabel2, longEditbox handlebar when the longEdit box is changed as Rich Text Editor type (RTE). This can be added as isRTE="true"
RTEType	Used in longEditboxWithLabel2, longEditbox handlebar when the longEdit box is a Rich Text Editor type (RTE) and type of RTE like RTEType="smartForms", RTEType="common".

Locating the psid of a field

Below highlighted is the PeopleSoft page field id. You need to place the cursor on the field and right click to inspect the element to see the details in console. This page field id is given as psid in the html page.

The field is mapped in the HTML file as shown below:

The following is the display on the MUI page:

Examples

1) pstoolbar

This handlebar is used to display the highlighted fields on the MUI page.

Also, the Toolbar actions that exist in classic page appear in MUI when this Toolbar is used.

2) gridAddBtn/gridDeleteBtn

This handlebar is used to map grid row add and delete buttons.

3) gridtabs

This handlebar is used to map gridtabs.

Documentation