Wednesday, June 21, 2017

New Window Bookmarklet

I am a "New Window" link junkie. I use that link ALL THE TIME! If it were possible to wear it out, mine would be worn out. I wish all PeopleSoft pages had the "New Window" link. For some reason, however, certain developers chose to remove it from specific PeopleSoft pages (such as Structure and Content). I'm sure there is a good reason... there just has to be. So seeing it missing from Fluid has been a significant struggle for me. I'm thankful for Sasank's Fluid UI - New Window Feature - Workaround customization. For quick access to a new window without customization, I have a Bookmarklet, which is a JavaScript fragment masquerading as a favorite (or bookmark). Here is the JavaScript:

(function() {
  var parts = window.location.href.match(/(.+?\/ps[pc])\/(.+?)(?:_\d+?)*?\/(.*)/);
  window.open(parts[1] + '/' + parts[2] + '_newwin/' + parts[3], '_blank');
}())

To add it to your bookmark toolbar, drag the following link into your link toolbar:

PS New Window

This solution is simple, but may not satisfy your requirements. This bookmarklet assumes you want to open a new window to the URL displayed in the address bar. That URL may or may not match the actual transaction. If you want a bookmarklet that opens a new window specifically targeting the current transaction, then try this bookmarklet:

(function() {
  var href = window.location.href;
  var parts = (!!frames["TargetContent"] ? !!frames["TargetContent"].strCurrUrl ? frames["TargetContent"].strCurrUrl : href : href).match(/(.+?\/ps[pc])\/(.+?)(?:_\d+?)*?\/(.*)/);
  window.open(parts[1] + '/' + parts[2] + '_newwin/' + parts[3], '_blank');
}())

To use it, drag the following link into your bookmark toolbar:

PS New Window

Special shout out to David Wiggins, who posted a similar bookmarklet on my Where is My New Window Link? post as I was writing this blog post.

Tuesday, June 20, 2017

Where is My New Window Link?

As PeopleSoft moves from Classic to Fluid, you have likely noticed the missing New Window link. Why is it missing? I can only speculate. When considering mobile, perhaps it makes sense to drop the New Window link. Mobile devices have limited screen real estate. Why waste it with a link you will likely never use on a mobile device? On a desktop, however, the New Window link is irreplaceable. So... what to do? How can you open a new window? You probably already know if you just open a new window without that special New Window link, your old window session will cease to exist. You know that you will receive the dreaded "... return to most recent active page..." message. Does that mean you can no longer have two active PeopleSoft windows? There is a work around that is documented in various places around the web. In short, the answer is to copy the current URL, open a new tab, paste the URL into the address bar, and then append _newwin to the site name. Before reviewing some examples, let's discuss what is going on and why this is necessary.

The PeopleSoft app server is stateless. App server connections are often pooled and used upon request. However, we know that component buffer state is stored somewhere. If not at the app server, then where? At the web server. As with any J2EE application, PeopleSoft uses web server sessions to store state (which is why load balancers must use sticky sessions, etc). The details here aren't exact, but metaphorical. PeopleSoft partitions web server session state into state blocks. A user may have multiple state blocks. The web server identifies the appropriate state block based on an identifier in the URL. When you click the New Window link, the link's URL pattern instructs the web server to generate a new state block. We can replicate the New Window link behavior by simply modifying a PeopleSoft URL. Let's review an example. Let's say you have a Fluid URL that looks something like this: http://hr.example.com/psc/ps/EMPLOYEE/HRMS/c/EL_EMPLOYEE_FL.HR_EE_ADDR_FL.GBL. The highlighted part between the servlet (psc) and the portal (EMPLOYEE) is the site name (ps). All we have to do is add _newwin to the site name. Accessing a URL such as http://hr.example.com/psc/ps_newwin/EMPLOYEE/HRMS/c/EL_EMPLOYEE_FL.HR_EE_ADDR_FL.GBL will instruct the web server to generate a new state block, perhaps something like http://hr.example.com/psc/ps_23/EMPLOYEE/HRMS/c/EL_EMPLOYEE_FL.HR_EE_ADDR_FL.GBL.

It certainly isn't as simple as the New Window link, but it is better than nothing. For a more permanent, user friendly method, take a look at Sasank's post Fluid UI - New Window Feature - Workaround.

