Configuring Siebel Open UI > Customizing Siebel Open UI > Customizing Events >

Attaching and Validating Event Handlers in Any Sequence

You can configure Siebel Open UI to attach and validate an event handler in any sequence, depending on your requirements. The example in this topic does some custom validation, and then runs an event handler in a custom presentation model named derivedpm2.js. If the user triggers a control focus event, then Siebel Open UI runs the validator before it calls the event. Siebel Open UI uses the the value that the validator returns to determine whether or not to run the custom event handler and the predefined event handler. This predefined event handler is the default event handler that the predefined presentation model uses for the event. This topic describes the derivedpm1.js and derivedpm2.js files. To get a copy of these files, see Article ID 1494998.1 on My Oracle Support.

To attach and validate event handlers in any sequence

1. Use a JavaScript editor to create a custom presentation model that Siebel Open UI derives from a predefined presentation model:
   1. Create a new file named derivedpm1.js. Save this file in the following folder:

   siebel\custom

   For more information about:

   • This file, see Complete Contents of the derivedpm1 Presentation Model.
   • This folder, see Organizing Files That You Customize.
   2. Configure the custom derivedpm1 presentation model that you created in Step a so that Siebel Open UI derives it from the predefined ListPresentationModel. You add the following code:

   if( typeof( SiebelAppFacade.derivedpm1 ) === "undefined" ){
     SiebelJS.Namespace( "SiebelAppFacade.derivedpm1" );
     define( "siebel/custom/derivedpm1", [], function(){
       SiebelAppFacade.derivedpm1 = ( function(){
         var siebConsts = SiebelJS.Dependency( "SiebelApp.Constants" ),
           CANCEL_OPR = consts.get( "SWE_EXTN_CANCEL_ORIG_OP" ),
           STOP_PROP = consts.get( "SWE_EXTN_STOP_PROP_OP" );
         function derivedpm1(){
           SiebelAppFacade.derivedpm1.superclass.constructor.apply( this, arguments     );
         }
         SiebelJS.Extend( derivedpm1, SiebelAppFacade.ListPresentationModel );
         derivedpm1.prototype.Init = function(){
           SiebelAppFacade.derivedpm1.superclass.Init.call( this );

   For more information, see Deriving Presentation Models, Physical Renderers and Plug-in Wrappers.

   3. Make sure the derivedpm1 presentation model includes a handler for the PHYEVENT_COLUMN_FOCUS event. You add the following code:

           this.AttachEventHandler( siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function()
           {
             SiebelJS.Log("Control focus 1");
             arguments[arguments.length - 1][consts.get( "SWE_EXTN_CANCEL_ORIG_OP" )] = false;
           });

   For more information about the method that this code uses, see AttachEventHandler Method.

   4. Validate the handler that you added in Step c. You add the following code:

     this.AddValidator(siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function(){
       return true;
     });
   };

   For more information about the method that this code uses, see AddValidator Method.

   5. Finish the setup that you started in Step b. You add the following code:

         derivedpm1.prototype.Setup = function(propSet){
           SiebelAppFacade.derivedpm1.superclass.Setup.call( this, propSet );
         };
         return derivedpm1;
       } ());
       return "SiebelAppFacade.derivedpm1";
     });
   }

   6. Save your changes, and then close the derivedpm1.js file.
2. Use a JavaScript editor to create another custom presentation model that Siebel Open UI derives from the custom presentation model that you created in Step 1:
   1. Create a new file named derivedpm2.js. Save this file in the following folder:

   siebel\custom

   For more information about this file, see Complete Contents of the derivedpm2 Presentation Model.

   2. Configure the custom derivedpm2 presentation model that you created in Step a so that Siebel Open UI derives it from the derivedpm1 presentation model. You add the following code:

   if( typeof( SiebelAppFacade.derivedpm2 ) === "undefined" ){
     SiebelJS.Namespace( "SiebelAppFacade.derivedpm2" );
     define( "siebel/custom/derivedpm2", ["siebel/custom/derivedpm1"], function(){
       SiebelAppFacade.derivedpm2 = ( function(){
         var siebConsts = SiebelJS.Dependency( "SiebelApp.Constants" ),
           CANCEL_OPR = consts.get( "SWE_EXTN_CANCEL_ORIG_OP" ),
           STOP_PROP = consts.get( "SWE_EXTN_STOP_PROP_OP" );
         function derivedpm2(){
           SiebelAppFacade.derivedpm2.superclass.constructor.apply( this, arguments );
         }
         SiebelJS.Extend( derivedpm2, SiebelAppFacade.derivedpm1 );
         derivedpm2.prototype.Init = function(){
           SiebelAppFacade.derivedpm2.superclass.Init.call( this );

   3. Make sure the derivedpm2 presentation model includes a handler for the PHYEVENT_COLUMN_FOCUS event. You add the following code:

   this.AttachEventHandler( siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function()
   {
     SiebelJS.Log("Control focus 2");
   });

   4. Validate the handler that you added in Step c. You add the following code:

   this.AttachEventHandler( siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function()
   {
     SiebelJS.Log("Control focus 2");
   
   });
   this.AddValidator(siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function(row, ctrl, val){
     //custom validation
     }
   });

   where:

   • custom validation validates the values.

     For example, the following code validates that the handler handles the Hibbing Mfg account:

   this.AttachEventHandler( siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function()
   {
     SiebelJS.Log("Control focus 2");
   });
   this.AddValidator(siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function(row, ctrl, val){
     if(ctrl.GetDisplayName() === "Account" && val === "Hibbing Mfg"){
       return true;
     }
   });

   5. Finish the setup that you started in Step b. You add the following code:

         };
         derivedpm2.prototype.Setup = function(propSet){
           SiebelAppFacade.derivedpm2.superclass.Setup.call( this, propSet );
         };
         return derivedpm2;
       } ());
       return "SiebelAppFacade.derivedpm2";
     });
   }

   6. Save your changes, and then close the derivedpm2.js file.
