6Customizing Styles, Applets, Fields, and Controls
Customizing Styles, Applets, Fields, and Controls
This chapter describes how to customize styles, applets, fields, and controls. It includes the following topics:
Customizing Logos, Themes, Backgrounds, Tabs, Styles, and Fonts
This topic describes how to customize the logo, theme, background image, and style that Siebel Open UI displays in the client. It includes the following information:
You can make these modifications in the client at run time. You can then copy them into CSS files on the Siebel Server, and then deploy them to all users.
Customizing the Logo
Starting with Siebel Innovation Pack 2014, Siebel Open UI defines the logo that it displays in the client in CSS files instead of coding the logo in ODH. It uses the following predefined code to display the logo in the Aurora theme for screen sizes larger than 1199 pixels:
#_sweclient #_sweappmenu .siebui-logo
float: left;
height: 40px !important;
line-height: 40px;
background-image: url("../images/ebus.gif");
background-repeat: no-repeat;
background-origin: content-box;
background-position: 4px 12px;
width: 106px;
white-space: nowrap;
}
You can configure Siebel Open UI to override this code, or you can create your own custom theme so that you can display a custom logo. You can configure Siebel Open UI to display a separate logo in each theme. For more information about overriding an existing theme, or adding a new theme, see Open UI Deployment Guide (Article ID 1499842.1) on My Oracle Support.
To customize the logo
Create a JPG file that includes your custom logo.
For example, my-logo.jpg.
Copy the file you created in Step 1 to the following folders:
INSTALL_DIR\applicationcontainer\webapps\siebel\images\custom
Use an editor to open your custom CSS file that resides in the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\files\custom
For example, open the my-style.css file.
Add the following code:
#_sweclient #_sweappmenu .siebui-logo { background-image: url('../../images/custom/my-logo.jpg') }(Optional) Modify the logo attributes, as necessary:
Use an editor to open your custom CSS file.
For example, open my-style.css.
Add your custom code.
Siebel Open UI uses the following predefined code to specify the logo attributes:
#_sweclient #_sweappmenu .siebui-logo { float: left; height: 40px !important; line-height: 40px; background-image: url("../images/ebus.gif"); background-repeat: no-repeat; background-origin: content-box; background-position: 4px 12px; width: 106px; white-space: nowrap; }You can modify each of these attributes, as necessary. For example, you can modify the following width and height attributes to decrease the width and height of the logo to accommodate your custom logo image:
#_sweclient #_sweappmenu .siebui-logo { width: 25px; height: 25px; }
Configure the manifest. For more information about how to do this step, see Configuring Manifests:
Log in to a Siebel client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Files view.
Add the file that you modified in Step 4.
For this example, you add the following file:
custom/my-style.css
Navigate to the Manifest Expressions view.
In the Expressions list, add the following expression.
Field Value Name
GRAY_TABExpression
LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "GRAY_TAB"where:
LookupName is a method that converts the language-dependent name of the theme to the language-independent name of theme. Siebel Open UI uses the language-independent name.
Navigate to the Manifest Administration view.
In the UI Objects list, specify the following object.
Field Value Type
Application
Usage Type
Theme
Name
PLATFORM DEPENDENT
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.
In the Object Expression list, add the following subexpression.
Field Value Group Name
Leave empty.
Expression
Enter the value that you specified in Step e.
Level
2
Operator
Leave empty.
Web Template Name
Leave empty.
Use the Move Up, Move Down, Indent, and Outdent buttons to rearrange the subexpressions, as necessary.
In the Files list, click Add.In the Files dialog box, click Query.
In the Name field, enter the following path and file name:
custom/my-style.css
Click Go.
Log out of the client, log back in to the client, and then verify that Siebel Open UI replaces the Oracle logo with your custom logo.
Customizing Themes
This topic includes an example that customizes the theme that Siebel Open UI displays in the client. It describes how to add a custom theme named Mobile Theme Gold that Siebel Open UI displays on a tablet.
The User Preferences - Behavior screen in the Siebel Mobile client allows the user to choose the theme that this client displays. Siebel Open UI comes predefined with one theme for the tablet and one theme for the phone, by default. It constrains the theme that the user can choose depending on whether the user uses a phone, tablet, or desktop computer.
To customize themes
Create a new style sheet named theme-gold.css. Save this new file in the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\files\custom
You can use any .css file that includes your custom theme. You can also specify multiple .css files. For this example, use theme-gold.css.
Add the new theme to the OUI_THEME_SELECTION list of values:
Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.
For more information, see Using Siebel Tools.
Click the Screens application-level menu, click System Administration, and then click List of Values.
Right-click in the List of Values list, and then click New Record.
Add the following value to the OUI_THEME_SELECTION list of values.
Property Value Type
OUI_THEME_SELECTION
Display Value
Gold
Language-Independent Code
GOLD_THEME
The value that you specify must match the theme name that you define in the manifest. In this example, this name is GOLD_THEME.
Parent LIC
NAVIGATION_TAB
NAVIGATION_TREE
NAVIGATION_SIDE
For the new theme to be displayed only for desktop, then under Object Expression, add a new record with Expression = Desktop and Level = 1. For the new theme to be displayed for all platforms (desktop, mobile, and so on), then under Object Expression add a new record with Expression is null and Level = 1.
Configure the manifest. For more information about how to do this step, see Adding Custom Manifest Expressions:
Log in to a Siebel client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Files view.
Add the file that you created in Step 1.
For this example, add the following file:
files/custom/theme-gold.css
Navigate to the Manifest Expressions view.
In the Expressions list, add the following expression.
Field Value Name
GOLD_THEMEExpression
LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "GOLD_THEME"
where:
LookupName is a method that converts the language-dependent name of the theme to the language-independent name of theme. Siebel Open UI uses the language-independent name.
Navigate to the Manifest Administration view.
In the UI Objects list, specify the following object.
Field Value Type
Application
This example configures Siebel Open UI to display your custom theme for the entire Siebel application. To specify this theme for a single object, see Customizing Themes for Other Objects.
Usage Type
Theme
Name
PLATFORM DEPENDENT
In the Object Expression list, add the following subexpression.
Field Value Group Name
Leave empty.
Expression
Gold Theme
If you must add a theme to some other platform, such as a phone or desktop, then specify this other platform. For example, specify Phone instead of Tablet.
Level
1
Operator
Leave empty.
Web Template Name
Leave empty.
In the Files list, add the file that you created in Step 1.
For this example, you add the following file:
files/custom/theme-gold.css
You can use the Sequence field to determine the sequence that Siebel Open UI uses when it downloads cascading style sheets.
Test your modifications:
Login to the Siebel Open UI client.
Click User Preferences, click Behavior, and then click Edit.
Verify that the Theme field includes the Gold value.
Click Gold, and then click Save.
Log out of the Siebel Open UI client, and then log back in.
Verify that the Siebel Open UI client displays Gold theme.
Customizing Themes for Other Objects
This topic describes how to customize themes other objects and portlet applications.
To customize themes for other objects and portlet applications
Do Step 1 through Step 4, except for Step 3, Step e, in the topic Customizing Themes and specify the object type and name of the object where Siebel Open UI must apply the style.
For example, to apply the style only for an applet, set the Type to Applet, and the Name to the applet name, such as Contact List Applet.
To specify the theme for another application, use the following expression:
GetProfileAttr("PortletId") = "PtId"where:
PtId is the PtId argument of the URL to a Siebel portlet.
For example:
GetProfileAttr("PortletId") = "CRMOPTY1"For more information about PtId, see Configuring Siebel Open UI to Consume Siebel Portlets.
Customizing the Synergy Theme
In Siebel Innovation Pack 2015, the Synergy theme was introduced. This topic describes elements of the Synergy theme that can be customized. For more information about the Synergy theme, see Siebel Fundamentals Guide.
The Synergy theme is designed for Available Tab navigation only and is not suitable for Side Menu or Tree navigation.
Adding Landing Pages
By default, the landing page is enabled for all desktop applications. Follow the instructions in this topic to add a Synergy theme landing page for mobile applications.
To add landing page for mobile applications
Navigate to the Administration - Runtime Events screen, and then the Action Sets view.
Create an action set with a Name of your choosing and default field values.
Add a new action to the action set you created in Step 2 with the following defined values:
Field Value Name
Action Name
For example, Landing Page.
Sequence
1
Profile Attribute
Is Landing Page Enabled
Value
TRUE
Navigate to the Administration - Runtime Events screen, and then the Action Sets view.
Create a run-time event with the following values:
Field Value Object Type
Application
Object Name
Name of application
For example, Siebel Universal Agent.
Event
Login
Action Set Name
Select the action set that was created in Step 2.
Sequence
Sequence number
Removing Applets from Landing Pages
Follow the instructions in this topic to configure Synergy theme landing page.
To configure content on landing pages
Navigate to the Administration - Personalization screen, and then the Applets view.
Query for the applet that you want to remove from the landing page.
Add the following expression:
GetProfileAttr("Is SUI_THEME Landing View") = 'FALSE'Note: If there are any existing expressions, use the AND operator.
Removing Landing Pages
By default, in Siebel Open UI, desktop applications are configured to have landing pages. Whereas mobile applications do not have default landing pages. Follow the instructions in this topic to skip the display of landing page entirely.
To remove landing pages
Navigate to the Administration - Runtime Events screen, and then the Action Sets view.
Create an action set with a Name of your choosing and default field values.
Add a new action to the action set you created in Step 2 with the following defined values:
Field Value Name
Action Name
For example, Remove Landing Page.
Sequence
1
Profile Attribute
Is Landing Page Enabled
Value
FALSE
Navigate to the Administration - Runtime Events screen, and then the Action Sets view.
Create a run-time event with the following values:
Field Value Object Type
Application
Object Name
Name of application
For example, Siebel Universal Agent.
Event
Login
Action Set Name
Select the action set that was created in Step 2.
Sequence
Sequence number
Navigate to the Administration - Personalization screen, and then the Applets view.
Query for the Conditional Expression using containing the following string:
"*Is SUI_THEME Landing View*"Select a record from the results of the search performed in Step 7, then remove the following expression from the Conditional Expression string:
GetProfileAttr('Is SUI_THEME Landing View') = 'FALSE'Repeat Step 8 for every record returned in the search performed in Step 7.
Select Reload Personalization Rules from the applet menu.
Customizing the Aurora Theme
This topic describes how to customize the Aurora theme. For more information about the Aurora theme, see Siebel Fundamentals Guide.
To customize the Aurora theme
Create new CSS rules in mycustom.css and place the file in:
<install_dir>\applicationcontainer\webapps\siebel\files\custom
Navigate to the Sitemap and query for manifest and then select Manifest Files.
From the drop-down menu choose Name, then enter files in the text field and run the query.
Click the plus (+) icon in the menu bar.
In the name field, enter the path to the new CSS file, for example:
files\custom\<mycustom.css>
Navigate to Manifest Administration and query for the Usage Type of Theme.
Click the plus (+) icon in the menu bar.
Create a new Platform Dependent record and click the plus (+) icon in Object Expressions.
Create an Aurora theme expression by clicking the plus icon (+) and entering "Aurora" in the Expression field.
Click the MVG icon.
In the Expressions pop-up window, click OK.
Set the new object expression’s level to 1.
Click the plus (+) icon in the Files menu bar.
In the Files pop-up window, click the Search icon.
Enter files in the search field and click the Execute icon.
Select the check box for your new CSS file and click OK.
Navigate to Tools, User Preferences, and then Behavior.
From the Theme drop-down menu choose Aurora.
Close the application and then restart it.
The changes you made in the new CSS file are now active.
Customizing Browser Tab Labels
Siebel Open UI uses the view Title that you define in Siebel Tools to set the Browser tab label. If this Title is not defined, then Siebel Open UI displays the Id of the current record as the label. For example, it might display 2-HB474 as the Browser tab label:
If the label is not set for the view, the Id of the selected record is displayed by default. The tab name for the browser is set with the view Title or Title String Override, if it is defined within Siebel Tools. The same view Title is also looked up when the following script is called:
SiebelApp.S_App.GetActiveView().GetTitle().
Using Cascading Style Sheets to Modify the Position, Dimension, and Text Attributes of an Object
The example in this topic describes how to modify the cascading style sheet. You move the Predefined Query (PDQ) to a different location and you modify the text color of the Predefined Query.
To use cascading style sheets to modify the position, dimension, and text attributes of an object
Add these CSS rules to the end of your custom style sheet, my-style.css:
#_sweclient #_sweappmenu .PDQToolbarContainer { position: absolute; top: 40px; left: 610px; width: 140px; } #_sweclient #_sweappmenu .PDQToolbarContainer select { color: red; width: 140px; }Save the my-style.css file.
Verify that the Predefined Query drop-down list appear in the Help menu.
Adding Fonts to Siebel Open UI
This topic describes how to add custom fonts to Siebel Open UI. Although you can add custom fonts, it is recommended that your Siebel Open UI deployment use only Web-safe fonts because you might not be able to control font usage. For example, assume you deploy a custom font to all users in your company, and that you also add this font to Siebel Open UI. Assume that one of your Siebel Open UI users chooses this font in a text editor in Siebel Open UI, and then sends this text in an email message to an external customer who has not installed this custom font on their computer. In this situation, your Siebel Open UI user can read the font but the external customer cannot read it.
Using Web-safe fonts helps to make sure that any Browser or other client, such as a desktop computer or mobile device, can correctly render the text that your users provide, regardless of how each user configures font usage in their individual Browsers or clients, or the level of font customization that exists in your deployment environment. For more information about Web-safe fonts, see the topic that describes Web Safe Font Combinations at http://www.w3schools.com/cssref/css_websafe_fonts.asp.
To add fonts to Siebel Open UI
Create a JavaScript file that adds your custom font:
Create a new JavaScript file named ckeditorfontadditions.js, and then save this file in the
customfolder.For more information about this folder, see Organizing Files That You Customize.
Add the following code to the file that you created in Step a. This code adds the fonts that Siebel Open UI displays in the Font picklists when the user edits text in the client:
if (typeof(SiebelAppFacade.CKEDITOREXTN) == "undefined") { Namespace('SiebelAppFacade.CKEDITOREXTN'); (function() { SiebelApp.EventManager.addListner("postload", ckeditorextn, this); var updatedFont = ""; function ckeditorextn() { try { if (CKEDITOR && CKEDITOR.config.font_names !== updatedFont) { CKEDITOR.config.font_names = CKEDITOR.config.font_names + 'font_families' updatedFont = CKEDITOR.config.font_names; } } catch (error) { // Nothing to do. } } }()); }where:
CKEDITOR.config.font_namesis a predefined function that Siebel Open UI uses to store the list of fonts that it uses.font_families specifies one or more font families that Siebel Open UI uses to render the font.
catch (error) catches any error that might occur when Siebel Open UI attempts to render the fonts that you specify. If an error occurs, then Siebel Open UI uses a predefined font to display the control.
For this example, use the following code for font_families:
';Calibri/Calibri, Verdana, Geneva, sans-serif;'
For more information about how to specify the font family, see Specifying Font Families.
Administer the manifest:
For more information about how to do this step, see Configuring Manifests.
Log in to the client as an administrator.
Navigate to the Administration - Application screen, and then the Manifest Files view.
In the Files list, add the file that you created in Step 2.
You add the following record:
siebel/custom/ckeditorfontadditions.js
Navigate to the Administration - Application screen, and then the Manifest Administration view.
In the UI Objects list, add a new record. Use values from the following table.
Type Usage Type Name Application
Common
PLATFORM INDEPENDENT
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.
In the Files list, add the file that you created in Step 2.
You add the following record:
siebel/custom/ckeditorfontadditions.js
Refresh the manifest. Log out of the client, and then log back in to the client.
Verify that Siebel Open UI added your custom fonts:
Navigate to the Administration Communications screen, and then the All Templates view.
In the Compose Template section, in the Text window, click the Font drop-down, and then make sure the Font list displays the font that you specified in Step 1, Step b.
Specifying Font Families
You can use the following code to specify the font family:
function ckeditorextn() {
try {
if (CKEDITOR &&
CKEDITOR.config.font_names !== updatedFont) {
CKEDITOR.config.font_names = CKEDITOR.config.font_names +
'font_families'
updatedFont = CKEDITOR.config.font_names;
}
} catch (error) {
// Nothing to do.
where:
font_families specifies one or more font families that Siebel Open UI uses to render the font.
font_families can include one or more families. You must precede each font family with a semi-colon (;). For example:
;font_family_1;font_family_2;font_family_n
You must use the following format for each font family:
font_name/font_label,substitute_font_1,substitute_font_2, substitute_font_n, generic_font_family
where:
font_name specifies the name of the font, such as Calibri.
font_label specifies the text label. It displays this label in the Font picklists in the client.
substitute_font_1 specifies the font if the font that font_name specifies does not exist in the client computer.
substitute_font_2 specifies the font if the font that substitute_font_1 specifies does not exist in the client computer.
generic_font_family specifies the font family if the font that substitute_font_n specifies does not exist in the client computer. Siebel Open UI chooses a font from this generic font family.
It is recommended that you specify a substitution font that resembles the font that it substitutes. For example, Calibri is a sans-serif, proportionally spaced font. If you specify Calibri as the font_name, then it is recommended that you specify a close approximation to Calibri for substitute_font_1, such as Verdana, which is also a sans-serif, proportionally spaced font. It is recommended that you use this same approach when you specify the remaining substitution fonts. For example, specify Geneva for substitute_font_2.
Consider the following example:
';Calibri/My Font, Verdana, Geneva, sans-serif;'
This code configures Siebel Open UI to do the following:
Adds Calibri to the list of fonts that Siebel Open UI displays in Font picklists.
Uses My Font as the label for the Calibri font that Siebel Open UI displays in Font picklists.
If Calibri is not installed on the client computer, then Siebel Open UI uses the following sequence to determine the font that it displays:
Uses Verdana for My Font.
If Verdana is not installed on the client computer, then it uses Geneva for My Font.
If Geneva is not installed on the client computer, then it uses any sans-serif font that is installed on the client computer for My Font.
If you specify a font that includes a space character, then you must use double-quotes to enclose the entire font name. For example, you must use double quotes to enclose Times New Roman and Courier New:
';"Times New Roman"/My Font,Georgia,"Courier New",Serif;'
For more information about font families, see the topic that describes the CSS font family property at the W3 Schools website at http://www.w3schools.com/cssref/pr_font_font-family.asp.
Customizing Applets
This topic describes how to customize applets. It includes the following information:
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
Copy the JavaScript files:
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.
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.
Configure the manifest:
Log in to a Siebel client with administrative privileges.
For more information about the screens that you use in this step, see Configuring Manifests.
Navigate to the Administration - Application screen, and then the Manifest Files view.
In the Files list, add the following files.
Field Value Name
siebel/custom/partialrefreshpr.js
Name
siebel/custom/partialrefreshpm.js
Navigate to the Administration - Application screen, and then the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Physical Renderer
Name
Contact Form Applet
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
In the Files list, add the following file:
siebel/custom/partialrefreshpr.js
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Presentation Model
Name
Contact Form Applet
In the Object Expression list, add a record with no value in the Expression field.
In the Files list, add the following file:
siebel/custom/partialrefreshpm.js
Test your modifications:
Open the browser in the client computer, and then clear the browser cache.
Open the Siebel application, and then navigate to the Contact Form Applet.
Delete the value in the Job Title field, and then step out of the field.
Make sure Siebel Open UI removes the values from the Work # and the Main Fax # fields.
Add a value to the Job Title field, and then step out of the field.
Make sure Siebel Open UI adds values to the Work # and the Main Fax # fields.
Text Copy of Code That Does a Partial Refresh for the Presentation
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;
}());
}
Text Copy of Code That Does a Partial Refresh for the Physical
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";
});
}
Allowing Users to Drag and Drop Data Into List Applets
The example in this topic describes how to allow users to select and move data from a spreadsheet to the Contact List applet. You cannot use a calculated field value for the Client PM User Properties.
To allow users to select and move data into list applets
Modify the list applet:
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, query the Name property for Contact List Applet.
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Properties list, add the following applet user properties.
Name Value ClientPMUserProp
EnableDragAndDropInList
EnableDragAndDropInList
TRUE
Compile your modifications.
Identify the columns that you must select and move:
Log in to the client, navigate to the Contacts screen, and then the Contacts List.
In the contact form, notice the required fields.
Siebel Open UI uses an asterisk (red color) to indicate each required field. In the contact form, the Last Name and First Name fields are required.
Create a spreadsheet:
Open a spreadsheet application, such as Microsoft Excel.
In the first row, add the column headers for the columns that you must select and move.
For each column name that you include, make sure the column name is identical to the column name that the list applet displays in the client.
Siebel Open UI does not require you to include all column headers. However, you must include all the required column headers that you noticed in Step 2.
You can include column headers in any order.
Add data rows immediately after the column header row that you added in Step b.
For example, add rows that include information about each contact, such as first name and last name.
Your completed work might resemble the following spreadsheet:
Select and move the data:
In the spreadsheet application, choose the cells that include the header and data information.
Select and move the cells that you chose in Step a to the Contact List Applet in the Siebel application.
Do the following to select and move cells in Excel. Your spreadsheet program might work differently:
Position the cursor over a corner of the selection area until Excel displays the cursor as a four-way arrow.
Right-click and hold down the mouse button over the cursor.
Move the selection area to the Contact List Applet.
Release the mouse button.
Verify that Siebel Open UI added the data rows to the list applet.
Expanding and Collapsing Applets
This topic describes how to configure Siebel Open UI to display an applet as expanded or collapsed, by default.
To expand and collapse applets
Modify the applet:
Open Siebel Tools.
For more information about using Siebel Tools, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, query the Name property for the applet that you must modify.
For example, query for SIS Account Entry Applet.
In the Object Explorer, expand the Applet tree, and then click Applet User Property.
In the Applet User Properties list, create two new applet user properties. Use values from the following table.
Name Value ClientPMUserProp
Default Applet Display Mode
Default Applet Display Mode
Use one of the following values:
Expanded. Siebel Open UI displays the applet in an expanded state, by default.
Collapsed. Siebel Open UI displays the applet in a collapsed state, by default.
Compile your work.
Modify the Web template:
Identify the Web template that you must modify, and then open it for editing.
Add the following code:
<div od-type="form"> <div od-if="Web Engine State Properties, IsPrintOff"> <div class="od-context-SelectStyle"> </div> <div class="siebui-collapsible-applet"> <table datatable="0" summary="" width="100%" cellpadding="0"cellspacing="0" border="0" align="center" <div class="siebui-collapsible-applet-header"> <div od-include="CCTitle_Named"/> <div od-include="CCFormButtonsTop"/> <div od-type="error" type="Popup"> <table datatable="0" summary="" class="od-context-Applet" width="100%" cellpadding="0" </div> <div class="siebui-collapsible-applet-content"> <div od-type="form-applet-layout"> </div> <div> <div> <table> <div>where:
siebui-collapsible-applet. Identifies the applet body.siebui-collapsible-applet-header. Identifies the section where Siebel Open UI adds the expand button or the collapse button.siebui-collapsible-applet-content. Identifies the section that Siebel Open UI expands or collapses.
Test your work:
Log in to the client.
Navigate to the applet that you modified in Step 1.
Verify that Siebel Open UI displays the applet as expanded or collapsed according to the value that you set for the Default Applet Display Mode applet user property in Step 1.
Verify that Siebel Open UI displays the expand and collapse button correctly.
If Siebel Open UI expands the applet, then it must display the following collapse icon in the the applet:
If Siebel Open UI collapses the applet, then it must display the following expand icon in the applet:
Customizing List Applets to Display a Box List
This topic describes how to customize a list applet to display a box list. You customize how Siebel Open UI renders an applet, the content it displays, and the style that it uses in the client.
To customize list applets to display a box list
Log in to the client.
Navigate to a view that displays a typical Siebel list applet.
For example, navigate to the Accounts screen, and then the Accounts list.
Notice that Siebel Open UI displays the typical predefined list.
Open Windows Explorer, and then navigate to the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\siebel
For example:
C:\16.0\applicationcontainer\webapps\siebel\scripts\siebel
Rename the existing jqgridrenderer.js file that resides in the folder you accessed in Step 3 to jqgridrenderer_original.js.
Download the jqgridrenderer_tile.js file to the folder you accessed in Step 3.
The jqgridrenderer_tile file prevents Siebel Open UI from initializing the jqgrid control and from rendering other fields in the grid. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.
Rename the jqgridrenderer_tile.js file to jqgridrenderer.js.
In the Siebel Open UI client, press the F5 key to refresh the screen.
In Windows Explorer, navigate to the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\files\custom
Use an editor to open the my-style.css file.
Copy the following code into the theme_base.css file. This code configures Siebel Open UI to display account names in a series of vertical boxes:
/*---------------------------------------------*/ /* Styles for alternate List display demo */ /*---------------------------------------------*/ .siebui-boxlist { width: 100%; height: 100%; overflow: auto; } .siebui-boxlist-pager,.siebui-boxlist-items{ display: table-row; white-space: nowrap; width: 100%; } .siebui-boxlist-item, siebui-boxlist-item-selected { padding: 100px 0px; height: 40px; border-radius: 5px; float: left; width: 120px; overflow: hidden; margin: 5px 12px; color: #222!important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); text-align: center; } .siebui-boxlist-item { background: rgb(250, 250, 250); background: -moz-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(225, 225, 225, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(250, 250, 250, 1)), color-stop(100%, rgba(225, 225, 225, 1))); background: -webkit-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(225, 225, 225, 1) 100%); border-bottom: 1px solid #AAA; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); } .siebui-boxlist-item-selected { background: rgb(250, 250, 250); background: -moz-linear-gradient(top, rgba(249, 238, 167, 0.5) 0%, rgba(251, 236, 136, 0.5) 100%)!important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249, 238, 167, 0.5)), color-stop(100%, rgba(251, 236, 136, 0.5)))!important; background: -webkit-linear-gradient(top, rgba(249, 238, 167, 0.5) 0%, rgba(251, 236, 136, 0.5) 100%)!important; border-bottom: 1px solid #AAA; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); } /*---------------------------------------------*/ /* Styles for alternate List display demo */ /*---------------------------------------------*/Navigate to the Siebel Open UI client, and then press the F5 key to refresh the screen.
The client displays the modified layout.
Customizing List Applets to Render as Carousels
The example in this topic describes how to customize Siebel Open UI to render a list applet as a carousel in Siebel Call Center. To view different example carousel styles and to get the code for these styles, see the http://sorgalla.com/projects/jcarousel Web site.
To customize list applets to render as carousels
Add records in the client:
Open the client, navigate to the Contacts screen, and then click the Contact List link.
Add the following contact.
Field Value Last Name
Aamos
First Name
Ray
Click the link in the Last Name.
Click the Affiliations link.
In the Affiliations list, add four affiliations.
Make sure you choose a different value in the Account field for each record. Accept default values for all other fields.
Log out of the client.
Add the JavaScript files that Siebel Open UI uses to render the carousel:
Save the carouselrenderer.js file to the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\siebel\custom
To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.
The carouselrenderer.js file is a physical renderer that bridges a JCarousel third-party control plug-in to the list presentation model that the listpmodel.js file defines. The List Applet and the Carousel applet use the same presentation model for the business logic that it uses to display each user interface. The only difference is how Siebel Open UI renders each applet.
Save the jquery.jcarousel.js file to the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty\jcarousel
To get a copy of this file, see Article ID 1494998.1 on My Oracle Support. Oracle downloads and integrates this 3rdParty Carousel package into Siebel Open UI through the physical renderer. You must never modify these third-party plug-in files. If you require a configuration that the third-party plug-in does not meet, then you must modify the physical renderer instead of the third-party plug-in.
Add the CSS file that the third-party uses:
In Windows Explorer, navigate to the following folder:
INSTALL_DIR\applicationcontainer\webapps\siebel\scripts\3rdParty
Add the following subfolder hierarchy to the
3rdPartyfolder:\jcarousel\skins\tango\
Save the skin.css file to the
tangofolder that you added in Step b:To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.
Add files to the manifest:
Log in to a Siebel client with administrative privileges.
For more information about the screens that you use in this step, see Configuring Manifests.
Navigate to the Administration - Application screen, and then the Manifest Files view.
In the Files list, add the following files. You must add a separate record for each file:
siebel/custom/carouselrenderer.js 3rdParty/jcarousel/skins/tango/skin.css files/theme-aurora.css
Files that reside in the files folder are predefined files that you use in this example.
Administer the manifest for the applet:
Navigate to the Administration - Application screen, and then the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Physical Renderer
Name
Pharma Professional Affiliation From List Applet
In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a desktop platform.
Field Value Expression
Desktop
Level
1
In the Files list, add the following file:
siebel/custom/carouselrenderer.js
Administer the manifest for the Aurora theme:
Navigate to the Manifest Expressions view.
In the Expressions list, add the following expression.
Field Value Name
Aurora Theme
Expression
LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "AURORA_THEME"
Navigate to the Manifest Administration view.
In the UI Objects list, specify the following object.
Field Value Type
Application
Usage Type
Theme
Name
PLATFORM DEPENDENT
In the Object Expression list, add the following subexpression.
Field Value Group Name
Leave empty.
Expression
Aurora Theme
Level
1
Operator
Leave empty.
Web Template Name
Leave empty.
In the Files list, add the following files:
files/theme-aurora.css 3rdParty/jcarousel/skins/tango/skin.css
Test your modifications:
Clear the browser cache.
Open the Siebel application, and then navigate to the contact that includes the affiliations that you added in Step 1.
Make sure the affiliations view contains carousel data that runs together because no styling is defined for the carousel content. To fix this problem, do Step 8.
Modify the styling that Siebel Open UI uses to render the view:
Use a JavaScript editor to open the carouselrenderer.js file that you copied in Step 2.
Locate the following code:
itemMarkup += "</span><br>";
Modify the code you located in Step b to the following. You remove the break:
itemMarkup += "</span>";
Use a JavaScript editor to open the skin.css file.
Locate the following code:
.jcarousel-skin-tango .jcarousel-item { width: 75px; height: 75px; }Modify the code you located in Step e to the following. Bold font indicates the code that you must modify:
.jcarousel-skin-tango .jcarousel-item { width: 318px; height: 75px; }Locate the following code:
.jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 0; margin-right: 10px; }Modify the code you located in Step g to the following. Bold font indicates the code that you must modify:
.jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 10; margin-right: 10px; color: black; }
Test your modifications:
Clear the browser cache.
Refresh the view that you examined in Step 7.
Make sure the styling no longer contains carousel data that overlaps, and that each record is displayed in its own block.
Customizing List Applets to Render as Maps
A list applet can be configured to display a map instead of a standard list of records. When the list applet is configured to display a map, the following features are available:
Markers. A marker is displayed on the map at the location address for each record.
Contextual menu. Clicking a marker reveals a contextual menu with the following options:
View Details. Clicking this option opens a pop-up dialog box with details about the record associated with the marker.
Select. Clicking this option zooms in on the map to the location address associated with the marker record.
Tooltip. When you hover over a marker, a tooltip is revealed, showing the address associated with the record.
Map panning.
Map zooming.
The example in this topic describes how to customize Siebel Open UI to render a list applet as a map in Siebel Open UI.
To customize list applets to render as maps
Add files to the manifest:
Log in to a Siebel client with administrative privileges.
For more information about the screens that you use in this step, see Configuring Manifests.
Navigate to the Administration - Application screen, and then the Manifest Files view.
In the Files list, add the following files. You must add a separate record for each file:
siebel/mappmodel.js siebel/maprenderer.js
Administer the manifest for the applet:
Navigate to the Administration - Application screen, and then the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Physical Renderer
Name
Applet Name
Where Applet Name is the name of the applet in which you want the map to appear.
In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a desktop platform.
Field Value Expression
Desktop
Level
1
In the Files list, add the following file:
siebel/custom/maprenderer.js
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Presentation Mode
Name
Applet Name
Where Applet Name is the name of the applet in which you want the map to appear.
In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a desktop platform.
Field Value Expression
Desktop
Level
1
In the Files list, add the following file:
siebel/custom/mappmodel.js
Define the PM user properties:
Open Siebel Tools.
For more information about using Siebel Tools, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, query the Name property for the applet that you must modified in Step 2.
In the Object Explorer, expand the Applet tree, and then click Applet User Property.
In the Applet User Properties list, create four new applet user properties. Use values from the following table.
Name Value MapMarkerLocation
Business Component
MapMarkerTitle
Business Component
MapSelectedRowImage
The SVG image, as added in the CSS
MapUnSelectedRowImage
The SVG image, as added in the CSS
When specifying the Value field for the MapMarkerLocation and the MapMarkerTitle, the business component specified must meet at least one of the following conditions in order to properly display the markers on the map:
It must be exposed in the list column of the list applet configured for the map.
It must be exposed as an applet control or list column of a sibling applet to the map applet of the same business component.
It must be set as a private field.
Compile your work.
Define the Web Template for the map:
Open Siebel Tools.
For more information about using Siebel Tools, see Using Siebel Tools.
In the Object Explorer, expand the Applet tree, and then click Applet Web Template.
In the Applet Web Templates list, add the following applet Web template.
Property Description Name
Enter text that describes the visualization behavior. For example, enter Map View to describe a map visualization.
Type
Edit List
Web Template
Choose a Web template that defines the desired visualization. For example, choose Applet Map.
Make sure Siebel Tools defines ODH for the Web template that you defined in Step c.
For example, make sure the Web Template Definition column in Siebel Tools includes ODH for Applet Map template. If your deployment requires a new Web template, then you must define it before you can define the applet Web template. For more information about configuring Web templates, see Configuring Siebel Business Applications.
Test your modifications:
Clear the browser cache.
Refresh the list applet that you modified in Step 2.
Make sure that it renders a map.
Customizing List Applets with Class Names
You can use class names at the record level to customize list applets. Using the Applet PM user property you can define a class name based on a condition that is evaluated for each row in the list applet. Before you begin to customize a list applet:
Configure a calculated field in a business component to use for applying the class name. Make sure the calculation produces an appropriate value that can be evaluated to produce the desired effect. For example, if you want to apply the class name when the calculated value is 1, 2, or 3, make sure that your calculation can handle all possible values it may encounter and produces the desired result.
If the calculated field is not exposed in the UI, expose it as a business component private field.
Configure the Applet PM User Property as follows (assuming the calculated field is named Record State):
Name: Record State Field, Value: Record_State
For each possible value for Record_State, create a name-value pair
Name: <State1>, Value <Class1>
Name: <Staten>, Value <Classn>
Configure the Applet PM User Property to include all of the previously configured name-value pairs: Name: ClientPMUserProp, Value: Record State Field, State1, State2, ... Staten
For example, you can make a row in a list applet appear in a specific color if the revenue column has a value greater than $500. The following procedure explains how to implement this customization.
To customize a list applet to display a row in color based on the value of a specific column
Create a calculated field named "Record State" with the following calculated expression: [revenue > 500]
Expose the field as a Business Component Private field.
Configure the Presentation Model property as:
Name: Record State field
Value: Record State
For each expected value of the expression (in this example, true or false), add name-value pairs:
Name: true
Value: siebui-row-good-revenue
Name: false
Name: siebui-row-avg-revenue
Configure the properties to be exposed as Presentation Model properties:
Name: ClientPMUserProp
Value: Record State Field, true, false
List applet rows having a revenue value greater than $500 have the siebui-row-good-revenue classname added. Rows that do not meet this criterion have the siebui-row-avg-revenue classname added. You can now add the a CSS definition to show the siebui-row-good-revenue rows in the spcified color if the revenue column has a value greater than $500.
Disabling Oracle Maps
Oracle Maps is configured as the default display for the Contact List Applet and the Contact Form Applet. You can disable the use of Oracle Maps by removing the configuration specified in Customizing List Applets to Render as Maps, or by using the following procedure.
To disable Oracle Maps
Run the Siebel application.
Navigate to Sitemap, Administration Application, and then Manifest Application.
Query for the Contact List Applet in the Name field.
In Activate all the fields having Group Name as Map in the "Object Expression" Applet.
Close the Siebel application.
In Siebel Tools, navigate to Applet Query for Contact Form Applet -> Go to Control.
Deactivate the Show Route control.
Configuring the Focus in Siebel Applets
If you modify an applet, then you must make sure that your modification does not adversely affect how Siebel Open UI sets the focus in this applet. Siebel Open UI does the following work to set the focus in applets:
Sets the focus to the list column that includes a list column user property that specifies a default focus, such as DefaultFocus_Edit. This list column is a child object type of the list applet. For more information about default focus user properties, see the topic that describes Specifying the Default Applet Focus in Siebel Developer's Reference.
If the list column user property described in Step 1 does not exist, then Siebel Open UI examines the columns of a row from first to last (left to right), and then places the focus on the first editable control that it encounters. It continues examining rows in this way until it finds an editable control, or until it reaches the last column of the last row.
If Siebel Open UI does not find any editable controls in Step 2, then it sets the focus on the first non-editable control that the list applet displays.
If Siebel Open UI does not find any non-editable controls in Step 3, then it sets the focus on the div container that it uses to display the list applet.
Assume you do the following configuration:
Use Siebel Tools to add a large number of list columns to the SIS Account List Applet.
Make all list columns except the last list column read-only.
Log in to the client, navigate to the Account list view, and then run a query.
In this situation, Siebel Open UI places the focus on the last list column that the list applet contains. The div container might not contain enough room to display this list column, the list column might not be visible in the applet, and you might not be able to use the applet because the focus is on a column that you cannot access.
To configure the focus in list applets
Make sure your configuration does not set the focus to a list column or field that Siebel Open UI displays only partially or does not display at all.
You can use the following guidelines:
If Siebel Open UI sets the focus to a list column that contains a DefaultFocus list column user property, then make sure it correctly displays this list column after you finish your modifications.
If Siebel Open UI sets the focus to an editable or non-editable control, then make sure Siebel Open UI correctly displays this control after you finish your modifications.
To follow these guidelines, it might be necessary for you to rearrange the first-to-last sequence that Siebel Open UI uses to display list columns and controls in the list applet.
Adding Static Drilldowns to Applets
This topic describes how to add a static drill-down to a form applet so that the drill down object displays the name of the destination field, such as the primary account name, in the popup label when the user clicks a drill down link. If you do not do this configuration on a custom form applet that you create, then the drill down link displays the data from the field as the label, such as the account name, and not the caption text from the control. For information about how to configure a drill down on a form applet, see Article ID 539183.1 on My Oracle Support.
To add static drilldowns to applets
Create a static drilldown object on the applet that you must modify:
Open Siebel Tools.
For more information about using Siebel Tools, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, query the Name property for the applet that you must modify.
In the Object Explorer, expand the Applet tree, and then click Control.
In the Controls list, create the following control.
Property Value Field
Specify the same field that you specified in the Hyperlink Field property of the drill down object that you created in Step a.
HTML Type
Text
For more information, see the topics about creating static drill down objects in Configuring Siebel Business Applications.
In the Object Explorer, click Applet.
In the Applets list, right-click the record of the applet you are modifying, and then choose Edit Web Layout.
Add the control that you created in Step e to the layout.
Compile your modifications.
Test your modifications:
Log in to the client.
Navigate to the applet you modified, and then make sure it displays your new static drill down object with the correct label.
For example, the following screen capture includes the correct Last Name label, and it displays the correct data in the field. If you do not do the configuration that this topic describes, then Siebel Open UI might display Last Name - Drilldown as the label and as the data in the field.
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
Add the user preference to your custom physical renderer and presentation model:
Use a JavaScript editor to open your custom physical renderer that renders the Opportunity List Applet.
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");Use a JavaScript editor to open your custom presentation model that renders the Opportunity List Applet.
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.
Add the expand and collapse button:
Use a JavaScript editor to open the physical renderer that you edited in Step 1, Step a.
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>";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.g et("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(); } } );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(); } }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.
Test your modifications:
Log in to the client, and then navigate to the Opportunity List Applet.
Click the expand and collapse button, and then verify that Siebel Open UI expands the applet.
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.
Displaying Applets Differently According to the Applet Mode
This topic describes how to configure Siebel Open UI to display applets differently according to the applet mode. It includes the following topics:
The applet mode is a type of behavior of an applet Web template that determines whether or not the user can or cannot create, edit, query, or delete Siebel CRM records in an applet. Edit, Edit List, Base, New, and Query are examples of applet modes. This topic describes how to modify the presentation model, or to modify the physical render and Web templates, to set the applet mode for an applet.
You can use a Web template to modify the physical layout of objects in the client that the Siebel Server renders as containers, such as the markup for an applet container. You can also use a physical renderer to modify how the client renders objects in the client, for example, to modify the markup that it uses to display a grid, menu, or tab.
For more information about applet modes and how to configure them in Siebel Tools, see the topic that describes how to control how the user creates, edits, queries, and deletes CRM data in Configuring Siebel Business Applications.
Configuring Siebel Open UI to Use Different Web Templates
The example in this topic configures Siebel Open UI to display the same applet differently according to the following responsibility that Siebel CRM assigns to the current user:
Display the applet as an editable list for the CEO.
Display the applet as an editable grid for a Business Analyst.
To implement this example, you configure Siebel Open UI to use more than one Web template, where each of these Web templates reference a different ODH:
You use the predefined Applet List (Base/EditList) Web template that references the CCAppletList_B_EL Web template. This template uses an editable list layout.
You add a new Edit Grid List Web template. This template uses an editable grid layout.
You configure manifest expressions to determine the Web template that Siebel Open UI uses according to the user who is currently using the client.
This example configures the Contact List Applet to include the following applet Web templates:
Edit List applet Web template that runs in edit list mode and uses the Applet List(Base/EditList) Web template.
Edit Grid List applet Web template that runs in edit list mode and uses the Applet List Web template.
To Configure Siebel Open UI to Use Different Web Templates According to the Applet Mode
Examine the predefined Web template that this example uses:
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Web Template.
In the Web Templates list, query the Name property for the following value:
"Applet List (Base/EditList)"
In the Object Explorer, select the Web Template, and then click Web Template File.
Notice the value that the Filename property contains.
This example uses the predefined Applet List (Base/EditList) Web template to display the applet in a list layout that the user can edit. This Web template uses the CCAppletList_B_EL Web template to display this layout. It is not necessary to modify this Web template for this example.
Add a custom Web template:
In the Object Explorer, click Web Template.
In the Web Templates list, add the following Web template.
Property Value Name
Edit Grid List
In the Object Explorer, click Web Template File.
In the Web Template Files list, add the following Web template file.
Property Value Name
Edit Grid List
Filename
Specify the file that Siebel Open UI must use to display this applet in a grid layout that the user can edit. For example:
EditGridList
Modify the applet:
Do Step 1, but also add the following applet Web template to the Contact List Applet.
Property Value Name
Edit Grid List
Web Template
Edit Grid List
You specify the Web template that you added in Step 1.
Type
Edit List
Compile your modifications.
Configure the manifest:
Log in to a Siebel client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Expressions view.
For more information about the screens that you use in this step, see Configuring Manifests.
In the Expressions list, add the following expressions.
Name Expression Exp_User 1
GetProfileAttr("Primary Responsibility Name") = "Admin"
Exp_User 2
GetProfileAttr("Primary Responsibility Name") = "CEO"
For more information, see GetProfileAttr Method.
Navigate to the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Web Template
Name
Contact List Applet
In the Object Expression list, add expressions until this list resembles the following configuration.
Note the following:
You specify the same name that you examined in Step 1 for the Web Template Name for user 1.
You specify the same name that you added in Step 2. For the Web Template Name for the user 2.
You specify the expressions that you added in Step c. These expressions configure Siebel Open UI to display an edit list for a user who possesses the CEO responsibility, and a grid for a user who possesses the Business Analyst responsibility.
If the Usage Type is Web Template, then you do not specify any files in the Files list.
Test your modifications:
Log in to the client as a user that Siebel CRM associates with the CEO responsibility, and then make sure Siebel Open UI uses the Edit List Web template to display the applet as a list.
Log out of the client, log back in to the client as a user that Siebel CRM associates with the Business Analyst responsibility, and then make sure Siebel Open UI uses the Edit Grid List Web template to display the applet as a grid.
Configuring Siebel Open UI to Use Different Physical Renderers
The example in this topic configures Siebel Open UI to download different presentation models and physical renderers depending on the following mode that the Contact List Applet must use:
Edit List mode. Download a file named list_PM.js for the custom presentation model and a file named list_PR.js for the custom physical renderer.
New mode. Download a file named new_PM.js for the custom presentation model and a file named new_PR.js for the custom physical renderer.
You can use any name for your custom presentation models and physical renderers.
To configure Siebel Open UI to use different physical renderers and presentation models according to the applet mode
Customize your presentation models and physical renderers.
In this example, assume you customized the following files:
list_PM.js
list_PR.js
new_PM.js
new_PR.js
Add your custom presentation models and physical renderers to the manifest:
Log in to the client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Files view.
For more information about the screens that you use in this step, see Configuring Manifests.
In the Files list, add the following files that you customized in Step 1.
Field Value Name
siebel/custom/list_PM.js
Name
siebel/custom/list_PR.js
Name
siebel/custom/new_PM.js
Name
siebel/custom/new_PR.js
Configure the manifest for Edit List mode:
Navigate to the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Presentation Model
Name
Contact List Applet
In the Object Expression list, add the following expression.
Field Value Expression
EditList
Level
1
In the Files list, add the following file:
siebel/custom/list_PM.js
Siebel Open UI uses the file that you specify for the presentation model that it uses to display the Contact List Applet in Edit List mode.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Physical Renderer
Name
Contact List Applet
In the Object Expression list, add the following expression.
Field Value Expression
EditList
Level
1
In the Files list, add the following file:
siebel/custom/list_PR.js
Siebel Open UI uses the file that you specify for the physical renderer that it uses to display the Contact List Applet in Edit List mode.
Configure the manifest for New mode:
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Presentation Model
Name
Contact List Applet
In the Object Expression list, add the following expression.
Field Value Expression
New
Level
1
In the Files list, add the following file:
siebel/custom/new_PM.js
Siebel Open UI uses the file that you specify for the presentation model that it uses to display the Contact List Applet in New mode.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Physical Renderer
Name
Contact List Applet
In the Object Expression list, add the following expression.
Field Value Expression
New
Level
1
In the Files list, add the following file:
siebel/custom/new_PR.js
Siebel Open UI uses the file that you specify for the physical renderer that it uses to display the Contact List Applet in New mode.
Test your modifications.
Allowing Users to Change the Applet Visualization
This topic describes how you can modify an applet so that the user can change the applet visualization.The applet visualization is a type of configuration that specifies the layout that Siebel Open UI uses to display the applet. List, form, tile, map, grid, and carousel are each an example of an applet visualization.
Siebel Open UI allows the user to set some user preferences that determine how it displays an applet. The user can navigate to the User Preferences screen, and then use the Behavior view to set these preferences. For example, if the user chooses a value in the Visualization field of the Behavior view, such as Tile, and then navigates to a list applet that includes a tile configuration, such as the Opportunity List Applet, then Siebel Open UI displays this applet as a set of tiles. If the user clicks Grid in this applet, then Siebel Open UI displays the applet as a grid and sets Grid as the default layout only for the Opportunity List Applet. This local setting takes precedence over the global setting that the user sets in the Visualization field in the Behavior view. Siebel Open UI continues to use a tile layout for all other applets that include a tile configuration. In this situation, it displays the Opportunity List Applet as a grid even if the user logs out and then logs back in to the client.
The following figure includes the Contacts List that you modify in this topic so that it allows the user to change the applet visualization. It illustrates how Siebel Open UI displays this list after you successfully finish the configuration. The user can click one of the applet visualization buttons, such as Tile, to change the applet visualization.
This topic describes how to configure the manifest for a custom applet visualization. For information about configuring the manifest for a predefined configuration, see Configuring Manifests for Predefined Visualizations.
To allow users to change the applet visualization
Modify the applet in Siebel Tools:
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, query the Name property for the applet that you must modify.
For example, query the Name property for Contact List Applet.
In the Object Explorer, expand the Applet tree, and then click Applet Web Template.
The Applet Web Templates list displays the applet modes that Siebel Tools defines for the applet. For example, Base, Edit, and Edit List. For more information about these modes, see Displaying Applets Differently According to the Applet Mode.
In the Applet Web Templates list, add the following applet Web template.
Property Description Name
Enter text that describes the visualization behavior. For example, enter Edit Tile to describe a tile visualization that allows the user to modify field values.
Sequence
Enter a value of 1000 or greater. To help you quickly recognize how Siebel Open UI uses a Web template, it is recommended that you use a value of:
1000 or greater for a Web template that Siebel Open UI uses to determine the applet visualization, such as a Tile.
1, 2, or 3 for a Web template that Siebel Open UI uses to determine the applet mode, such as Edit List.
Type
Specify the applet mode, such as Edit or Edit List.
Web Template
Choose a Web template that defines the desired visualization. For example, choose Applet Tile.
Make sure Siebel Tools defines an ODH for the Web template that you defined in Step e.
For example, make sure the "Definition" column of Web Template in Siebel Tools includes ODH for the Applet Tile Web template. If your deployment requires a new Web template, then you must define it before you can define the applet Web template. For more information about configuring Web templates, see Configuring Siebel Business Applications.
Repeat Step d and Step e for each Web template that your deployment requires.
Your completed work in Siebel Tools must resemble the following configuration.
Compile your modifications.
Configure the manifest for the applet that you modified in Step 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.
Navigate to the Administration - Application screen, and then the Manifest Files view.
In the Files list, add the following predefined files.
Field Value Name
siebel/mappmodel.js
siebel/Tilescrollcontainer.js
Navigate to the Administration - Application screen, and then the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Web Template
Name
Contact List Applet
In the Object Expression list, add the expressions that Siebel Open UI uses to render the applet for this Web template in the various visualizations and applet modes that you defined in step 1.
Your completed work must resemble the following configuration. Use the Move Up, Move Down, Indent, and Outdent buttons to create the hierarchy. Note that you do not add files in the Files list for a Web template. You only add files for a presentation model or physical renderer. For more information about how to create these object expressions, see Configuring Manifests.
Configure the manifest for the presentation model for each applet visualization that you defined in Step 1.
You add the UI object, object expressions, and files until the Manifest Administration screen resembles the following configuration.
Repeat Step g for each applet visualization that you configured in Siebel Tools.
Configure the physical renderer for each applet visualization that you defined in Step 1.
You add the UI object, object expressions, and files until the Manifest Administration screen resembles the following configuration:
If you do not do this administration, then Siebel Open UI uses the jqgridrenderer.js file for the physical renderer for a list applet, by default.
(Optional) Modify the strings that Siebel Open UI uses for the labels of the applet visualization buttons.
Do the following:
In Siebel Tools, choose the Screens application-level menu, click System Administration, and then click List of Values.
In the List of Values list, query the Type property for OUI_MODE_VISUALIZATION.
Make sure the Language-Independent Code property for each record that Siebel Tools displays in the List of Values list includes the same string that you modified in Step 2, Step g.
For example, make sure the Language-Independent Code property includes the following values:
Type Display Value Language-Independent Code OUI_MODE_VISUALIZATION
Tile
Tile
Map
Map
Grid
Grid
Siebel Open UI uses the value that the Display Value property contains as the label for each applet visualization button. To view these buttons, see the first figure in this topic Allowing Users to Change the Applet Visualization.
Compile your modifications.
Log in to the client.
Navigate to the Administration - Application screen, and then the Manifest Expressions view.
In the Manifest Expressions view, modify the following strings, as necessary.
Name Expression Tile
GetObjectAttr("VisualMode") = 'Tile'
Map
GetObjectAttr("VisualMode") = 'Map'
Grid
GetObjectAttr("VisualMode") = 'Grid'
For example, Siebel Open UI uses the Tile string in the Expression field for the Tile expression. You can modify these strings to meet your deployment requirements.
Test your modifications:
Log out of the client, and then log back in.
Navigate to the Contacts screen, and then the Contacts List view.
Verify that Siebel Open UI displays the Grid, Tile, and Map visualization buttons.
The visualization buttons must resemble the buttons that the first figure in this topic Allowing Users to Change the Applet Visualization displays.
Click each visualization button, and then verify that Siebel Open UI displays the visualization that is associated with the button that you click.
Configuring Manifests for Predefined Visualizations
The following table summarizes different manifest configurations for visualizations that come predefined with Siebel Open UI.It includes all the configuration required. For example, you do not configure any expressions or files for Web templates.
Table Configuring Manifests for Predefined Visualizations
| Visualization | Presentation Model | Physical Render | Web Template |
|---|---|---|---|
Tile |
Set Usage Type to Presentation Model. Set Name to List Applet Name. Add the following to the Files list: siebel/listpmodel.js |
Set Usage Type to Physical Renderer. Set Name to List Applet Name. Add the following to the Files list: siebel/ Tilescrollcontainer.j s |
Set Usage Type to Web Template. Set the Name to Edit Tile. |
Grid |
Same as Tile. |
Set Usage Type to Physical Renderer. Set Name to List Applet Name. Add the following to the Files list: siebel/ jqgridrenderer.js |
No manifest administration is necessary. You use Siebel Tools to configure Edit List Web templates. |
Map |
Same as Tile except add the following file: siebel/mappmodel.js |
Same as Grid except add the following file: siebel/custom/ siebelmaprenderer.js |
Set Usage Type to Web Template. Set the Name to Edit Tile. |
The following physical renderer modifies the List presentation model so that it can use the Google Map plugin for jQuery:
siebel/custom/siebelmaprenderer.js
Oracle provides this file only as an example that does a map visualization for a list applet. Oracle does not support usage of siebelmaprenderer.js with Google Maps.
Auto Tile Visualization Feature
Tile Visualization mode is a way of viewing list applets within the Siebel application. With the introduction of this new feature, all qualifying list applets can be rendered as a tile automatically which can reduce the configuration effort. The tiles implementation (and the limitations of the tiles UI) remain the same and the individual usability of each applet when rendered as a tile has to be verified and must be addressed appropriately. Users can now skip the task of configuring the manifest and repository for each tile.
This topic describes the Auto Tile Visualization feature. It includes the following topics:
The Auto Tile Visualization feature is available in Siebel CRM 20.3 Update and later releases and uses the seamless repository delivery framework. For more information about the seamless repository delivery framework, see Siebel Installation Guide for the operating system you are using and Siebel Database Upgrade Guide.
About Auto Tile Visualization of List Applets
With the introduction of the Auto Tile Visualization feature, the qualifying list applets can be rendered as a tile automatically. The tiles implementation (and the limitations of the tiles user interface) remains the same. Auto Tile Mode can be enabled by defining the application or the applet user property in the Siebel Open User Interface (UI).
List applets must meet a specific set of criteria to have the tile mode enabled for them.
Auto Tile can be enabled at the application level and can also be enabled or disabled for specific applets.
There are no enhancements to the pre-existing tiles usability.
Auto Tile visual mode will render as similar to the pre-existing tile.
Individual usability of each applet when rendered as a tile has to be verified and needs to be taken care, if it doesn’t meet the business requirements.
The content, presentation and user interface layout of these tiles can be customized.
Criteria for Rendering Applets in Tile Mode
Applet must be configured with
Type = 'Standard'.Applet must be configured with
Applet Mode = Edit Listin the respective repository view.There must be at least one Applet Web Template with
Type = 'Edit List'.Must not be configured as HIERARCHICAL list applet.
Must not have the Applet Web Template which is configured against Tile/Map web template.
Enabling Auto Tile Mode at the Application Level
The Auto Tile mode can be enabled at the application level for all qualifying list applets in the Siebel application. The example in this topic describes how to enable Auto Tile mode at the application level.
To enable Auto Tile mode at the application level
Open Siebel Tools.
For more information, see Using Siebel Tools
In the Object Explorer, click Application.
In the Applications list, query the Name property for the application that you must modify.
For example, Siebel Universal Agent.
In the Object Explorer, expand the Application tree, and then click Application User Prop.
In the Application User Properties list, add the following application user properties.
Name Value EnableAutoTile
TRUE
- Compile your modifications.
Enabling Auto Tile Mode at the List Applet level
The Auto Tile mode can be enabled at the List Applet level for all qualifying list applets in the Siebel application. The example in this topic describes how to enable Auto Tile mode at the list applet level (assuming that the application does not have the Auto Tile mode enabled) for a specific applet.
To enable Auto Tile mode at the list applet Level
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applet list, query the Name property for the applet that you must modify.
For example, SIS Account List Applet.
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Properties list, add the following applet user properties.
Name Value EnableAutoTile
TRUE
Note: Set the value of the user property to False to disable the Auto Tile mode for a specific applet, assuming that the Auto Tile mode has been enabled at the application level.Compile your modifications.
Predefined Manifest for Tiles Visualization
The manifest object definition for UI Object (Applet Physical Renderer - DEFAULT LIST APPLET) is as follows:
Type
Usage Type
Name
Applet
Physical Renderer
DEFAULT LIST APPLET
The Object Expression for UI Object (Applet Physical Renderer - DEFAULT LIST APPLET) is as follows:
Expression
Level
File Name
Tile
1
siebel/TileLayoutPR.jsNot Set
2
siebel/jqgridrenderer.jsThe manifest object definition for UI Object (Applet Web Template - DEFAULT LIST APPLET) is as follows:
Type
Usage Type
Name
Applet
Web Template
DEFAULT LIST APPLET
The Object Expression for UI Object (Applet Web Template - DEFAULT LIST APPLET) is as follows:
Expression
Level
Web Template Name
Tile
1
Tile
Auto Tile Behavior
| Application User Property | Applet User Property | Behavior |
|---|---|---|
<not set> |
<not set> |
No change from existing behavior. |
<not set> |
TRUE |
Enables Tile mode only for the specified list applet. |
<not set> |
FALSE |
No change from existing behavior. |
TRUE |
<not set> |
Enables Tile mode for all the qualifying list applets in the application. |
TRUE |
TRUE |
Enables Tile mode for all the qualifying list applets in the application. |
TRUE |
FALSE |
Enables Tile mode for all the qualifying list applets except the specified list applets in the application. |
FALSE |
<not set> |
No change from existing behavior. |
FALSE |
TRUE |
Enables Tile mode only for the specified list applet (assuming it qualifies). |
FALSE |
FALSE |
No change from existing behavior. |
Default Tile Content
Applet Web Template Items under Applet Web Template (that is, with
Type = “Edit List”) of qualified list applet, are sorted by their “Item Identifier” in ascending order.Based on this sort order, the first nine are chosen and the list columns which are mapped against these will be displayed in the Tile details.
List columns are not displayed if they are not exposed or not selected on the list applet. In this case, fewer than nine columns would be displayed.
Customizing the Tile Content
Create the following applet user property to customize the details displayed when in tile mode.
| Name |
Value |
Remarks |
|---|---|---|
|
|
<comma separated list of valid Item Identifiers> For example: |
None. |
|
For example, to configure the list of fields for Edit List Mode in Tile Visualization, use |
<comma separated list of valid Item Identifiers> For example: |
This change is applicable only for Siebel On Phone and view-based applets. |
The list column restrictions include the following:
Must be exposed and selected on the list applet. If none of the columns are mapped or selected against these, then the tile card will be empty.
A maximum of nine web template items are used.
Limited to the ones that are listed (so fewer than nine means only that set).
Any invalid (unmapped) identifiers are not displayed.
Customizing Tile Presentation for Qualifying List Applets
To customize the tile presentation for all qualifying list applets of an application, the following manifest objects must be changed to point to the custom JavaScript (JS) files.
The manifest object definition for UI Object (Applet Physical Renderer - DEFAULT LIST APPLET) is:
Type |
Usage Type |
Name |
|---|---|---|
Applet |
Physical Renderer |
DEFAULT LIST APPLET |
The Object Expression for UI Object (Applet Physical Renderer - DEFAULT LIST APPLET) changes to the following:
Expression |
Level |
File Name |
|---|---|---|
Tile |
1 |
|
Not Set |
2 |
|
Customizing Tile Presentation for a Specific List Applet
To customize the tile presentation for a specific list applet, the applet Manifest objects must be changed to point to the custom JS files. For example, the Opportunity List Applet is customized as shown here.
The manifest object definition for UI Object (Applet Physical Renderer - Opportunity List Applet) is:
Type |
Usage Type |
Name |
|---|---|---|
Applet |
Physical Renderer |
Opportunity List Applet |
The Object Expression for UI Object (Applet Physical Renderer - Opportunity List Applet) changes to the following:
Expression |
Level |
File Name |
|---|---|---|
Tile |
1 |
|
Not Set |
2 |
|
Customizing the User Interface Layout of a List Applet
The user interface layout for a list applet can be modified by making certain repository changes. The following table shows the repository changes to make in the Applet Web Template.
Field |
Description |
|---|---|
Name |
Tile. The tile name must be Tile since it is used in the seeded manifest. |
Type |
Edit List |
Sequence |
This can be any other integer. For example: 100l. |
Web Template |
This can be any valid web template, where the layout definition supports tile. For example: Applet Tile. |
Applet Web Template Items |
Create the required applet Web template items, which must be displayed in the tile card under the newly created Tile applet Web template. |
Resolving Tile Presentation for a Specific List Applet
The tile presentation may not be rendered correctly for certain list applets associated with the Custom Manifest Object definition. To resolve the tile presentation for a specific list applet, the applet Manifest objects must be changed to point to the custom JS files. For example, the Account Attachment Object Applet is customized as shown here.
The manifest object definition for UI Object (Applet Physical Renderer -Account Attachment Applet) is:
Type |
Usage Type |
Name |
|---|---|---|
Applet |
Physical Renderer |
Account Attachment Applet |
The Object Expression for UI Object (Applet Physical Renderer - Account Attachment Applet) is as follows:
Expression |
Level |
File Name |
|---|---|---|
Not Set |
1 |
|
The default JS file must be added and the order level of the Account Attachment Applet must be modified.
The Object Expression for UI Object (Applet Physical Renderer - Account Attachment Applet) changes to the following:
Expression |
Level |
File Name |
|---|---|---|
Tile |
1 |
|
Not Set |
2 |
|
Customizing Applets to Capture Signatures from Desktop Applications
A signature capture is an electronic capture of a user signature. This topic describes how to customize applets to capture signatures for calls in Siebel Open UI.
To customize applets to capture signatures for desktop applications
Copy a signature form applet that comes predefined with Siebel Open UI:
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, locate an applet that includes a signature capture configuration.
For this example, locate the following applet:
LS Pharma Call Signature Form Applet
Right-click the applet you located in Step c, and then click Copy Record.
Add an _PUI suffix to the name. For example:
LS Pharma Call Signature Form Applet_PUI
Add applet user properties:
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Props list, add the following applet user properties.
Name Value CanInvokeMethod: ClearSignature
TRUE
Signature Min Length
5
Add controls:
In the Object Explorer, click Control.
In the Controls list, add the following controls.
Name Description Clear Signature
Set the MethodInvoked property to ClearSignature.
Address
Set the Field property to Address.
Signature Capture
Set the following properties:
Set the Field property to Signature
Set the HTML Type property to InkData.
Disclaimer Text
Signature Header Text
Set the Read Only property to TRUE
Add an applet Web template:
In the Object Explorer, click Applet Web Template.
In the Applet Web Templates list, right-click the Base applet Web template, and then click Copy Record.
Set the following properties.
Property Value Name
Edit
Type
Edit
Modify the drilldown objects:
In the Object Explorer, click Drilldown Object.
In the Drilldown Objects list, modify the following value of the Hyperlink Field property of the Apply Drilldown and the Cancel Drilldown drilldown objects.
Old Value New Value Signature Header Text
Address
Copy a predefined view:
In the Object Explorer, click View.
In the Views list, locate a view that includes a signature capture configuration.
For this example, locate the following view:
LS Pharma Call Signature Capture View
Right-click the view you located in Step b, and then click Copy Record.
Add an _PUI suffix to the name. For example:
LS Pharma Call Signature Capture View_PUI
Modify the view Web template:
In the Object Explorer, expand the View tree, expand the View Web Template tree, and then click View Web Template Item.
In the View Web Template Items list, query the Name property for the following value:
LS Pharma Call Signature Form Applet
Modify the following value of the Name property.
Old Value New Value LS Pharma Call Signature Form Applet
LS Pharma Call Signature Form Applet_PUI
Modify the following value of the Applet Mode property.
Old Value New Value Base
Edit
Modify a call form applet that comes predefined with Siebel Open UI:
In the Object Explorer, click Applet.
In the Applets list, locate an applet that includes a call form configuration.
For this example, locate the following applet:
Pharma Professional Call Form Applet
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Props list, add the following applet user property.
Name Value Signature Applet NamePUI
LS Pharma Call Signature Form Applet_PUI
In the Object Explorer, click Drilldown Object.
In the Drilldown Objects list, query the Name property for Signature Capture Drilldown.
Create a copy of this record, add the new drilldown to the record copy, and update the following field:
Name New Value Signature Capture DrillDownPUI
LS Pharma Call Signature Capture View_PUI
Modify the screen:
In the Object Explorer, click Screen.
In the Screens list, locate a screen that displays the signature form and call form applets.
For this example, locate the following screen:
LS Pharma Calls Screen
In the Object Explorer, expand the Screen tree, and then click Screen View.
In the Screen Views list, query the Name property for the following value:
LS Pharma Call Signature Capture View
Create a copy of the LS Pharma Call Signature Capture View, and update the following field:
Old Value New Value LS Pharma Call Signature Capture View
LS Pharma Call Signature Capture View_PUI
Compile your modifications.
Administer your customization:
Log in to the client with administrative privileges.
Navigate to the Administration - Application screen, and then the Views view.
In the Views list, query the Name property for the following value:
LS Pharma Call Signature Capture View
Make a note of the field values of the responsibility that the client displays in the Responsibilities list.
In the Views list, add the following view.
Field Value View Name
LS Pharma Call Signature Capture View_PUI
In the Responsibilities list, add a responsibility. Use the same field values that you noted in Step c.
Navigate to the Administration - Personalization screen, and then the Applets view.
In the Applets list, add the following applet.
Field Value Name
LS Pharma Call Signature Form Applet_OUI
In the Rule Sets list, add the following rule set.
Field Value Name
Pharma Call Default
Sequence
1
Start Date
Any date that has already occurred. For example, 01/01/2012.
Add the applet LS Pharma Call Signature Form Applet_PUI to the manifest administration as follows:
Log in to the client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Administration view.
Under UI Objects, create a new record with the following values:
Interactive Flag Type Usage Type Name N
Applet
Physical Renderer
LS Pharma Call Signature Form Applet_PUI
Under Object Expression, add the following child applet for the record created in Step c.
Interactive Flag Expression Level N
Desktop
1
Under Files, set the following file values:
Interactive Flag Name N
3rdParty/jquery.signaturepad.min.js
Test your modifications.
Log in to the Siebel Open UI client (for example, Siebel Pharma application).
Navigate to a contact call where you want to capture the signature.
Click Sign to open the Signature Capture view.
Verify that the Signature Capture view applet displays correctly - that is, according to the customizations detailed in this procedure.
Customizing Applets to Capture Signatures for Siebel Mobile Applications
A signature capture is an electronic capture of a user signature. This topic describes how to customize applets to capture signatures in Siebel Mobile applications.
To customize applets to capture signatures for Siebel Mobile applications
Create a new business component and add a new field.
Create a new Signature business component with the values shown in the following table.
Property Value Name
Signature BC
Class
CSSBCBase
Create a new Signature business component field with the values shown in the following table.
Property Value Name
Signature
Type
DTYPE_NOTE
Text Length
16,383
Force Activation
Selected
Create a new Form Applet with the values shown in the following table, adding an _PUI suffix to the name.
Name Class Business Component Signature Form Applet_PUI
CSSFrameBase
Signature BC
Add applet user properties:
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Props list, add the following applet user properties as required.
Name Value CanInvokeMethod: ClearSignature
TRUE
Parent BC Name, for example:
For Siebel Pharma, Parent BC Name is: Parent BC Name: Pharma Professional Call - Mobile
For Siebel Service, Parent BC Name is: Parent BC Name: Action
For example:
Pharma Professional Call - Mobile
Action
Signature Field
Signature
Signature Length
1600
Signature Min Length
5
Use Apply Drilldown
Y
Use Cancel Drilldown
Y
Add controls:
In the Object Explorer, click Control.
In the Controls list, add the following controls.
Name Description Clear Signature
Set the MethodInvoked property to ClearSignature.
Address
Set the Field property to Address.
Note: You can create other fields such as Contact First Name in addition to the Address field as required.
Signature Capture
Set the following properties:
Set the Field property to Signature.
Set the HTML Type property to InkData.
Apply Signature
Set the MethodInvoked property to ApplySignature.
Cancel Signature
Set the MethodInvoked property to CancelSignature.
Add an applet Web template:
In the Object Explorer, click Applet Web Template.
In the Applet Web Templates list, right-click and select new record.
Set the following properties.
Property Value Name
Edit
Type
Edit
Web Template
SIA Applet Form Grid Layout - No Menu_OUI
Create the following new drilldown objects:
In the Object Explorer, click Drilldown Object.
In the Drilldown Objects list, configure the values shown in the following table as required for the Apply Drilldown and the Cancel Drilldown drilldown objects.
Note: The values shown in the following table (for View, Business Component, and so on) are examples only - you can choose a different view and business component as required.Name Hyperlink Field View Source Field Business Component Destination Field Apply Drilldown
Address
LS Pharma Professional Call Execute View - Mobile
Activity Id
Pharma Professional Call - Mobile
Id
Cancel Drilldown
Address
LS Pharma Professional Call Execute View - Mobile
Activity Id
Pharma Professional Call - Mobile
Id
Expose the Controls in the Applet Web Template item as follows:
In the Object Explorer, click Applet.
Select Applet "Signature Form Applet_PUI", then right-click and select Edit Web Layout.
Select Edit mode.
Select and move the Signature field and the Apply Signature, Cancel Signature, and Clear Signature buttons on the Web Layout.
Compile your modifications.
Add the applet Signature Form Applet_PUI to the manifest administration as follows:
Log in to the client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Administration view.
Under UI Objects, create a new record with the following values:
Interactive Flag Type Usage Type Name N
Applet
Physical Renderer
Signature Form Applet_PUI
Under Object Expression, add the following child applet for the record created in Step c.
Interactive Flag Expression Level N
<Empty>
2
N
Mobile
1
Under Files, set the following file values:
Interactive Flag Name N
3rdParty/jquery.signaturepad.min.js
N
siebel/signviewpr.js
Under UI Objects, create a new record with the following values:
Interactive Flag Type Usage Type Name N
Applet
Presentation Model
Signature Form Applet_PUI
Under Object Expression, add the following child applet for the record created in step f.
Interactive Flag Expression Level N
Mobile
1
Under Files, set the following file values:
Interactive Flag Name N
siebel/signviewpm.js
Test your modifications.
Log in to the Siebel Open UI client.
Navigate to a view where the Signature Form Applet_PUI is exposed.
Verify that the Signature Capture view applet displays correctly - that is, according to the customizations detailed in this procedure.
Customizing Controls
This topic describes how to customize a control. It includes the following information:
This book includes a number of other topics that also customize controls. For more information about:
Overview information about customizing controls, see Examples of How You Can Customize Siebel Open UI, Example Client Customizations, and Guidelines for Customizing Siebel Open UI
Adding a control to a presentation model, see Customizing the Setup Logic of the Presentation Model
Modifying a list column control so that Siebel Open UI stores the value of the control check box, see Customizing the Presentation Model to Identify the Records to Delete
Customizing control user properties, see Customizing Control User Properties for Presentation Models
Accessing a proxy object for an active control, see Accessing Proxy Objects
Customizing control themes, see Customizing Themes
Rendering controls according to control type, see Customizing List Applets to Render as Maps
Adding a control that does a static drill-down, see Adding Static Drilldowns to Applets
Customizing controls in an applet, see Customizing Applets to Capture Signatures from Desktop Applications
Adding controls to the calendar, Customizing a Resource Scheduler
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:
Log in to a Siebel client with administrative privileges.
Navigate to the Administration - Application screen, and then the Manifest Files view.
In the Files list, add the following new files.
Field Value Name
siebel/custom/clientctrlpmodel.js
Navigate to the Administration - Application screen, and then the Manifest Administration view.
In the UI Objects list, specify the following applet.
Field Value Type
Applet
Usage Type
Presentation Model
Name
Account List Applet
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
In the Files list, add the following file:
siebel/custom/clientctrlpmodel.js
To refresh the manifest, log out of the client, and then log back in to the client.
Test your work:
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.
Creating Property Sets for Client- Side Controls
You can use the following code to create a property set for a control that Siebel Open UI displays in the client:
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// Specify the property set for the control
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
var variable_name= SiebelAppFacade.PresentationModel.GetCtrlTemplate
("control_name", "display_name", consts.get( "control_type" ), column_index );
ctrlComboInfo.SetPropertyStr(consts.get("control_property"),
"property_attribute")
where:
control_name, display_name, control_type, and column_index are arguments of the GetCtrlTemplate method. For more information about these arguments, see GetCtrlTemplate Method.
control_property specifies a control property. For example, SWE_PROP_WIDTH specifies the width of the control, in pixels.
property_attribute specifies an attribute of the control that control_property specifies. For example, 200 sets the width of the control to 200 pixels.
For example, the following code creates a variable named ctrlComboInfo for the TestCombo control. It sets the width and height of this control to 200 pixels, and centers it
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// Specify the property set for the control
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// Specify the property set for the control
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
var ctrlComboInfo = SiebelAppFacade.PresentationModel.GetCtrlTemplate ("TestCombo",
"Test Drop Down", consts.get( "SWE_CTRL_COMBOBOX" ), 10 );
ctrlComboInfo.SetPropertyStr(consts.get("SWE_PROP_WIDTH"), "200")
ctrlComboInfo.SetPropertyStr(consts.get("SWE_PROP_HEIGHT"), "200")
ctrlChkboxInfo.SetPropertyStr(consts.get("SWE_PROP_JUSTIFICATION"), "center");
For more information about control_property and property_attribute, see Properties That You Can Specify for Client-Side Controls. For more information about other control properties that you can specify, such as Sort or Vertical Scroll, see the topic that describes the control Applet Object Type in Siebel Object Types Reference.
Properties That You Can Specify for Client-Side Controls
The following table describes the properties that you can specify for controls. The Comparable Applet Control or Description column of this table includes the name of the applet control property that is similar to the SWE control property. If no applet control property is similar to the SWE control property, then this column includes a description. For more information about these applet control properties, see the topic that describes controls in the applet object types section of Siebel Object Types Reference.
Table Properties That You Can Specify for Controls
| SWE Control Property | Comparable Applet Control or Description |
|---|---|
SWE_PROP_CURR_FLD |
Identifies the field that is currently chosen. |
SWE_PROP_CASE_SENSITIVE |
Specifies to make text in the control case-sensitive. |
SWE_PROP_DISP_FORMAT |
Display Format |
SWE_PROP_DISP_MODE |
HTML Display Mode |
SWE_PROP_DISP_MAX_CHARS |
HTML Max Chars Displayed |
SWE_PROP_DISP_NAME |
Specifies the label that Siebel Open UI uses to identify this control in the client. |
SWE_PROP_FLD_NAME |
Field Name |
SWE_PROP_HEIGHT |
HTML Height |
SWE_PROP_HTML_ATTRIBUTE |
HTML Attributes |
SWE_PROP_IS_BOUND_PICK |
Specifies that the control is a bound picklist. |
SWE_PROP_IS_ENCODE |
HTML Display Mode |
SWE_PROP_INPUTMETHOD |
MethodInvoked |
SWE_PROP_JUSTIFICATION |
Text Alignment |
SWE_PROP_LABEL_JUSTIFICATION |
Specifies the text alignment for a column header that Siebel Open UI displays in a list control. |
SWE_PROP_MAX_SIZE |
HTML Max Chars Displayed |
SWE_PROP_NAME |
Name |
SWE_PROP_PICK_APLT |
Pick Applet |
SWE_PROP_POPUP_HEIGHT |
Specifies the height of the popup dialog box, in pixels. |
SWE_PROP_PROMPT |
Prompt Text |
SWE_PROP_POPUP_WIDTH |
Specifies the width of the popup dialog box, in pixels. |
SWE_PROP_IS_DYNAMIC |
Specifies whether or not Siebel Open UI dynamically displays values in the control. |
SWE_PROP_SPAN |
Specifies to span control contents across multiple fields. This property is not applicable for list controls. |
SWE_PROP_SEQ |
HTML Sequence |
SWE_PROP_TYPE |
Type, HTML Type, or Field Retrieval Type |
SWE_PROP_WIDTH |
Width |
SWE_PROP_COLINDEX |
Specifies the index number of a column. |
SWE_PROP_ICON_MAP |
Bitmap |
SWE_PROP_IS_SORTABLE |
Sort |
Text Copy of the Client Control Presentation Model File
The following code from the clientctrlpmodel.js file adds example controls to the client. You can examine this code for your reference. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support:
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);
this.AddMethod( "AddClientControl", null, { core : true } );
// add into method array
this.GetClientRecordSet = function( ) {
return m_recordset ;
};
}
/* 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 );
/* Attach Post Handler for LeaveField */
this.AddMethod( "LeaveField", PostLeaveField, { sequence : false, scope : this
} );
/* 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 );
};
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;
}
}
}
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;
}
}
}
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;
}
}
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// PS Attribute info for Edit box
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
var ctrlTxtInfo = SiebelAppFacade.PresentationModel.GetCtrlTemplate
("TestEdit", "Test Edit", consts.get( "SWE_CTRL_TEXTAREA" ), 1);
this.ExecuteMethod( "AddClientControl", ctrlTxtInfo );
};
return ClientCtrlPModel;
} ());
return "SiebelAppFacade.ClientCtrlPModel";
});
}
Configuring Client-Side Multi-Select
Siebel Open UI uses a client-side control implementation to display a Multi-Select check box column in list applets. While this is primarily intended for touch-based devices where multiple selection of rows is not possible using the Shift + Click or Ctrl + Click, it can also be configured for desktop browsers.
The Multi Row Select Checkbox Display user property controls the behavior and availability of the client-side multi-select check boxes. The property can have the following values:
TOUCH-HIDE. The multi-select column does not appear on touch devices.
TOUCH-SHOW. The multi-select column appears on touch devices.
NONTOUCH-HIDE. The multi-select column does not appear on desktop and non-touch based devices.
NONTOUCH-SHOW. The multi-select column appears on desktops and non-touch based Touch devices.
When the user property is not configured for an applet, the default behavior is to show the Multi-Select column on touch devices and hide the column on non-touch devices. Administrators can use the user property to override this behavior on a per-list applet basis.
To configure a multi-select check box for a list applet
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, locate the applet that you want to configure.
Add the applet user property to the applet that you located in Step 3:
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Props list, add the following applet user property with one of the possible values:
Name Values Multi Row Select Checkbox Display
TOUCH-HIDE, TOUCH-SHOW, NONTOUCH-HIDE, NONTOUCH-SHOW
Compile the applet object.
Restart the Siebel server.
Your changes will now be visible in the Siebel Open UI client.
Displaying Control Labels in Different Languages
This topic describes how to modify the custom_messages.js file so that Siebel Open UI displays the text for a client-side control label according to the language that the client browser uses. You can also modify the presentation model instead of modifying the custom_messages.js file. For more information about how to do this, see Customizing Presentation Models to Display Control Labels in Different Languages. For more information about language support, see Languages That Siebel Open UI Supports.
To display control labels in different languages
Create the following folder structure, if it does not exist, where <lang> is the language code such as DEU:
AI_DIR/siebel/scripts/siebel/custom/<lang>
Copy custom_messages.js from below folder to the folder created in Step 1:
AI_DIR/siebel/scripts/siebel/samples
Open the file you saved in Step 2 using a JavaScript editor.
Locate the following code:
function _SWEgetGlobalCustomMsgAry() { if (! _SWEbCMsgInit) { SWEbCMsgInit = true; } return _SWEcustommsgAry; }Add the code in bold to the code that you located in Step 4:
function _SWEgetGlobalCustomMsgAry() { if (! _SWEbCMsgInit) { SWEbCMsgInit = true; SWEcustommsgAry["CUSTOM_ID"] = "custom_string"; } return _SWEcustommsgAry; }where:
CUSTOM_ID is a string that you use to reference the custom_string. You can use any value for CUSTOM_ID.
custom_string is a text string that includes text that you manually translate into the language that your deployment requires.
Add the following code at the beginning of the new file:
SiebelApp.S_App.LocaleObject.m_bClientStringsInitialized = false;
Save the file.
Navigate to the Administration - Application screen of your Siebel client, then the Manifest Expressions view.
Note: You need to have administrative privileges in the Siebel client.In the Expressions list, add the following expression for the language where the string will be used:
Field Name Expression Value
<Name of the expression> such as Dutch
Language()= “<Language code>” such as “DEU”
Navigate to the Manifest Files view to add the new file under manifest files.
Add an entry for custom_message.js in the new folder created in Step 1 as follows:
siebel/custom/deu/custom_messages.js
Navigate to the Manifest Administration view to add a new record.
In the Objects UI list, create a new entry and specify the object as follows:
Field Type Usage Type Name Value
Application
Common
PLATFORM INDEPENDENT
In the Object Expression list, add the following subexpression:
Field Group Name Expression Level Value
Not Applicable
DEU
1
In the Files list, click Add.
In the Files dialog box, query for the path and filename that you added in Step 11.
Click Go.
Save the changes to the manifest.
Customized translated string is now available for creating client side control via customized presentation model. Use the locale object GetLocalString API to retrieve the customized string. Update customized presentation model and provide appropriate values to the GetCtrlTemplate API to retrieve the string.
Log out of the Siebel client, clear browser cache, and log in again.
Test your work:
Navigate to the screen that includes the control that Siebel Open UI uses to display the translated string that you modified in Step 4.
Customizing Presentation Models to Display Control Labels in
This topic describes how to customize a presentation model so that it displays a client-side control label in a different language instead of modifying the custom_messages.js file.
To customize presentation models to display control labels in different languages
Use a JavaScript editor to open the presentation model that Siebel Open UI uses to display the control label that you must modify.
For more information, see About the Presentation Model.
Add the following code to call the ExecuteMethod method that the presentation model uses. You can add this code anywhere in the presentation model file:
pm.ExecuteMethod("AddLocalString","ID","custom_string");where:
AddLocalString is the name of the method that ExecuteMethod calls to add your custom string.
For more information about how this example uses ID and custom_string, see Displaying Control Labels in Different Languages. For more information about these methods, see AddLocalString Method and ExecuteMethod Method.
For example, add the following code:
pm.ExecuteMethod("AddLocalString", "New", "Neu"); pm.ExecuteMethod("AddLocalString", "Delete", "Löschen");Test your work:
Navigate to the screen that includes the control that Siebel Open UI uses to display the translated string that you modified in Step 2.
Verify that the control displays the translated string.
Customizing the Busy Cursor to Display While a Business Service Executes
You can force a busy cursor to appear while a selected business service is executing. The example in this topic describes how to configure this behavior.
There is a system preference for Busy Cursor Timeout. For more information, see About Preferences.
To display a busy cursor while a Business Service executes
Create an applet with a button that invokes an always-on method.
Create a physical renderer to respond to the method invocation.
Create a business service to be invoked.
The following is an example of a business service.
function Service_PreInvokeMethod (MethodName, Inputs, Outputs) { var nReturn = ContinueOperation; switch (MethodName) { case "ExampleMethod": var count; for (var i=1; i<4000000; i++) { Outputs.SetProperty("OutputProperty", "OutputValue"); Outputs.SetProperty("ReturnedProperty", Inputs.GetProperty("InputProperty")); count++; } Return = CancelOperation; break; } return (nReturn); }
Make sure the business service is invokable from the client using the application user property.
Update the physical renderer to invoke the business service workOnBusyCursor control upon method invocation.
Test your work:
Navigate to any list applet, and then verify that it displays the control that you added.
Creating Property Sets for Client Side Controls
You can use the following code to create a property set for a control that Siebel Open UI displays in the client:
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// Specify the property set for the control
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
var variable_name= SiebelAppFacade.PresentationModel.GetCtrlTemplate
("control_name", "display_name", consts.get( "control_type" ), column_index );
ctrlComboInfo.SetPropertyStr(consts.get("control_property"),
"property_attribute")
where:
variable_name specifies the name of a variable.
control_name, display_name, control_type, and column_index are arguments of the GetCtrlTemplate method. For more information about these arguments, see GetCtrlTemplate Method.
control_property specifies a control property. For example, SWE_PROP_WIDTH specifies the width of the control, in pixels.
property_attribute specifies an attribute of the control that control_property specifies. For example, for the SWE_PROP_WIDTH property, a value of 200 sets the width of the control to 200 pixels.
For example, the following code creates a variable named ctrlComboInfo for the TestCombo control. It sets the width and height of this control to 200 pixels, and centers it
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// Specify the property set for the control
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// Specify the property set for the control
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
var ctrlComboInfo = SiebelAppFacade.PresentationModel.GetCtrlTemplate ("TestCombo",
"Test Drop Down", consts.get( "SWE_CTRL_COMBOBOX" ), 10 );
ctrlComboInfo.SetPropertyStr(consts.get("SWE_PROP_WIDTH"), "200")
ctrlComboInfo.SetPropertyStr(consts.get("SWE_PROP_HEIGHT"), "200")
ctrlChkboxInfo.SetPropertyStr(consts.get("SWE_PROP_JUSTIFICATION"), "center");
For more information about control_property and property_attribute, see Properties That You Can Specify for Client-Side Controls. For more information about other control properties that you can specify, such as Sort or Vertical Scroll, see the topic that describes the control Applet Object Type in Siebel Object Types Reference.
Properties That You Can Specify for Client Side Controls
The following table describes the properties that you can specify for controls. The Comparable Applet Control or Description column of this table includes the name of the applet control property that is similar to the SWE control property. If no applet control property is similar to the SWE control property, then this column includes a description. For more information about these applet control properties, see the topic that describes controls in the applet object types section of Siebel Object Types Reference.
Table Properties That You Can Specify for Controls
| SWE Control Property | Comparable Applet Control or Description |
|---|---|
SWE_PROP_CURR_FLD |
Specifies the field that is currently chosen. |
SWE_PROP_CASE_SENSITIVE |
Specifies to make text in the control case-sensitive. |
SWE_PROP_DISP_FORMAT |
Display Format |
SWE_PROP_DISP_MODE |
HTML Display Mode |
SWE_PROP_DISP_MAX_CHARS |
HTML Max Chars Displayed |
SWE_PROP_DISP_NAME |
Specifies the label that Siebel Open UI uses to identify this control in the client. |
SWE_PROP_FLD_NAME |
Field Name |
SWE_PROP_HEIGHT |
HTML Height |
SWE_PROP_HTML_ATTRIBUTE |
HTML Attributes |
SWE_PROP_IS_BOUND_PICK |
Specifies that the control is a bound picklist. |
SWE_PROP_IS_ENCODE |
HTML Display Mode |
SWE_PROP_INPUTMETHOD |
MethodInvoked |
SWE_PROP_JUSTIFICATION |
Text Alignment |
SWE_PROP_LABEL_JUSTIFICATION |
Specifies the text alignment for a column header that Siebel Open UI displays in a list control. |
SWE_PROP_MAX_SIZE |
HTML Max Chars Displayed |
SWE_PROP_NAME |
Name |
SWE_PROP_PICK_APLT |
Pick Applet |
SWE_PROP_POPUP_HEIGHT |
Specifies the height of the popup dialog box, in pixels. |
SWE_PROP_PROMPT |
Prompt Text |
SWE_PROP_POPUP_WIDTH |
Specifies the width of the popup dialog box, in pixels. |
SWE_PROP_IS_DYNAMIC |
Specifies whether or not Siebel Open UI dynamically displays values in the control. |
SWE_PROP_SPAN |
Specifies to span control contents across multiple fields. This property is not applicable for list controls. |
SWE_PROP_SEQ |
HTML Sequence |
SWE_PROP_TYPE |
Type, HTML Type, or Field Retrieval Type |
SWE_PROP_WIDTH |
Width |
SWE_PROP_COLINDEX |
Specifies the index number of a column. |
SWE_PROP_ICON_MAP |
Bitmap |
SWE_PROP_IS_SORTABLE |
Sort |
Text Copy of the Client Control Presentation Model File
The following code from the clientctrlpmodel.js file adds example controls to the client. You can examine this code for your reference. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support:
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);
this.AddMethod( "AddClientControl", null, { core : true } );
// add into method array
this.GetClientRecordSet = function( ) {
return m_recordset ;
};
}
/* 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 );
/* Attach Post Handler for LeaveField */
this.AddMethod( "LeaveField", PostLeaveField, { sequence : false, scope : this
} );
/* 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 );
};
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;
}
}
}
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;
}
}
}
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;
}
}
ClientCtrlPModel.prototype.UpdateModel = function(psInfo){
/// PS Attribute info for Edit box
SiebelAppFacade.ClientCtrlPModel.superclass.UpdateModel.call( this, psInfo );
var ctrlTxtInfo = SiebelAppFacade.PresentationModel.GetCtrlTemplate
("TestEdit", "Test Edit", consts.get( "SWE_CTRL_TEXTAREA" ), 1);
this.ExecuteMethod( "AddClientControl", ctrlTxtInfo );
};
return ClientCtrlPModel;
} ());
return "SiebelAppFacade.ClientCtrlPModel";
});
}
Configuring Client Side Multi-Select
Siebel Open UI uses a client-side control implementation to display a Multi-Select check box column in list applets. While this is primarily intended for touch-based devices where multiple selection of rows is not possible using the Shift + Click or Ctrl + Click, it can also be configured for desktop browsers.
The Multi Row Select Checkbox Display user property controls the behavior and availability of the client-side multi-select check boxes. The property can have the following values:
TOUCH-HIDE. The multi-select column does not appear on touch devices.
TOUCH-SHOW. The multi-select column appears on touch devices.
NONTOUCH-HIDE. The multi-select column does not appear on desktop and non-touch based devices.
NONTOUCH-SHOW. The multi-select column appears on desktops and non-touch based Touch devices.
When the user property is not configured for an applet, the default behavior is to show the Multi-Select column on touch devices and hide the column on non-touch devices. Administrators can use the user property to override this behavior on a per-list applet basis.
To configure a multi-select check box for a list applet
Open Siebel Tools.
For more information, see Using Siebel Tools.
In the Object Explorer, click Applet.
In the Applets list, locate the applet that you want to configure.
Add the applet user property to the applet that you located in Step 3:
In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
In the Applet User Props list, add the following applet user property with one of the possible values:
Name Values Multi Row Select Checkbox Display
TOUCH-HIDE, TOUCH-SHOW, NONTOUCH-HIDE, NONTOUCH-SHOW
Compile the applet object.
Restart the Siebel server.
Your changes will now be visible in the Siebel Open UI client.