Tuesday, January 16, 2018

Disable or Hide a Radio Button Instance

I ran across a few blogs and forum posts from people either asking or sharing how to hide or disable radio buttons. The answers I saw appeared to address only part of the story so I thought I would share a solution. PeopleCode includes functions, properties, and methods for disabling and hiding fields. As you would imagine, A field property such as Visible will show or hide a field. What makes a radio button challenging is that a radio button represents several values of the same field. The Visible property applied to a radio button's field would hide the entire radio set, not just a single radio button. Likewise, disabling a radio button's field would disable the entire radio set. What we require is a reference to one instance of a fieldset, not the base field itself.

PeopleCode includes two functions that return a reference to a field: GetField and GetPageField. The first, GetField, returns the same field reference as a standard Record.Field reference or Rowset.GetRecord.GetField. The GetPageField function, on the other hand, returns a pointer to a single instance. While this might seem like the answer, it is only part of the story. The GetPageField function does return a single instance and setting some of the properties of this single instance only manipulates the single instance. Other methods and properties, however, appear to be tied to the base field. Unfortunately, the Visible and DisplayOnly properties are two properties bound to the underlying field. Changing either of these on a GetPageField reference will hide or disable the entire radio set, not just a single instance.

The solutions I have seen, and the one I recommend, is to use CSS and/or JavaScript to hide or disable a radio button. Here is an example in Fluid:


   Local Field &compBtn = GetPageField(Page.HR_DIRTEAM_FLU, "COMPENSATION_BTN");

   rem ** hide a radio button instance;
   &compBtn.AddFFClass("psc_force-hidden");

   rem ** or disable a radio button instance;
   &compBtn.AddFFClass("psc_disabled");

From a visual perspective, you are done. You have successfully completed your mission. Unfortunately, however, this is only part of the answer. An important part, but only part. Hidden or disabled HTML still exists. That means I can use a standard browser tool, such as Chrome inspector or IE Developer Tools to show or enable this HTML. In fact, even if the HTML elements didn't exist, I could still invoke JavaScript to make the app server think I had selected the radio button.

The only way to ensure the server never receives the value identified by the hidden or disabled radio button is to either use FieldEdit PeopleCode or Event Mapping FieldChange Pre Processing to change the value before delivered PeopleCode ever sees that value. This is part two. This is the part that seems to be missing from other solutions I have seen.

What got me thinking about this? The Fluid My Team page contains a button bar that allows a manager to switch between alternate views. One of the radio buttons in the button bar is Compensation. Some organizations do not want managers to see compensation. My challenge was to remove the compensation radio button in a secure manner without customizing delivered definitions. Using Event Mapping on PageActivate I was able to hide the Compensation button. Event Mapping FieldChange PeopleCode ensures PeopleSoft never triggers FieldChange for the compensation button.

Friday, January 12, 2018

Presenting at HEUG Alliance 2018

HEUG Alliance is just a few months away and I can't wait for another opportunity to network with peers, customers, and vendors! Likewise, I am excited to hear about real-life experiences from PeopleSoft customers. As always, this year's agenda is packed with worth-while content and impressive speakers.

I will be presenting my signature session Getting the Most Out of PeopleSoft PeopleTools: Tips and Techniques on March 27, 2018 (11:00 AM - 12:00 PM). Each year I search for new nuggets to share with the PeopleSoft community. This session will be mostly demo, with very little (if any) PowerPoint. Here is the session description:

With Fluid UI and selective adoption, it is more important than ever for developers to learn the latest PeopleTools features and design patterns. Fluid isn't just a new rendering engine for PeopleSoft. Fluid brings a new way of thinking about transactions. Likewise, selective adoption means keeping current. But, considering the number, value, and cost of customizations, who can afford to keep current? In this session, you will learn Fluid UX design patterns, how to style fluid UI pages using open source CSS frameworks, build interactive fluid UI tiles using app classes, and avoid life-cycle management conflicts through Event Mapping.

I am constantly impressed by the flexibility of Fluid and look forward to sharing new ideas and concepts in March. If you have an idea or question and you see me at the conference, please stop me for a chat. I live and breath PeopleTools. PeopleTools is my passion, which is why I spend every day studying and talking about it.

