Sunday, August 20, 2017

Fluid UI - Responsive and Mobile-Friendly Tooltip


A good friend asked me if we can add a descriptive tooltip to Fluid UI elements. This reminded me that adding tooltips to page field elements has not been very straight forward with PeopleTools. In Classic, we had a few  options (there may be more):

1. Use the field class - HoverText property. This has many limitations - only works for push buttons or hyperlinks, maximum length of 100 characters, to name a few.
2. Use the page field property (use) - Mouse Over Popup settings. This again is limited to push buttons or hyperlinks. It also involves creating Popup page object.
3. Use application delivered Mouse Over Popup Pages. For example, HCM delivers some configuration that can be used for setting up mouse over popup fields.
4. Custom approach: http://peoplesoftdotnet.blogspot.com/2015/06/hovertext-in-to-edit-box.html

Needless to say, these options may not be very flexible to use with Fluid.

The good news is that in Fluid, we could use the HtmlAttributes field class property to add/update attributes to the page field element. This allows us to add/update the text attribute which is used to display the tooltip. Let us try this and see how it may work.

Test Environment Details:

Application: CS 9.2 PUM Image 4
PeopleTools Release: 8.55.12
Test Component/Page: AV_OUTR_SRCH_S_FL/AV_OUTR_SRCH_FL
Navigation: Fluid Home > Contributor Relations Homepage > Donor Prospects

Using HtmlAttribute to update the text attribute:

The page activate code for AV_OUTR_SRCH_FL page is written the following App Package Method:
App Package Class: AV_OUTR_FL.COMPONENTS.AV_OUTR_S_FL.OnExecute
Method: pageActivate


Let us add some custom code to update the text attribute for page field AV_SRCH_FLDS_WK.LAST_NAME_SRCH.


Delivered Tooltip on larger viewport:


Delivered Tooltip on smaller viewport:


With the hoverover text overflowing the smaller viewport, we can see that the tooltip is neither user-friendly nor responsive.

In a quest to find a user-friendly/responsive option, I stumbled on this resource:
https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
Demo: http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/

The steps provided in Osvaldas's blog are very simple. We just need to load the CSS and javascript provided in the blog and then add the rel="tooltip" attribute to the target page field element. I wanted to take this idea and apply it to PeopleTools (using the above example).

Responsive and Mobile-Friendly Tooltip:

I updated the previous custom peoplecode and added the rel="tooltip" property. Further, I added a javascript object that is improvised on Osvaldas's code.


Custom Tooltip on larger viewport:


Custom Tooltip on smaller viewport:


Implementation Details:

I shared my code - which is based on the blog post by Osvaldo Valutis - on GitHub.
https://github.com/SasankVemana/Fluid-UI-Responsive-Tooltip

PeopleCode:

In the sample peoplecode provided above, you can see that along with the text attribute we have also added the rel="tooltip" attribute to the page field element using the HtmlAttributes property.

CSS:

I modified the CSS provided in Osvaldo's blog to update the tooltip text and background colors. You can make additional modifications if necessary based on your requirement. Create a Free-Form Style Sheet object in App Designer using the CSS (CSK_TOOLTIP_CSS) in the GitHub project.

JavaScript:

I extended the javascript provided in Osvaldo's blog to wrap the code in a require block to facilitate the loading of jQuery using requireJS - which I have detailed in the past as part of a javascript injection framework. You could use an alternate approach for the javascript injection but you need to make sure that jQuery is loaded prior to execution of this javascript. Additionally, this javascript also takes care of loading the CSS (CSK_TOOLTIP_CSS) using helper functions - again part of the javascript injection framework. Create a JavaScript (HTML) object in App Designer using the javascript (CSK_TOOLTIP_JS) in the GitHub project.

2 comments:

  1. Hi Sasank!

    This is great! Javascript to the max again. especially how relatively easy the implementation is on the people code side. Well done. Thanks for sharing.

    Your idea gives me more inspiration of creating a setup page were you tie RECORD.FIELD together with a DESCR. In your code you can than loop over your page fields and attach the title dynamically which is obtained from your DESCR. You might even use MESSAGECAT for this.

    Stefan

    ReplyDelete
    Replies
    1. @Stefan - Thanks!

      That sounds like a great idea. Further, we could eliminate the custom code by using Event Mapping Framework for the page activate peoplecode!

      Delete