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).
The following sections list the components of Telligent Enterprise Mobile and tell you where to find them in the download.
The Telligent Enterprise Mobile consists of a set of assemblies (DLL files), images, cascading style sheets (CSS), and ASP.NET MVC view files.
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.
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.
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:
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 .
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.
<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>
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:
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.
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:
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.
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.
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:
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.
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:
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:
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:
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.
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.)
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.
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:
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
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
Telligent Systems, Inc. ©2013, All Rights Reserved