Are you presenting at the March, 2018 Alliance Conference? Please share your session title and time in the comments below. Because there are so many valuable, but overlapping sessions at the conference, we won't be able to attend all sessions (although I wish we could). We will certainly do our best!

See you in Utah in March!

Friday, December 29, 2017

January PeopleTools Training Courses Posted

We posted our January PeopleTools training agenda. This month includes our extremely popular Fluid course as well as our new PeopleTools Delta course. Register online at www.jsmpros.com/training-live-virtual/. Our First course is January 8th, which is coming up quickly.

Besides our regular mid-week agenda, we added weekend courses for those that are committed mid-week and can't take time away for training.

The time zone for these courses is designed to catch as many US attendees as possible. If you would prefer another time zone, let me know and we will consider scheduling a future course in a more favorable time zone.

Why Fluid and why PeopleTools Delta? Fluid first: Any PeopleSoft 2017 Year in review post must include Fluid Campus Solutions. Oracle's Campus Solutions team made significant progress in Fluid student self-service. Honestly, I am extremely impressed with Fluid student self-service. Because of this progress, many of our customers are currently implementing Fluid student self-service. Likewise, PeopleSoft HCM has published retirement dates for key manager and employee self-service components. Support for most Classic manager self-service components, for example, retires in just a couple of days. Classic employee self-service retires one year later, on December 31, 2018 (for more details on Classic retirement dates, see MyOracle Support document 1348959.1). If there was ever a time to think about Fluid, that time has come. Now is a great time to learn Fluid so that you are ready for those change requests and implementation details. While there are obvious similarities between Classic and Fluid development, they are very different.

As customers implement Fluid, they will undoubtedly revisit existing customizations. This is where a PeopleTools Delta course becomes important. You could continue down the same path, customizing delivered definitions or you could investigate new PeopleTools features that allow you to configure (instead of customize) business logic and tailor the user experience. I could recount story after story of customers saving 10's to 100's of thousands of dollars in implementation, customization, and lifecycle management costs because they learned new PeopleTools features.

Does your organization have 8 or more people interested in a training course? If not, do you know 8 or more people from various organizations you can get together for a class (with virtual training, all users can be remote)? If so, we have group rates available. Besides significant savings (quantity discounts), large groups have flexibility and control over the training agenda. Feel free to contact us for more information.

Wednesday, December 27, 2017

Event Mapping Lifecycle Management (LCM) Tools

I am a big fan of Event Mapping. Without question, if presented with a modification opportunity, my first choice is Event Mapping. In a nutshell, the goal of Event Mapping is a clean compare report. Event Mapping allows us to move PeopleCode modifications out of delivered PeopleCode and into custom Application Classes. We then use the Event Mapping framework to configure our PeopleCode into delivered events. Since our custom PeopleCode is not part of delivered event PeopleCode, it won't show in a compare report. At first, this might seem like a great idea. But let me tell you a story. The story you are about to hear is true. I didn't even change the names to protect the innocent.

I previously wrote about Event Mapping: Extending "Personal Details" in HCM. In that blog post, I showed how to use Event Mapping to add links to the left-side panel of the Personal Details component, the panel containing navigation. Several months later I applied PUM 24. Sometime between my release of HCM and PUM 24, Oracle updated the code behind the Personal Details components. Because my compare report was clean, I falsely believe there would be no issues. Post update, I noticed that my Travel Preferences link, the link added by my prior blog post, appeared twice. Obviously something was broken. But what? Why didn't my LCM tools catch this? I followed all of the best practices, including using Event Mapping. My compare report was clean.

After some investigation, I found that Oracle changed the component buffer and PeopleCode. In fact, while digging through the code, I found a reference to bug 25989079 with the resolution: Menus In Employee Self Service Fluid BUTTONS/LINKS WITH IMAGE AND TEXT GET READ TWICE (Doc ID 2253113.1). After a minor copy/paste exercise and some cleanup, my configuration is working again. No modifications to delivered objects.

This incident causes me to pause and ask some questions:

  • Is Event Mapping a Best Practice?
  • Would a compare report have identified the issue and changed code much faster?