3. Configure the manifest. For more information about how to do this step, see Adding Custom Manifest Expressions:
   1. Log in to a Siebel client with administrative privileges.
   2. Navigate to the Administration - Application screen, and then the Manifest Files view.
   3. Add the file that you created in Step 2.

      For this example, you add the following file:

   custom/derivedpm2.js

   Note that your configuration derives the derivedpm2.js from the derivedpm1.js file, so it is not necessary to add derivedpm1.js to the manifest.

   4. Navigate to the Manifest Administration view.
   5. In the UI Objects list, specify the following object.

      Field	Value
      Type	Applet
      Usage Type	Presentation Model
      Name	Opportunity List Applet You can reference any list applet. For this example, use Opportunity List Applet.

   6. In the Object Expression list, add the following subexpression.

      Field	Value
      Group Name	Leave empty.
      Expression	Desktop
      Level	1
      Operator	Leave empty.
      Web Template Name	Leave empty.

   7. In the Files list, add the following file:

   custom/derivedpm2.js

   8. Log out of the client, and then log back into the client.

      This step refreshes the manifest.

4. Verify your work:
   1. Navigate to the Opportunity List Applet.
   2. Click anywhere in the Account field.
   3. Verify that the browser console log displays the following text:

   Control Focus 2

   The handler that you specified in the derivedpm2.js file in Step 2 specifies this text.

   4. Verify that the browser console log displays the following text:

   Control Focus 1

   The handler that you specified in the derivedpm1.js file in Step 1 specifies this text.

Complete Contents of the derivedpm1 Presentation Model

The following code is the complete contents of the derivedpm1 presentation model:

if( typeof( SiebelAppFacade.derivedpm1 ) === "undefined" ){
  SiebelJS.Namespace( "SiebelAppFacade.derivedpm1" );
  define( "siebel/custom/derivedpm1", [], function(){
    SiebelAppFacade.derivedpm1 = ( function(){
      var siebConsts = SiebelJS.Dependency( "SiebelApp.Constants" ),
        CANCEL_OPR = consts.get( "SWE_EXTN_CANCEL_ORIG_OP" ),
        STOP_PROP = consts.get( "SWE_EXTN_STOP_PROP_OP" );
      function derivedpm1(){
        SiebelAppFacade.derivedpm1.superclass.constructor.apply( this, arguments     );
      }
      SiebelJS.Extend( derivedpm1, SiebelAppFacade.ListPresentationModel );
      derivedpm1.prototype.Init = function(){
        SiebelAppFacade.derivedpm1.superclass.Init.call( this );
        this.AttachEventHandler( siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function()
        {
          SiebelJS.Log("Control focus 1");
          arguments[arguments.length - 1][consts.get( "SWE_EXTN_CANCEL_ORIG_OP" )] = false;
        });
        this.AddValidator(siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function(){
          return true;
        });
      };
      derivedpm1.prototype.Setup = function(propSet){
        SiebelAppFacade.derivedpm1.superclass.Setup.call( this, propSet );
      };
      return derivedpm1;
    } ());
    return "SiebelAppFacade.derivedpm1";
  });
}

Complete Contents of the derivedpm2 Presentation Model

The following code is the complete contents of the derivedpm2 presentation model:

if( typeof( SiebelAppFacade.derivedpm2 ) === "undefined" ){
  SiebelJS.Namespace( "SiebelAppFacade.derivedpm2" );
  define( "siebel/custom/derivedpm2", ["siebel/custom/derivedpm1"], function(){
    SiebelAppFacade.derivedpm2 = ( function(){
      var siebConsts = SiebelJS.Dependency( "SiebelApp.Constants" ),
        CANCEL_OPR = consts.get( "SWE_EXTN_CANCEL_ORIG_OP" ),
        STOP_PROP = consts.get( "SWE_EXTN_STOP_PROP_OP" );
      function derivedpm2(){
        SiebelAppFacade.derivedpm2.superclass.constructor.apply( this, arguments );
      }
      SiebelJS.Extend( derivedpm2, SiebelAppFacade.derivedpm1 );
      derivedpm2.prototype.Init = function(){
        SiebelAppFacade.derivedpm2.superclass.Init.call( this );
        this.AttachEventHandler( siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function()
        {
          SiebelJS.Log("Control focus 2");
        });
        this.AddValidator(siebConsts.get("PHYEVENT_COLUMN_FOCUS"), function(row, ctrl, val){
          if(ctrl.GetDisplayName() === "Account" && val === "Hibbing Mfg"){
            return true;
          }
        });
      };
      derivedpm2.prototype.Setup = function(propSet){
        SiebelAppFacade.derivedpm2.superclass.Setup.call( this, propSet );
      };
      return derivedpm2;
    } ());
    return "SiebelAppFacade.derivedpm2";
  });
}