Configuring Siebel Open UI > Customizing Styles, Applets, Fields, and Controls > Customizing Applets >

Displaying and Hiding Fields

The example in this topic describes how to configure Siebel Open UI to display a field. To view a diagram that illustrates some of the objects you modify and the relationships between these objects, see Configuring Manifests.

This topic is similar to the Displaying and Hiding Fields topic, but with fewer details. It demonstrates how you can quickly modify a presentation model.

To customize the fields that are visible in an applet

1. Copy the JavaScript files:
   1. Download a copy of the partialrefreshpm.js file to the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\siebel\custom

   For more information about this file, see Text Copy of Code That Does a Partial Refresh for the Presentation Model.

   2. Download a copy of the partialrefreshpr.js file to in the following folder:

   INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\siebel\custom

   For more information about this file, see Text Copy of Code That Does a Partial Refresh for the Physical Renderer.

2. Configure the manifest:
   1. Log in to a Siebel client with administrative privileges.

      For more information about the screens that you use in this step, see Configuring Manifests.

   2. Navigate to the Administration - Application screen, and then the Manifest Files view.
   3. In the Files list, add the following files.

      Field	Value
      Name	siebel/custom/partialrefreshpr.js
      Name	siebel/custom/partialrefreshpm.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	Physical Renderer
      Name	Contact Form Applet

   6. In the Object Expression list, add the following expression. The physical renderer uses this expression to render the applet in a mobile platform.

      Field	Value
      Expression	Mobile
      Level	1

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

   siebel/custom/partialrefreshpr.js

   8. In the UI Objects list, specify the following applet.

      Field	Value
      Type	Applet
      Usage Type	Presentation Model
      Name	Contact Form Applet

   9. In the Object Expression list, add a record with no value in the Expression field.
   10. In the Files list, add the following file:

   siebel/custom/partialrefreshpm.js

3. Test your modifications:
   1. Open the browser in the client computer, and then clear the browser cache.
   2. Open the Siebel application, and then navigate to the Contact Form Applet.
   3. Delete the value in the Job Title field, and then step out of the field.
   4. Make sure Siebel Open UI removes the values from the Work # and the Main Fax # fields.
   5. Add a value to the Job Title field, and then step out of the field.
   6. Make sure Siebel Open UI adds values to the Work # and the Main Fax # fields.

To get a copy of the partialrefreshpm.js file, see Article ID 1494998.1 on My Oracle Support. If you do not have access to this file on My Oracle Support, then you can open a JavaScript editor, create a new file named partialrefreshpm.js, copy the following code into this file, and then save your modifications:

if(typeof(SiebelAppFacade.PartialRefreshPM) === "undefined"){

SiebelJS.Namespace("SiebelAppFacade.PartialRefreshPM");

define("siebel/custom/partialrefreshpm", [], function () {(

SiebelAppFacade.PartialRefreshPM = (function(){

function PartialRefreshPM(proxy){

SiebelAppFacade.PartialRefreshPM.superclass.constructor.call(this, proxy);

}

SiebelJS.Extend(PartialRefreshPM, SiebelAppFacade.PresentationModel);

PartialRefreshPM.prototype.Init = function(){

SiebelAppFacade.PartialRefreshPM.superclass.Init.call(this);

this.AddProperty("ShowJobTitleRelatedField", "");

this.AddMethod("ShowSelection", SelectionChange,{sequence : false, scope : this});

this.AddMethod("FieldChange", OnFieldChange,{sequence : false, scope: this});

};

function SelectionChange(){

var controls = this.Get("GetControls");

var control = controls[ "JobTitle" ];

var value = this.ExecuteMethod("GetFieldValue", control);

this.SetProperty("ShowJobTitleRelatedField", (value ? true: false));

}

function OnFieldChange(control, value){

if(control.GetName() === "JobTitle"){

this.SetProperty("ShowJobTitleRelatedField", (value ? true: false));

}

}

return PartialRefreshPM;

}());

}

To get a copy of the partialrefreshpr.js file, see Article ID 1494998.1 on My Oracle Support. If you do not have access to this file on My Oracle Support, then you can open a JavaScript editor, create a new file named partialrefreshpr.js, copy the following code into this file, and then save your modifications:

if(typeof(SiebelAppFacade.PartialRefreshPR) === "undefined"){

  SiebelJS.Namespace("SiebelAppFacade.PartialRefreshPR");

  //Module with its dependencies

  define("siebel/custom/partialrefreshpr", ["order!3rdParty/jquery.signaturepad.min", "order!siebel/phyrenderer"], function () {

    SiebelAppFacade.PartialRefreshPR = (function(){

      function PartialRefreshPR(pm){

        SiebelAppFacade.PartialRefreshPR.superclass.constructor.call(this, pm);

      }

      SiebelJS.Extend(PartialRefreshPR, SiebelAppFacade.PhysicalRenderer);

      PartialRefreshPR.prototype.Init = function () {

        SiebelAppFacade.PartialRefreshPR.superclass.Init.call(this);

        // To act when FieldChange method is raised at PM level and execute our custom code

        this.AttachPMBinding( "FieldChange", FieldChange );

      };

      function ModifyLayout(){

        var controls = this.GetPM().Get("GetControls");

        var control = controls[ "JobTitle" ];

        var value = this.GetPM().ExecuteMethod( "GetFieldValue", control );

        var canShow = ( value ? true : false);

        var WorkPhoneNum = controls[ "WorkPhoneNum" ];

        var FaxPhoneNum = controls[ "FaxPhoneNum" ];

        if(canShow){

          $( "#WorkPhoneNum_Label" ).parent().show(); // We need to take the parent to get the whole div to hide

          $( "[name='" + WorkPhoneNum.GetInputName() + "']" ).parent().show();

          $( "#FaxPhoneNum_Label" ).parent().show();

          $( "[name='" + FaxPhoneNum.GetInputName() + "']" ).parent().show();

        }

        else{

          $( "#WorkPhoneNum_Label" ).parent().hide();

          $( "[name='" + WorkPhoneNum.GetInputName() + "']" ).parent().hide();

          $( "#FaxPhoneNum_Label" ).parent().hide();

          $( "[name='" + FaxPhoneNum.GetInputName() + "']" ).parent().hide();

        }

      }

      function FieldChange (control, value, index) {

        if( control.GetName() === "JobTitle" ){

        ModifyLayout.call(this);

        }

      }

      // We are overloading the standard PR ShowSelection to apply our customization

      // We ensure to first call the parent ShowSelection

      PartialRefreshPR.prototype.ShowSelection = function(index) {

        SiebelAppFacade.PartialRefreshPR.superclass.ShowSelection.call(this,index);

        ModifyLayout.call(this);

      };

      return PartialRefreshPR;

    } ());

    return "SiebelAppFacade.PartialRefreshPR";

  });

}