How to Give E-Recruiting a Facelift (Part 1)

Most companies aren’t big fans of the look-and-feel of the standard SAP E-Recruiting screens, so they want to add their own “twist” to it. This could be changing text, changing field labels, Roadmap steps or even logos.  Acquiring a Developer to do this by using custom code could take a lot of time and money.  Thankfully SAP has provided a way to change the standard Web Dynpro pages with a minimal amount of coding.  This is done through component configuration.

One limitation of component configuration is that it can only change static screen objects.  It is not designed to change anything which is created dynamically.

There are a few advantages of using component configuration to change the look-and-feel of Web Dynpro pages:

1)      Creating component configuration is relatively quick and simple.

2)      Component Configuration doesn’t change the standard SAP objects. In the future, if you decide to upgrade to a different enhancement pack, your new configurations will not be over-written.

3)      It gives you the ability of to show candidates more than one “face” of the recruiting system.  For example, on a global system, you can present different candidate experiences for European and North American candidates.  Though the pages will look different the candidates will be part of the same global talent pool.  This is known a flexibilization.


The image above is the standard delivered Personal Data screen for the external candidate.  In this exercise we will hide the Date of Birth & Gender fields, change the label of the Second Name field to be Middle Name and change the description text.

Let’s get started.

Step 1

Navigate to the ABAP Workbench (SE80).  Under the Repository Browser select Web Dynpro Comp./ Intf. from the dropdown.  Below that, enter the name of the Web Dynpro Component (the Personal Data screen is hrrcf_c_personal_data_ui).  Right click the component name and select Create/Change Configuration.


Step 2

The component configuration is created in a separate internet explorer window.  In the Configuration ID field enter a name for the component configuration.  Remember, the name should be substantial and meaningful.  In our example, since this is a custom Personal Data page for external candidates in the US, I have named it z_us_ext_cand_personaldata.

You also have the option to copy or delete existing component configuration objects.  After clicking the Create button a Create Configuration box will appear.  Here you will give your configuration a description and choose a package to tie it to.


Step 3

Each object on the Web Dynpro screen is categorized by their element name.  The descriptive text for the Personal Data screen is under VW_PERSONALDATA with two text elements underneath.  We will change the HEADER_TXT2 and hide HEADER_TXT text elements.  The other fields we are going to change are Gender, Date of Birth and Second Name.  These fields are in the PERSONALDATA element.  Here we can choose to hide a field, change the field label, change text size, etc.  Clicking the Save button will save the changes and apply them to a transport.

Notice in the screenshot below that I changed the descriptive text for the page by entering new text in the Text field.  It used to say “What are your personal details?”  Now it says “Please list your personal information.”  I have also changed the color and size of the text.


To remove the Gender and Date of birth fields and labels, I found the corresponding sub-element under the PERSONALDATA element, selected the field (GENDER_LBL, GENDER_DDLB, BIRTHDATE_LBL and BIRTHDATE_INPUTFIELD), and selected the Invisible radio button. Clicking the Save button saves all of the changes and applies them to the transport.


Step 4

Now it’s is time to see if the changes made were applied to the screen.   Notice the descriptive text has changed.  It’s also a different font size and color.  Additionally the Second Name field was changed to say Middle name.  Also, the Gender and Date of Birth fields have been removed from the screen.


This example was just a taste of what you can do with component configuration.  You can also use it to change the width of fields, deactivate active links (like the roadmap), change tool tips and much more.  As you can see, SAP has made it easy to change the look-and-feel of the Web Dynpro screens.  Now you can make screen changes without having to create any code.

Stay tuned for my next blog entry.  I will detail how to tie the component configuration to an application.

This entry was posted in Talk Techie to Me and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s