Siebel Wireless for Mobile/Smart-phones

Background/Introduction

This is one of my hobby projects to integrate a mobile framework with Siebel CRM to achieve a user-friendly easy-to-use interface. I have seen a very few mobile frameworks which seamlessly integrate with Siebel CRM, of which I felt jQuery Mobile framework is the best. I thought I could just create a small mobile application (rather a demo) to show how the existing out of the box wireless application given by Siebel can be made to work on Android with a little customization! I would call it a demo since the actual application is not shown here. Since any Siebel screen (mobile) contains applets which show the data, a simple form applet and list applet design have been shown here.

Target User Group

This is intended to be used by those of us interested in making easy to use, business impact generating Siebel applications on their smart phones. This will be a leap forward so as to enable seamless value for those users who are hard-crunched for time and space to set up their laptops/mobile computing devices who seek the comfort of tapping into the benefits offered by advent of smart-phones the world-over. This will also be a useful read to analysts who want to understand Siebel 8.0’s mobile capabilities.

Prerequisites

It would be ideal if the person who develops the mobile application knows the basics:

1. how XSL transformation works by combining the XML Schema with the XSL stylesheet.
2. Knowledge in HTML, CSS
3. jQuery mobile framework
4. Siebel Wireless component

Software required

The following software are needed

1. Siebel 8.0
2. jQuery Mobile framework (available at http://jquerymobile.com/download/)
3. Eclipse
4. Android SDK Tools (for testing on Android, available at http://developer.android.com/sdk/index.html)
5. Eclipse + ADT Plugin (for testing on Android, available at http://developer.android.com/sdk/index.html)

A few points that would matter to you, to continue development from hereon are mentioned below

Siebel Wireless component

Oracle Siebel was one of the first few CRMs who started the wireless apps quite early. I would have liked to see a lot more changes in Siebel 8.0 especially the conversion of the table tags into Div tags while showing the data in the UI across all channels. That would have made the Siebel out of the box implementation attractive. That apart, the content format (header, heading, list applets, etc) in a Siebel wireless app is very good (obviously done after a lot of good research) and fortunately this makes integration between standard mobile frameworks and Siebel a little easier in spite of the div / table conflict.

jQuery Mobile

Though the jQuery mobile framework is quite flexible, we would end up spending more time than normal – one to create a web page layout in Siebel and test it on the mobile device, and then modify the XSLTs to check the actual design on the mobile! It would have been the best if a separate layout editor was provided wherein a sample XML schema is created based on the data in the applet and then the XSLT editor could show us the actual design in the ‘Edit Web Layout’ view for the applet.

We will be using the jQuery Mobile framework in this case and hence a comparison of the content layouts of a normal Siebel wireless application and jQuery framework is given below.

Content layout in jQuery Mobile and Siebel Wireless

Siebel views

As far as each of the pages in Siebel are concerned, it is good practice to have only one applet in a mobile view for ease of use. Based on whether the page is used to view or edit data, the design of the view differs. In certain cases, the same design is used to display information and editing the same data can be done by tapping on the data to be edited. The main task will be modify the Siebel applets to suit our requirements and then modify the XSLTs (available within the web templates folder) to render the jQuery mobile framework based on how we would like the website to look. As shown in the above figure, there are two primary types of applets which can be used in the mobile view.

Form applet:

The form applet contains elements like check boxes, radio buttons, text boxes, etc., and each of these can be defined in a specific format so that the UI looks good and is easy to use.

In the case of form applets (mostly), we will have links to associated objects. For example, on clicking on a opportunity detail applet, the activities, notes and contacts associated to this opportunity can be seen by clicking on the related tabs bar. However if the same application needs to be developed for a larger screen (such as a 10.1” tab or a 7” tab), the same can be designed differently by showing all these details on the same opportunities screen. A sample form applet where a new note is created is shown below. Only a few design elements have been changed to show a combination of Siebel UI and the implementation of jQuery mobile framework. The type of note can be selected to by clicking on the arrow to see a pop-up with the list of values.

                                  

List applet:

The list applets are of various types. It could be a simple list with one column or a list with two or more columns and in the latter case, it has to be designed separately depending on the requirement at hand. In most cases, each row links to another view where all the details are given. The number of rows in the list can be configured at the applet level. Irrespective of the type of applet we will be having the navigation bar showing common buttons, like Home, Previous, Next, New, Search. A sample Opportunity list applet is shown below:

The home page of the website can either be a grid or a list. The list implementation is shown below:

The mobile version also supports seamless switching from portrait view to landscape view.

Testing

For those who prefer using a sample installation (without the actual server) testing the siebel wireless application on android is quite tough since Siebel supports all testing through a browser while we will not be able to test features like touch / zoom. Hence we can test by starting the android emulator from Eclipse (using Eclipse plugin)

1. Start the sample Siebel Wireless for Sales application
2. Once we see the web engine icon in desktop (Windows), open the android emulator by setting the type of mobile device (screen layout, pixels, RAM, etc)
3. Go to the android browser.
4. Navigate to the sample application through http://10.0.2.2/start.swe instead of http://locahost/start.swe

In real-time once the wireless sales / self service application is deployed on the server, the mobile application can be run from the mobile browser by giving the corresponding URL.

References

Siebel

1. http://siebel-essentials.blogspot.in/2009/09/custom-siebel-ui-closer-look-at-swe-api.html

jQuery Mobile

1. http://stage.jquerymobile.com/download/
2. http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/
3. http://jquerymobile.com/demos/1.0rc2/docs/lists/lists-ul.html
4. http://mobile.tutsplus.com/tutorials/mobile-web-apps/jquery-mobile-forms/
5. http://jquerymobile.com/demos/1.2.1/docs/toolbars/docs-footers.html
6. http://stackoverflow.com/questions/7492683/jquery-mobile-can-i-use-it-with-existing-layout
7. http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-icons.html
8. http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-themes.html

XSLT Basics reference

1. http://www.w3schools.com/xsl/xsl_if.asp
2. http://msdn.microsoft.com/en-in/library/system.xml.xsl.runtime.xsltfunctions.normalizespace.aspx
3. http://www.w3schools.com/xpath/xpath_functions.asp
4. http://csscreator.com/node/27536

@rsbsarma Hi Rampalli, nice use of Siebel Wireless and jQuery Mobile. The new Siebel Mobile Applications built on Open UI use JQM as well.

— Alexander Hansal (@siebel_ess) May 11, 2013

@siebel_ess Most delighted to have your thoughtful and considered response. I’ll remember and cherish this one, Sir!! Thank You. #flyinghigh

— Rampalli Sarma (@rsbsarma) May 11, 2013

Advertisement