Bringing back the Shuttle Applet in Siebel Open UI

One of the first UI changes most of us noticed when we started using Open UI was the removal of Shuttle Applets in multi-value groups. Oracle’s justification for this was to provide a more consistent user interface, with all types of popup applet being displayed in the same way.

When we open a ‘shuttle’ applet now in Open UI we are immediately presented with a single list of ‘Selected’ records, as in the screenshot below.

Fig 1. Open UI 'Selected' Applet

If we wish to add more records to the multi-value field, we can click the ‘Show Available’ button, and the applet will be switched to a list of available records, shown below. From there, we can query and choose any records we wish to add. This process works in exactly the same way as shuttle applets in High Interactivity, but only one applet is displayed at any one time.

Figure 2. Open UI 'Available' Applet

The Challenge #

Personally, I quite liked the shuttle applet; I thought the visual layout of having the two applets side-by-side made the process of selecting records for the multi-value group very user friendly. So I set myself the challenge of figuring out how to bring back the shuttle applet in Open UI, and you can see the result in the video below.

Making The Changes #

The process of reviving the shuttle applet was not too complicated. Both applets are constructed by the application when the user opens the multi-value group, but the ‘Available’ applet is hidden by default using JavaScript. A few small tweaks to the rendering code can change this though, and I ended up with both applets being rendered at the same time – but they were on top of one another!

So next it was just a case of applying a few styling changes with CSS to render the applets next to each other and change the layout of the buttons. Naturally, we’re free to make as many changes to the styling as we wish in Open UI, so if you wanted to do this you wouldn’t necessarily have to stick to the familiar layout of the HI shuttle applet as I have done.

Once I had the basic shuttle applet in place, I decided to spice things up by adding drag and drop functionality to improve usability further. I kept the Add and Remove buttons to retain the familiar HI look-and-feel, though.

Adding drag-drop functionality to anything in Open UI is simply a matter of using the draggable and droppable widgets from the jQuery UI framework (which is included with Open UI out of the box) and specifying what should happen whenever the user initiates a drag or completes a drop!

For example, when the user clicks on a row in a list applet, Siebel selects the underlying record. But that doesn’t happen on click and drag, so functionality must be added to specify that whenever the user starts dragging one of the rows in the list, the underlying Siebel record corresponding to that row is also selected. I did that using the HandleRowSelect method which is invoked on the draggable widget’s start event.

Next, when the user drops the record into the Selected applet, I invoke the AddRecords method on the applet, which performs the underlying association in the database, in the same way as when the ‘Add’ button is clicked. You can see the syntax for this operation below (or take a look at the Bookshelf documentation for ExecuteMethod):

this.ExecuteMethod("InvokeMethod", "AddRecords");

The same rough process must be done in the opposite direction to call the DeleteRecords method when a record is dragged out of the Selected list and into the Available list.

Summary

It's great to know we can bring back the much-loved Shuttle Applet (and extend its functionality at the same time through the extra drag-and-drop functionality)! For those organisations that wish to minimise the changes experienced by users at the point of initially rolling out Open UI, such tweaks to the out-of-the-box behaviour can be helpful. I think this is also another great example of some of the possibilities now available to us in Siebel Open UI.

If you’d like to know more about Open UI or the expertise Boxfusion can provide, you can read about our Open UI consulting services or get in touch with us and we’d be happy to discuss your Open UI requirements!

[Latest Update - Siebel IP2014] #

In Siebel IP2014, Oracle have reinstated the Shuttle Applet that we know and love (see screenshot below), so customers upgrading to that Innovation Pack will be able to use Shuttle Applets as they had in the past.

However, those many customers who are live (or are in the process of going live) on IP2013 or earlier, and who also wish to reinstate the shuttle applet (potentially with drag-and-drop too) without applying the IP2014 pack, can achieve this through the simple approach above.