8 Replies Latest reply: Jul 22, 2013 8:26 AM by 992151 RSS

    invoking a popup on the click of an image in an adf application


      Hi All,


      I am working on an ADF application that has a page with a table of records. One of the columns has an image in it and on click of that image i need to open a modal popup that has respective details of that record.

      I am not able to open the popup on click of the image.


      below is the snippet of how i am trying to achieve the same.

      <f:facet name="imageFacet">

               <af:commandImageLink icon="/images/pdf.png"    id="cil1">

                          <af:showPopupBehavior popupId="popupExt" triggerType="click"/>



           <af:popup id="popupExt" animate="default"  >

                <af:panelWindow id="pw1" 


                                title="External Internet Info in a Modal Popup"




                   <af:inlineFrame id="if1" shortDesc="This is an inline frame"





      in this code, i get an error on the jspx page that <af:popup> is not a valid child of <af:commandImageLink> and on running the page, nothing happens on click of the image.

      Any Ideas or suggestion in this regard will be helpful.



        • 1. Re: invoking a popup on the click of an image in an adf application
          Timo Hahn

          The message

          <af:popup> is not a valid child of <af:commandImageLink>

          doesn't match the code you provided. The commandLink has a showPopupBehavior as child. The popup is outside the command link. This should work.



          • 2. Re: invoking a popup on the click of an image in an adf application

            Hi ,


            Surround the both <af:commandImagelink> and <af:popup > by one Panelgrouplayout.<f:facet>will allow one root component only..


            • 3. Re: invoking a popup on the click of an image in an adf application

              or else you can bind the popup and in actionListener method for commandImageLink you can show the popup programmatically


              like :

              private RichPopup popUp;

              public void setPopUp(RichPopup popUp){

                   this.popUp = popUp;



              public RichPopup getPopUp(){

                   return this.popUp;


              public void ShowPopup(ActionEvent actionEvent) {

                        RichPopup.PopupHints hints = new RichPopup.PopupHints();



              public void HidePopup(ActionEvent actionEvent) {


                         RichPopup.PopupHints hints = new RichPopup.PopupHints();



              • 4. Re: invoking a popup on the click of an image in an adf application

                Thank you TimoHahn for your suggestion,



                I have tried the approaches suggested by you and others below and now, I am able to get the popup (decalaratively (af:showPopupBehavior)) on click of a button/image.

                But when I try to apply the same logic for a button or image inside a table, it doesn't work.


                I am using <af:table> for the table and the jdeveloper version is,



                Thanks in advance for the help.

                • 5. Re: invoking a popup on the click of an image in an adf application
                  Timo Hahn

                  Well, 'is does not work' is no help at all as we don't know what this means.


                  Please tell us exactly what  you want to archive and what you see and what you expect to see.



                  • 6. Re: invoking a popup on the click of an image in an adf application

                    Hi Timo,


                    what i meant was,


                    I am trying to invoke the modal popup from a button or an image inside a table,


                    What i expect to see:  On click of the button or the image, the modal popup shows on the page.


                    What i see:  On click of the button/image, the page just refreshes and the popup is not displayed.


                    Server logs do not show anything either.



                    • 7. Re: invoking a popup on the click of an image in an adf application
                      Timo Hahn

                      This works for me:

                                          <af:table value="#{bindings.Departments.collectionModel}" var="row" rows="#{bindings.Departments.rangeSize}"

                                                    emptyText="#{bindings.Departments.viewable ? 'No data to display.' : 'Access Denied.'}" rowBandingInterval="0"


                                                    selectionListener="#{bindings.Departments.collectionModel.makeCurrent}" rowSelection="single"

                                                    fetchSize="#{bindings.Departments.rangeSize}" filterModel="#{bindings.DepartmentsQuery.queryDescriptor}"

                                                    queryListener="#{bindings.DepartmentsQuery.processQuery}" filterVisible="true" varStatus="vs" id="t1">


                                              <af:column sortProperty="#{bindings.Departments.hints.DepartmentName.name}" filterable="true" sortable="true"

                                                         headerText="#{bindings.Departments.hints.DepartmentName.label}" id="c5">

                                                  <af:button text="Show Detail" id="b1">

                                                      <af:showPopupBehavior popupId=":::p1"/>




                                      <af:popup childCreation="deferred" autoCancel="disabled" id="p1" contentDelivery="lazyUncached">

                                          <af:dialog id="d1">

                                              <f:facet name="buttonBar">

                                                  <af:panelGroupLayout id="pgl2">

                                                      <af:panelFormLayout id="pfl1">

                                                          <af:inputText value="#{bindings.DepartmentId.inputValue}" label="#{bindings.DepartmentId.hints.label}"

                                                                        required="#{bindings.DepartmentId.hints.mandatory}" readOnly="true"

                                                                        columns="#{bindings.DepartmentId.hints.displayWidth}" maximumLength="#{bindings.DepartmentId.hints.precision}"

                                                                        shortDesc="#{bindings.DepartmentId.hints.tooltip}" id="it1">

                                                              <f:validator binding="#{bindings.DepartmentId.validator}"/>

                                                              <af:convertNumber groupingUsed="false" pattern="#{bindings.DepartmentId.format}"/>


                                                          <af:inputText value="#{bindings.DepartmentName.inputValue}" label="#{bindings.DepartmentName.hints.label}"

                                                                        required="#{bindings.DepartmentName.hints.mandatory}" readOnly="true"



                                                                        shortDesc="#{bindings.DepartmentName.hints.tooltip}" id="it2">

                                                              <f:validator binding="#{bindings.DepartmentName.validator}"/>


                                                          <af:inputText value="#{bindings.ManagerId.inputValue}" label="#{bindings.ManagerId.hints.label}"

                                                                        required="#{bindings.ManagerId.hints.mandatory}" readOnly="true"

                                                                        columns="#{bindings.ManagerId.hints.displayWidth}" maximumLength="#{bindings.ManagerId.hints.precision}"

                                                                        shortDesc="#{bindings.ManagerId.hints.tooltip}" id="it3">

                                                              <f:validator binding="#{bindings.ManagerId.validator}"/>

                                                              <af:convertNumber groupingUsed="false" pattern="#{bindings.ManagerId.format}"/>


                                                          <af:selectOneListbox value="#{bindings.LocationId.inputValue}" label="#{bindings.LocationId.label}"

                                                                               required="#{bindings.LocationId.hints.mandatory}" shortDesc="#{bindings.LocationId.hints.tooltip}"

                                                                               readOnly="true" id="sol1">

                                                              <f:selectItems value="#{bindings.LocationId.items}" id="si1"/>

                                                              <f:validator binding="#{bindings.LocationId.validator}"/>








                      have you verified that the popupid id correct?



                      • 8. Re: invoking a popup on the click of an image in an adf application

                        Thanks Timo,


                        Its now working for me as well. The issue was syntactical  mistake in making call to the popup.


                        I was using <af:showPopupBehavior popupId="p1"/> instead of <af:showPopupBehavior popupId=":::p1"/>


                        after making the change the popup is working fine.


                        Thank you for your time and suggestions.