Please disable your adblock and script blockers to view this page

Search this blog

Wednesday 3 April 2013

Inline PopUp with noteWindow (Excellent feature) in Oracle ADF

A very good and flexible component in adf is af:popup. we can use popup in various ways.
Suppose sometimes we need to show short description or some detail about any text ,button on Mouse Hover, then we can use inline PopUp (excellent look and feel)

For this you have to follow these steps-
  • Create a page in your bounded taskflow, drag an output text in page for that we are going to show Short Description.
  • Drag n drop a pop component in page in which we show description for that output text


Drop an af:popup component on page


  • Now drop a noteWindow under popup component 
Drop af:noteWindow component under popup





  •  and write your description in source of .jsff page in notewindow component
<af:popup childCreation="deferred" autoCancel="disabled" id="p1">
      <af:noteWindow id="nw1" inlineStyle="width:200px;" autoDismissalTimeout="5">
                       <p><b>Penguins</b> <b><font color="maroon">(order Sphenisciformes, family Spheniscidae)
                       are a group of aquatic, flightless birds living almost
                       exclusively in the southern hemisphere, especially in
                       Antarctica.</font></b> <b><font color="Green"> adapted for life in the water, penguins
                       have countershaded dark and white plumage, and their wings
                       have evolved into flippers</font></b></p>
      </af:noteWindow>
    </af:popup>
  • Drag showPopupBehavior inside output text for that you have to show that popUp
Use showPopupBehavior to show popup on mouse hover event

  • Now pass popup id in showPopupBehavior and set trigger type to mouseHover 
Set triggerType property of af:showPopupBehavior



  • Run your page and see how it look-- It is just awesome

    And this is very good that you can show graphs, tables and other information on this type of inline popUp 
    You can find sample application here- Download Sample Application

5 comments :