Create your own gadgets and add them to the Share dialog.
About this task
IBM® Connections
provides a quick way to share content with others. From anywhere in IBM Connections, users can click Share.
To enable an OpenSocial gadget in the Share dialog, you must edit
the gadget xml file and then add the gadget by using the Administration
option on the Home page.
You can create your own gadgets and
add them to the Share dialog. In this context,
your gadgets should probably allow a user to share content with other
users, but you can add anything.
You can add the following features
to your gadget:
- A feature to close the share dialog from the gadget; for example,
add a Close button to your gadget that closes
the Share dialog.
- A feature to inform the dialog of a submit state; for example,
show a progress indicator while data is being submitted.
- Ensure that gadgets in the Share dialog have their gadget
XML conform to the following OpenSocial feature requirements:
<Require feature="dynamic-height" />
<Require feature="dynamic-width" />
<Require feature="views" />
- Require the ibm.connections.sharedialog feature,
for example:
<Require feature="ibm.connections.sharedialog" />
Note: This
feature should be used by gadgets that are rendered in the Share dialog.
- Include the actions feature and
define an action with a path of "container/sharebox".
<Optional feature="actions">
<Param name="action-contributions">
<![CDATA[
<actions>
<action id="customAction" path="container/sharebox" label="Read Only Sample"
tooltip="used to show Share dialog gadget loading concept" />
</actions>
]]>
</Param>
</Optional>
Where:
- Define your action and a callback function to be called
when the action has been invoked (such as when a tab has been selected
for this gadget to be displayed or to perform some action. For example:
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(function() {
if (gadgets.actions) {
var customAction = {
id: "customAction", /* Note: The id matches the id of the action from the ModulePrefs section -
Example: <action id="customAction" path="container/sharebox" label="Custom Action" /> */
callback: updateContext
/* Note: The callback function will get called each time the action is invoked(Sharebox Example: Every time the tab is selected.*/
};
gadgets.actions.updateAction(customAction);
}
});
function updateContext(selection) {
if(selection.type == "com.ibm.social.sharebox.context")
initCustomContent(selection.dataObject);
/*Perform gadget initialization with the "context' that is available via "selection.dataObject".*/
}
</script>
Note: The selection object will consist of
atype and dataObject attribute.
When an action is invoked in the Share dialog, a selection object
will be provided to the action callback (updateContext in this
case) and the object will have a type of com.ibm.social.sharebox.context.
If the type value is not com.ibm.social.sharebox.context,
then this selection did not come from Sharebox. The actual context object
is available via the dataObject attribute.
Example selection.dataObject:
{type: "global"}
Note: The callback defined for
your action ( "updateContext" function in this example) will get called
each time the user visits your gadget's tab in the Share dialog.
The following scenarios will result in the callback being called:
- User visits tab of gadget. The first time this happens, you will
want to initialize your gadget contents. Each additional time, you
will only want to do an update if desired.
- User closes the Share dialog while your tab is in focus and then
reopens the Share dialog without leaving the current page or performing
a page refresh. The callback will get called when the Share dialog
is opened.
- Design your gadget so that the contents will have a width
that does not exceed 500px.
- Each time the contents of your gadget's DOM (document object
model) change, then call the following code to force the gadget to
resize:
if (gadgets.window.adjustHeight)
gadgets.window.adjustHeight();
if (gadgets.window.adjustWidth)
gadgets.window.adjustWidth(500); /*Pass in 500 so that gadget will know the preferred width is 500px*/