This page explains the steps needed for the following scenarios:
...
As an example, let us consider modernizing the “Invitation Search“ page. The classic page is shown below.
|
Step 1: Generate the Rule and Template HTML code with Smart UX utility
...
In Template Generator page, provide the Component Name and Page Name of the page you wish to modernize, and then click on "Generate Rule & HTML".
|
This will generate the Rule and Template HTML as shown below. Copy and Paste the Rule and Template HTML generated to a text file for later steps.
|
Note: Here, we use VSCode editor for creating/editing of html/cfg files.
...
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 can be used 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 exist be found in the configuration file. Generally this configuration file is named "onboarding.cfg". Based on your implementation, there may be additional configuration files.
<SITE_PATH_HERE>/applications/peoplesoft/PORTAL.war/smart is the SVN branch - branch where we house the file.
Open the onboarding.cfg file. Scroll to the bottom of the document and copy and paste the Rule that was generated in step one. Update the template attribute to reference the full path where the file was placed.
...
Log into the SmartERP site and navigate to the home page. Once on the home page, run the command by appending admincmd=reloadrules to - to end of URL after the question mark. If there is no question mark before the command, add the character before the command and load the URL.
...
Once the configuration has been reloaded, navigate to your page and you should see the modern page display.
Note: Whenever any changes are not reflecting on the MUI page, navigate to <Instance> UX project folders using command prompt and check if 'gulp' command is running.
Scenario 2: Adding a new field to an already existing modern page.
...
Locate the associated Modern HTML file in SVN and edit. Locate the are area of the HTML where the field should be added. Use the appropriate handlebar tag and adjust the psid value to the ID value copied from the classic HTML. Save your changes.
Note: Since the example shown utilizes a prompt field, the correct handlebar to use here is promptWithLabel2. For more details on using the handlebars, please click here.
Step 3: Review Changes
...
Scenario 3: Removing a field on an existing modern page
Step 1: Locate the psid of the field to be removed
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.
Step 2: Locate the impacted modern html file
Go the following path /smarterp/Solutions/ResponsiveTalentOnboarding/Invitation/InvitationSource.html and search with id
Step 3: Locate the HTML tag for the specific psid and delete
Search for psid "SM_OB_INV_WRK_LAST_NAME_SRCH". Delete the handlebar i.e the snippet shown in below screen along with <div></div> and open and close <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 changes in handlebar usually when PeopleTools version gets changed.
Note: Whenever any changes are not reflecting on the MUI page, navigate to <Instance> UX project folders using command prompt and and confirm the gulp command is running.
PeopleTools Version Updates
There are times when a new PeopleTools release requires an update to the handlebar code. If these are required, updates would be provided by SmartERP for the specific PeopleTools version and may be request through a HelpDesk Ticket. Once any PeopleTools version specific handlebars are received, follow the steps below to update any modern pages containing the handlebar reference.
Step 1: Replace the Handlebar files with the updated copies in SVN
Step 2: Run gulp command
Navigate to <Instance> UX project folders using command prompt and run 'gulp prepare_dist' command.
This command recompiles all the HTML files wherever that particular handlebar is used. After the command is run, it may take some time to compile all the files. Move these files along the SDLC.
