You can customize the Telligent Enterprise Mobile user experience so that it matches your main Telligent Enterprise site in a more compact form that is easily navigated using a mobile device. This document also contains instructions for modifying the site so that it allows or disallows browsers beyond those supported by default (Safari and Android).

Where to find customization components

The following sections list the components of Telligent Enterprise Mobile and tell you where to find them in the download.

Application components

The Telligent Enterprise Mobile consists of a set of assemblies (DLL files), images, cascading style sheets (CSS), and ASP.NET MVC view files.

Images and CSS

The images and CSS used in the Telligent Enterprise Mobile are all located in the /Content/ folder.

The single /Content/Site.css file contains all of the CSS style definitions for the site, and references all images (aside from the logo). All of the images are located in the /Content/Images/ folder.

The /Content/Override.css file is provided for adding any customizations and overrides to the base Site.css file.

Views

Telligent Enterprise Mobile takes advantage of ASP.NET MVC (MVC 2.0 for Telligent Enterprise Mobile 1.0, or MVC 3.0 for Telligent Enterprise Mobile 2.0 and Telligent Enterprise Mobile 4.0) areas to contain the different tabs displayed in the site. The view files of all common pages (login, logout, user profile, etc.) reside in the /Areas/[tab name]/Views/folders.

For more information on ASP.NET MVC, see the official Microsoft ASP.NET MVC Web site.

How to customize Telligent Enterprise Mobile

Telligent Enterprise Mobile is designed to support common customizations such as displaying a custom logo; modifying a site's tabs, or customizing the style of the site.

The logo displayed in the header of the mobile experience can be customized by editing the site's web.config file located at the root of the mobile site. To update the logo:

  1. Save the new logo in a Web-accessible location, such as in the /Content/Images/ folder.
  2. Open the web.config file located in the root of the Telligent Enterprise Mobile site.
  3. Locate the <appSettings> node in the web.config file.
  4. In the <appSettings> node, locate the <add /> node with the key Site-Logo-Image-Path.
  5. Update the value of this <add /> node to the the full URL of the image saved in Step 1.

If the image is located in the folder structure of the mobile site, the ~/ prefix can be used to identify the root of the site. For example, if a custom logo is saved to /Content/Images/custom-logo.png, the Site-Logo-Image-Path value could be set to ~/Content/Images/custom-logo.png .

Customizing HTML at the top of the home page

 In Telligent Enterprise Mobile, you can customize how the top of your home page looks.

