Context-sensitive help
- Jay Hodgson
How to add a context-sensitive help question-mark icon and hook it up.
Add the help text content to the HelpMessages.properties file:
discussionForum = The Synapse team is happy to announce the release of the new Discussion feature to help your team create a record of communications within your project.
Decide where the full help documentation will live, and grab that link:
https://docs.synapse.org/discussionForum
Now, in the ui.xml of your widget, import the help package, pull in the HelpMessages external resource, and use the HelpButton (using the key in the properties file for the content, and url to the help page):
xmlns:h="urn:import:org.sagebionetworks.web.client.help"
<ui:with field='help' type='org.sagebionetworks.web.client.help.HelpMessages' />
<h:HelpButton href="https://docs.synapse.org/discussionForum" placement="RIGHT">
<ui:text from='{help.discussionForum}'/>
</h:HelpButton>
This results in an icon with popover help, where the Learn More button will open your href in a new window:
