Placeholders are a great way to improve your forms, because they give users helpful hints without taking too much space on the canvas. Especially on smaller devices this is a must because sometimes you need some extra hints to make the form more understandable.

Today we look at placeholders and how to configure them in Oracle Fluid applications. We pay special attention to placeholders in dropdowns.

Note:  We write this blog as a follow-up of the previous blog (click here). I encourage you to read that first. In that blog, we wrote about page layout and how we could do some tricks to make the page more appealing.

So let’s pick it up from were we left. This is what we created the last time. It’s a simple form with no placeholders set.

form without placeholders

Now the same form, but then with placeholders could look like this.

form with placeholders
This already looks amazing and gives more direction to users. There are situations where you even can get rid of your labels and use placeholders instead. This is a very fine design technique, but be careful of how you apply it. Although this makes the form cleaner, it could also lead to confusion. Once you start typing in an edit box your placeholder is gone.

Setting placeholders

Putting placeholders on edit boxes is a pretty straightforward thing. Open application designer and then open the properties of one of the edit boxes. Then go to the Fluid tab.There is a standard region where you can put placeholder texts. see the screenshot below.

placeholder

You can either choose a static text or message catalogue. For this quick example we used this the first one.

Leaves us with the dropdown boxes, where we cannot enter a placeholder in application designer. Too bad, but there is a solution: jQuery and CSS to the rescue!

Let me give you a brief step-by-step implementation of how you could solve this.

Step 1: Download the  jQuery library and create a branding object 

download the library from download.query.com. Pick the minified version. Copy the contents of the file and paste it in a  JavaScript branding object.  I saved mine as CY2_JQ_1_11_2_MIN_JS.

jQuery Branding Object

Step 2: extend your CSS branding object

In the last blog you already created a CSS branding object named CY2_TIMESHEET_CSS.
Now extend this stylesheet with the following CSS:

/* Safari, Chrome */
.cy2_timesheet ::-webkit-input-placeholder {
color: #C7C7CD !important;
}

/* Firefox 4-18 */
.cy2_timesheet :-moz-placeholder {
color: #C7C7CD !important;
opacity: 1 !important;
}

/* Firefox 19+ */
.cy2_timesheet ::-moz-placeholder {
color: #C7C7CD !important;
opacity: 1 !important;
}

/* IE 10 */
.cy2_timesheet :-ms-input-placeholder {
color: #C7C7CD !important;
}

This is a little CSS which tells the browser what color the placeholder should be.

The reason I did this, is because I found the standard color of the placeholder was too dark in some browsers. Especially on tablets and phones you couldn’t tell if there was already something inside the edit box or if this was actually the placeholder you were looking at.  I decided to set the #C7C7CD color for placeholder text. This is a lighter type of grey than the standard placeholder color, which gives the idea that users really looking at a placeholder text.

Note: We need to load this CSS file along with the javaScript in the PageActivate before it’s actually picked up by the browser. We do this in our last step.

Step3: create a Javascript branding object

So with the colors in place, lets create the actual placeholder for the dropdown. Therefore we must add another JavaScript branding object. Let’s call it CY2_TIMESHEET_JS and put it underneath the JavaScript tab.

You can place the following code in it:

/* jQuery script to add a placeholder in the dropdown object */

$(document).ready(function() {

 /* First check if the first child item of the dropdown is really empty. if so, set the placeholder text */

 if ($('.cy2_timesheet #CY2_TIMESHEET_CY2_PROJECT_CD option:first-child').val()===''){
   $('.cy2_timesheet #CY2_TIMESHEET_CY2_PROJECT_CD option:first-child').text(' Please Choose a projectcode');
 }

 /* Define an onchange event (this executes whenever the dropdown value changes. (the users selects a different value) It checks if the changed value is empty. If so, then the empty item (top one) wil get a placeHolderColor class. While the rest of the items (children) will get a regularColor class. In all other circumstances (an item expect the top one is selected) remove any placeHolder  Color class and  */

 $('.cy2_timesheet #CY2_TIMESHEET_CY2_PROJECT_CD').on('change', function() {

  if ($(this).val() === '') {

   $(this).removeClass('regularColor');
   $(this).children().removeClass('placeHolderColor')

   $(this).addClass('placeHolderColor');
   $(this).children().addClass('regularColor');
  }

  else{

   $(this).removeClass('placeHolderColor');
   $(this).children().removeClass('placeHolderColor');

   $(this).addClass('regularColor');
   $(this).children().addClass('regularColor');
  }

 });

 /* Now the first time the form is loaded, we just invoke the onChange */
 $('.cy2_timesheet #CY2_TIMESHEET_CY2_PROJECT_CD').change();

});

