Cedar blog

February 2015 - Adding Watermarks to PeopleSoft Fields

February 2015 - Adding Watermarks to PeopleSoft Fields

A client recently requested that we enhance some select PeopleSoft Self Service fields with watermark text functionality, making their system more intuitive for their end users. This is a technique used by many well designed websites and looks like this:



This isn't something that's part of the delivered application, but it was an exciting challenge to work on (and at Cedar we love working on areas that improve the experience for the end-users).

Requirements

The requirements are somewhat different from normal:
- the watermark text should be a light grey, to differentiate it from text entered in the field
- when a user types in the field the text should be black
- when a user starts typing in the field the watermark text should disappear
- if the user does not enter anything in the field the watermark text should not be saved to the database

Solution



Steps to Create

1) Find a page to modify. I picked General Comments (Workforce Admin > Personal Info > Biographical > General Comments) as it's a nice and simple starting page.

2) Download the latest uncompressed, development version of jQuery (currently 1.11.2) from:
http://jquery.com/download/

Save it as an HTML object (I named mine CED_JQUERY_1_11_2).

3) Download the watermarks plugin from Google Code:
https://code.google.com/p/jquery-watermark/

Save it as an HTML object (I named mine CED_WATERMARKS).

4) Add an HTML area at the top of the target page, make the value a constant, and enter code similar to the the following:

<!-- Load jQuery Object-->
<script type="text/javascript" language="javascript" src="%JavaScript(DMD_JQUERY_1_11_1)">
</script>

<style type="text/css">
.watermark {color: #bbb !important;}
input:-ms-input-placeholder {color: #bbb;}
</style>

<!-- Load Watermark plugin -->
<script type="text/javascript" language="javascript" src="%JavaScript(DMD_WATERMARK)">
</script>

<!-- Add Placeholder/Watermark to field -->
<script>
$(document).ready(function() {
$(".PSEDITBOX").attr("placeholder", "Cedar Rocks!");});
</script>

5) Bask in the warm glow of satisfaction that you've done something awesome!

There's a little more to do, like giving the objects proper names, and testing in all browsers (however it works in the modern ones). 

Back

 

Add your comment

MATHURA

20 March 2015

Hi, I tried the above code.. But I dont know how to refer the peoplesoft field in the above code. Please advise

DUNCAN

20 March 2015

At the moment the field is using jQuery to return a list of all PSEDITBOX's and applying the watermark to those. (It's the $(".PSEDITBOX"). part of the penultimate line.) All you have to do is change that to the field that you want to attach it to (be that by name, id, type etc).

ARPAN

11 May 2015

Here instead of ".PSLONGEDITBOX" I want to pass field name. Here instead of ".PSLONGEDITBOX" I want to pass field name.I tried with recordname_fieldname; but didn't work. Could you please put some light on it.Thanks in advance.

PRAVEEN

29 January 2016

Hi, PeopleTools 8.49 crashes on saving the jQuery as HTML. Is there a way to handle it?

DUNCAN

29 January 2016

Praveen, From recollection, I think the problem was that it tries to 'minify' it and it's too long. I forget how I got around this, I think I switched from the minified version to the full version or vice-versa.

The Latest PeopleSoft and Fusion Videos