Group Collaboration Tools

BETA API: Group Collaboration Tools is in beta and may change before the official release.

The Ultra Extension framework allows integrations to add its own collaboration tool to supported Group Tool panels. The panels expose a portal for integrations to add their button to each location’s group collaboration toolbar. The integration is expected to render a button for their tool using the provided style classes to match the design aesthetics used by Anthology’s built-in collaboration tools.

Registration

For an integration to render into the portals, the integration needs to register with the Ultra Extension Framework. This can be accomplished by sending the'group-collaboration-tool:register' message to the framework. See IGroupCollaborationToolRegistrationRequest for additional information. Once the request has been made, the Ultra Extension Framework will respond with IGroupCollaborationToolRegistrationResponse. If successful, the provided ID will be used for subsequent portal messages.

Registration ID

Unlike most Ultra Extension Framework registrations, an integration can register multiple times. Therefore, ensuring the integration responds only to portal events with the appropriate selectorData is important. The data is required to match your registration id.

Group Collaboration Tool Class Names

With the group collaboration tool's portals there are additional special class names that will only work when applied to elements rendering in these portals.

'button' elements

| className | Description | | group--collaboration--tool--uef--button | Styles the button to look like the other group collaborate tool buttons. |

Supported Portals

Portals are supported in the following locations: (bullets or table with page name breadcrumbs)

• Group Assignment Overview
• Group Assignment External Overview
• Take Group Assignment
• Group Assignment > Conversations

Standard Structure

In addition to the class name properties the integration provides, the integration needs to match the structure. The following example shows how to match the existing item's look and feel.

{
  tag: "button",
    props
:
  {
    onClick: {
      callbackId: 'integration-name-callback-1',
        mode
    :
      'sync'
    }
  ,
    className: 'group--collaboration--tool--uef--button'


  }
,
  children: [
    {
      tag: "SvgIcon",
      props: {
        height: "24px",
        width: "24px",
        url: 'https://www.blackboard.com/themes/custom/blackboard/images/Blackboard-Logo.png',
        className: 'uef--svg-icon'
      },
    },
  ]
}