This page explains the steps needed for the following scenarios:
...
Create an empty HTML file and copy and paste the generated Template HTML into the newly created file. The name of this file is defined by you, and should clearly indicate the page & Define the file name, clearly indicating the page and component it is related to. In our example, the file will be is saved as "InvitationSource.html".
Once the Template HTML is saved, continue to add any necessary CSS references for styling. Bootstrap Add bootstrap tags should be added to make the page mobile responsive. You may adjust any additional tags or formatting as needed to achieve your ideal layout.
In the screen below the tags like < div class="row"><div class="col-md-*"> are bootstrap tags, which we specify are specified to make the page responsive based on width of screen.
...
The below highlighted screens are of Media Queries (Responsive Web Design Media Queries (w3schools.com). .srch-flds-gb is the class name we had created here. For the elements where these class is added width of 20% is added when screen width is 1025px . 40% width is displayed for second element under <div> where this class is added. These css styles are can be used are dependent depending on the UI requirement.
Once the HTML file is saved with all needed changes, upload the file to your ideal UX file path under Solutions root folder. It is recommend to create your own folder path for any pages not provided by SmartERP. This will help reconcile any changes we provide to the existing templates or folder structures. In our example, we are placing the HTML file in /smarterp/Solutions/ResponsiveTalentOnboarding/Invitation.
...
The cfg file stores the details about the PeopleSoft page and HTML that is used when displaying the page on the browser. Any page that has been modernized must be found exist in the configuration file. Generally this configuration file is named "onboarding.cfg". Based on your implementation, there may be additional configuration files.
...
Log into the SmartERP site and navigate to the home page. Once on the home page, run the command by appending admincmd=reloadrules to end of URL after the question mark. If there is not a no question mark before the command, add the character before the command and load the URL.
Not particularly on home page, even login page is fine. Other information is correct as above. In case if app/webserver are bounced no need to perform reloadrules.
You will be redirected to the ResponsiveUI Filter page shown below. Click on “Reload Configuration”.
Reload Configuration, close the tab once and reopen.
Step 5: Review Modern Page
...
For example if you want to remove the Last Name from the page, right click on the field and inspect element and look for id.
Go the following path /smarterp/Solutions/ResponsiveTalentOnboarding/Invitation/InvitationSource.html and search with id "SM_OB_INV_WRK_LAST_NAME_SRCH". Delete the handlebar i.e the snippet shown in below screen along with <div></div> tags and save the file . As long as "gulp" is running changes are moved to SVN.
...
When any Handlebar is changed:
We might make make changes in handlebar usually when peopletools PeopleTools version gets changed.
Navigate to <Instance> UX project folders using command prompt and run 'gulp prepare_dist' command.
...