Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
Implement Help Popup for each field.
I am desinging a Dynamic Form with many fields for displaying Pension Calculations and Start a Process to complete the pension for an employee.
The form will have many fields with complex meanings...
I want an easy and a cool 
way to enable extended Help 
against each field on the PDF Form.
I do not want to use the built-in app.alert() dialog. Also, the tool-tip is not cool enough.
The help will be 1 or 2 paragraphs, with each about 3-4 lines of text. The width and height of the popup should be flexible and adopt to the size of the text.
Any one has any idea, please let me know. Maybe there is some built-in feature for this.
I am now thinking of a way to implement this feature.
Tarek.
1 Accepted Solution
Correct answer by
Hi Tarek,
I made an example for you you can work with.
It contains a flash field and a regular button.
Depending on the viewers version you either will see the flash dialog or the regular JavaScript dialog.
https://acrobat.com/#d=3qC5yMpLVavZV3hcn0Heag
The results then will look either this way ...
... or this way.
Correct answer by
Hi Tarek,
I made an example for you you can work with.
It contains a flash field and a regular button.
Depending on the viewers version you either will see the flash dialog or the regular JavaScript dialog.
https://acrobat.com/#d=3qC5yMpLVavZV3hcn0Heag
The results then will look either this way ...
... or this way.
Hi Bruce,
I really liked your idea ... the design and the color mix are simple a yet atracting. I liked the way you created the arrow using the boarder trick.
I think I have an idea to reduce the crowded elements while in design mode. I want to make the work reusable as much as possible (general).
Here is my idea:
1. Create a positioned subform to group the fields that require help popup. Each group of fields must be located in a dedicated Subform (Grouping Subform) and make it positioned to control how to display the help popup.
2. Under the Grouping Subform, add exactly one followed subform for the help popup (as a model popup) for the fields contained in the parent subform.
3. Add one text box or text filed to the help popup subform and make the decoration as needed. You can set the border, add images/arrows as required to make it look nice.
4. Add one floating field inside the text box (model). You can use Text Filed to make it more simple, and in this case, no need for floating fields. This is required to enable binding in case you want to add multi-lingual feature for the help popup.
5. For each field that requires help, add another regular text field (Help Text Field), make it hidden, and make its default value as the help text. Or, if you want to add formatting, then use the caption of the text field as the help text of the field that requires help text. You can format the text in MS Word, and paste it as is inside the caption. Then, we have to figure out how we can access this formatted text value using javascript and assign it to the model field which will finally display the help text inside the popup (subform).
6. If you want to bind the help text to a Data Node, use the biding property of the Help Text Field or bind it to the caption. But I think you cannot bind formatted text.
7. Add a close button inside the Help Popup Subform which will simply make it hidden. This will make it simpler to control the show/hide effect, and we will only develop a "Show" function, and it will be hidden by default.
8. Develop a general javascript function to Showthe Help Popup Subform, it will be as follows:
- name: showHelpPopup()
- input:
- sfHelpPopup (subform)
- theHeight (the desired dimension of the popup subform)
- theWidth
- theField (which needs to show help)
- theHelpTxtField (which has the help text in rawValue or inside the caption value text)
- logic:
- extra: before show, make sure to navigate to all similar sfHelpPopup subforms, and make them hidden.
- use the coordinates of the parent subform of the sfHelpPopup, and if desired, also use the coordinates of theField and to decide the coordinates of the sfHelpPopup. I think the best option is to make it centered relative to the parent subform
- using the length of the help text, and/or the desired dimensions theHeight & theWidth, set the dimensions of text object inside sfHelpPopup. Set minimum dimensions as required. Or make it auto expand for the height with a fixed width.
- assign the help text from theHelpTxtField to the text field inside sfHelpPopup.
- set the new coordinates of sfHelpPupup and make it visible.
- the close button inside theHelpPopup subform will make it hidden on the click event.
9. I think it is best that the showHelpPopup() function is triggered from another button (click event) which has a nice image or special caracters to indicate help such as "?". Must add this button next to each field that needs extended help text.
---------------------
I will try to implement the above logic. If there is any feedback please let me knwo.
Thanks all who gave me ideas how to approach the implementation.
Tarek.
I have implemented the initial version of Field Help Popup. Following are the steps:
1. Add the following script to a script object (I call it "myTools"):
function showHideHelpPopupCmd(theCmdField) {
// If the last 7 chars of the Command Button Field Name has "HelpCmd" then remove it ...
if (theCmdField) {
var theCmdFieldName = theCmdField.name;
var theLen = theCmdFieldName.length;
var theIndex = theLen-7;
if (theIndex >= 0 && theCmdFieldName.substring(theIndex) == "HelpCmd"){
var theFieldName = theCmdFieldName.substring(0, theIndex);
// find the actual field which requires Help Popup, and call the function ...
var theField = theCmdField.parent.nodes.namedItem(theFieldName);
showHideHelpPopup(theField)
}
}
}
function showHideHelpPopup(theField) {
if (theField) {
var sfParent = theField.parent;
if (sfParent && sfParent.className == "subform") {
var theFieldName = theField.name;
var theFieldCaptionText = String(theField.caption.value.text.value).trim();
var theFieldHelpName = theFieldName + "Help";
var theFieldHelp = sfParent.nodes.namedItem(theFieldHelpName);
var sfHelpPopup = sfParent.sfHelpPopup;
// Make sure the last char of the caption text is ": "
if (theFieldCaptionText.lastIndexOf(":") != theFieldCaptionText.length - 1) {
theFieldCaptionText += ": ";
} else {
theFieldCaptionText += " ";
}
if (theFieldHelp && sfHelpPopup && sfHelpPopup.className == "subform") {
if (sfHelpPopup.presence == "visible") {
sfHelpPopup.presence = "hidden";
sfHelpPopup.HelpPopupText.caption.value.text.value = null;
} else {
sfHelpPopup.presence = "visible";
sfHelpPopup.HelpPopupText.caption.value.text.value =
theFieldCaptionText + theFieldHelp.caption.value.text.value ;
}
}
}
}
}
2. Add parent subform to contain the fields that require Help Popup and it is recommended to have Positioned Layout. This parent subform will contain the other elements mentioned below.
3. You need to add one Help Popup Subform for each group of fields that require Help Popup. Give it a fixed name such as "sfHelpPopup". It will contain the element that will be assigned the text to show the help text.
4. For each field that requires Help Popup, add a command button. Its name must be same as the Field which require help popup, and it must end with "HelpCmd" for (example). This command button will be used to show/hide the Help Popup Subform.
5. For each field that requires Help Popup, add a another hidden field which will contain the help text. Its name must be same as the Field which require help popup, and it must end with "HelpCmd" for (example).
6. On click of the Help Popup Command Button, call the function "myTools.showHideHelpPopupCmd(this)"
7. Make sure the Help Popup Subform is hidden by default.
Screen Shots to clarify the implementation:
To see a demo, check this:
I hope this will be of help to others.
Many thank to all who hepled.
Tarek.
Thanks to Bruce and Jono for the nice feedback!
I think the next possible improvement is to display the Popup near the "Help Field Button " and make sure it will take into consideration the page edges so that it will not be truncated.
Currently, for all fields, I am fixing the position of the Popup to be centered accross the page, and fixed near the top of the parent subform.
Any ideas or feedback will be appreciated.
Tarek.
