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


12 comments:

  1. Hey guys if you want to play some fantastic game then visit here our homepage and play free fireboy and watergirl game online on your pc tablet and on your smartphone without any download and registration.

    ReplyDelete
  2. Are you in need of Custom Term Paper Writing Services for your various Custom Term Paper Assignment Services? Do not fret; Legitimate Custom Term Paper Writing Services is here to provide the necessary assistance you require to attain your academic aspirations.

    ReplyDelete
  3. Great post regarding ghost label and how it can be added in to JQueary and ADF application, Each and every step which is mentioned is very convenient for the user to understand and implement it. It might help Essay Writing Help UK to use this in their service also.

    ReplyDelete
  4. One approach to simplify transactions is to give everything clients need to help a given assignment inside the application itself. Since it is practically difficult to anticipate everything that law essay writing service UK clients need to finish the assignments related with their specific occupations.

    ReplyDelete


  5. After this brings up its clients get entertained well with its premium services, the Call Girls in Faridabadis liable to increase the level of fun by its quality services dissimilar to get anywhere. So, let us forget everything and take pleasure in what you wait for a long time. Check our other Services...
    Russian Escorts in Lucknow
    Russian Escorts in Mahipalpur
    Russian Escorts in Mahipalpur
    Russian Escorts in Mahipalpur
    Russian Escorts in Mahipalpur

    ReplyDelete
  6. Finding the best Help with Medical Assignment is not easy unless one is keen to establish a professional medical assignment help & medical homework help online.

    ReplyDelete
  7. It is important for medical science research paper service students to seek Medical Science Assignment Help from a reputable custom medical science writing company so as to be assured of good grades in their medical science essay writing services.

    ReplyDelete

  8. The hectic world, a usual silhouette of wrinkled-faces and lack of time & good people make absolute absence of Love in our lives. Only a smile means to exist in the whole world bringing itself a Comet of Love. So it takes you believe onRussian Escorts in Gurgaon liable to fulfill your lives with real sense of love. Check our other Services...
    Escorts Service in Gurgaon
    Female Escorts in Gurgaon
    Russian Escorts in Gurgaon
    Russian Escorts in Gurgaon
    Escorts Service in Gurgaon

    ReplyDelete
  9. Finding the best Help with Medical Assignment is not easy unless one is keen to establish a professional medical assignment help & medical homework help online.

    ReplyDelete
  10. The examples are themed for our demo web application, El Piju. ... context of a custom WebCenter Portal application, the same display ...
    Fix msvbvm50.dll error

    ReplyDelete