Global HR & New Employee Experience - Landing Pages

Available in Release 11.0.25
1/21/2020
Viewing and Implementing CHP
Templates in Employee Preview

Copyright © 2018. Infor. All Rights Reserved. (2)
Table of Contents
• Overview
• Template Screenshots
• Icon Themes
• Viewing Templates without using CHP
• Implementing a CHP Template
• Common Customizations
– Customizing Banner Image and Text
– Banner Carousel
– Quick Links - Overview
– Quick Links - Internal Links
– Quick Links - External Links
– Quick Links - Icons

Overview
• The landing pages for the various GHR roles (Employee, Manager, etc.) are fully
customizable using HTML and CSS
– See Configuring and Deploying Customized Homepages for details
• With the introduction of Employee Preview, there are now six additional home page
templates that can be used as starting points to customize the Employee experience
• The Employee Preview role will have a one of these new templates as its default landing
page
• Additionally, there are six new sets of icons that can be used on the custom home pages
– Each of the six new templates uses a different icon theme

Old Theme (EmployeeLiteWelcomeOld.html)

EmployeePreviewShortBanner.html
IconTheme: default
EmployeePreviewTallBanner.html
IconTheme: darkred

EmployeePreviewGradient.html
IconTheme: lightred
EmployeePreviewSplitBanner.html
IconTheme: orange

EmployeeMonochrome.html
IconTheme: blue
EmployeePreviewFullBackground.html
IconTheme: gray

