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

Adding Custom User Preferences to Applets

This topic describes how to customize default applet behavior so that Siebel Open UI remembers the actions the user takes that effect this behavior. Expand and collapse is an example of this behavior. The example in this topic customizes a physical renderer to display the Opportunity List Applet applet as expanded or collapsed, by default, depending on how the user most recently displayed the applet. For example, assume the user navigates to the Opportunity List Applet, and then expands the applet.

Siebel Open UI then displays more records in the list. In the predefined behavior, if the user logs out of the client, logs back in to the client, and then navigates to this list again, then Siebel Open UI does not remember that the user expanded the list. This topic describes how to customize Siebel Open UI so that it remembers this user action.

You can use this example as a guideline to modify a predefined applet behavior or to create your own custom applet behavior.

To add custom user preferences to applets

1. Add the user preference to your custom physical renderer and presentation model:
   1. Use a JavaScript editor to open your custom physical renderer that renders the Opportunity List Applet.
   2. Add the custom user preference. You add the following code:

   var pm = this.GetPM();

   var inputPS = CCFMiscUtil_CreatePropSet();

   inputPS.SetProperty("Key", "user_preference_name");

   inputPS.SetProperty("user_preference_name", "user_preference_value");

   pm.OnControlEvent(siebConsts.get("PHYEVENT_INVOKE_CONTROL"), pm.Get(siebConsts.get("SWE_MTHD_UPDATE_USER_PREF")), inputPS);

   pm.SetProperty("user_preference_name", "user_preference_value");

   3. Use a JavaScript editor to open your custom presentation model that renders the Opportunity List Applet.
   4. Add a presentation model property that references the custom user preference. You add the following code

   var pm = this.GetPM();

   var value = pm.Get("user_preference_name");

   You must make sure that Siebel Open UI derives your custom presentation model from the Presentation Model class. This class contains the logic that saves user preferences in presentation model properties. For more information, see Adding Presentation Model Properties That Siebel Servers Send to Clients.

2. Add the expand and collapse button:
   1. Use a JavaScript editor to open the physical renderer that you edited in Step 1, Step a.
   2. Add the following code to the end of the Show method:

   var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-expandcollapse-btn';

   var expcolbtn = "<button " +

   "id= '" + id1 + "' " +

   "class= 'appletButton' " +

   "aria-label=ExpandCollapse " +

   "type=\"button\" " +

   "title=ExpandCollapse " + ">" + "ExpandCollapse" + "</button>";

   3. Add the following code to the end of the BindEvent method. This code binds the button click.

   $("#" + pm.Get("GetFullId") + "-" + "siebui-cust-expandcollapse-btn").bind("click", {ctx: this},

   function (e) {

   var self = e.data.ctx,

   pm = self.GetPM();

   SiebelJS.Log("Expand");

   var inputPS = CCFMiscUtil_CreatePropSet();

   var value = pm.Get ("Expand-Collapse");

   inputPS.SetProperty("Key", "Expand-Collapse");

   if(value === "Collapse")

   {

   inputPS.SetProperty("Expand-Collapse", "Expand");

   pm.SetProperty("Expand-Collapse", "Expand");

   }

   else

   {

   inputPS.SetProperty("Expand-Collapse", "Collapse");

   pm.SetProperty("Expand-Collapse", "Collapse");

   }

   pm.OnControlEvent(siebConsts.get("PHYEVENT_INVOKE_CONTROL"),pm.Get(siebConsts.get("SWE_MTHD_UPDATE_USER_PREF")), inputPS);

   if(value === "Collapse")

   {

   pm.SetProperty("Expand-Collapse", "Expand");

   //Write Code to expand the applet

   $("#s_" + pm.Get("GetFullId") + "_div").find(".siebui-collapsible-applet-content").show();

   }

   else

   {

   pm.SetProperty("Expand-Collapse", "Collapse");

   //Write Code to collapse the applet

   $("#s_" + pm.Get("GetFullId") + "_div").find(".siebui-collapsible-applet-content").hide();

   }

   }

   );

   4. Add the following code to the end of the ShowUI method. This code accesses the default value of the custom Expand-Collapse user preference, and then instructs Siebel Open UI to display the applet as expanded or collapsed according to the user preference value:

   PhysicalRenderer.prototype.ShowUI()

   {

   var pm = this.GetPM();

   var value = pm.Get ("Expand-Collapse");

   if(value === "Collapse")

   {

   //Write Code to collapse the applet

   $("#s_" + pm.Get("GetFullId") + "_div").find(".siebui-collapsible-applet-content").hide();

   }

   else

   {

   //Write Code to expand the applet

   $("#s_" + pm.Get("GetFullId") + "_div").find(".siebui-collapsible-applet-content").show();

   }

   }

   5. Use an HTML editor to open the HTML that Siebel Open UI uses to display the Opportunity List Applet, and then add the following code:

   $("#s_" + this.GetPM().Get("GetFullId") + "_div").find(".siebui-collapsible-applet").append(expcolbtn);

   For more information about how to edit HTML code for an applet, see Customizing Logos, Themes, Backgrounds, Tabs, Styles, and Fonts.

3. Test your modifications:
   1. Log in to the client, and then navigate to the Opportunity List Applet.
   2. Click the expand and collapse button, and then verify that Siebel Open UI expands the applet.
   3. Log out of the client, log back in to the client, navigate to the Opportunity List Applet, and then verify that Siebel Open UI displays the same expanded state that you set in Step 2, Step b.