Quite a bit has been said and written about data-loss prevention in web applications in general, and Siebel in specific. On My Oracle Support, the SiebelHub as well as by myself . A truly water-tight solution has not been identified so far, to overcome the problems related with that ‘nasty’ back-button.
Adding to the array of possible approaches this time a poor man’s save button. Now, what I want to prevent at all times is having save buttons all over the place, like seen in other web applications. That just makes no sense if you ask me, and looks too much Siebel 7.0 or Standard interactivity 😉
Therefore I decided a while back, to implement a simplistic ‘Save’ button which would linger through the application. Always. And always at the same location.
If you think of it, especially when running Siebel on touch-based devices, having that Save button would be a big plus. You don’t want to use CTRL+S on a tablet. Not such a bad thing after all?
Functionality-wise it should do little more than invoking the WriteRecord() method for the view’s active applet. It should at a minimum check whether it’s allowed to invoke it, to prevent run-time errors. Further, should it not interfere with Siebel’s standard error reporting mechanism (e.g. ‘Required Field missing’ or such).
The button should have a translated text. When clicked after effectively invoking the WriteRecord, the active applet’s border should glow up red using a CSS transition. That’s about it.
IP 16 Note: Siebel development decided on a similar path, in case uncommitted data is detected, to change the active applet’s box-shadow in red. Very similar to what I did here.
So, what does it all look like?
The solution consists of a little bit of postloader code, to add the button and its functionality. I decided to mimic a standard Siebel button, so that’s what I did when creating it. It’s a HTML button, not a Div. Further as always a bit of CSS. CSS uses an animation, to animate the box-shadow property of the applet to let it glow up in red while at the same time increasing the blur.
See code and CSS below.