Siebel Mobile Guide: Connected > Setting Up Siebel Mobile Applications >

Customizing Siebel Mobile Applications

This task is a step in Process of Setting Up Siebel Mobile Connected Applications.

You can use Siebel Open UI Mobile framework, templates, and style sheets to configure the user interface and behavior of your Siebel Mobile application to address your particular business needs. You can customize the look-and-feel of your Siebel Mobile application by modifying the JavaScript files and by using Siebel Tools to expose different objects in your application.

The following customizations are recommended:

• Set up the jQuery Mobile (JQM) grid renderer so that the mobile application data displays in grid (tabular) format.
• Set up landscape and portrait layout for mobile applications so that the views are visible on tablets.
• Set up infinite scroll for mobile applications, which is a feature that allows you to scroll through records in a list applet indefinitely.
• Set up GPS so that when you tap the Pin icon in mobile applications, a map window opens showing the location details.

For more specific information about how to implement each of these recommendations and other mobile customizations, see Configuring Siebel Open UI. 

Configuring Application Templates and Style Sheets

You can use the Siebel Open UI Mobile framework, templates, and style sheets to customize the look-and-feel of your Siebel Mobile application. For more information about the Siebel Open UI templates and style sheets, see Configuring Siebel Open UI.

Modifying the CSS Style Sheet

Siebel Mobile applications include a ready-to-use css style sheet, called theme-black.css. You can modify the theme-black.css style sheet to get the required look-and-feel for your application interface. For Apple iPhone applications, you can modify the theme-phone.css style sheet. For more information about the Siebel Open UI style sheets, see Configuring Siebel Open UI.

Using Third-Party JavaScript Plug-Ins to Customize Siebel Mobile Applications

You can modify the JavaScript files to customize the look-and-feel of your Siebel Mobile application features. The following third-party browser plug-ins are supported:

• Mobiscroll 2.5.0. Use this plug-in to add a scroll wheel for a date-time editor. For more information about Mobiscroll, see the Mobiscroll documentation.
• jQuery Mobile 1.3.0. Use this plug-in to add touch-friendly UI widgets, including:
  • jQuery UI Google® Map 3.0. Use this plug-in to integrate Google Maps™ mapping service.
  • jQuery Mobile SimpleDialog. Use this plug-in to create a modal dialog box.
  • jQuery SwipeButton.js. Use this plug-in to add the iPhone swipe-functionality for deleting items on list views.
  • jQuery scrollview. Use this plug-in to add grab-and-drag scrolling.
  • jQuery.signaturepad.min.js. Use this plug-in to create a signature canvas for capturing signatures in your mobile application.
  • jQuery ThemeRoller. Use this plug-in to define the layout and color scheme for the pages in your mobile application.

    For more information about jQuery Mobile, go to the jQuerymobile Website.

For more information about implementing each of these JavaScript plug-ins to customize the look-and-feel of your Siebel Mobile application features, see Configuring Siebel Open UI.

Using Siebel Tools to Expose Objects in Siebel Mobile Applications

You can use the same tool set (Siebel Tools) and other infrastructure as the rest of the Siebel Business Applications, to configure the user interface and behavior of many aspects of your Siebel Mobile application to address your particular business needs. In particular, you must use Siebel Tools to do the following:

• Configure Siebel Open UI to display desktop views in mobile Web clients.
• Apply Siebel Web templates to mobile views.
• Set up data for mobile examples.
• Create a custom mobile list.
• Add maps that include location data in a mobile application.

For more information about these tasks and others and about using Siebel Tools to expose objects in Siebel Mobile applications, see Configuring Siebel Open UI.

Related Topics

Customizing Check Boxes

Data Display

Displaying Location Details

Configuring Siebel Mobile Application Settings