Guest

Cisco WebEx Social

Creating Custom Applications for Cisco WebEx Social 3.1 for iPhone and iPad

  • Viewing Options

  • PDF (177.9 KB)
  • Feedback
Creating Custom Applications for Cisco WebEx Social 3.1 for iPhone and iPad

Table Of Contents

Creating Custom Applications for Cisco WebEx Social 3.1 for iPhone and iPad

Guidelines for Custom Applications

Guidelines for Custom Application Icons

Using a Custom Application with Cisco WebEx Social 3.1 for iPhone and iPad


Creating Custom Applications for Cisco WebEx Social 3.1 for iPhone and iPad


Revised March 14, 2013

The Cisco WebEx Social extensibility functionality allows organizations to create custom applications for Cisco WebEx Social 3.1 for iPhone and iPad.

Cisco WebEx Social 3.1 for iPhone and iPad runs on these mobile clients:

iPhone, iPod Touch—iPhone 3GS and iPod Touch 3rd generation devices

iPhone, iPod Touch with Retina display—iPhone 4, 4S, and 5, and iPod Touch 4th and 5th generation devices

iPad—iPad 1st and 2nd generation devices and iPad mini

iPad with Retina display—iPad 3rd generation devices


Note See Cisco WebEx Social Compatibility Guide for the most current mobile client support and minimum iOS requirements on these devices.


This document describes the extensibility functionality. It includes these topics:

Guidelines for Custom Applications

Guidelines for Custom Application Icons

Using a Custom Application with Cisco WebEx Social 3.1 for iPhone and iPad

This document as intended for application developers and designers who are familiar with Webkit and related tools and techniques that are used for custom application development.

For information about creating custom applications that use the Cisco WebEx Social API, visit the WebEx Social Developer page in the Cisco Developer Network website: http://developer.cisco.com/web/webexsocial-developer/developer-opportunities.

Guidelines for Custom Applications

Cisco WebEx Social mobile clients support HTML- and HTML5-based web applications that are designed for mobile devices. These applications are deployed outside of the Cisco WebEx Social platform and then registered with Cisco WebEx Social.

The following guidelines apply to custom applications:

The application must conform to the WebKit standard.

The user interface (UI) of the application must take up the entire space that is allocated for it within the WebView, as illustrated in Figure 1 and described in Table 1.

Figure 1 Application Size

Table 1 WebView Sizing Requirements

View
WebView Size in Pixels (Width x Height)
iPhone 3gs, iPod Touch 3rd generation devices
iPhone 4, 4S, iPod Touch 4th and generation devices
iPhone 5, iPod Touch 5th generation devices
iPad 1st and 2nd generation devices, iPad mini
iPad 3rd generation devices

Portrait

320 x 416

640 x 832

640 x 1008

Landscape

925 x 703

1850 x 1406


The custom application name should not be included in the navigation header of the application. Cisco WebEx Social 3.1 for iPhone and iPad automatically retrieves the application metadata, which includes the application name, and displays the name (see Figure 2). Including the application name in the navigation causes it to appear twice in the mobile client UI.

Figure 2 Custom Application Name

The application must use the same authentication mechanism as Cisco WebEx Social.

For text used in the application, use the same fonts as those used in Cisco WebEx Social 3.1 for iPhone and iPad.

Use JavaScript only for screen transitions and to obtain data from the Cisco WebEx Social server.

Do not use JavaScript objects that are larger than 4 MB.

For efficient UI rendering, avoid using many large images in a WebKit table view

Memory use for the website view should not exceed 4 MB.

Use Apple IOS native-like widgets.

Follow Apple Human interface guidelines when possible.

Do not use extended app offline storage using "cache manifest" in embedded web views.

Do not use pop-up alerts.

The application must support the navigation that is required by its functionality.

Do not duplicate the functionality that is in Cisco WebEx Social 3.1 for iPhone and iPad.

For example, Cisco WebEx Social 3.1 for iPhone and iPad includes logout functionality, so do not include this functionality in a custom application.

Use the following URL to capture exceptions in the device console log:

webexsociallog://dolog?level=value&appname=name&detail=exception

where:

value—INFO, ERROR, or EXCEPTION

