| Table of Contents |
|---|
- Modernizing a brand new page
- Mapping Adding a new field to an already existing html modern (MUI) page when it is has been added in classic to classic page
- Removing a field from an existing modern (MUI) page
| Table of Contents |
|---|
Scenario 1: Modernizing a
...
new page
As an example, let us consider modernizing the “Invitation Search“ page. Given below is screenshot of the The classic page is shown below.
|
...
Step 1: Generate the
...
Rule and Template HTML code with Smart UX utility
Navigate: Main Menu >> Smart UX >> Template Generator
In Template Generator page, provide the Component Name and Page Name of the Invitation Search 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.
Step 2:
...
Note: The cfg file is where the rules are mapped and the server initially search the cfg file before displaying any page on the browser.
...
Create the Template HTML file
Right click on 'Invitation' folder and click on "New File"
Create an empty HTML file and copy and paste the generated Template HTML into the newly created file. Define the file name, clearly indicating the page and component it is related to. In our example, the file is saved as "InvitationSource.html".
Once the Template HTML is saved, continue to add any necessary CSS references for styling. Add bootstrap tags 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 are specified to make the page responsive based on width of screen.
For more info on bootstrap: https://getbootstrap.com/docs/3.4/css/
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.
Step 3: Update the cfg file with the new Rule and HTML template path
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 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 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.
In this example, we've added the generated rule for page “SM_OB_INVT_SRCH_PG” is the page name and the cfg file name is 'onboarding.cfg'.
Below screenshot shows how the rule is to be created:
and added in the correct path referenced the generated template file.
"/smarterp/Solutions/ResponsiveTalentOnboarding/pages/Invitation/" is the path where the file name 'InvitationSource.html' is createdwas placed.
Step
...
Right click on 'Invitation' folder, select 'New File' and enter the html file name with '.html' extension.
Here, the file is named as 'InvitationSource.html'.
...
...
Place the HTML content generated by the utility in 'InvitationSource.html' file. In the generated HTML content, make changes like adding css (if required) and bootstrap to make it mobile responsive.
...
Step 3:
...
4: Reload Rules
Whenever changes are made to a configuration file, they must be refreshed to be reflected online.
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 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
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.
...
Step 4: Run admincmd=reloadrules
Whenever any changes are made to cfg file, run admincmd=reloadrules. Append “admincmd=reloadrules” to end of URL and run it.
...
When the following page opens, click on “Reload Configuration”.
...
Final Output ((Ignore the styles you see in runtime page at top of page, it is not present in classic and made it appear on only Modern page for good layout with help of CSS.)
...
Scenario 2: Mapping a new field to an already existing html page when it is added in classic page
Let us consider 'Location Code' is the new field added and that needs to be mapped on the MUI page.
...
...
Scenario 2: Adding a new field to an already existing modern page.
If one adjusts a classic page utilized by a modern template those changes will not reflect without adjustments to the modern HTML file. When presented with the need to add one or more fields to a page, you may regenerate the entire template and perform any HTML or CSS adjustments again or you may adjust the existing template by following the steps below.
Let us consider that Location Code is a newly added field to the classic page and we need to map it to the modern page.
Step 1: Locate the new field's ID attribute
Navigate to the classic page. If navigating to the page from a modernized site, append content=ps to the URL. Once viewing the classic page, right click on the field and select '"Inspect'. This will get the 'id' as below in the browser console.
...
Now map the above 'id' to the 'psid' field in HTML file and save. Use appropriate handlebar to map these fields. Since it is a prompt field, here 'promptWithLabel2' handlebar is used.
". Locate and copy the ID attribute from the displayed HTML.
Step 2: Adjust the Existing Modern HTML File
Locate the associated Modern HTML file in SVN and edit. Locate the are 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 please click here.
...
The final output of the MUI page looks like below:
...
Note: The following step is applicable only when changes are made in the handlebar
Step 3: Review Changes
With the file saved and loaded to the serve, we can then navigate to the page to see our addition.
Scenario 3: Removing a field on an existing 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 changes in handlebar usually when PeopleTools version gets changed.
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.
...
