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?

A handlebar consists of a HTML tag that is 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	Displays a 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	Displays a button and displays the button as link on the page	wrapper-class, parent , uid, psid, sm-pesudo-child-ref, notLevel0, class
buttonWithIcon2	Displays 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	Displays a button and display a button with same image present on the page	wrapper-class, parent , uid, psid, notLevel0
checkbox2	Displays a checkbox without a label	wrapper-class, parent , uid, psid, notLevel0, onValue, offValue, eventExists
checkboxWithLabel2	Displays a checkbox with label	wrapper-class, parent , uid, psid,notLevel0, onValue, offValue, eventExists, labelClass
date2	Displays a date field without a label	parent , uid, psid, notLevel0, eventExists,
dateWithLabel2	Displays a date field with label	wrapper-class, parent , uid, psid, notLevel0, eventExists, lblCol, inptCol ,
dropdown2	Displays a drop down field without a label	wrapper-class, parent ,uid, psid,notLevel0, eventExists,
dropdownWithLabel2	Displays a drop down field with label	wrapper-class, parent , uid, psid,notLevel0, eventExists, lblCol,inptCol
editbox2	Displays an edit box field without a label	wrapper-class, parent , uid, psid,notLevel0, eventExists, type, class
editboxWithLabel2	Displays an edit box with label	wrapper-class, parent , uid, psid,notLevel0, eventExists, lblCol,inptCol, type
gridAddBtn	Displays a row add button on a grid	scroll_psid, parent
gridDeleteBtn	Displays a row delete button on a grid	scroll_psid, parent
gridTabs	Displays grid tabs if present	scroll_uid, scroll_psid, wrapper-class
label2	Displays a label without any input field	lblCol, uid, psid, notLevel0, parent, class
link2	Displays a hyperlink	wrapper-class, uid,psid, class,parent, notLevel0, target
linkAsButton2	Displays a hyperlink as a button	uid, psid, parent, notLevel0, sm-is-save-btn, onclick
linkAsButtonWithIcon2	Displays a hyperlink as button with a custom icon	uid, psid, parent, notLevel0, sm-is-save-btn, onclick, wrapper-class, icon
longEditbox2	Displays a long edit box field without a label	uid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType
longEditboxWithLabel2	Displays a long edit box field with label	uid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType, sm-format, inptCol, lblCol, rows
pagetabs	Displays page tabs	By default maps the page field names of the page tabs.
prompt2	Displays prompt field with no label	uid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol
promptWithLabel2	Displays prompt field with label.	uid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol, lblCol
pssearchtoolbar	Displays 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	Displays all the PeopleSoft delivered toolbar buttons	By default uses the page field names of the buttons.
radio2	Displays a radio button field without a label	uid, psid, parent, notLevel0, eventExists
radioWithLabel2	Displays a radio button field with a label	uid, psid, parent, notLevel0, eventExists, wrapper-class, labelClass
scrollHeader	Displays the grid heading and navigation bar properties.	scroll_psid, scroll_uid
text2	Displays a text field without a label	uid, psid, parent, notLevel0, wrapper-class
textAsLabel2	Displays a text field with a label	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 the Handlebar Tag Attributes

Attributes	Description
uid	Unique ID. This should be a unique id for each filed mapped 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.