name—Name of the application

exception—Text of the exception

For example, this URL:

webexsociallog://dolog?level=INFO&appname=My PTO&detail=this is a sample log message

displays the following information device console log:

2013-01-16 17:17:59.039 WebExSocial[8911:c07] INFO [ My PTO ] - this is a sample log message

Guidelines for Custom Application Icons

Cisco WebEx Social 3.1 for iPhone and iPad requires that icons that represent custom applications meet specific size requirements or they will not display properly. In addition, each icon has a file name that must be used.

Table 2 describes these sizing and file name requirements.

Table 2 Sizing and File Name Requirements for Custom Display Item 

Custom Application Icon Location
Item Size in Pixels (width x height) and File Name
iPhone, iPod Touch —iPhone 3gs, iPod Touch 3rd Generation Devices
iPhone, iPod Touch with Retina Display —iPhone 4, 4S, 5, iPod Touch 4th and 5th Generation Devices
iPad—iPad 1st and 2nd Generation Devices and iPad mini
iPad With Retina Display—iPad 3rd Generation Devices

Left navigation bar, gray (unselected)

Size—30 x 30

Filename—iPhone_30.png

Size—60 x 60

Filename—
iPhone_60.png

Size—30 x 30

Filename—iPad_30.png

Size—60 x 60

Filename—iPad_60.png

Left navigation bar, colored (selected)

Size—30 x 30

Filename—iPhone_30.png

Size—60 x 60

Filename—
iPhone_60.png

Size—30 x 30

Filename—iPad_30.png

Size—60 x 60

Filename—iPad_60.png

Applications list

Size—48 x 48

Filename—iPhone_48.png

Size—96 x 96

Filename—
iPhone_96.png

Size—64 x 64

Filename—iPad_64.png

Size—128 x 128

Filename—iPad_128.png

Application detail page

Size—96 x 96

Filename—iPhone_96.png

Size—192 x 192

Filename—
iPhone_192.png

Size—150 x 150

Filename—iPad_150.png

Size—300 x 300

Filename—iPad_300.png


Using a Custom Application with Cisco WebEx Social 3.1 for iPhone and iPad

After a custom application and its associated metadata is created as described in the document, perform the following steps to enable the Extensibility functionality and add the custom application to Cisco WebEx Social.

For related information about managing the extensibility options in the Cisco WebEx Social administration interface, see the "Mobile Settings" chapter in Cisco WebEx Social Administration Guide, Release 3.1.

Procedure


Step 1 Take these actions to access the Mobile drawer in Cisco WebEx Social:

a. Log in to Cisco WebEx Social with your administrator credentials.

b. Click the down-arrow to the right of your name in the Global Navigation bar.

c. Select Account Settings from the drop-down menu.

d. Click the right-arrow next to Mobile to expand the Mobile drawer.

Step 2 Take these actions to add the custom application to Cisco WebEx Social:

a. Click Extensibility in the Mobile drawer.

The Extensibility window appears. This window shows the title and a brief description of each application that has been added to Cisco WebEx social, and the date and time that the application was uploaded or updated. To see the complete text of a long description, hover your mouse cursor over the description.

b. Click the Add Application button.

c. In the Title field, enter a brief descriptive title for the application.

The title can contain up to 32 characters, but the display of a title that is longer than 10 characters is truncated in some places.

d. In the Description field, enter a description of the application.

e. In the Assets field, click the right-arrow to the left of a device for which you want to add the application and take these actions:

In the Application URL field, enter the URL that the Webex Social mobile app uses to invoke the custom application.

For each icon size, click the Choose File button, and navigate and select the desired icon file.

For an explanation of icon file names, see the "Guidelines for Custom Application Icons" section.

Repeat this substep for each device for which you want to add the application.

f. Click Save.

Step 3 Take these actions to enable the Extensibility functionality in the Cisco WebEx Social administration interface, if this functionality is not yet enabled:

g. Click Settings in the Mobile drawer.

h. Check Extensibility check box.

i. Click Save.

j. Restart the WebEx Social service on each App Server node and on each Worker node.

To do so, disable and then enable each App Server node and each Worker node from the Server List area in the Topology window of the Director.