UK Oracle User Group

The Genesis of Designer Applets – jsPlumb

17 June 2015

And so we continue our series uncovering the origins and plumbing of the Siebel Open UI. In fact plumbing is a good word to describe this week’s example.

Foremost on many people’s minds at the moment is the developer preview of the Siebel Composer, which signals the start of the push to get Siebel Tools into Siebel Web Tools. This will mean of course that Designers such as the Workflow Process Designer will need to find a new home in the Open UI web interface.

There are of course already several Designers that have found their way into in Siebel Open UI, one example of which is the Siebel SmartScript Designer. There is also the Siebel iHelp Designer,and others that we will see, which are not truly designers, rather ways to visualize information.


Both of the Designers mentioned above get their origins from a jQuery-based library called jsPlumb (as in plumbing, as in tubes, as in Super Mario, infrastructure etc). So today we investigate a little about this library and offer something interesting for consideration.

Firstly, the jsPlumb library documentation is to be found here, and there are many interesting demonstrations to be found here.


As you can see by the screenshot shown above, the basic look and feel of jsPlumb is very similar to that used in the SmartScript Designer but not only that. And if we show you the Account Hierarchy from Siebel Open UI to complement the jsPlumb example above, you will begin to deduce that jsPlumb is quite frequently used in Siebel Open UI.



The stated goal of the library is to make it easy to “connect things together” . The documentation is very clear and simple to understand. It breaks down into:

Container: jsPlumb wants to add things to your page. So you set a container element and the items will be added to that element. Think of these items as like the Palette in Workflow Designer, the things you add to your page, and the Container is the drawing area.

Anchors: Remember how in Workflow Designer there is a little square to show you where to connect a Branch to? That’s an Anchor. You can have dynamic or perimeter anchors or other types like Static Top, Bottom and so on.

Endpoints: So your connectors actually need to do something, and an Endpoint models and displays the behavior of an Anchor.

Overlays: So you want arrows on your connectors huh? Well, those are Overlays.

Styling: As you would expect, objects like Endpoints need to be styled to reflect how they work.

So now we know all that, what can we do with it? Find out in the next volume in this series.

Article provided by Siebel Hub -

Siebel Hub

We'd love to get your feedback on this; you'll need a UKOUG login to provide it, so if you don't have one, please click on 'create a web profile' first.