Edit: I created this post because a lot of people I meet aren't familiar with the "New Window" trick. One very important caveat when working with classic pages: The URL in the header may not match the transaction URL. This appears to be tools release dependent. After PeopleSoft implemented "Partial Page Rendering" with a constant header and iframed content, the URL for the content area would change, but the URL in the address bar did not. What this means is simply copying the URL from the address bar and changing it to include '_newwin' will create a new state block, but that new window may point to different component from the original window.

Thursday, June 15, 2017

HIUG Interact 2017

Are you attending Interact 2017 this weekend? I will be leading a PeopleTools hands-on workshop on Sunday from 1:30 PM to 4:30 PM in Panzacola F-4. Because this is hands-on, please bring your laptop. All session activities will be completed over a remote desktop connection, so as long as you have a Remote Desktop Client and a full battery charge, you should be ready. In this session we will cover a variety of topics including classic global and component branding as well as fluid navigation and page development. I look forward to seeing you in Orlando!

Tuesday, May 23, 2017

Using CSS Frameworks with Fluid

Unlike PeopleTools Classic, which used almost-pixel-perfect layout, Fluid uses CSS for layout. The benefit of this pattern is flexibility. Unlike Classic pages, which only allowed for one layout, Fluid allows us to manipulate layout with CSS. I like CSS, so I see this as a positive. The more content Oracle development delivers in CSS, the more we can configure and transform the user experience. While I may love what I can do with CSS, it isn't the easiest language/technology to use. As a PeopleSoft developer with a significant amount of front-end development experience, I had this thought:

Could PeopleSoft developers avoid learning and writing CSS by using common, modern CSS frameworks to enhance PeopleSoft pages?

As with anything, the answer is, "Yes," but it isn't that easy. Here is the reason: PeopleSoft stylesheets apply style rules to HTML elements. And this makes sense. Review the most common CSS frameworks and you will see that they do the same thing (honestly, I would despise a CSS framework that didn't apply rules to HTML elements, but that is another story). Here is the problem: since both Fluid and and the framework style HTML elements, there are bound to be conflicts, and those conflicts often cause layout and display problems. Normally this would be fine, because selector specificity and order dictate who wins. The real problem is where the two frameworks have different, but related CSS declarations. The solution? A reset stylesheet. A reset Stylesheet will either reset conflicting Fluid CSS properties or conflicting your-favorite-CSS-framework properties. Now we have a solution. But, this solution has a serious problem: the point of using a CSS framework was to avoid writing CSS. After working through all of these conflicts, it is highly possible that you will write more CSS than you would have without the CSS framework. CSS frameworks are highly powerful and have value, but be careful to pick a CSS framework that uses class selectors only; no element selectors.

I have reviewed many CSS frameworks and it is hard to find one that just uses classes, no element styling. Oracle JET is a CSS framework that supports class-only styling. Oracle JET's Alta CSS stylesheets come in two flavors:

  • HTML element selectors
  • Class-only selectors

To incorporate Oracle JET with PeopleSoft Fluid:

  1. Download the latest class-only oj-alta-notag-min.css file (you can download the uncompressed version if you prefer). It is important that you grab the *-notag-*.css version. This is the one that uses class name selectors rather than HTML element selectors.
  2. Create a new Stylesheet definition and paste the contents of the oj-alta-notag CSS file into the new Stylesheet definition.
  3. Use the AddStylesheet PeopleCode function in a Page Activate event to add the new free form stylesheet to a page.
  4. Add Oracle JET class names to fields on your page.

1. Download the latest oj-alta-notag-min.css file

You don't need to "download" the file, just access its content. We will copy and paste the content into PeopleSoft in the next step. The file is available in raw form on GitHub here.

2. Create a new Stylesheet definition

After logging into your PeopleSoft development instance as an administrator, navigate to PeopleTools > Portal > Branding > Branding Objects. Switch to the Stylesheet tab and select the Upload Style Sheet Object. This will open a dialog where you can paste the CSS from step 1. Be sure to give the Stylesheet an appropriate name. I chose ORACLEJET_FF. Uploading a Stylesheet in this manner creates a managed Stylesheet definition that is accessible from Application Designer, and mixed with all of the other App Designer Stylesheet search results, so naming is important. Be sure to use your site-specific prefix. PeopleTools best practice recommends using the _FF suffix as well to denote this Stylesheet as a Free Form Stylesheet, which differs from the more traditional structured PeopleTools Stylesheet.

