Sasank's PeopleSoft Log: Classic Plus

Showing posts with label Classic Plus. Show all posts

Sunday, July 5, 2020

Classic Drop-Down List Styling

Recently, there was a question on my blog related to drop-down list styling.

Refer: Original Question

How do we apply different colors to drop-down list values?

In this post, I will walk through a few examples of how we can use CSS to apply different background colors to drop-down list values. As an example, we will be using the 'Branding System Options' classic page which contains two drop-down lists.

Navigation: PeopleTools > Portal > Branding > Branding System Options

Identifying the style classes to target

The first step to overriding delivered CSS is to identify the style class(es) to target. We can do this using the browser's developer tools.

Overriding CSS using Component Branding

Since we are focusing on Classic UI, we can use the Component Branding feature which is available via the Branding Framework configuration to apply a custom Stylesheet object to the Component (PTBRANDINGSYSTEMOP).

Navigation: PeopleTools > Portal > Branding > Component Branding

Zebra Striping

In this approach we will use the nth-child() CSS to alternate between two different background colors as shown below.

Option 1: All Drop-Down lists on the page/component

Option 2: Specific Drop-Down list on the page/component

Notice the #PSBRSYSTOPT_WRK_PTBRANDTHEME in the CSS selector.

Styling specific rows

In this scenario, we will assume that we already know the rows that we want to style differently. Let's say, we want to display the custom Themes (with "SV_" prefix) differently.

Option 1: If we know the row numbers

Option 2: CSS based on attribute value prefix

Friday, March 22, 2019

Enable/Disable Classic Plus without Customizations

Classic Plus was introduced in PeopleTools 8.56 as a means to unify the look and feel of Classic and Fluid PeopleSoft pages from a styling point of view. If you want a quick overview of how this works, you can go to youtube and watch this fantastic video created by PeopleSoft guru, Graham Smith.

https://www.youtube.com/watch?v=Cg7JmqEkPjk

As you can see in this video, PeopleTools team as well as the Apps teams are delivering (with every new release) many components that are Classic Plus enabled. But not all Classic components are Classic Plus enabled for various reasons. In cases where Classic Plus is not enabled on a desired component, or alternatively where Classic Plus is enabled as delivered but we may want to disable it on a certain component, we will need to enable it manually via a Component property (Classic Plus Theme Selection).

In such cases where we need to manually enable/disable Classic Plus, we incur some technical debt in the form of a minor customization to the components involved which needs to be maintained in the future.

Note: Merely enabling this property may not be sufficient to Enable Classic Plus in some advanced cases. Review the following PeopleBook for more details.

Reworking Components for Classic Plus Display

Assuming, we are not dealing with any page refactoring complexities, then we can simply enable/disable Classic Plus using a PeopleCode function!

ConfigureClassicPlusComponent

According to Doc ID 2440035.1, this is a new function in PeopleTools 8.57, although I can see that is exists in PeopleTools 8.56 as well.

Oracle's PeopleSoft PeopleTools 8.57 New Features Overview (Doc ID 2440035.1)

Based on what I am seeing in some delivered code, it appears to be available in PeopleTools 8.56.06 and higher.

Anyway, why is this exciting? Because we can simply use this function in conjunction with Event Mapping and enable/disable Classic Plus without incurring any customizations.

Event Mapping App Classes

Enable Classic Plus

Disable Classic Plus

Event Mapping - Related Content Services

PeopleTools > Portal > Related Content Service > Define Related Content Service

Enable Classic Plus Service

Disable Classic Plus Service

Enable/Disable Classic Plus using Event Mapping Configuration

Let us say, we want to enable Classic Plus on a Classic component that is not using Classic Plus as delivered. We can simply create an event mapping configuration to associate the component with the 'Enable Classic Plus Service'.

As an example, let us use PT_THM_MACROSET component which is not using Classic Plus as delivered (Navigation: PeopleTools > Portal > Branding > Theme Macro Set). As we can see in the demo below, the 'Classic Plus Theme Selection' component property is not set for PT_THM_MACROSET by default. By associating the custom event mapping code which is part of our 'Enable Classic Plus Service' (SV_ENABLE_CLASSIC_PLUS), we can enable Classic Plus on this component without any customization. We can see that behind the scenes (by calling the ConfigureClassicPlusComponent function via Event Mapping PeopleCode), the 'Classic Plus Theme Selection' component property is updated without any effect on the last updated userid/datetime which means that this change will not be marked as a customization.

Similarly, let us say, we want to disable Classic Plus on a Classic component that is already using Classic Plus as delivered. We can simply create an event mapping configuration to associate the component with the 'Disable Classic Plus Service'.

