Versions Compared

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? 

It consists of  handlebar and the bind variables 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)

Expand
titleClick here to see the list of handlebars...
HandlebarsUsageHandlebar HTML Tag Attributes
button2Maps the Displays - a button on the PS pagewrapper-class, parent, uid, psid, sm-pesudo-child-ref, width, submit-on-enter, notLevel0, class,sm-is-save-btn
buttonAsLink2Maps Displays - a button and displays the button as link on the pagewrapper-class, parent, uid, psid, sm-pesudo-child-ref, notLevel0, class
buttonWithIcon2Maps Displays - 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
buttonWithPSImage2Maps Displays - a button and display a button with same image present on the pagewrapper-class, parent, uid, psid, notLevel0
checkbox2Maps Displays - a checkbox and used when we don’t want to display its without a labelwrapper-class, parent, uid, psid, notLevel0, onValue, offValue, eventExists
checkboxWithLabel2Maps Displays - a checkbox and used when we want to display with labelwrapper-class, parent, uid, psid,notLevel0, onValue, offValue, eventExists, labelClass
date2Maps Displays - a date field and used when we don’t want to display its without a labelparent , uid, psid, notLevel0, eventExists,
dateWithLabel2Maps Displays - a date field and used when we want to display its with labelwrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol, inptCol ,
dropdown2Maps Displays - a drop down field and used when we don’t want to display its with out a labelwrapper-class, parent, uid, psid, notLevel0, eventExists,
dropdownWithLabel2Maps Displays - a drop down field and used when we want to display its with labelwrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol,inptCol
editbox2Maps a Displays an edit box field and used when we don’t want to display its without a labelwrapper-class, parent, uid, psid, notLevel0, eventExists, type, class
editboxWithLabel2Used to display a Displays an edit box with the associated labelwrapper-class, parent, uid, psid, notLevel0, eventExists, lblCol,inptCol, type
gridAddBtnMaps Displays - a button which adds the row in the row add button on a gridscroll_psid, parent
gridDeleteBtnMaps Displays - a button which deletes  the row in the row delete button on a gridscroll_psid, parent
gridTabsMaps the  Displays grid tabs if presentscroll_uid, scroll_psid, wrapper-class
label2Maps Displays - a label without any input fieldlblCol, uid, psid, notLevel0, parent, class
link2Maps the Displays a hyperlinkwrapper-class, uid,psid, class, parent, notLevel0, target
linkAsButton2Maps the hyperlink and shows the hyperlink as the Displays a hyperlink as a buttonuid, psid, parent, notLevel0, sm-is-save-btn, onclick
linkAsButtonWithIcon2Maps  the hyperlink and shows it as the Displays a hyperlink as a button with a custom iconuid, psid, parent, notLevel0, sm-is-save-btn, onclick, wrapper-class, icon
longEditbox2Maps the Displays a long edit box field with no without a labeluid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType
longEditboxWithLabel2Maps  the Displays a long edit box field along with associated labeluid, psid, parent, notLevel0, wrapper-class, style, eventExists, isRTE, class, RTEType, sm-format, inptCol, lblCol, rows
pagetabsMaps the Displays - page tabs on the pageBy default maps the page field names of the page tabs.
prompt2Maps  the Displays - prompt field on the page without associated with no labeluid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol
promptWithLabel2Maps the Displays - prompt field on the page along with associated label.uid, psid, parent, notLevel0, wrapper-class, eventExists, type, sm-format, inptCol, lblCol
pssearchtoolbarMaps Displays - 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.
pstoolbarMaps Displays - all the PeopleSoft delivered toolbar buttons By default uses the page field names of the buttons.
radio2Maps the Displays - radio button field on the page without associated a labeluid, psid, parent, notLevel0, eventExists
radioWithLabel2Maps the Displays - a radio button field on the page with associated a labeluid, psid, parent, notLevel0, eventExists, wrapper-class, labelClass
scrollHeaderMaps Displays the grid heading and  Navigation and navigation bar properties.scroll_psid, scroll_uid
text2Maps the Displays a text field without a labeluid, psid, parent, notLevel0, wrapper-class
textAsLabel2Maps  the Displays a text field and displays as with a label fielduid, psid, parent, notLevel0, wrapper-class, lblCol, class

...

Tag Attributes

Attributes in the handlebar will be substituted with user values.

The below list shows the attributes used in handlebars.


Expand
titleClick here to see Handlebar Tag Attributes..the binds -
AttributeDescription
uidUnique ID. This should be a unique id 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.

...