Home

 

Integrate the community card

Include the community card in your Web application to enable users to quickly navigate to the community in the Communities user interface. The community card displays the name of the community and the image associated with the community, if there is one.


To add the inline community card to your Web application...

  1. Add the following code to the bottom of the Web page before the </body> tag.

      <script type="text/javascript"> var SemTagSvcConfig = {baseUrl: "<community_service_URL>", proxyURL: "<Ajax_proxy_URL>"};
      </script>
      

    You can include the following properties for the SemTagSvcConfig variable:


    SemTagSvcConfig variable properties

    Property Description
    baseUrl Used to download resource strings and CSS files for the business card from the Communities feature.

    This property is required.

    proxyURL Used to channel the HTTP request using an Ajax proxy. The proxy URL is required to avoid cross-domain issues.

    This property is required.

    isBidiRTL Used to provide support for bidirectional languages. This property takes a Boolean value.

    This property is optional.

    loadCSS Used to download a CSS file for the business cards. This property takes a Boolean value.

    This property is optional.

  2. To add Dojo for the community business card and configure the semantic tag service, include the following code:

    If you are already using Dojo 1.0 or later, you do not need to perform this step.

      <script type="text/javascript" src="/communities/javascript/build/dojo/dojo.js"></script>
      <script type="text/javascript" src="/communities/javascript/build/dojo/semanticTagService.js"></script>
      

  3. Use and modify the following code to render the card with community details:

      <span class="vcomm X-community-display-inline">
      <span class="name" style="display:none;"><community_name></span>
      <span class="uuid" style="display:none"><community_uuid></span>
      <span class="selectedWidgetId" style="display:none;"><widget_id></span>
      </span>
      

    where:

    • <community_name> is the name of the community. This is a text string.

    • <community_uuid> is the UUID of the community.

    • <widget_id> is a text string that corresponds to the widgetDefId of the widget that has been added to the community. This is used to highlight the menu item in the navigation bar.

    For example:

      <span class="vcomm X-community-display-inline">
      <span class="name" style="display:none;">Snowboarders</span>
      <span class="uuid" style="display:none">b307369e-7e60-403b-b850-206a28d6c19e</span>
      <span class="selectedWidgetId" style="display:none;">HelloWorldExtFullpage</span>
      </span>
      

  4. Optional: If you are building a Web application that constructs its user interface using Ajax, you can make the business card user interface available by adding LiveName programmatically using JavaScriptâ„¢. Use the following API example:

    This step only applies when you are building an application that constructs its user interface using Ajax. The business card code only scans the HTML when the page is first loaded so, if you dynamically alter the page, you need to manually specify the DOM elements that the code should rescan for business card vcard class attributes. If you are developing a completely static page, you can ignore this step.

      var htmlContent = "<span class="vcomm X-community-display-inline">"+
      "<span class="name" style="display:none;"/><community_name></span>"+
      "<span class="uuid" style="display:none"><community_uuid></span>"+
      "<span class="selectedWidgetId" style="display:none;"><widget_id></span>"+
      "</span>";
       document.getElementById("containerId").innerHTML += htmlContent;
       setTimeout("SemTagSvc.parseDom(null, 'containerId')", 500 ); 
      


Using business cards

 

Related tasks

Integrate the Profiles business card


+

Search Tips   |   Advanced Search