I'm going to start with the second question first. When we are talking about the simple, event-based PeopleCode of the 20th Century, yes, a compare report would have located the differences among a few thousand lines in a single event. Today, however, a self-service component consists of thousands of lines of PeopleCode spread over several dozen App Classes. In this environment, your code change may be in one method whereas the bug fix is in another, related method or App Class. That was exactly the case for me. The code that inserts rows into the left-hand list is quite separated from the row that hides the extra hyperlink. A compare report would have found my modifications, but would not have shown Oracle's changes.

Is Event Mapping a best practice? YES! ABSOLUTELY! Without Event Mapping, our code is overwritten and we have to figure out how to merge it back into the delivered code base. With Event Mapping, it is more like an overlay, where our code still exists and lays over the top of Oracle's code. No reapplication necessary. When it works, it works great!

As noted, Event Mapping doesn't eliminate Lifecycle Management issue, but reduces them. What we are lacking today is tools to help us manage this new LCM "wrinkle." I'm hopeful that Oracle will deliver targeted tools in the future. But why wait? If PeopleSoft is metadata driven, why not create our own tools? The following is an SQL statement I put together to help me identify components that use Event Mapping. Here is how it works... Let's say you have components with Event Mapping. Let's also say you are about to apply a change project generated from a PUM image. That change project may contain components. The SQL below will tell you if any of the components in your project contain Event Mapping configurations including which components, events, and App Classes.

Caveats:

  • This SQL was written for PeopleTools 8.56, and therefore may contain fields that don't exist in other PeopleTools releases (such as 8.55).
  • The SQL contains SYSDATE, which is Oracle specific.

The following is a screenshot of my Personal Details "component" (component in air quotes, because Personal Details is really a collection of components). In that screenshot, you will see the following changes:

  • Page title changed to reflect the active component
  • Navigation list contains additional elements
  • Address group headers contain icons

Inserting a row into the left-hand navigation required RowInit PeopleCode. Clicking a link in the left-hand navigation invokes FieldChange. Changing the title and adding icons involved PageActivate PeopleCode. These are 3 distinct events at 3 different levels. I added the Personal Details Addresses component as well as several other Event Mapping configurations to a project. The following is a screenshot of that project:

When I run this SQL, I see the following output:

In the SQL results, did you see the EOCC_POSTBUILD Service ID? That is event mapping inserted by Page Field Configurator. Page Field Configurator is a tool on top of Event Mapping, and therefore suffers from the same LCM concerns.

Do you want to learn more about Event Mapping? Event Mapping is a PeopleTools 8.55 new feature that is extended in PeopleTools 8.56. At JSMPROS, we regularly lead PeopleTools delta courses covering new features, including Event Mapping. Visit us at jsmpros.com/training-live-virtual to find a course that fits your schedule.

P.S. I will be sharing this example and many more in an HIUG webinar on February 16, 2018. If you are a member of the Healthcare Industry User Group, you won't want to miss this webinar!

Friday, December 22, 2017

Weekend Fluid Classes

Habit 7: Sharpen the saw. We all know we must sharpen our mental saw. The challenge is fitting saw sharpening into our schedule. If you are a billable consultant dedicated to a project, then you are often bound by contract to be onsite during regular business hours. If you find yourself in this situation, sharpening your technical skills can be challenging because most training courses happen during your committed working hours. We understand the struggle and want to do what we can to help. With that in mind, we are offering our popular Fluid training series over two consultant weekends (Friday and Saturday) of January:

  • Fluid 1: Jan 12-13, 2018
  • Fluid 2: Jan 26-27, 2018

Further details and registration information are available on our website

Wednesday, December 20, 2017

Using CSS Frameworks with PeopleSoft Fluid

Fluid is Oracle's strategic direction. If you have experience with Fluid development, you know that dragging, dropping, and aligning fields on a canvas isn't enough to develop a multi-form factor Fluid user interface. With Fluid comes an emphasis on CSS3 for multi-form factor support. This means you must add CSS class names to page fields to support different screen sizes. PeopleTools comes with an extensive list of predefined CSS class names. The challenge is identifying which CSS class to use. Fortunately, Oracle published two extremely helpful documents:

