Resource Center

The eXo Platform widget allows developers to add the rich social and collaboration capabilities of eXo Platform 3 to external applications. The widget can display activity streams embedded within your application; it can also create a dedicated collaboration space for specified objects, allowing you to bring activities from other apps into an instance of eXo Platform.

Since this widget is hosted locally on eXo Platform, it can display personalized information as well. An activity stream of the most recent user actions will display to the group's members. To other users who are not already a member of the space, a link with information on joining the group is displayed.

Requirements

• eXo Platform 3.0.4

Enabling the eXo Platform Widget

The widget is not distributed in the current package of eXo Platform, but adding it simply involves copying 2 files.

• Copy exo.social.extras.widget.resources-1.1.4.1.war to "bin/tomcat6-bundle/webapps/" and rename it to "socialWidgetResources.war"
• Copy exo.social.extras.widget.rest-1.1.4.jar to "bin/tomcat6-bundle/libs/"

Now you can start eXo Platform and integrate your app.

Installation

The widget has two options, depending on the level of integration and amount of information you want to display. The basic version of the widget is an iFrame. The more advanced version is a button that you can insert in a page; this will display a small popup with the information about the space.

Basic Version

Inserting the basic version is simple; you only need an iFrame to insert on your site.

<iframe  scrolling="no" height="180" frameborder="no" width="220" 
src="http://URL_OF_YOUR_EXO_INSTALLATION.COM/rest/private/spaces/portal/space_info?spaceName=NAME_OF_YOUR_SPACE&description=DESCRIPTION_OF_THE_SPACE&portalName=PORTAL_NAME">
</iframe>

To install this in your application, replace all the uppercase text below:

• URL_OF_YOUR_EXO_INSTALLATION.COM - this is the URL of your eXo Platform installation. If you are testing on your local computer, it's probably localhost:8080
• NAME_OF_YOUR_SPACE - this is the label your space will have in eXo Platform. In the URL, be careful to avoid special characters. In the name of the space, you can use any alphanumeric character and "_", ".", "-" or ". "
• DESCRIPTION_OF_THE_SPACE - this will be displayed in the list of spaces.
• PORTAL_NAME - As you can create many portals within eXo Platform, you need to specify the one to which you want to redirect your user. By default, use: intranet

Advanced Version

To install a more sophisticated version of the widget, you will need to insert a code snippet in your page. This includes some HTML and JavaScript; the necessary CSS will be added dynamically.

Insert the following code at the position where you want the button to be displayed:

<div class="exoSpacesContainer">
  
</div>

<script>
  spaces.createPopup("exoSpacesLink", "MyAppName - my social object", "my cool description");
</script>

The important function here is:

spaces.createPopup(link, spaceName, description)

• link: link is the ID or the HTMLElement where the popup will be placed. If you copy and paste the code snippet provided above, you don't need to change this.
• spaceName: this is the name that your space will have. It's also what is used to identify it. We recommend using this format: "MyAppName - my social object"
• description: this is the description of your space as it will appear within the directory of spaces in eXo Platform. It is used only the first time the space is created.

Configuration

• serverURL (Default: "http://127.0.0.1:8080"): this is the address of your eXo Platform installation. To change it: spaces.setServerURL(...);
• spaceServicePath (Default: "/rest/private/spaces/"): this is the path for the spaces service. It is very likely that you will never have to change it, but if you need to, use: spaces.setSpaceServicePath(...);
• portalName (Default: "socialdemo"): this is the name of the portal you are using. To change it: spaces.setPortalName(...);

If you want to change any part of this configuration, it is best to do so before creating the popup. For example:

<div class="exoSpacesContainer">
  <a href="#" id="exoSpacesLink" class="exoSpacesLink" target="_blank">Space</a></div>
  
  <script> spaces.setServerURL("http://192.168.2.100:8080");
    spaces.createPopup("exoSpacesLink", "My cool new space", "my cool description");
  </script>