Icon Themes
• Each of the six templates features a different icon theme
– Default, darkred, lightred, orange, blue, and gray
• While editing the HTML of the template, you can change the theme by modifying this
line of code, found within the <script> tag in the <head> section:
– hcm.util.loadIcons(“default"); // Loads icons. Options: default, darkre
d, lightred, blue, orange, gray
• To see all available icons in each of the six themes, see HomePagesImages.zip which
can be found here
– This .zip contains all 34 icons in .svg and .png format, as well as the images used in the template
banners
– Note that the HomePagesImages.zip file is only to see the available options, you do not need to
add the icon images to your CHP in order to use them
Pictured: icon-acquire-talent

Viewing Templates without using a CHP
• To simply view the templates without customizing them, all
you need to do is configure the EmployeeSelfServiceLite*
web application. To do so:
1. Log in as an administrator to the HCM Rich Client
2. Navigate to Start > Configure > Application
3. Check to see if EmployeeSelfServiceLite is under the Configured
Web Applications drop down
• If it is, click it; If it isn’t, create a new configuration
4. Click the pencil icon and edit the following line, replacing
“EmployeeLiteWelcome.html” with the desired template:
• custom home page is EmployeeLiteWelcome.html
* Note: This will not work in EmployeeSelfService. If you are interested in
customizing the template, go to the next slide, Implementing a CHP Template
Template File Names (see visual
examples in the previous slides)
• EmployeePreviewShortBanner.html
• EmployeePreviewTallBanner.html
• EmployeePreviewGradient.html
• EmployeePreviewSplitBanner.html
• EmployeePreviewMonochrome.html
• EmployeePreviewFullBackground.html
• EmployeeLiteWelcomeOld.html

Implementing a CHP Template
1. Locate the HomePages.zip file and
extract it to the desktop
1. Navigate to the Homepage Zip Files page in Infor
Support Portal
2. Click the link “Configurable Home Pages” and select
the Customer Update release that you wish to target
3. Click “Attachments”, then click the download icon on
the far-left column
4. Optionally, repeat steps 2 and 3 for “Configurable
Home Page Image Files”. These images are only
needed for reference to more easily see how the
available SVG icons look

Implementing a CHP Template – Continued
2. Open the template of your choice in a text editor and make any desired changes
– Start with something simple to make sure it works, such as changing the text in the banner (shown below)
– Important: be sure that the EmployeeSelfServiceLite webapp is pointing to your chosen template
• Default is “custom home page is EmployeeLiteWelcome.html”(see slide “Viewing Templates without using a CHP”)
3. Re-zip the contents of the HomePages folder
– Make sure you select the contents of the folder, not the folder itself

Implementing a CHP Template – Continued
4. Upload the CHP (these steps can also be found on the Configuring and Deploying
Customized Homepages guide)
1. Sign in as an Administrator and navigate to Set Up > Configurable Home Pages
2. Click “Add” to create a new record
3. Fill out the fields
• Set the Effective Date, likely to the current date
• Name the CHP – this will be used in the URL parameter
• Optionally, provide a more descriptive name for the CHP
• Upload the ZIP file
• Click Save
4. If you’re using Ming.le, you must also enable the CHP for a specific application
1. Click the User Menu icon, then click Admin Settings
2. Double click the application you would like to use the CHP, then switch to the Custom Parameters tab
3. Set the Value for CHP to the name of the CHP
5. Switch to the Employee Preview role and ensure that your changes have been applied
4. You may need to sign out and back in to see have the changes applied

Common Template Customizations
• Once you’ve followed the previous steps, you
can now begin further customizing the template
• Common changes include:
– Changing banner text and images
– Enabling the banner carousel
– Changing Quick Links
• Link Destination (Internal & External)
• Using custom icons
• For the following slides, we will be using
EmployeePreviewSplitBanner as an example

Customizing the Banner Image and Text
1. To change the banner image, you must first add the image to your ZIP in the images
folder. For this example, I’ve added “blue-banner.jpg”
– As per the comment found in the source code, the second url(…) is not necessary once the file is in a
CHP, so it can just be removed
2. To change the banner text, simply edit the text found in the bannerHeader and
bannerMessage elements
Here is how the updated HTML looks:

Customizing the Banner Image and Text
Before After

Banner Carousel
• All of the new templates have the
functionality to cycle through a series
of banners, each with separate
images, text, and links.
• Two of the templates are set up to
demonstrate this:
– EmployeePreviewMonochrome.html
and
EmployeePreviewFullBackground.
html
• Instructions on how to implement this
feature for any of the templates are
contained inside the template HTML
files as inline comments

Quick Links – Overview
• The Quick Links can be found in the content element, and look like this:
• Changes made to a cell will occur in three places:
1. Link Destination: the cell encapsulated an <a> tag, which defines a hyperlink
2. Icon: the icon displayed is currently one of our provided SVG icons, which are further described
in the Icon Themes slide
3. Text: the text that is displayed on each cell, comprised of a caption and captionText

Quick Links – Internal Links
• Use the hcm.util.navigateTo() function to go directly to menu items
• For example, the below cell will look for XiEmployeeMenu.menu and
bring the user to the item TimeOff
– This includes menu items that lead to action forms, so it is possible to have a
quick link trigger an action
• The easiest way to view the various menus is to configure them as
an administrator via Rich Client or the Configuration Console role in
the web client

Quick Links – External Links
• External links can be handled in two different ways:
– External links can also use the hcm.util.navigateTo function to go to a specified link:
onclick="hcm.util.navigateTo('https://www.infor.com’)”
• This will open the link in a new tab or window depending on the user’s browser settings
– Like any <a> tag, you can use the href attribute to specify the destination. However, since the Home
Page is hosted in an iFrame, you must specify the target attribute to be either “_blank” or “_parent”
• “_blank” will open in a new tab or window, “_parent” will open in the same window

Quick Links – Icons
• While we suggest you use our provided icons as described on the Icon Themes slide, it is possible
to use any image as an icon
– Remember that to reference an image it must be in the HomePages/images folder
• To use an image, simply remove the <svg> element (commented out in the example below) and
add an <img> element
• These images will automatically pick up CSS styling, so the only need to specify the src attribute
• We suggest using a square image that is at least 100x100 pixels in size, and that it has adequate
white space around it so that nothing is cut off when a circle is placed around it

Global HR & New Employee Experience - Landing Pages

Global HR & New Employee Experience - Landing Pages

Recommended

Recommended

More Related Content

Similar to Global HR & New Employee Experience - Landing Pages

Similar to Global HR & New Employee Experience - Landing Pages (20)

Recently uploaded

Recently uploaded (20)

Global HR & New Employee Experience - Landing Pages

Editor's Notes