If you learn the style classes in these two documents, you will do quite well with Fluid layout (actually, just learn a few dozen of these classes and you will do quite well). But what if you want to use features of CSS that don't exist in Fluid-delivered CSS classes? Flexbox, for example, is one of the most powerful features of CSS3. When I find myself terribly annoyed with Fluid layout, I throw a Flexbox at my layout issue and the problem is solved. If we want to apply styling using CSS attributes that PeopleSoft hasn't already defined, we have two options:

  • Define our own CSS classes by creating a free-formed stylesheet or
  • Borrow someone else's CSS class names from a CSS framework.

Writing your own CSS can be a rewarding experience. I can often solve layout problems with just a few lines of CSS. My concern, however, is maintenance. What starts as a one-time CSS "fix" (or hack) for a layout often turns into a copy/paste exercise replicated at least a dozen times, with each page using some of the same CSS and some different CSS. Then what? Do we create a separate CSS file for each Fluid page? Do we refactor common CSS, moving similar code into a shared library?

Given the age and history of the internet, most web layout problems have already been solved. Since PeopleSoft is just another web application, we can leverage the work of the world wide web's pioneers. The solutions to most of our layout problems exist in today's common CSS frameworks, Boostrap being the most popular. There are many PeopleSoft consultants happily using Bootstrap to enhance PeopleSoft Fluid pages. Here is how they do it:

  1. Import Bootstrap into a Freeform Stylesheet
  2. Use AddStylesheet to insert Bootstrap into a Peoplesoft page
  3. Apply Bootstrap style classes to Fluid page elements
  4. Create a "reset stylesheet" to fix everything Bootstrap broke.

Yes, you read that last line correctly, "... fix everything Bootstrap broke." Please don't misread this. There are many developers successfully using Bootstrap with PeopleSoft. But here is the problem: Most CSS frameworks directly style HTML elements. This is actually good. Developers call this a "reset" stylesheet. What makes this a problem for PeopleSoft is that PeopleTools ALSO applies CSS directly to HTML elements. PeopleTools includes its own reset stylesheet. In a sense, we could say that Fluid is a CSS framework itself. The end result is a mixture of styles applied to HTML elements by two competing and complementing CSS frameworks. I call this "Fluid-strap." Consultants work around this problem by creating a reset for the competing reset stylesheets — a reset for the reset.

Here is another alternative: Use a CSS framework that does NOT style HTML elements, but instead relies on class names. This type of CSS framework was designed for compatibility. This type of framework understands that another CSS framework is in charge. My personal favorite CSS compatibility library is Oracle JET. In Oracle JET's GitHub repository, you will find oj-alta-notag.css, a CSS file containing a lot of CSS class names and no element declarations. To use this library, follow the first three steps described above, skipping the final step:

  1. Import oj-alta-notag.css into a Freeform Stylesheet
  2. Use AddStylesheet to insert the Oracle JET Stylesheet into a Peoplesoft page
  3. Apply Oracle JET style classes to Fluid page elements

The key difference is we don't have to create a reset for the reset. The Oracle JET stylesheet silently loads into a PeopleSoft page without changing any styling unless specifically asked to style an element through the element's Default Style Name (Style Classes on 8.56) property.

Consider a PeopleSoft page built with 4 group boxes aligned horizontally as demonstrated in the following screenshot.

In Classic, what you see is mostly what you get, so the online rendering would look nearly the same as the Application Designer screenshot. In Fluid when viewed online, however, each group box will render vertically as follows:

We can fix this by applying a CSS Flexbox to the 4 group boxes. With Flexbox, the 4 group boxes will align horizontally as long as the device has enough horizontal real estate. If the display is too small, any group boxes that don't fit horizontally will move to the next row. For this example, we will use Oracle Jet's Flex Layout.Here are the steps

  1. Add a Layout only Group Box around the 4 horizontal group boxes and mark the container group box as Layout Only
  2. While still setting container group box properties, set the group box's style class to oj-flex oj-sm-flex-items-1
  3. Likewise, to each of the 4 horizontal group boxes, add the Style Class oj-flex-item
  4. Create a Freeform stylesheet definition containing oj-alta-notag-min.css
  5. Use the AddStylesheet PeopleCode function in PageActivate to insert the Stylesheet into your page