Splash landing panel configuration: The parameter Home_Splash_Html in \Languages\en-US\resources.xml can consist of any valid HTML code. This HTML is shown on the home page.

  1. In Languages\en-US\resources.xml, select <resource name="Home_Splash_Html">.
  2. Enter your changes. For example, you can edit the welcome text to say, "Welcome to your employee community!":
    <resource name="Home_Title">Home</resource>
    <resource name="Home_Index_Title>Home</resource>
    <resource name="Home_Splash_Html">
    <div style='font-size:16px; padding:15px 0px; width:100%; border:1px solid #ccc;'>Welcome to Telligent Enterprise!</div></resource>
  3. Save the changes.
  4. Restart IIS. Your change will be visible on the mobile site.

    Customizing tabs

     In Telligent Enterprise Mobile, you can choose who views your tabs.

    The mobile experience comes with pre-made tabs for Activity, People, and Places. These tabs can be renamed, reordered, or removed. New tabs can be added to link to new ASP.NET MVC actions or static URLs.

    All of the tabs are defined in the web.config file located in the root of the Telligent Mobile Module site within the <items> node of the <navigationMenu> node. Each tab is identified using an <add /> node within the <items> node. Each tab has the following attributes:

    • name (required) - The internal name associated with the tab. It will also be rendered as a CSS class for the rendered tab to enable tab-specific styling.
    • resourceName (required) - The localized language resource name of the text to render on the tab. This name is defined in the /Languages/[language code]/resources.xml file. New language resources can be added to this file.
    • area, action, controller - The ASP.NET area, action, and controller name to which to link the tab.
    • url - The full URL to which to link the tab.
    • allowed to- Allows showing a tab only for a specified user type, such as the following values:
      • AnonymousUser - Shows tab for the anonymous user only
      • AuthenticatedUser - Shows a tab for a registered user only
      • Both (or empty) - Shows a tab for both

    Either action/controller or url is required. Action and controller should be defined when linking to an ASP.NET MVC action, and url should be used when linking to a non-ASP.NET MVC location.

    Adding a tab

    To add a new tab, define an additional <add /> node within the <items> node of the <navigationMenu> node in web.config. For example:

    <add name="Favorites"
    resourceName="Core_NavigationMenu_Favorites"
    url="http://localhost:8012/members/admin/favorites/default.aspx" />

    This addition references the language resource Core_NavigationMenu_Favorites, which would also need to be added to the /Languages/en-US/resources.xml file in the <resources> node. For example:

    <resource name="Core_NavigationMenu_Favorites">Favorites</resource>

    Reordering tabs

    Tabs are rendered in the order they are defined within the <items> node of the <navigationMenu> node in the web.config file. Moving the <add /> nodes within the <items> node will reorder the tab rendering in the mobile experience.

    Removing tabs

    To remove a tab, delete the complete <add /> node representing the tab from the <items> node of the <navigationMenu> node in the web.config file.

    Renaming a tab

    In Telligent Enterprise Mobile, even non-developers can easily rename tabs.

    All of the tabs are defined in the web.config file, located in the root of the Telligent Enterprise Mobile site in the <items> node of the <navigationMenu> node. Each tab is identified using an <add /> node within the <items> node.

    To rename a tab, define the additional <add /> node within the <items> node of the <navigationMenu> node in web.config. For example:

    In this node, enter a new tab name in the highlighted area:

     <add name="More" resourceName="Core_NavigationMenu_Activity" action="Index" controller="Activity" area="Activity" />

    After saving the config, change the appropriate resource in the /Language/en-US/Resources.xml file:

     <resource name="Core_NavigationMenu_Activity">More</resource>

    Customizing the look and feel of the application

    All of the styling and image usage in Telligent Enterprise Mobile is defined in the /Content/Site.css cascading style sheet file. To customize fonts, colors, spacing, and layout of the Telligent Mobile Module, use the /Content/Override.css file. Keeping styling customizations within the /Content/ Override.css file will ensure an easy upgrade to future versions of Telligent Enterprise Mobile.

    Customizing or localizing text

    All static text rendered by Telligent Enterprise Mobile is contained in the /Languages/en-US/ resources.xml file. This file provides the site with support for rendering text in U.S. English, which is also the default language.

    Editing static text

    Each static text string is stored using a resource name in the resources.xml file within a /languages/[Language Code]/ folder. The value of each resource can be edited to adjust the text rendered in the mobile experience.

    For example, to change the Activity tab to say Updates, the resource named Core_NavigationMenu_Activity can be updated to:

    <resource name="Core_NavigationMenu_Activity">Updates</resource>

    within the /Languages/en-US/resources.xml file. This action updates the text shown on the Activity tab to read Updates for users viewing the site in U.S. English.

    Adding support for other languages

    Telligent Enterprise Mobile supports U.S. English. Additional languages can be supported by translating the existing U.S. English resource file into another language. To do this:

    1. Create a new folder in the /Languages/ folder and name it using the language code of the new language. (For example, /Languages/de/ would be used to load German text.)
    2. Copy the resources.xml file from /Languages/en-US/ into the newly created folder from Step 1.
    3. Edit the resources.xml file in the newly created folder and translate the values of each of the language resources.

    When a user visits the mobile experience, his/her language is detected using metadata sent with their Web browser, Telligent Enterprise Mobile then attempts to retrieve localized language resources from the /Languages/ folder. If no requested language is supported (that is, if the language code folder doesn't exist for any languages preferred by the browser), the default site language (U.S. English) is used.

    Changing the default language

    When support for additional languages is added by translating the U.S. English version of the resources.xml file, the default language can also be changed. When users access the mobile experience and their browser's preferred language(s) is (are) not supported, the user will see text from the site's default language.

    The default language is defined in the web.config file located in the root of the Telligent Enterprise Mobile site, and it can be changed. To change the default language:

    1. Edit the web.config file in the root of the site.
    2. Locate the <appSettings> node.
    3. Within the <appSettings> node, locate the Telligent-Evolution-Default-Language key.
    4. Change the value associated to this key to the desired language code.

    When changing the default language, ensure that new default language code exists as a folder with a resources.xml file within the /Languages/ folder of the site.

    Customizing how mobile browsers redirect to the site

    Telligent Enterprise Mobile ships with a Telligent Evolution module that redirects mobile browsers to the mobile site. This is a convenient and easy-to-configure feature that allows visitors of your site to see a version of it tailored for their mobile device. (For information about how to install this module, see Installing Telligent Enterprise Mobile.)

    Explanation of a user agent header

    Web browsers send a User-Agent request header value that is generally unique to the browser being used as part of request to a Web server. The User-Agent header helps a Web application identify the type of browser and device making the request. The redirection module uses this header value to determine whether the browser making the request is a mobile browser and if it is supported by the mobile site. A variety of mobile phone browser user agent strings is supported.

    How the redirection module determines which browsers to redirect

    The redirection module redirects iPod Touch, iPhone, Android-based, and Palm WebOS-based devices using their default browsers to the mobile experience. This module, located in the communityserver_override.config file located in the root of the Telligent Enterprise host within the <add name="MobileRedirectionModule"> node, compares the collection of configured user agent strings with the user agent sent by the browser. If the browser's user agent contains any of the configured user agents and that browser isn't explicitly requesting the non-mobile version of the site, then it will be redirected. The default configuration for user agents to redirect looks like this:

    <userAgent>iPhone</userAgent>
    <userAgent>iPod</userAgent>
    <userAgent>Android</userAgent>
    <userAgent>Pre</userAgent>
    <userAgent>Pixi</userAgent>

    For example, if a browser visits the non-mobile version of the site with the above configuration and sends a user agent header represented below, then it will be redirected to the mobile site because it contains the text iPhone:

    Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/1A542a Safari/419.3

      How to prevent unsupported browsers from accessing your site

      By default, the Telligent Enterprise Mobile site will only display to browsers that send AppleWebKit (i.e., iPod Touch, iPhone, Android-based, and Palm WebOS-based devices using their default browsers as well as Apple Safari and Google Chrome desktop browsers) in their user agent header. If a user tries to access the mobile site with a browser that does not send AppleWebKit as part of the user agent header, the mobile site displays an error message. If you want to change this default behavior so that additional browsers can access the mobile experience, you will need to edit the mobile site's web.config file and change the compatibleUserAgents section. The following shows the default value of the compatibleUserAgents section.

      <compatibleUserAgents>
      <userAgents>
      <clear />
      <add value="AppleWebKit" />
      </userAgents>
      </compatibleUserAgents>

      If you want to allow any type of browser to access your mobile site, you just need to remove the AppleWebKit so that the compatibleUserAgents section looks like this:

      <compatibleUserAgents>
      <userAgents>
      <clear />
      </userAgents>
      <compatibleUserAgents>

      If you want to add support for additional browsers, you can add them to the userAgents collection. For example, if you want to add support for Firefox, your compatibleUserAgents section would look like this:

      <compatibleUserAgents
      <userAgents>
      <clear />
      <add value="AppleWebKit" />
      <add value="Firefox" />
      </userAgents>
      </compatibleUserAgents>

      Install Telligent Enterprise Mobile

      Use Telligent Enterprise Mobile