Versions Compared

Version Old Version 16 New Version 17
Changes made by

srigowri.a

srigowri.a

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from this space and version 1.9

...

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 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)

Expand
titleClick here to see the list of handlebars...
HandlebarsUsageHandlebar Tag Attributes
button2Displays a Maps the button on the PS pagewrapper-class, parent, uid, psid, sm-pesudo-child-ref, width, submit-on-enter, notLevel0, class,sm-is-save-btn
buttonAsLink2Displays Maps a button and displays the button as link on the pagewrapper-class, parent, uid, psid, sm-pesudo-child-ref, notLevel0, class
buttonWithIcon2Displays Maps a button and displays a button as any custom iconwrapper-class, parent, uid, psid, sm-pesudo-child-ref, width, submit-on-enter, notLevel0, class, sm-is-save-btn, icon
buttonWithPSImage2Displays Maps a button and display a button with same image present on the pagewrapper-class, parent, uid, psid, notLevel0
checkbox2Displays Maps a checkbox without a and used when we don’t want to display its labelwrapper-class, parent, uid, psid, notLevel0, onValue, offValue, eventExists
checkboxWithLabel2Displays Maps a checkbox and used when we want to display with labelwrapper-class, parent, uid, psid,notLevel0, onValue, offValue, eventExists, labelClass
date2Displays Maps a date field without a and used when we don’t want to display its labelparent , uid, psid, notLevel0, eventExists,
dateWithLabel2Displays Maps a date field with and used when we want to display its labelwrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol, inptCol ,
dropdown2Displays Maps a drop down field without a and used when we don’t want to display its labelwrapper-class, parent, uid, psid, notLevel0, eventExists,
dropdownWithLabel2Displays Maps a drop down field with and used when we want to display its labelwrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol,inptCol
editbox2Displays an Maps a edit box field without a and used when we don’t want to display its labelwrapper-class, parent, uid, psid, notLevel0, eventExists, type, class
editboxWithLabel2Displays an Used to display a edit box with the associated labelwrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol,inptCol, type
gridAddBtnDisplays Maps a row add button on a button which adds the row in the gridscroll_psid, parent
gridDeleteBtnDisplays Maps a row delete button on a button which deletes  the row in the gridscroll_psid, parent
gridTabsDisplays grid Maps the  grid tabs if presentscroll_uid, scroll_psid, wrapper-class
label2Displays Maps a label without any input fieldlblCol, uid, psid, notLevel0, parent, class
link2Displays a Maps the hyperlinkwrapper-class, uid,psid, class, parent, notLevel0, target
linkAsButton2Displays a Maps the hyperlink and shows the hyperlink as a the buttonuid, psid, parent, notLevel0, sm-is-save-btn, onclick
linkAsButtonWithIcon2Displays a hyperlink as Maps  the hyperlink and shows it as the button with a custom iconuid, psid, parent, notLevel0, sm-is-save-btn, onclick, wrapper-class, icon
longEditbox2Displays a Maps the long edit box field without a with no labeluid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType
longEditboxWithLabel2Displays a Maps  the long edit box field along with associated labeluid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType, sm-format, inptCol, lblCol, rows
pagetabsDisplays Maps the page tabs on the pageBy default maps the page field names of the page tabs.
prompt2Displays Maps  the prompt field with no on the page without associated labeluid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol
promptWithLabel2Displays Maps the prompt field on the page along with associated label.uid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol, lblCol
pssearchtoolbarDisplays Maps Return to Searchsearch, Previous previous in the Listlist, Next next in the List list buttons on the pageBy default uses the page field names of the navigation buttons.
pstoolbarDisplays Maps all the PeopleSoft delivered toolbar buttons By default uses the page field names of the buttons.
radio2Displays a Maps the radio button field on the page without a associated labeluid, psid, parent, notLevel0, eventExists
radioWithLabel2Displays a Maps the radio button field on the page with a associated labeluid, psid, parent, notLevel0, eventExists, wrapper-class, labelClass
scrollHeaderDisplays Maps the grid heading and navigation and  Navigation bar properties.scroll_psid, scroll_uid
text2Displays a Maps the text fieldwithout a labeluid, psid, parent, notLevel0, wrapper-class
textAsLabel2Displays a Maps  the text field with and displays as a label fielduid, psid, parent, notLevel0, wrapper-class, lblCol, class

...

Handlebar Tag Attributes

Attributes in the handlebar will be substituted with user values.

...

Expand
titleClick here to see the Handlebar Tag Attributes..
AttributesAttributeDescription
uidUnique ID. This should be a unique id for each filed mapped in the html file.
psid

Page field id generated by PeopleSoft.

wrapper-classServes 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).

eventExistsWhen 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_uidscroll_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"

RTETypeUsed 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 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.

...