Tuesday, September 03, 2019

Changing the Search Page Operator Version 2

In 2011, just after PeopleTools 8.50 released, I wrote the post Changing the Search Page Operator. In that post, I demonstrated how to Monkey Patch PeopleSoft to do something you can't do with core PeopleTools: change the default advanced search page operator from Begins With to Between. A lot has changed since I wrote that initial post:

  • PeopleSoft switched from net.ContentLoader to net2.ContentLoader,
  • PeopleSoft released Branding System Options, which supports global JavaScript injection,
  • We began using RequireJS to manage JavaScript dependencies, and
  • The default user experience switched from Classic to Fluid.

Let's create a new version. Before writing any code, let's discuss that last bullet point. This post will focus on Classic. Why? Two reasons:

  1. Fluid doesn't use traditional search pages built from search record metadata and
  2. Roughly 95% of the components in PeopleSoft are still Classic.

This new version of the code will take advantage of Branding System Options and JavaScript dependency management. Our scenario will use the Job Data component (Workforce Administration > Job Information > Job Data. We will cause the Name search operator to default to between:

Let's start by creating JavaScript definitions for each library. Download the following libraries directly from their sources:

In your PeopleSoft system online, navigate to PeopleTools > Portal > Branding > Branding Objects. Switch to the JavaScript tab and create a JavaScript definition for each item. So that your names match our RequireJS configuration, use the names JSM_JQUERY_JS and JSM_REQUIRE_JS. For compatibility reasons, we should also protect our version of jQuery from any other versions of jQuery that may be loaded by PeopleTools. To do this, we create a library named JSM_PRIVATE_JQ_JS that contains the following code:

Next we need a RequireJS configuration that tells RequireJS how to locate each library we intend to use. I named mine JSM_REQUIREJS_CONFIG_JS, but this name is less important because we will select it from a prompt when configuring Branding System Options. Here is our RequireJS configuration:

Note: I snuck an extra library into the RequireJS configuration. Can you figure out what it is? I will be demonstrating this extra library at my session for OpenWorld 2019. Don't worry about removing it, however. As long as we don't reference it, RequireJS will never attempt to load it.

We must create one more JavaScript library to "listen" to page changes, waiting for PeopleSoft to load an advanced search page. Create a library containing the following code. As with the previous, name isn't as important because we will select the name from a list of values during configuration. But in case you are struggling with a creative name, I named mine JSM_SEARCHOP_JS.

Your list of JavaScript files should now look something like:

After uploading our libraries, we can turn our attention to configuration. Navigate to PeopleTools > Portal > Branding > Branding System Options. In the Addtional JavaScript Objects (this should really be named libraries) section, insert the following three libraries in order. Order matters. We first want RequireJS. We then configure RequireJS. Finally, we use RequireJS.

  1. JSM_REQUIRE_JS
  2. JSM_REQUIREJS_CONFIG_JS
  3. JSM_SEARCHOP_JS

About the code that makes all of this happen (JSM_SETSEARCHOP_JS)... It is incredibly similar to the first version. One important difference is that this version is loaded globally whereas the prior iteration was locally scoped to the component. We therefore include a component-specific test. The %FormName Meta-HTML in our JavaScript helps us derive the HTML element that contains the component name. The fieldMap variable contains the mapping between component names and fields that should be changed.

Will this work in Fluid? Unfortunately, no. Fluid does not use search record metadata to generate search pages. It can (with a little work), but not in the same fashion. Fluid also doesn't support branding system options Additional JavaScript Objects. JavaScript automation is still possible, but requires a different approach (Event Mapping to inject, different variables, etc).

Are you interested in learning more about PeopleTools, JavaScript, and HTML? Attend one of our courses online or schedule a live in-person training session.

4 comments:

Manoj said...

We have a similar problem with using the prompts in Fluid pages.
In fluid, the prompt search pages are rendered using PT_PROMPTPAGE fluid page.

For some reason, the fluid prompt page also seem to ignore Component setting to enable 'Advanced Search'.

My wish list for Prompt Page:
1. Link 'Advance Search' option to Fluid Prompt page as well.
2. Enable us to chose the 'operator' for each field

Leandro said...

Hi Jim,

Thanks a lot for this write-up, it works great!

In the last JS, you put a comment saying "I considered a loop here to iterate over several fields for each component, but PeopleSoft would only recognize one per Ajax request". However, we don't need to complicate things with a loop, because CSS selectors take care of that for us.

If you change your fieldMap to the following, then both fields will have their operators changed:

var fieldMap = {
'JOB_DATA': '#EMPLMT_SRCH_COR_EMPLID\\$op, #EMPLMT_SRCH_COR_NAME_DISPLAY_SRCH\\$op'
}

All the best,
Leandro

Leandro said...

Hi again,

You may also want to change line 62 from:

if (id === "#ICAdvSearch")

to:

if (id === "#ICAdvSearch" || id === "#ICList")

so that the operators are changed when clicking "Return to Search".

Best regards,
Leandro

ANINDITA said...

Hi Jim,

I have a requirement to change the default search operator from begins with to contains in the search component for ITEM definition component, I followed your steps, but it's not working. I created 5 Javascript as you have suggested and added the 3 in Branding system options.
only change I did was
var fieldMap = { 'ITEM_DATA' : '#MST_ITM_INV_VW_INV_ITEM_ID\\$op' }

var component = $('#pt_pageinfo_%FormName').attr('ITEM_DEFIN');
VAR PAGE = $('#pt_pageinfo_%FormName').attr('SEARCH');

Do I need to write any code in app designer to trigger the Java scripts.

could you please advise, what changes is missing from my end.