This page explains the steps that needs to be followed when working on the following scenarios:

• Modernizing a brand new page
• Mapping a new field to an already existing html page when it is added in classic page

Scenario 1: Modernizing a brand new page

As an example, let us consider modernizing the “Invitation Search“ page.

Given below is screenshot of the classic page. 

Below steps are to be followed when mapping the new page.

Step 1:  Generate the script 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, and then click on 'Generate Rule & HTML'. 

This will generate the Rule and Template HTML as shown below.

Note: Here, we use VSCode editor for creating/editing of html/cfg files.

Step 2 : Create a new rule generated by the utility with page name mapped in the related cfg file.

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.

Here “ 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:

"/smarterp/Solutions/ResponsiveTalentOnboarding/pages/Invitation/" is the path where the file name 'InvitationSource.html' is created.

Step to create a new HTML file in the editor (VSCode):

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:

After the new file is saved or any changes made to existing html file, to make the changes reflect in PIA, 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.

Go to the classic page by using “content=ps”, then 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.

For more details on using the handlebars, 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

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.