Creating and Managing Client-Side Controls

The example in this topic describes how to create a text box that the Siebel Open UI client displays, and is not represented on the Siebel server. This is a Siebel Open UI client implementation, and as such, data will not be maintained after the user navigates away from the view containing this type of control. You can also create similar controls, such as date/time, check box, combobox, and so on.

This example shows how to configure client-side controls in list applets, however, the same principals can be applied to form applets.

To create controls in the client

Create a custom presentation model:

Use a JavaScript editor to create a new file named clientctrlpmodel.js. Save this file in the following folder:
```
siebel\custom
```
For more information about:
- The complete presentation model that this example uses, see Text Copy of the Client Control Presentation Model File.
- This folder, see Organizing Files That You Customize.

Add the following code to the file that you created in Step a.

This code does the basic set up:

if( typeof( SiebelAppFacade.ClientCtrlPModel ) === "undefined" ){   
  SiebelJS.Namespace( 'SiebelAppFacade.ClientCtrlPModel' );   
  //Module with its dependencies   
  define("siebel/custom/clientctrlpmodel", [], function () {   
  SiebelAppFacade.ClientCtrlPModel = ( function(){   
    var consts  = SiebelJS.Dependency( "SiebelApp.Constants" );    
    /* *   
    * Constructor Function - ClientCtrlPModel   
    *   
    * Parameter - Be a good citizen. Pass All parameter to superclass.    
    * */   
    function ClientCtrlPModel(proxy){   
      var m_recordset = [];   
      SiebelAppFacade.ClientCtrlPModel.superclass.constructor.call( this, proxy);

Add the client control:

      this.AddMethod("AddClientControl", null, { core : true } );       
      // add into method array   
      this.GetClientRecordSet = function( ) {   
        return m_recordset ;   
      };   
    }

For more information, see AddMethod Method and AddClientControl Method.

Extend the ListPresentationModel object:

    /* Siebel OpenUI uses the ListPresentationModel object to initialize every 
list applet. So, to maintain the functionality that ListPresentationModel 
provides, you extend it.*/   
    SiebelJS.Extend( ClientCtrlPModel, SiebelAppFacade.ListPresentationModel );   
    ClientCtrlPModel.prototype.Init = function(){   
      SiebelAppFacade.ClientCtrlPModel.superclass.Init.call( this );

Determine whether or not Siebel Open UI has removed the focus from the field in the applet, and then temporarily store the value that the user entered in the control:
```
      /* Attach Post Handler for LeaveField */   
      this.AddMethod( "LeaveField", PostLeaveField, { sequence : false, scope : 
this } );
```
For more information, see LeaveField Method and PreGetFormattedFieldValue Method.

Get the format that the field uses to store the value for the control:

      /* Attach Pre Handler for GetFormattedFieldValue */   
      this.AddMethod("GetFormattedFieldValue", PreGetFormattedFieldValue, { 
sequence : true, scope : this } );   
      /* Attach Handler for Delete Record Notification as well */   
      this.AttachNotificationHandler( consts.get( 
"SWE_PROP_BC_NOTI_DELETE_RECORD" ),       HandleDeleteNotification );

For more information, see GetFormattedFieldValue Method.

Get the data from memory stored in Step f, and then display this data in the client control:

function PreGetFormattedFieldValue(control, bUseWS, recIndex, returnStructure){   
  if (utils.IsEmpty(recIndex)){   
    recIndex = this.Get("GetSelection");   
  }   
  if (recIndex >=0) {   
    var clientObj = this.GetClientRecordSet();   
    var recordSet=this.Get("GetRawRecordSet");   
    var id = recordSet[recIndex]["Id"];   
    var flag = false;   
    var value;   
    switch(control.GetName()){   
      case "TestEdit":   
        value = recordSet[recIndex]["Name"];   
        flag = true;   
        break;   
    }   
    if (flag){   
      if( clientObj[id] && clientObj[id][control.GetName()] ){   
        value = clientObj[id][control.GetName()];   
      }   
      else if (clientObj[id]){   
        clientObj[id ][control.GetName()] = value;   
      }   
    else{   
        var recordclient = {};   
        recordclient[control.GetName()] = value;   
        clientObj[id] = recordclient;   
      }   
      returnStructure[ "CancelOperation" ] = true;   
      returnStructure[ "ReturnValue" ]     = value;   
    }   
  }   
}

For more information, see PreGetFormattedFieldValue Method.

Save the value after the user leaves the client control:

function PostLeaveField( control, value, notLeave, returnStructure ){   
  var clientObj = this.GetClientRecordSet();   
  var currSel = this.Get( "GetSelection" );   
  var recordSet=this.Get("GetRawRecordSet");   
  var id = recordSet[currSel]["Id"];   
  if (clientObj[id]){   
    switch(control.GetName()){   
      case "TestEdit":   
        clientObj[id][control.GetName()] = returnStructure[ "ReturnValue" ] ;    
        break;   
    }   
  }   
}

For more information, see PreGetFormattedFieldValue Method.

Delete the reference to the record data that Siebel Open UI stored in the client for the control:

    function HandleDeleteNotification(propSet){   
      var activeRow = propSet.GetProperty( consts.get( 
"SWE_PROP_BC_NOTI_ACTIVE_ROW" ) );   
      if( activeRow  === this.Get( "GetSelection" ) ){   
        var delObj = this.GetClientRecordSet();   
        delObj[ activeRow ] = null;   
      }   
    }

For more information, see HandleDeleteNotification Method.

Create a property set for the control.

For this example, you use the following code to create a property set for the text box control:

    ClientCtrlPModel.prototype.UpdateModel = function(psInfo){   
    /// Specify the property set for Edit box   
    SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );   
    var ctrlTxtInfo = SiebelAppFacade.PresentationModel.GetCtrlTemplate 
("TestEdit", "Test Edit", consts.get( "SWE_CTRL_TEXTAREA" ), 1);

For more information about this code, see Creating Property Sets for Client-Side Controls.

Add the property set information so that Siebel Open UI can add it to the proxy:
```
this.ExecuteMethod( "AddClientControl", ctrlTxtInfo );
```

Return the ClientCtrlPModel that you set up in Step b:

    };   
    return ClientCtrlPModel;   
    } ());   
    return "SiebelAppFacade.ClientCtrlPModel";   
  });   
}

Configure the manifest:
1. Log in to a Siebel client with administrative privileges.
2. Navigate to the Administration - Application screen, and then the Manifest Files view.
3. In the Files list, add the following new files.
  Field Value
  Name
  
  siebel/custom/clientctrlpmodel.js
4. Navigate to the Administration - Application screen, and then the Manifest Administration view.
5. In the UI Objects list, specify the following applet.
  
  Field Value
  
  Type
  
  Applet
  
  Usage Type
  
  Presentation Model
  
  Name
  
  Account List Applet
6. In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet in a desktop platform.
  
  Field Value
  
  Expression
  
  Desktop
  
  Level
  
  1
7. In the Files list, add the following file:
```
siebel/custom/clientctrlpmodel.js
```
8. To refresh the manifest, log out of the client, and then log back in to the client.
Test your work:
1. Navigate to any list applet, and then verify that it displays the control that you added.
  In Step 1, Step b, you extended the ListPresentationModel object that Siebel Open UI uses to display every list applet. So, you can navigate to any list applet.

Field	Value
Type	Applet
Usage Type	Presentation Model
Name	Account List Applet

Field	Value
Expression	Desktop
Level	1