Sunday, July 1, 2018
Cascading af popup windows
Cascading af popup windows
This time Im back with a very simple tip on af:popup. The use case requirement was to display popup on another popup and the developers do not want to add an af:dialog or af:panelWindow to the parent popup as it does not gives the look and feel that they are looking for.
So the solution is to define the child popup inside the parent as nested. This makes sure that parent is displayed when child is made visible. What if one keep child outside of parent? Well, if the child is kept outside of parent (note that parent popup, here, does not have af:dialog or af:panelWindow for holding its contents) in JSF page, parent was getting closed while child is displayed. So the code snippet that worked for them look like as given below:
So the solution is to define the child popup inside the parent as nested. This makes sure that parent is displayed when child is made visible. What if one keep child outside of parent? Well, if the child is kept outside of parent (note that parent popup, here, does not have af:dialog or af:panelWindow for holding its contents) in JSF page, parent was getting closed while child is displayed. So the code snippet that worked for them look like as given below:
<!-- Parent popup-->
<af:popup id="p1" autoCancel="disabled" contentDelivery="lazyUncached">
<af:outputText id="ot1" value="test value">
<af:showPopupBehavior popupId="shortDescPopup" align="endAfter" triggerType="mouseHover"/>
</af:outputText>
<!-- Child popup-->
<af:popup id="shortDescPopup" contentDelivery="immediate">
<af:outputText id="desc" value="This is from child popup"/>
</af:popup>
</af:popup>
<af:commandButton text="Shop Parent Popup" id="cb1">
<af:showPopupBehavior align="endAfter" popupId="p1"/>
</af:commandButton>