The end result will look something like this:

Several years ago, I read the book Test Driven Development by Kent Beck. In that book, Kent identifies the first step of each project as the hardest step. Why? Because each new project contains significant uncertainty. Software development seems to involve a lot of unknowns (if the solution was known, someone would have created it, automated it, and published it). His advice? Start with what you know. You start with what you know and work torwards what you don't know. This is how we teach Fluid at JSMPros. Your developers understand Classic development and we use that knowledge to springboard students into a higher level of Fluid understanding. If you are ready to take the Fluid challenge, I encourage you to register for one of our monthly Fluid classes at www.jsmpros.com/training-live-virtual. Have a group of eight or more developers? Contact us to schedule your own personalized Fluid training event.

Monday, December 18, 2017

Is Your Fluid Custom Action Menu Page-based or Component-based?

In the upper right corner of the Fluid header you will find the "Hamburger" (or hamburger-light) menu. This 3-bar (or 3-dot) icon displays a list of component-specific actions. For the most part these actions are rather generic, allowing a user to add a tile to a homepage or view preferences. Occassionaly we see a component that has its own custom actions. The HCM My Team and Company Directory components are great examples of components with custom action menu items. In fact, the Fluid homepage itself is an example, with its Personalize Homepage custom action.

As developers, we can add custom component-specific actions to the header menu of a component by adding a special group box (Custom Action Menu) to one of the component's pages. When PeopleSoft loads a page with a Custom Action Menu group box, it moves the contents of that group box into the header action menu. Any actions loaded from a page stay resident in the menu as long as the component is in scope. So, technically, all Custom Action Menus are component-based. Here is my struggle:

Actions inserted into the header menu have component scope, not page scope, but are defined at the page level.

Custom action menu items are not visible (in fact, don't exist) until the page defining these menu items is loaded into the user's browser. If a component may have multiple pages, into which page would you insert the custom action menu? Logically, I might say, "The first page, of course." But here is the problem: there really is no "first page." There is a page that the component will load by default. We might call that the front door. PeopleSoft, however, lets users enter through the side door, back door, and all windows as well. By adding ?Page=... to a component URL, I can enter that component from any page within the component. For example, if I want to open the User Profile component to the User Queries page, I add PAGE=USER_QUERY to the end of the URL. If I enter a component through the wrong starting page, then I won't see the component's custom actions in my header menu.

You don't think your users will enter a page name in the URL? Probably not. Why worry about a scenario that will never happen? Actually, it isn't my users that concern me. It is system generated messages and processes with URLs. It is workflow notifications that attempt to simplify workflow by taking me to the next step in a business process.

If a user can enter a component through any page and component specific actions must be defined on a page, then into which page should I enter component-specific actions? While teaching a Fluid class and challenging students to find a solution to this problem, one of my students asked me, "What if you put the menu definition in a Footer page?" Wow! What a great idea! If you have component-scoped actions, why not define them in a component-scoped page? This page will load as soon as the component loads, regardless of the entry point. If you already have a footer page in your component, perfect! Just add the Custom Action Menu group box to your existing footer page. If you don't have a footer page, should you add one? I say, "Yes." Properly built, a footer page may be entirely invisible, used just for component-specific banner (also known as the header) changes (including Custom header left, right, and bottom sections). Seems ironic doesn't it? If you want to change the header, add content to the footer. Here is a sample footer page built specifically to hold a menu. By clearing the CSS class name from the outer container Group Box, the footer becomes invisible.

The following screenshot shows how the menu will appear when PeopleSoft reparents the menu's HTML from the footer into the header component action menu.

Interested in learning more about Fluid? I offer at least one virtual Fluid training class per month. You can learn more about our current offerings on our Live Virtual Training page. If your organization has more than 8 employees, you may derive cost savings by hosting your own training event. Learn more at www.jsmpros.com/training.

Follow my blog with Bloglovin