Thursday, December 27, 2012

Adding ghost labels/ label in fields using JQuery to WebCenter/ ADF web application


Ghost labels is equivalent to placeholder attribute of input tag. This HTML tag is not supported by ADF. Please visit http://www.w3schools.com/html5/att_input_placeholder.asp for more on placeholder. placeholder attribute is supported in all major browsers, except Internet Explorer

Figure 1

This application covers displaying of label in fields for 3 commonly used controls, viz. Input Text, Input Text with secret="true" i.e. password and Select One Choice. Below is screenshot of ghost label image generated as output of this application
Figure 2
Once you click on any field to type, it becomes blank as shown below
Figure 3
Screen appears as below after making entries in all fields
Figure 4
Below are steps to implement ghost labels/ label in fields 
1.  Create new Web Center Portal - Framework Application
2.  Download jquery-1.7.1.min.js or get it from downloadable application under MyWebApplicationWithJQueryGhostLabels\Portal\public_html\js. Copy it to folder added by you, say C:\JDeveloper\mywork\MyWebApplicationWithJQueryGhostLabels\Portal\public_html\js
3.  Right click folder js > New > Categories > Web tier > HTML > JavaScript File, name it say, label-in-field.js. Your js folder should now be containing 2 files, viz. jquery-1.7.1.min.js, label-in-field.js
4.   Add folder, say C:\JDeveloper\mywork\MyWebApplicationWithJQueryGhostLabels\Portal\public_html\css css, in Web Content folder. Right click folder css > New > Categories > Web tier > HTML > CSS File, say label-in-field.css. Add below code to it and save it
.text-label { color: #cdcdcd; font-weight: bold;}
5.   Add below code to label-in-field.js and save it
function onADFPageLoad() {
    try {
        // Label in field/ ghost label for Select One Choice control
        $('select').each(function () {
            if (this.selectedIndex == 0) {
                $(this).addClass('text-label');
            }

            $(this).focus(function () {
                $(this).removeClass('text-label');
                $(this.options[0]).addClass('text-label');
            });

            $(this).change(function () {
                if (this.selectedIndex == 0) {
                    $(this).addClass('text-label');
                    $(this.options[0]).addClass('text-label');
                    //Use below to lines if you do not want to use CSS
                    //this.style.color = '#cdcdcd';
                    //this.style.fontWeight = 'bold';
                }
                else {
                    $(this).removeClass('text-label');
                    $(this.options[0]).addClass('text-label');
                }
            });
        });

        // Label in field/ ghost label for Input Text control
        $('input[type="text"]').each(function () {
            if (this.value == '') {
                this.value = getLabelForComponentId(this.name);
                $(this).addClass('text-label');
            }

            $(this).focus(function () {
                if (this.value == getLabelForComponentId(this.name)) {
                    this.value = '';
                    $(this).removeClass('text-label');
                }
            });

            $(this).blur(function () {
                if (this.value == '') {
                    this.value = getLabelForComponentId(this.name);
                    $(this).addClass('text-label');
                }
            });
        });

        // Label in field/ ghost label for Input Text control with secret="true" i.e. password
        $('input[type="password"]').each(function () {
            this.value = "";

            if (this.value == '') {
                this.type = "text";
                this.value = getLabelForComponentId(this.name);
                $(this).addClass('text-label');
            }

            $(this).focus(function () {
                if (this.value == getLabelForComponentId(this.name)) {
                    this.type = "password";
                    this.value = '';
                    $(this).removeClass('text-label');
                }
                else {
                    //this.type = "text"; //For testing only. DO NOT uncomment. Uncommenting will show password in plain text
                }
            });

            $(this).blur(function () {
                if (this.value == '') {
                    this.type = "text";
                    this.value = getLabelForComponentId(this.name);
                    $(this).addClass('text-label');
                }
                else {
                    this.type = "password";
                    $(this).removeClass('text-label');
                }
            });
        });
    }
    catch (err) {
        alert(err);
    }
}

function getLabelForComponentId(textId) {
    try {
        var adfComp = AdfPage.PAGE.findComponentByAbsoluteId(textId);
        return adfComp.getLabel();
    }
    catch (err) {
        alert(err);
    }
}
6.   Add say MyRegistrationForm.jspx under Web Content > oracle > webcenter > portalapp > pages, which requires to display input texts, password input texts, dropdowns to display label in field or ghost label functionality
7.   Add below lines to your MyRegistrationForm.jspx

  
  
    
      
        
        
        
      
      
        
          
          
          
            
            
            
          
        
      
      
    
  

8.   Open pages.xml from Web Content > oracle > webcenter > portalapp > pagehierarchy. Select Root. Drag drop MyRegistrationForm under Root in Page Hierarchy’s Hierarchy: section and select MyRegistrationForm. Select Delegate Security radio button under Security section. Ensure anonymous-role has View permission
9.   To run application, download it. Expand Web Content > oracle > webcenter > portalapp > pages, right click MyRegistrationForm.jspx, click run

In case, you do not wish to apply ghosting to certain controls, add below condition
if (getLabelForComponentId(this.name) != "itTelephoneNo") {}

within
$('input[type="text"]').each(function() {});

(where itTelephoneNo is id property of Input Text control on your .jspx form)

Download Application