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.

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.

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: 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”.

The final output of the modern page will be as given below:

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: