This page explains the steps needed for the following scenarios:
...
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.
...
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.
...
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". 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 click here.
Step 3: Review Changes
...
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.
...