3. Use the AddStylesheet PeopleCode function in a Page Activate event

To any page that will use Oracle JET styling, open the PageActivate event and add PeopleCode that looks something like:

AddStyleSheet(StyleSheet.ORACLEJET_FF);

4. Add Oracle JET class names to fields on your page

Now open your Fluid page in Application Designer and identify the field that is supposed to use an Oracle JET class. Open the field's properties and switch to the Fluid tab. In the Fluid tab, set the Default Style Name to an Oracle JET style class. My favorite Oracle style classes to use with Fluid are oj-flex and oj-flex-item because they allow me to use CSS Flex Layout with Groupbox containers to ensure proper responsive design across a variety of form factors.

I think it is safe to say the most popular CSS framework in the world is Bootstrap. A common question developers ask me is, "Can I use Bootstrap with PeopleSoft Fluid?" The answer, of course is, "Yes." While I prefer Oracle JET because of its no-tag alternative, I have friends that successfully use Bootstrap with PeopleSoft Fluid pages. With PeopleSoft, all things are possible!

Thursday, February 09, 2017

Alliance 2017

We are in the final countdown for Alliance 2017. I am really excited about this conference. It is such a great opportunity to meet up with old friends as well as make new ones. The Alliance session content and delivery is extremely high caliber. HEUG is a very engaged community. The MGM is a pretty amazing facility as well.

At GreyHeller our week starts with an amazing Monday workshop. On Monday, February 27th from 10:00 AM to 2:30 PM, Larry Grey and I will be hosting a pre-conference workshop titled Advanced PeopleTools Development Workshop with Jim Marion (session 4378). Our objective is to give you hands on experience with all of the new PeopleTools including Fluid and the Event Mapping Framework. But wait, there's more... Fluid itself is a new development paradigm with a lot of flexibility. In this session you will learn how to use CSS and JavaScript to further enhance the PeopleSoft user experience. For more details and registration, visit the Monday Workshops page on the Alliance conference site.

On Tuesday morning at we join our partner MODO LABS at 8:30 AM to present the session A Student for Life - Engaging prospective, new, current, and past students has never been easier. In this session you will see how MODO LABS partnered with GreyHeller makes it trivial to embed PeopleSoft content in a native, secure user experience giving users access to native, on-device capabilities such as maps, notifications, etc.

On Tuesday, February 28th from 09:45 AM to 10:45 AM, our friends from the University of Massachusetts will be sharing about their experience mobilizing and modernizing the Student Center (session 4036) at their UMass Boston, Dartmouth and Lowell campuses using our PeopleMobile™ product. It really is amazing how our product transforms the PeopleSoft user experience. Definitely a "must see."

On Tuesday, February 28th from 1:15 PM to 3:15 PM, Larry and I will be leading the PeopleSoft Cloud to Ground workshop – Cloud Adoption Strategies and Best Practices (session 4381). In the ERP space, Hybrid "is the new black." There are a lot of great cloud enhancements to a traditional ERP. Anyone thinking about implementing cloud is also thinking about backend data integrations. But what about the user experience? You don't have to settle for a disjointed user experience. In this session, Larry and I will show you how your organization can integrate the UX layer into a single, common user experience.

On Thursday, March 2nd at 9:15 AM, my friend Felicia Kendall from UCF will be sharing about their highly publicized breach (including costs) and their experiences with securing PeopleSoft after a highly publicized breach. This should prove to be a very valuable session. The session is titled University of Central Florida: Post-breach Mitigation & Prevention Strategy (session 4108).

While attending Alliance, be sure to wander through the demo grounds. Our booth (#301) will be right beside the Oracle booth. I'm looking forward to wandering through and visiting with my friends from Oracle, Ciber, Deloitte, Gideon Taylor, Intrasee, Smart ERP, Accenture, Presence of IT, MODO LABS, Huron, Sierra-Cedar, and many more.

See you on the floor!