What happens with PeopleSoft regular dropdowns is that the top item appears to be empty. We use this empty space to fill it up with a placeholder text.

What the script basically does is setting the placeholder text and color classes depending on the value that is being selected. E.g.: If you have the top item selected, the placeholder text should be visible in a lighter color, while the rest of the items  underneath (children) should keep their darker color. Once you really select an item in the dropdown, that item should be displayed in a regular color.

Also take notice we use the .cy2_timesheet #CY2_TIMESHEET_CY2_PROJECT_CD in the selector.  I do this often to prevent my code goes off in other unexpected places. This is a descendant-child pattern. It’s always a good practice to have at least an isolated execution space when it comes to your CSS or JavaScript. This way you can keep control. For example I wrap my form within a groupbox and give it a class name on the Fluid tab (like cy2_timesheet in our example). If you refer this class in your selector then you know that your execution space is tied to everything wrapped in this class.

Step4: Add the color classes to the CSS

Since we didn’t define the color classes yet, add this piece of text inside your CY2_TIMESHEET_CSS.

/* Placeholder color for dropdown when nothing is selected */

.cy2_timesheet .placeHolderColor
{
 color: #C7C7CD;
}

/* Placeholder color for dropdown when an item is selected */
.cy2_timesheet .regularColor
{
 color: #000000;
}

Step5: Add the classes to your pageActivate

Don’t forget to add your classes to your pageActivate.

AddJavaScript(HTML.CY2_JQ_1_11_2_MIN_JS);
AddJavaScript(HTML.CY2_TIMESHEET_JS);
AddStyleSheet(StyleSheet.CY2_TIMESHEET_CSS);

So there you have it, your dropdown with placeholder. Enjoy!
Next time we look at some PeopleTools 8.55 Fluid features.

Share on social media
Showing 5 comments
  • Avatar
    Sasank Vemana

    Hi Stefan – Great use of jQuery for working around some limitations with App Designer!

    Which tools version did you do this change?

    Another question, just curious if you had any particular reason for creating your own custom jQuery object CY2_JQ_1_11_2_MIN_JS instead of using an existing delivered jQuery objects PT_JQUERY_*_JS? Is it because you wanted a later version?

  • Avatar
    Stefan van Liempt

    Hi Sasank,

    Thanks!

    I built the project in 8.54. About the PT_JQUERY__*_JS, you’re absolutely right. I guess it would also work with the Orale shipped jQuery version. However I’d like to be in control when it comes to jQuery versions. That’s probably the only reason I created this branding object in the first place. Another way to do it is to link directly to a CDN.

  • Avatar
    Jithin Suresh

    Hi Stefan,

    Thanks for the idea!
    Not sure if you were able to enhance the code written. I was able to use your idea and used JQuery’s attr function to add placeholder attribute. And achieved the desired result.

    • Avatar
      Narasimha Gedela

      Hi Jithin,

      Can you share your jQuery’s attr function? I’m interested to look that version as well. Thanks!

  • Avatar
    Narasimha

    Hi Stefan,

    Thanks for the work around solution for dropdown placeholder. Apart from setting the Placeholder property in app designer as you mentioned above, we can also set/change the placeholder property dynamically through PeopleCode as well.

    ABCRecord.XYZField.PlaceholderText=”Your Placeholder Text”;

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Preference Center

      Necessary

      Advertising

      Analytics

      Other