As an example, let us use PEOPLECODE_TRACE component which is using Classic Plus as delivered (Navigation: PeopleTools > Utilities > Debug > PeopleCode Trace). As we can see in the demo below, the 'Classic Plus Theme Selection' component property is already set for PEOPLECODE_TRACE by default. By associating the custom event mapping code which is part of our 'Disable Classic Plus Service' (SV_DISABLE_CLASSIC_PLUS), we can disable Classic Plus on this component without any customization. Again, we can see that behind the scenes (by calling the ConfigureClassicPlusComponent function via Event Mapping PeopleCode), the 'Classic Plus Theme Selection' component property is updated without any effect on the last updated userid/datetime which means that this change will not be marked as a customization.

Environment Details

FSCM 9.2 PUM Image 30
PeopleTools 8.57.02

Concluding Thoughts

This post is not to suggest that this approach is best practice. While enabling/disabling Classic Plus, you will need to determine what works best for your lifecycle management procedures. It is as simple as that. What works for one customer might not work for another.

Personally, the prospect of automating the enable/disable Classic Plus customization through PeopleCode is very exciting. It is the main reason why I wrote this post. Additionally, combining that with Event Mapping provides an alternative 'customization free' approach in certain cases.

Further, we can see that this function/peoplecode logic is similarly used in the delivered 'Set Classic Plus' App Engine (EOCP_SETCP) which can be found in PeopleTools 8.56.06 and higher under the following navigation.

Enterprise Components > Common Utilities > Classic Plus Setup

PeopleBooks - Classic Plus Setup Page

If this setup page already exists in the application under Enterprise Components, why not simply use that instead? Yes, we should! But this setup page is only available in certain apps like FSCM and HCM. It is not yet available in Campus Solutions.

Sunday, August 27, 2017

PeopleTools 8.56 - Branding Review

PeopleTools 8.56 has been out for a few months now. This is a review of what is new in the Branding Framework pertaining to the 8.56 release.

Review Environment Details:

- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01

Branding Framework:

Not much has changed with the Branding Framework. I was expecting some improvements to the Theme Macro Set functionality which was introduced in 8.55. There are still some hard-coded references to images in javascript which would have been nice to move to Theme Macro Set CSS functionality. For example:

The delivered macro set, PT_DEFAULT_MACROSET_855, still contains 117 macros (same as in 8.55) with no changes in 8.56.

As you can see, there is a new Color Picker on the Theme Macro Set page which is a nice productivity enhancing feature! This Color Picker is based on HTML5 'color' input type element.

Icon Changes:

A notable change that we have already seen in demos prior to the release is the new 'Action Menu' icon. This has changed from the old 'hamburger' menu to a 'pea' (?) menu. Graham Smith thinks this is a healthy dietary change! We cannot argue with that. :)

Using Theme Macro Sets:

Since the framework has not changed, it was pretty much the same set of steps to use Theme Macro Sets to override Branding elements. One thing to note is that we definitely want to clone the 8.56 objects (style sheets, headers, themes, etc.) instead of moving objects from an 8.55 environment. This will make sure that we have the most current versions of the object in question.

We can follow the steps detailed in my previous posts describing how to use Theme Macro Sets to override Branding Elements:
PeopleTools 8.55 Branding - Theme Macro Sets - Part 1
PeopleTools 8.55 Branding - Theme Macro Sets - Part 2

One of the issues I noticed was the position of the 'Pea' icon was a little off after applying the Theme Macro Set overrides. This issue occurred only on the Classic Pages. For example:

I fixed this by adding the following a top property to the #pthdr2ActionList:after style selector which is part of the Classic Theme Style Sheet.

Using Oracle JET:

I noticed that Oracle JET version 2.1.0 is available with PeopleTools 8.56. I found that the JavaScript Injection Framework that I built using Oracle JET in 8.55, works without any issues in 8.56 as well. Only thing to note is that, due to the version change, we may need to review the requireJS configuration to make sure the javascript library paths are pointing to the correct version.

Resources:

JavaScript Injection Framework
Framework is based on my experience with Oracle JET - Part 1, Part 2, Part 3 and Part 4
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework

Using Classic Plus:

I wanted to test the delivered Classic Plus pages that were available in this PUM image. But when I navigated to the Process Monitor page - which is in the list of PeopleTools Components delivered as Classic Plus - I was still seeing the good old Classic.

To activate Classic Plus, we must update the Branding System Options to use "Fluid like theme for Classic" as the "Theme Style Type". This is the system level setting that enables "Classic Plus".