Requirement
we often come across requirement of displaying help text on hover over of image or displaying different data on click of each row of ADF table.
As a example I am going to demonstrate how to display different help text in popup note window on hover over of icon/image.
I have two field first name and email address as shown in below.
Requirement is when user hover overs each of the question mark icon i want to display helptext as below
First Name -help text is ->First name must be at least 1 and no more than 31 letters long (no numbers). The only special characters accepted are -, ', &, ., and #.
Email Address help text is ->E-mail address needs to be in the following format: xx@xx.xxx
there may be more than two field like 10 fields on UI and you dont want to have 10 popups to display the help text
Solution
Step 1:Define client attribute
Inside each image tag we will have af:clientAttribute tag with name and value as text we want to display to user.Inside af:image for popup display af:showPopupBehavior tag will come to display popup on hover
Code will look like below
<af:panelGroupLayout layout="horizontal">
<af:inputText label="First Name" id="it20" autoSubmit="true"></af:inputText>
<af:image source="/images/helpicon.png">
<af:showPopupBehavior triggerType="mouseOver" align="endAfter"
popupId="helpPopup"/>
<af:clientAttribute name="helpText"
value="First name must be at least 1 and no more than 31 letters long (no numbers). The only special characters accepted are -, ', &, ., and #."></af:clientAttribute>
</af:image>
</af:panelGroupLayout>
<af:panelGroupLayout layout="horizontal">
<af:inputText label="Email Address" id="it1" autoSubmit="true"></af:inputText>
<af:image source="/images/helpicon.png">
<af:showPopupBehavior triggerType="mouseOver" align="endAfter"
popupId="helpPopup"/>
<af:clientAttribute name="helpText"
value="E-mail address needs to be in the following format: xx@xx.xxx"></af:clientAttribute>
</af:image>
</af:panelGroupLayout>
Step2->reading the client attribute and using it inside popup
In our popup tab we need to have launcherVar attribute defined which will be used to read the client attribute that is passed to popup open event.use af:setPropertyListener from attribute to read the client attribute that is passed and to attribute to set to a variable to use inside popup as shown in below popup code.
<af:popup id="helpPopup" launcherVar="source"
contentDelivery="lazyUncached" eventContext="launcher">
<af:setPropertyListener from="#{source.attributes.helpText}"
to="#{viewScope.helpText}" type="popupFetch"/>
<af:noteWindow id="nw1" inlineStyle="width:400.0px;">
<af:panelGroupLayout id="pgl4">
<af:outputText id="ot1" value="#{viewScope.helpText}"/>
</af:panelGroupLayout>
</af:noteWindow>
</af:popup>
Screen will display like below
we often come across requirement of displaying help text on hover over of image or displaying different data on click of each row of ADF table.
As a example I am going to demonstrate how to display different help text in popup note window on hover over of icon/image.
I have two field first name and email address as shown in below.
Requirement is when user hover overs each of the question mark icon i want to display helptext as below
First Name -help text is ->First name must be at least 1 and no more than 31 letters long (no numbers). The only special characters accepted are -, ', &, ., and #.
Email Address help text is ->E-mail address needs to be in the following format: xx@xx.xxx
there may be more than two field like 10 fields on UI and you dont want to have 10 popups to display the help text
Solution
Step 1:Define client attribute
Inside each image tag we will have af:clientAttribute tag with name and value as text we want to display to user.Inside af:image for popup display af:showPopupBehavior tag will come to display popup on hover
Code will look like below
<af:panelGroupLayout layout="horizontal">
<af:inputText label="First Name" id="it20" autoSubmit="true"></af:inputText>
<af:image source="/images/helpicon.png">
<af:showPopupBehavior triggerType="mouseOver" align="endAfter"
popupId="helpPopup"/>
<af:clientAttribute name="helpText"
value="First name must be at least 1 and no more than 31 letters long (no numbers). The only special characters accepted are -, ', &, ., and #."></af:clientAttribute>
</af:image>
</af:panelGroupLayout>
<af:panelGroupLayout layout="horizontal">
<af:inputText label="Email Address" id="it1" autoSubmit="true"></af:inputText>
<af:image source="/images/helpicon.png">
<af:showPopupBehavior triggerType="mouseOver" align="endAfter"
popupId="helpPopup"/>
<af:clientAttribute name="helpText"
value="E-mail address needs to be in the following format: xx@xx.xxx"></af:clientAttribute>
</af:image>
</af:panelGroupLayout>
Step2->reading the client attribute and using it inside popup
In our popup tab we need to have launcherVar attribute defined which will be used to read the client attribute that is passed to popup open event.use af:setPropertyListener from attribute to read the client attribute that is passed and to attribute to set to a variable to use inside popup as shown in below popup code.
<af:popup id="helpPopup" launcherVar="source"
contentDelivery="lazyUncached" eventContext="launcher">
<af:setPropertyListener from="#{source.attributes.helpText}"
to="#{viewScope.helpText}" type="popupFetch"/>
<af:noteWindow id="nw1" inlineStyle="width:400.0px;">
<af:panelGroupLayout id="pgl4">
<af:outputText id="ot1" value="#{viewScope.helpText}"/>
</af:panelGroupLayout>
</af:noteWindow>
</af:popup>
Screen will display like below
you can leverage same for opening popup on click of each row of adf table and pass data to popup depending on the row clicked on .
