Trap submit button in TBUI

In my last article, we encountered a new behaviour in Siebel that allows TBUI to re-use its buttons and dynamically generate different button labels depending on what view the user is on.

For example, you have 5 views in your TBUI task, on the first 4 views, this button would read "Next", but as you navigate to the final view, this button dynamically changes to "Submit", click "Previous" and it turns to "Next" again.

Image of TBUI Playbar


This behaviour is activated by the following control user property.

DynamicLabel Y

If you are curious enough to look at the web template to see how this works, here is the corresponding section with some cues on how to configure it.

<swe:control id="152">
      <!-- Next Button -->
      <!-- If  of "DynamicLabel" is "Y", it shows "Next"/"Submit"/"Finish" based on -->
      <!-- <forward button type> in task step -->
        <td class="AppletButtons" nowrap>
        <swe:this property="FormattedHtml" hintText="Next" hintMapType="Control"/>//Our magic button
        </td>
</swe:control>

As magical as it may be, it causes a problem for anyone who wants to trap the event of a click on the "Submit" button, since the "Next", "Submit" buttons are the same physical button, on the same applet, and fire the same methods, so it makes it quite tricky to detect which "buttons" have been clicked.

The key to this problem is reading the button text when the user clicks on the button and then determine the next course of action. This can be done by trapping the PreInvokemethod, and using browser script to read the button label.

The following code shows how this can be done:

function Applet_PreInvokeMethod (name, inputPropSet)
{
if(name=="NavigateNext"){
sCurrentControlName=getControlLabel(this,"ButtonNext");
}
return ("ContinueOperation");
}

function getControlLabel(that, ControlName)
{
var objControl;
var sControlLabel = "";
try{
objControl = that.FindActiveXControl(ControlName);
   sControlLabel = objControl.getElementsByTagName("A")[0].innerHTML;
} catch(e){
alert(e.toString());
}
    return sControlLabel;
    
}

To make things a little more interesting, the final button can have other labels such as "Complete", "Done", "Finalize" and other custom values, and you'll also need to consider what happens when the user cancels or Pauses, in your design.

If you need to trap the "Submit" in TBUI for purposes other than this hack, keep in mind the alternative solution of cloning the applets, as mentioned in the previous article, which will allow you to stay away from the dark side.

SHARE