METHOD AND SYSTEM FOR SELECTION OF USER INTERFACE RENDERING ARTIFACTS IN ENTERPRISE WEB APPLICATIONS USING A MANIFEST

MECHANISM

CROSS-REFERENCE TO RELATED APPLICATIONS

[0001] The present patent application claims priority to Provisional Patent Application Serial No. 61/880,918, filed September 21, 2013, and entitled "Method And System For Selection Of User Interface Rendering Artifacts In Enterprise Web Applications Using A Manifest Mechanism," which is hereby incorporated by reference herein, in its entirety and for all purposes.

FIELD OF THE INVENTION

[0002] The present invention relates to user interface rendering, and, more particularly, to a method and system for the selection of user interface rendering artifacts in web applications using a manifest mechanism.

COPYRIGHT NOTICE/PERMISSION

[0003] Portions of this patent application contain materials that are subject to copyright protection. The copyright owner has no objection to the facsimile reproduction by anyone of the patent document, or the patent disclosure, as it appears in the Patent and Trademark Office file or records, but otherwise reserves all copyright rights whatsoever. BACKGROUND OF THE INVENTION

[0004] As digital sources of information have become increasingly important in the business, academic and personal computing arenas, improved mechanisms for quickly and efficiently implementing new functionality in the applications that manage and present such information have also become increasingly important.

[0005] That being the case, the use of the Internet and web have grown I important, particularly in view of the mobility of modern business, and life generally. To meet such needs, new technologies such as cloud storage and web-based interfaces have been developed. However, providing web interfaces for applications can be cumbersome and inefficient. Such interface download entire suite interfaces, or force a rigid set of interface elements on the user. Unfortunately, there are no systems that provide a facility to configure web user interfaces, particularly on a just-in-time basis, and even more particularly, on runtime conditions.

SUMMARY OF THE INVENTION

[0006] In one embodiment, a method, system, and computer-program product for the selection of user interface rendering artifacts in web applications using a manifest mechanism are disclosed. The method includes receiving a request, evaluating an expression, and generating a physical Tenderer. The request is received at a manifest engine, and comprises a request for a physical renderer. The evaluating is performed by the manifest engine. The physical renderer is generated by the manifest engine, and the manifest engine is configured to generate the physical renderer based on a result of the evaluating.

[0007] The foregoing is a summary and thus contains, by necessity, simplifications, generalizations and omissions of detail; consequently, those skilled in the art will appreciate that the summary is illustrative only and is not intended to be in any way limiting. As will also be apparent to one of skill in the art, the operations disclosed herein may be implemented in a number of ways, and such changes and modifications may be made without departing from concepts such as those disclosed herein and their broader aspects. Other aspects, inventive features, and advantages of systems according to the concepts disclosed herein will become apparent in the non-limiting detailed description set forth below.

BRIEF DESCRIPTION OF THE DRAWINGS

[0008] The present invention may be better understood, and its numerous objects, features and advantages made apparent to those skilled in the art by referencing the accompanying drawings.

[0009] Fig. 1 A is a simplified block diagram illustrating an example of a user interface architecture, focusing on the client side, according to embodiments of the methods and systems disclosed herein.

[0010] Fig. IB is a simplified block diagram illustrating an example of a user interface architecture, focusing on the server side, according to embodiments of the methods and systems disclosed herein.

[0011] Fig. 2 is a simplified block diagram illustrating an example of a simplified display architecture, according to embodiments of the methods and systems disclosed herein.

[0012] Fig. 3 is a simplified block diagram illustrating an example of the simplified display architecture of Fig. 2 in greater detail, according to embodiments of the methods and systems disclosed herein. [0013] Fig. 4 is a simplified flow diagram illustrating an example of a process of obtaining one or more script file(s), according to embodiments of the methods and systems disclosed herein.

[0014] Fig. 5 is a simplified block diagram illustrating an example of a user interface architecture, in which a user interface element is rendered using a manifest, according to embodiments of the methods and systems disclosed herein.

[0015] Fig. 6 is a simplified block diagram illustrating an alternate example of a user interface architecture, in which a user interface element is rendered using a manifest, according to embodiments of the methods and systems disclosed herein.

[0016] Fig. 7 is a simplified flow diagram illustrating an example of a process of presenting a user interface element using a manifest, according to embodiments of the methods and systems disclosed herein.

[0017] Fig. 8 is a simplified block diagram illustrating an example of link activation in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0018] Fig. 9 is a simplified block diagram illustrating an example of a data request in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0019] Fig. 10 is a simplified block diagram illustrating an example of data access and response operations in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. [0020] Fig. 1 1 is a simplified block diagram illustrating an example of data and metadata download in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0021] Fig. 12 is a simplified block diagram illustrating an example of manifest operations in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0022] Fig. 13 is a simplified block diagram illustrating an example of mark-up language transfer in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0023] Fig. 14 is a simplified block diagram illustrating an example of the application of business logic to data/metadata in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0024] Fig. 15 is a simplified block diagram illustrating an example of the generation of presentation information in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0025] Fig. 16 is a simplified block diagram illustrating an example of the rendering of an interface element in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein.

[0026] Fig. 17 is a block diagram depicting a computer system suitable for

implementing aspects of systems according to embodiments of systems such as those disclosed herein. [0027] Fig. 18 is a block diagram depicting a network architecture suitable for implementing aspects of systems according to embodiments of systems such as those disclosed herein.

[0028] The foregoing is a summary and thus contains, by necessity, simplifications, generalizations and omissions of detail; consequently, those skilled in the art will appreciate that the summary is illustrative only and is not intended to be in any way limiting. Other aspects, inventive features, and advantages of the systems described herein and equivalents thereof, as defined solely by the claims, will become apparent in view of the examples described in the detailed description set forth below.

DETAILED DESCRIPTION Introduction

[0029] Systems such as those described herein provide methods and processes for the selection of user interface rendering artifacts in, for example, web applications using a manifest mechanism. Unfortunately, as noted, there are no systems that provide a facility to configure web user interface artifacts to be fetched and used on a just-in-time basis, particularly ones based on runtime conditions. In other systems, the use and selection of such artifacts is done in a hard-coded manner (directly in the source code), resulting in significant limitations as to operations and the functionality provided. If dynamic decision making is required, there has been no way to effect such mechanisms. Even if a static manifest mechanism were possible, such a mechanism would still fail to provide decision making such as that provided by systems such as those described herein, particularly where such systems base the provision of such functionality on dynamic conditions, and even more particularly, those existing at runtime.

[0030] An application framework such as that described herein can host a variety of applications, each having modules that are chosen and executed depending on dynamically varying conditions, such as the nature of the client device, the time of use, the business role of the user, and/or other such criteria/factors, alone or in combination with one another. Embodiments of systems employing a manifest according to embodiments of systems, such as those described herein, allow such systems to dynamically determine which specific mark-up language (e.g., HTML) rendering modules, JavaScript (JS) files, cascading style sheet (CSS) files, and other such user interface artifacts, as well as any other necessary or useful such artifacts, are needed to render the desired user interface at any given point in time.

[0031] Further, as used herein, a user interface according to embodiments of the methods and systems disclosed herein comprehends can be composed of several logical areas, including:

• The overall user interface ( a composite of the rest ), also called the application

• Views ( composites of applets )

• Applets ( which display transactional data )

• Navigation elements (also referred to herein as navigation tabs or navigation trees)

• Menus

• Toolbar

[0032] An architecture according to embodiments of the methods and systems disclosed herein provides, among others, the following features:

• Declarative configuration of artifacts (e.g., web artifacts such as JS and CSS files), as well as templates and mark-up language-based Tenderers (e.g., HTML Tenderers).

• Dynamic, expression-based configuration of artifacts, providing the ability to specify conditions under which a particular artifact should be used, via an expression language, thus providing just in time usage of these artifacts.

• Ability to specify (and thus vary) artifacts used for different parts of the user

interface, to the level of granularity of a typical application user interface component (e.g., form, list, menu, navigation tab, navigation tree, and the like). A significant feature of such an approach is the implementation of a strong underlying metadata infrastructure and expression evaluation infrastructure, which facilitates the writing of expressions based on static as well as dynamically-varying metadata, and therefore affords a flexible level of granularity (at the time of use, as well as over the lifetime of the user interface).

Example Architectures and Processes

[0033] Fig. 1 A is a simplified block diagram illustrating an example of a user interface architecture, focusing on the client side, according to embodiments of the methods and systems disclosed herein, can be performed. Depicted in Fig. 1 A is a user interface architecture (client-side) 100. The two primary elements of user interface architecture 100 depicted in Fig. 1 A are a client 1 10 (e.g., a web browser and/or system executing same) and a server 120. Server 120 includes an object manager 122 and a repository object configuration 124. Object manager 122 is responsible for processing requests from client 110. Such requests can include requests for data, metadata (such as repository

information), as well as performing other such functions. For example, in certain embodiments, object manager 122 (also referred to herein as an application object manager), upon receipt of such requests, determines information regarding the destination view, identifies business logic to be applied before and during the navigation, and identifies other information that may be related (and potentially necessary) to the display of that view. As part of these functions, object manager 122 accesses a repository object configuration 124. Repository object configuration 124 provides information, such as configuration parameters and the like, related to the display of data and other information based on repository information, in the affected screen/view/applet to be displayed. As will be appreciated in view of the present disclosure, information regarding the

screen/view/applet (e.g., screen/view/applet definitions) can, for example, be maintained in an associated repository.

[0034] Turning now to client 1 10, components thereof depicted din Fig. 1A include a client environment 130, one or more style sheets (depicted in Fig. 1A as style sheets 135), and one or more templates (depicted in Fig. 1A as templates 140), among other possible such components. In turn, client environment 130 includes a scripting library 150 (which, in turn, includes controls 152 and a script library 154 (e.g., a JS Library)), user interface (UI) elements 155 (which, in turn, include layout data and data bindings 156, an extension application programming interface (API) 157 (e.g., a JS extension API), and a proxy 158 (e.g., a JS proxy)), and custom display client scripts 160 (e.g., one or more client browser scripts). An example of a scripting library such as scripting library 150 is a Java-based query library, such as a JQuery library. In such an implementation, controls 152 can be effected using JavaScript (JS) UI controls, while script library 154 can be implemented as a JS library. As will be appreciated, j Query is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery's syntax is designed to simplify navigating a document, selecting elements, creating animations, handling events, and developing applications. jQuery also provides capabilities for developers to create plug-ins on top of a JS library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

[0035] Also supported by client 1 10 are style sheets 135, which include a user interface (UI) style information and UI layout information 164. Client 1 10, in the depiction illustrated in Fig. 1 A, also include templates 140, which, in turn, include a mark-up language composition module 166 and a conditional rendering module 168. While style sheets 135 and templates 140 are depicted in Fig. 1 A as being included in client 1 10, it will be appreciated in light of the present disclosure that, in fact, such style sheets and templates are typically maintained on server 120 and downloaded to client 1 10 as part of the operations performed in a user interface architecture such as user interface architecture 100.

[0036] Similarly, in such embodiments, layout data and data bindings 156 can be implemented to interact with extension API 157 (e.g., a JS customization API) and a proxy such as proxy 158 (e.g., implemented by a JS proxy). In comparable fashion, custom display client scripts can be, for example, implemented by custom browser scripts. As will be appreciated in light of the present disclosure, the elements of scripting library 140 (e.g., controls 152 and script library 154) and UI elements 155 (e.g., layout data and data bindings 156, extension API 157 and proxy 158) represent objects that are configurable at runtime for the system. This is also true of UI style information 162 and UI layout information 164 of style sheets 135. Also configurable, though at design-time are the configurable objects represented by templates 140 (e.g., mark-up language composition module 166 and conditional rendering module 168) and repository object configuration 124. As will be further appreciated, custom display client scripts 160 can be either included (and, in some embodiments, generated) are runtime (and thus be considered runtime configurable objects), or can be configured at design-time (and thus be considered design-time configurable objects).

[0037] Fig. IB is a simplified block diagram illustrating an example of a user interface architecture, focusing on the server side, according to embodiments of the methods and systems disclosed herein, can be performed. Illustrated in Fig. IB is a user interface architecture (server-side) 170. User interface architecture 170 includes a client 172 and a server 174. As will be appreciated, the focus of the illustration in Fig. IB is more detailed with regard to the server (server 174) rather than the client (client 172). Client 172 includes a presentation model 176 and a physical control 178, as examples of components thereof. Presentation model 176 can be implemented, in certain embodiments, using one or more scripts (e.g., such as a JS file), which determine the logic to be applied to data made available to client 172. As will be appreciated, in certain embodiments, the client-side scripting with which presentation model 176 can be implemented, allows for such scripting to be performed without requiring interaction with server 174 once such scripts have been made available to client 172. Functions that can be provided by presentation model 176 include the capture of client interaction (e.g., link activation, interaction with a screen control, and the like). Constructs such as presentation model 176 also provides for different logic processing (e.g., business logic) based on the hardware and software platform supporting client 172 (e.g., desktop, mobile device, operating systems, and so on). Presentation model 176 can be implemented using a collection of object properties and associated methods, and thus, can provide a logical abstraction layer of repository metadata. Further, while presentation model 176 need not perform rendering operations of physical mark-up language and/or style sheets, presentation model 176 can interact with server 174 if need be. As is also depicted in Fig. IB, presentation model 176 is bound to physical control 178. Physical control 178 is used to render presentation model 176 as part of rendering the user interface elements that make up the user interface presented to the use. Display of physical control 178 is implemented to display a corresponding applet control, and renders the container for the metadata, data, and physical event bindings. Elements bound to physical control 178 include presentation model 176 (which results in the presentation model methods of present model 176 to physical control 178) and data (which provides access to the properties in presentation model 176).

[0038] Turning now to server 174, it will be appreciated that, as depicted in Fig. IB, the presentation model maintained on client 172 (presentation model 176) is, in fact, created by components of user interface architecture 170 that exist at server 174. That being the case, server 174 is depicted as producing a number of presentation models (depicted in Fig. IB as presentation models 180(1)-(N) and associated custom Tenderers (depicted in Fig. IB as custom Tenderers 181(1)-(N). The presentation models 180 (l)-(N) and custom Tenderers 181(1)-(N) are generated by various mechanisms within server 174 in the case of presentation model 180(1) and custom Tenderer 181(1), view information 185 is used by an applet 190, which, in turn, generates presentation model 180(1) and custom Tenderer 181(1), as well as a frame customization package 191. Applet 190 also generates region information 192. Applet 190, either by way of region information 192 or directly, can generate, through its use of objects, rendering of user interface elements at the screen , view, applet or control level, for example. Server 174 can generate not only user interface elements such as applet 190, but can also generate other such user interface elements (e.g., as depicted in Fig. IB, a control 193). As depicted in Fig. IB, information regarding control 193, can be used to generate other elements such as presentation model 180(N) and custom renderer 181(N) as well as information that can be used in invoking method customization (e.g., depicted in Fig. IB as invoke method customization 194). Invoke method customization 194 provides a mechanism that facilitates the invocation of custom script methods (e.g., JS methods, business services, or the like). For example, rendering customization in a manifest-based architecture permits the use frame customization, an equivalent customization, or to customize the physical renderer independently at any level of the object hierarchy, including at the sub-applet level for an applet control, and through the use of objects, allows rendering to occur at the screen, view, applet, or control level.

[0039] Fig. 2 is a simplified block diagram illustrating an example of a simplified display architecture, according to embodiments of the methods and systems disclosed herein. Fig. 2 illustrates the major components of a display architecture 200, which include a display client 210 and an object manager 220. Object manager 220, in turn, comprises a web engine 230 and a manifest engine 240. As will be appreciated in light of the present disclosure, display client 210 provides functionality such as that illustrated in connection with client 110 of Fig. 1 A and client 172 of Fig. IB. That being the case, display client 210 sends a request 250 to object manager 220, and more specifically to web engine 230. Web engine 230 is responsible for, among other operations and administrative functions, executing client commands and facilitating the rendering of user interface elements.

[0040] Having received request 250, web engine 230 communicates with the manifest engine 240. Manifest engine 240 is tasked with functions such as reading one or more manifests (e.g., appropriate ones of the available manifest files), evaluating one or more of the object expressions stored therein, and providing the results of those evaluations to web engine 230. Thus, in display architecture 200, manifest engine 240 accesses a manifest 260 in order to make determinations as to the one or more user interface elements to be provided to display client 210 by object manager 220 (and more specifically, web engine 230). The requisite accesses and evaluation having been performed by manifest engine 240, manifest engine 240 communicates with web engine 230, proving information regarding the script files to be provided by web engine 230 to display client 210. In the scenario depicted in Fig. 2, web engine 230, as a result of information received from manifest engine 240, sends the requisite script file (or other comparable constructs) to display client 210. In the scenario depicted in Fig. 2, such scripts are sent to display client 210 in a response 270. Response 270 can be implemented using data sets, script files, and/or other such constructs. In the example depicted in Fig. 2, response 270 includes one or more optional physical renderer scripts (depicted in Fig. 2 as a physical renderer script 280) and one or more other scripts (depicted in Fig. 2 as script(s) 290). As noted earlier (in connection with Fig. IB), the physical renderer produced and employed in the architectures described herein can be generated by a server (e.g., server 174 or object manager 220) or can be generated and installed on the client in question separately (and thus, pre-exist the process of manifest processing, for example, as described herein). Display client 210 uses the information on response 270 to render and present the desired user interface elements. The foregoing process thus allows flexible control over the user interface elements presented in response to such a request, as well as the manner in which such user interface elements are presented, their functionality, their operations, and other such characteristics.

[0041] Fig. 3 is a simplified block diagram illustrating an example of the simplified display architecture of Fig. 2 in greater detail, according to embodiments of the methods and systems disclosed herein. As noted, Fig. 3 illustrates the components and operation of a display architecture 300, which is comparable to display architecture 200, although depicted in greater detail. In the scenario illustrated in Fig. 3, display architecture 300 includes an object manager 310. As before, object manager 310 includes a web engine (depicted in Fig. 3 as a web engine 320) and a manifest engine (depicted in Fig. 3 as a manifest engine 330). As can be seen, Fig. 3 depicts these elements in greater detail. In that regard, web engine 320 can be seen to include a mode control module 340, a manifest engine interface module 342, and a rendering and download module 344. Also depicted in greater detail, manifest engine 330 can be seen to include a web engine interface module 350 and an object expression evaluation unit 355. In the manner described previously, web engine 320 communicates with a display client (not shown) and manifest engine 330, in order to provide information related to user interface elements to the display client.

Manifest engine 330, also in similar fashion, accesses a manifest 360 (a construct which can, for example, be included as part of a manifest file (not shown), in order to provide appropriate user interface element information to web engine 320 (and thus, the display client).

[0042] In operation, an object manager (e.g., object manager 310) of a display architecture (e.g., display architecture 300) is able to present one or more JS files in response to receiving a request from a display client (not shown). Such operations begin with the receipt of a request from the display client (e.g., with Visualization = Tiles'), as indicated at "1" in Fig. 3. Next, the web engine of object manager 310 (e.g., web engine 320, by way of a mode control module 340, for example) sets VisualMode = 'Tile' and PlatformName = 'Desktop' (OperationalMode = 'Edit List' by default), as indicated at "2" in Fig. 3. As indicated at "3" in Fig. 3, web engine 320 then requests (e.g., by way of manifest engine interface module 342) the following, from manifest engine 330:

• JS files, such as, optionally, a physical Tenderer and other JS files, and

• One or more web templates.

[0043] As a result, manifest engine 330 receives the request from web engine 320 at web engine interface module 350, and, in turn, requests manifest information in the form of a manifest, as indicated at "4.1" in Fig. 3. In response, manifest engine 330 receives the manifest information (depicted in Fig. 3 as manifest 360) , as indicated at "4.2" in Fig. 3. In the example illustrated in Fig. 3, the manifest information thus retrieved reflects the following information:

Query Language (Expression Engine) evaluates

[GetObjectAttr("VisualMode) = 'Tile'

AND

GetProfileAttr("Platform Name) = 'Desktop'

AND

GetObjectAttr('OperationalMode) = 'Edit List'

to TRUE

[0044] As will be appreciated in light of the present disclosure, a manifest such as manifest 360 is a set of instructions that a user interface architecture uses to identify script files (e.g., JS files) to download from the server to the client, such that the client can render the desired and appropriate screens, views, and applets.

[0045] Having received this manifest information, manifest engine 330 (and more specifically, object expression evaluation unit 355) evaluates the manifest information received, as indicated at "4.3" in Fig. 3, performing such evaluation for each expression populated in "UI Object Expressions" for the given applet, until the first true expression is encountered, for example. Typically, manifest engine 330 (object expression evaluation unit 355) performs such evaluations once for UsageType = 'Physical Renderer' and once for UsageType = 'Web Template', which is described in connection with Fig. 4 as performing expression evaluation on the object expressions in manifest file(s). It should be noted at this juncture that the use of object expressions is a flexible and powerful tool provided by embodiments of the methods and systems disclosed herein, and is discussed in greater detail subsequently.

[0046] Manifest engine 330 then returns the results to web engine 320, by way of web engine interface module 350 and manifest engine interface module 342, as indicated at "5" in Fig. 3.

[0047] As noted, such a response will include:

• JS files, such as, optionally, a physical renderer and other JS files, and

• One or more web templates

[0048] Web engine 320 uses the one or more web templates for rendering (e.g., HTML rendering) and downloads the requisite JS file(s). Next, manifest engine interface module 342 passes this information to rendering and download module 344, as indicated at "6" in Fig. 3. Rendering and download module 344 then downloads the JS files (e.g., a physical renderer (optionally) and other JS files) to the display client, as indicated at "7" in Fig. 3.

[0049] Fig. 4 is a simplified flow diagram illustrating an example of a process of obtaining one or more script file(s), according to embodiments of the methods and systems disclosed herein. That being the case, the process depicted in Fig. 4 describes, generally, operations that can be effected within display architectures such as display architecture 200 and display architecture 300. Such a process can begin with the receipt of a request from a display client by a web engine such as web engine 230 (step 400). Next, processing/screen attributes are set (step 410). At this juncture, the web engine requests the requisite script(s) and template file(s) from the manifest engine (e.g., manifest engine 240) (step 420). In response to such a request, the manifest engine accesses one or more manifest files in order to obtain the requisite manifest (e.g., manifest 260), and so, the object expressions that will be used to determine the scripts and other information to ultimately be provided to the display client. Having retrieved the requisite manifest data, the manifest engine performs object expression evaluation on the object expressions in the manifests thus obtained (step 440). Next, based on the evaluation of the object expressions, the manifest engine identifies the appropriate script(s) and template(s) to return to the web engine (step 450). Having made such identification, the manifest engine returns the script(s) and template(s) thus identified to the web engine (step 460). The web engine, having received the requisite script(s) and template(s), then proceeds to perform rendering and download of the script and template files (step 470). Having obtained these files, the web engine then downloads that information to the requesting display client for its use in presenting the desired user interface elements appropriately (step 480).

[0050] As noted, a manifest is a set of instructions that a user interface architecture uses to identify script files to download from the server to the client, such that the client can render the desired and appropriate screens, views, and applets. Such a manifest provides flexible rendering of each piece of a user interface, and can do so depending on conditions that can very dynamically at runtime. These conditions are expressed as object expressions that evaluate to true or false at any given point of time. These expressions can, for example, follow query language syntax. A query language expression that evaluates to a boolean value, and makes sense in the scope of current state of the application, can be used as a filter to govern which deployed artifact(s) is used for rendering a given area of the user interface in question. [0051] Artifacts that commonly work together to render an area of a user interface typically include:

• JS files

• CSS files

• Templates (e.g. web templates that can be configured for a given element of a user

interface and are used by a server when rendering)

• Server HTML rendering modules

[0052] A manifest according to embodiments of the methods and systems disclosed herein facilitates configuration of the above types of artifacts, which are to be used when certain dynamic conditions are satisfied in the scope of any logically independent area of a user interface. Approaches using the manifest techniques can be used with applications, views and applets, as well as other areas of a user interface and other artifacts, and can, for example, be used to configure usage of JS, CSS and Web Templates.

Manifest Configuration Views

[0053] The following is a description of manifest configuration operations according to one embodiments of the methods and systems disclosed herein. In such an embodiment, three manifest administration views are provided:

1) Manifest Administration View - This view contains the following applets o UI Objects - This is the parent applet of the main manifest administration view is used to configure a user interface object against which files are being configured. The fields are as follows

■ Inactive Flag - Each applet in the three manifest administration related views has this field, to facilitate activation/inactivation of records at each level. An inactive record is not considered by the manifest system during processing. ^■ Type - Signifies the type of user interface object that files are being configured for. Possible values include:

■ Application

■ View

■ Applet

■ Navigation

■ Toolbar

■ Menu

■ Control

■ Usage Type - Signifies what the files being configured are used for with respect to the given user interface object. Possibilities include:

■ Common - This indicates the file is downloaded at application initialization. The files against this a record with this usage type are usually bootstrap JS files.

■ Theme - This indicates the file is used for a specific application skin

■ Presentation Model - This is one of the two types of JS files

required for any particularly part of a user interface (corresponding to one of the categories allowed for in the "Type" field mentioned above.

■ Physical Renderer - This is one of the two types of JS files used in rendering elements part of a user interface (corresponding to one of the categories allowed for in the "Type" field mentioned above). ■ Web Template - This indicates that the "Web Template Name" configured on the "winning" user interface object expression record under this user interface object record corresponds to the web template record configured in tools that should be used for rendering this user interface object.

■ Server Renderer - This component is used to configure the Tenderer that should be used on the server side to render HTML from the server pertaining to this element of a user interface.

^■ Name - Name of a user interface object as configured in the corresponding tools record which contains all the metadata pertaining to this element of the user interface (e.g., when the "Type" is applet, the name is the name of applet as configured in tools). Object Expression - This applet is used to configure the expressions which should be evaluated to decide which record should be selected for choosing the relevant specific artifact (of one of the categories mentioned in the list of usage types described above). Expressions can be simple, where just a single query language API is executed, or complex, with multiple APIs being combined via logical AND/OR operators and even nested with multiple levels in some cases. The object expressions applet is a hierarchical list applet, and complex

expressions can be entered by as multiple records, entered in a hierarchy, and rooted at the topmost record that represents the entire grouping of records that constitute the complex expression. At any given level, expressions can be logically combined using the "Operator" specified on the immediate parent record. For a record that represents a simple expression, the "Expression" should be populated. For a record that represents a logical grouping of expressions, the "Group Name" and "Operator" should be populated.

The fields in the applet are as follows: Inactive Flag - Each applet in the three manifest administration views has this field, to facilitate activation/inactivation of records at each level. An inactive record is not considered by the manifest system during processing.

Group Name - If this record represents the grouping on two or more expressions, using a particular logical operator (AND/OR), it can be given a "Group Name" (e.g., the "Group Name" = 'Grid' can be the case for a record that groups 3 expressions into a compound one - "Desktop AND EditList AND Grid", as discussed in connection with the example provided in Fig. 3).

Expression - If this record represents a simple expression that is on its own as a top level expression or part of a compound expression, then

"Expression" field needs to be set.

In the example depicted in Fig. 3, three such expression records appear under the "Group Name" = 'Grid', which the following "Expression" field values:

^■ Desktop

^■ EditList

^■ Grid

Level - The level determines the order in which expressions are evaluated. Expressions at any level of the hierarchy (top level expressions or child expressions in the case of a compound expression) are evaluated in the order of ascending "levels" within any given level of the hierarchy. In the example depicted in Fig. 3, the compound expression with "Group Name" = 'Grid' is evaluated before the compound expression with "Group Name" = 'Tile', which in turn is evaluated before the compound expression (not shown expanded) with "Group Name" = 'Map'. Artifacts against the first expression that evaluates to true are picked up for download to the client, and the remaining expressions are no longer considered. • Operator - For a compound expression, the parent must specify which logical Operator to use to combine the children during evaluation. This is stored in the "Operator" field. Permissible values are based on logical relationships, and can be, for example:

. AND

• OR

• Web Template Name - If the "Usage Type" of the parent user interface

object record is 'Web Template', then the the web template file

corresponding to the "Web Template Name" configured in a user interface object extension record that evaluates to true is found from the list of web template records configured for a user interface object in tools. For other "Usage Types", the file(s) for the corresponding web artifacts are populated in the "Files" applet.

• The example depicted in Fig. 3 shows the "Contact List Applet"

configured as a user interface object of "Type" = 'Applet' and "Usage Type" = 'Physical Renderer'. When this applet is loaded, every top expression (simple or group) in the corresponding user interface object expressions applet is evaluated until an expression evaluates to TRUE. The files corresponding to the first expression that evaluates to true will be considered for download of the corresponding JS file.

• The first two top level records in a user interface object expressions applet, shown in Fig. 3, can be considered. The manifest system can interpret them (with their child expression records) as follows: i) Desktop (Platform) AND EditList (Mode) AND Grid

(Visualization) ii) Desktop (Platform) AND EditList (Mode) AND Tile

(Visualization) • As will be appreciated, for a list applet, if the Application is running on a desktop browser and the user has chosen a visualization of grid, the first expression will evaluate to true. Alternatively, for a list applet if the application is running on a desktop browser and the user has chosen a visualization of tile, the first expression will evaluate to false and the second expression will evaluate to true.

• Files - This applet is used to configure the actual file(s) that should if the

corresponding (simple or complex) user interface object expressions record evaluates to true, and is a child applet of the object expressions applet.

Given the two expressions mentioned above, the corresponding files are as shown below

1. Desktop (Platform) AND EditList (Mode) AND Grid (Visualization) - /jqgridrenderer.js

2. Desktop (Platform) AND EditList (Mode) AND Tile (Visualization) - /Tilescrol lcontainer.j s

The fields in this applet are

• Inactive Flag - Each applet in the three manifest administration related views presents this field, to facilitate activation/inactivation of records at each level. An inactive record is not considered by the manifest system during processing.

• Name - The file name. Manifest Expressions View - This view has a single applet "Expressions." This is where the object expressions are configured. The expressions seen in the expressions field of the object expressions applet in the manifest administration view are actually shorthand names, that have been assigned to real expressions using this applet (e.g., the expressions "Grid" and "EditList" seen in Fig. 3 are actually configured as [GetProfileAttrC'VisualMode") = 'Grid'] and [GetProfileAttr("OperationalModel") = 'Edit List'], respectively).

3) Manifest Files View - This is the third of the manifest administration views, with only one applet - "Files". Files that are to be configured against the any user interface object for any object expression should be first registered in this view.

[0054] When processing object expressions records for choosing the files for a given user interface object, the first expression that evaluates to TRUE is selected and the file against it is downloaded to the browser. However, an exception to this rule is that, for user interface object records with Type = 'Application' and Usage Type = 'Common', instead of only the first expression being considered, all expressions in the object expression list are considered, and files against all expressions that evaluate to TRUE are aggregated and downloaded to the browser. A summary of file selection rules appears below as Table 1.

Table 1. Summary of file selection rules.

Example of Manifest Configuration: Multiple Visualization configuration for an Applet

[0055] This example demonstrates how a list applet can be configured using the manifest, to have either grid style visualization or a tiles visualization. As will be appreciated in light of the present disclosure, the following terms should be considered:

• Applet Visualization - Visual manifestation of the applet (e.g., tiles, map, grid, carousel, and the like).

• Applet Modes - Different states of an Applet depending on which the Use Cases allowed by the Applet are decided e.g. in Query Mode an Applet can be queried for records whereas in Edit Mode for a form Applet and EditList mode for a List Applet records can be created, updated, or deleted. Examples of Applet modes are Edit, New, Query, Edit List, Base

[0056] As explained earlier, information in the manifest indicates selection of the appropriate artifacts for a particular element of the user interface, based on any number of dynamic conditions, that are specified as expressions which evaluate to TRUE if the conditions are satisfied. In this example, an area of a user interface that shows an applet will use artifacts that render a grid or artifacts that render tiles, based on two dynamic conditions, the applet visualization asked for and the applet mode. The applet mode is already defaulted to EditList via existing tools configuration, whereas the applet visualization is set based on the request that comes in depending on the user action of pressing the grid or tiles buttons in the management interface.

[0057] The first step in such a process is to configure the Applet Web Template (AWT) in the applet for different visualization. An AWT file is a template file that governs part of the mark-up language (e.g., HTML) that is rendered by the server for a given applet. At this juncture, a new AWT is created for each applet visualization desired. This operation is performed such that, once the AWT to be used is determined (based on the applet visualization, applet mode and other conditions), the web engine will, in certain situations, render the web template only if the web template has been configured.

[0058] Next, the manifest administrator view is used to configure the AWT(s) that were configured for the respective applet visualizations. It will be appreciated that, in light of the present disclosure, no extra manifest configuration is required for grid visualization, if that is the default applet visualization. The manifest administrator view can then be used to configure the physical renderer for the each applet visualization. The physical renderer is a JS file that, in certain embodiments, serves a particular purpose in the overall user interface technology stack. Finally, the manifest expressions view is used to configure the expression shorthand strings as aliases to the actual query language expressions.

[0059] In summary, two categories of UI artifacts were configured in the foregoing example, a physical renderer (essentially a particular type of JS file) and a web template, to be used when the following conditions are satisfied:

1) The connecting client browser is a desktop browser (as opposed to a mobile browser)

2) The applet mode is EditList (which is typically the default mode for most list applets)

3) The chosen visualization is tiles.

[0060] When using grid visualization, no configuration is typically required, as grid visualization is typically implemented in the framework. Table 2 reflects the effects of applet visualization. As will be appreciated, the operations discussed above can be better understood in the context of Figs. 3 and 4, as noted. Further, please refer to Appendix A, which is attached hereto and is incorporated herein by reference, in its entirety and for all purposes.

[Applet Visualization [Physical Renderer |Web Template

Table 2. Effects of applet visualization.

[0061] Fig. 5 is a simplified block diagram illustrating an example of a user interface architecture, in which a user interface element is rendered using a manifest, according to embodiments of the methods and systems disclosed herein. More specifically, Fig. 5 depicts a user interface architecture 500 that includes a client computing system 510 and a server computing system 515. Client computing system 510 includes a memory and/or other computer-readable storage media, which supports execution of a display client 520. Display client 520 includes a user interface (UI) client 530, which, in turn, includes style information 532, a physical renderer 534, a presentation model 536, and a client proxy 538. As will be appreciated in light of the present disclosure, style information 532 and physical renderer 534 are depicted in Fig. 5 as having already been downloaded to client computing system 510 (and more specifically, display client 520). As noted earlier with reference to Fig. IB and 3, in the scenario depicted in Fig. 5, style information 532 and physical renderer 534 are installed separately from other components of the user interface configuration operations managed using the manifest information employed. Presentation model 536 and client proxy 538 operate to obtain the requisite scripts, templates and markup language information in order to render the desired user interface element. To this end, physical renderer 534, via a graphics driver 540 and a display adapter 545, renders a user interface element (depicted in Fig. 5 as a rendered UI element 550) in a UI window 552, which is displayed by a display 554. To achieve this end, client proxy 538 interacts with components of server computing system 515. In particular, client proxy 538 interacts with an application server 570 running on server computing system 515. More specifically, client proxy 538 interacts with an object manager 580, which is a component of application server 570. In satisfying data requests from client proxy 538, object manager 580 accesses a database 585, in order to provide runtime data to client proxy 538 and, ultimately, rendering by physical Tenderer 534 via presentation model 536. Object manager 580 also accesses a repository 590, which responds with metadata in the form of, for example, repository file 595. This metadata, associated with the data retrieved from database 585, describes the organization, definition, and other characteristics of that data.

[0062] Fig. 6 is a simplified block diagram illustrating an alternate example of a user interface architecture, in which a user interface element is rendered using a manifest, according to embodiments of the methods and systems disclosed herein. Fig. 6 depicts a user interface architecture 600 designed in a manner comparable to that of user interface architecture 500, and reflects certain components of a web interface and their arrangement therein. Thus, user interface architecture 600 depicts a display client 610 and an application server 620 coupled to one another via a web server 630. In user interface architecture 600, display client 610, by accessing application server 620 via web server 630, renders a user interface element (depicted in Fig. 6 as a rendered UI element 640) in a window displayed on a display (not shown). More specifically, a UI client 650 communicates with components of application server 620 via web server 630 by way of a presentation model 660 sending a request to a client proxy 665, which, in turn, sends a request to an object manager 670 of application server 620 via web server 630. In response, object manager 670 retrieves data from a database 675 and metadata (as a repository file 680), and provides the retrieved data/metadata to client proxy 665 via web server 630. In turn, client proxy 665 provides this dataset to presentation models 660, which, in turn, provides the dataset to a physical Tenderer 690. Physical Tenderer 690, using style information 695, renders the dataset and other user interface element as a rendered UI element 640 in a window displayed in a display (not shown).

[0063] Fig. 7 is a simplified flow diagram illustrating an example of a process of presenting a user interface element using a manifest, according to embodiments of the methods and systems disclosed herein. The process of Fig. 7 describes, generally, the operations that can occur in the rendering of a user interface element in user interface architectures such as user interface architecture 500 and/or user interface architecture 600. This process of rendering a user interface element begins with the detection of a link activation (step 700). As illustrated, the system can await the activation of a link, which comprehends a determination that the link thus activated should be processed according to the operations depicted in Fig. 7. Upon the detection of a link activation, a request (activation notice) or link activation) is received by the presentation model, and passed to the client proxy (step 710). Upon receipt of such request, the client proxy sends a comparable request to the application server, and more specifically, to the object manager thereof (step 720). At this juncture, the application server receives and processes the request, accessing the appropriate database(s) and repository/repositories, thus processing the request. Having gathered the requisite data/metadata, the application server sends these results, as, for example, a dataset, to the client proxy (step 730). Having received the data/metadata, the client proxy reads manifest information and downloads the requisite file(s) indicated thereby (step 740). The client proxy notifies the presentation model of the availability of the data/metadata, script file(s) and template(s), at which point, the presentation model applies business logic to the data/metadata, based on the downloaded script(s). Presentation model then sends the results of these operations to the physical Tenderer (step 750). In turn, the physical renderer prepares mark-up language information as per the relevant style sheet (s), and presents the results, rendering the desired user interface element (step 760). These operations are depicted and described with reference to various components of a user interface architecture in connection with Figs. 8-16.

[0064] Fig. 8 is a simplified block diagram illustrating an example of link activation in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. As noted above, Figs. 8-16 depict various points in a process of rendering a user interface in a user interface architecture 800. In Fig. 8 a display client 810 presents (e.g., a user with) a UI window 815, within which a document page 820 is displayed. Within document page 820, display client 810 displays a link 830. Link 830 can be, for example, a universal resource location (URL) or other such construct. In the scenario depicted in Fig. 8, a user activates link 830 (indicated in Fig. 8 by a link activation 835). The activation of link 830 is captured by a presentation model 840 of a user interface client 850 by the receipt of link activation 835 by presentation model 840. At this juncture, presentation model 840 sends a notification 855 to a client proxy 860 of user interface client 850. While not involved in these operations, user interface 850 is shown as also including a physical renderer 870, for completeness, as such a physical renderer can be pre- installed/pre-configured on display client 810, as part of user interface client 850 (although, as noted elsewhere, a physical renderer can be downloaded (e.g., from a web/application server)).

[0065] In response to the receipt of notification 855, client proxy 860 inspects a client cache 880 (the operation being indicated in Fig. 8 as a cache inspection 885). In so doing, client proxy 860 makes a determination as to whether requisite information (e.g., data and/or metadata related to link activation 835) is stored in client cache 880. In the case in which the desired data/metadata is stored in cache 880, a process of rendering this data proceeds to accessing manifest information, as per the operations depicted in Fig. 12 and its associated discussion, below. Alternatively, if client proxy 860 determines that the desired data/metadata has not been cached in client cache 880, client proxy 860 proceeds to make a data request to retrieve the desired data/metadata. Such an operation is described in greater detail in connection with Fig. 9, below.

[0066] Fig. 9 is a simplified block diagram illustrating an example of a data request in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. At this juncture, client proxy 860, as depicted in Fig. 9, sends a data request 900 to a web/application server 910, and more specifically to an application object manager 920 thereof. Data request 900 requests that application object manager 920 retrieve the requisite data/metadata, and provide the data/metadata retrieved to client proxy 860. As will be appreciated, elements depicted in the figures having the same reference numbers and used in other figures are intended to convey elements providing the same or comparably similar functions and operations. Application object manager 920 can provide such results to client proxy 860 in the form of, for example, a dataset.

[0067] Fig. 10 is a simplified block diagram illustrating an example of data access and response operations in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. In such a scenario, the object manager accesses runtime data and associated metadata, and notifies client proxy of availability (or actually sends requested data sets). In order to satisfy data request 900, application object manager 920 accesses a database 1000 and retrieves runtime data 1010 therefrom. Additionally, application object manager 920 accesses metadata 1020, retrieving one or more repository files (depicted in Fig. 10 as repository files 1030) and one or more templates (depicted in Fig. 10 as template(s) 1040). As noted elsewhere herein, repository file(s) 1030 include(s) information regarding the organization and other characteristics of runtime data 1010. Template(s) 1040 provide(s) information regarding layout, functionality, and other characteristics used in rendering user interface elements that may be used to display (present) runtime data 1010. Having gathered the requisite data/metadata, application object manager 920 returns this information to client proxy 860 in a response 1050 (e.g., as a dataset). As noted elsewhere herein, metadata 1020, for example, can include information such as object definitions for columns, applets, views, screens, and other such user interface elements. Runtime data 1010, retrieved from database 1000, can be, for example, actual user data that is to be displayed (presented) in the user interface element.

[0068] Fig. 1 1 is a simplified block diagram illustrating an example of data and metadata download in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. As part of responding to client proxy 860, application object manager 920 manages the download of runtime data 1010, repository file(s) 1030 and template(s) 1040 from web/application server 910 to display client 810. Thus, as depicted in Fig. 11, application object manager 920 effects the download of runtime data 1010 to display client 810, which then appears at display client 810 as runtime data 1 100 as a result of an operation depicted in Fig. 1 1 as a download runtime data operation 1 110. In a similar fashion, application object manager 920 coordinates the download of repository file(s) 1030 and template(s) 1040 to display client 810, which subsequently appear at display client 810 as metadata 1120 (which includes one or more repository file(s) 1130 and one or more template(s) 1140) as a result of a download metadata operation 1150. Alternatively, client proxy 860 can, based on response 1050, perform the requisite operations to retrieve runtime data 1010 and metadata 1020, and so act to effect the download of runtime data 1 100 and metadata 1 120 to display client 810.

[0069] Fig. 12 is a simplified block diagram illustrating an example of manifest operations in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. Display client 810, having received runtime data 1100 and metadata 1120, client proxy 860 (itself having received response 1050) can now interact with the appropriate manifest information stored at web/application server 910 by accessing one or more manifest files (depicted in Fig. 12 as manifest file(s) 1200) via, for example, application object manager 920 (or, alternatively, directly, depending on the design of user interface architecture 800). Such operation are depicted in Fig. 12 as a manifest access operation 1210, which results in the return of manifest information 1220 to client proxy 860. Having retrieved manifest information 1220, client proxy 860 examines manifest information 1220 and effects the download of the requisite information. As depicted in Fig. 12, web/application server 910 also maintains one or more scripts

(depicted in Fig. 12 as script(s) 1230) and one or more style sheets (depicted in Fig. 12 as style sheet(s) 1240). Script(s) 1230 can be implemented as, for example, one or more JavaScript files, while style sheet(s) 1240 can be implemented at one or more cascading style sheets (CSS). That being the case, script(s) 1230 and style sheets(s) 1240 are downloaded to display client 810 as script(s) 1250 and style sheet(s) 1260 through a script download operation 1270 and a style sheet download operation 1280, respectively.

[0070] Fig. 13 is a simplified block diagram illustrating an example of mark-up language transfer in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. At this juncture, user interface architecture 800 provides the requisite mark-up language information (e.g., one or more HTML files) by transferring such mark-up language information from the web-application server to the display client. Such an operation is depicted in Fig. 13, where it will be noted that the web/application server depicted in prior and subsequent figures is divided into an application server 1300 and a web server 1310. As part of the response to the request for data received from client proxy 860, web server 1310 provides information from one or more mark-up language files (depicted in Fig. 13 as mark-up language file(s) 1320) to display client 810 via a mark-up language transfer 1330. Mark-up language transfer 1330 transfers information from mark-up language file(s) 1320 to display client 810 via a web server core 1340 and a mark-up language interface 1350. The result of mark-up language transfer 1330 is the availability of mark-up language 1360 at the display client 810.

[0071] Fig. 14 is a simplified block diagram illustrating an example of the application of business logic to data/metadata in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. As display client 810 is now in possession of runtime data 1110, metadata 1 120, script(s) 1250, style sheet(s) 1260, and mark-up language information 1360, client proxy 860 sends a notification 1400 to presentation model 840, indicating the availability of the aforementioned information. Having received notification 1400, presentation model 840 applies the applicable business logic to runtime data 1 1 10 and metadata 1 120, as per script(s) 1250.

[0072] Fig. 15 is a simplified block diagram illustrating an example of the generation of presentation information in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. Having applied business logic as per script(s) 1250 to runtime data 11 10 and metadata 1 120, presentation model 840 notifies physical renderer 870 that the components of the user interface element to be rendered are now ready for rendering (depicted in Fig. 15 as a notification 1500). As is illustrated in Fig. 15, physical renderer 870 then prepares mark-up language information 1360 for rendering, in part, by a reference to style(s) sheet 1260. These operations result in the generation of mark-up language information for rendering by physical Tenderer 870 in a user interface window presented by display client 810.

[0073] Fig. 16 is a simplified block diagram illustrating an example of the rendering of an interface element in a user interface architecture employing a manifest, according to embodiments of the methods and systems disclosed herein. Mark-up language information 1360, having now been finalized, is ready for rendering in a window (not shown) of display client 810. Display client 810 thus rendered mark-up information 1360, embedded with runtime data 1 1 10 script(s) 1250, and style sheet(s) 1260, as a rendered user interface element 1600. xample Computing and Network Environment

[0074] As described above, the systems described herein can be implemented using a variety of computer systems and networks. Examples of such computing and network environments are described below with reference to Figs. 17 and 18.

[0075] Fig. 17 depicts a block diagram of a computer system 1710 suitable for implementing aspects of the present invention. Computer system 1710 includes a bus 1712 which interconnects major subsystems of computer system 1710, such as a central processor 1714, a system memory 1717 (typically RAM, but which may also include ROM, flash RAM, or the like), an input/output controller 1718, an external audio device, such as a speaker system 1720 via an audio output interface 1722, an external device, such as a display screen 1724 via display adapter 1726, serial ports 1728 and 1730, a keyboard 1732 (interfaced with a keyboard controller 1733), a storage interface 1734, a floppy disk drive 1737 operative to receive a floppy disk 1738, a host bus adapter (HBA) interface card 1735 A operative to connect with a Fibre Channel network 1790, a host bus adapter (HBA) interface card 1735B operative to connect to a SCSI bus 1739, and an optical disk drive 1740 operative to receive an optical disk 1742. Also included are a mouse 1746 (or other point-and-click device, coupled to bus 1712 via serial port 1728), a modem 1747 (coupled to bus 1712 via serial port 1730), and a network interface 1748 (coupled directly to bus 1712).

[0076] Bus 1712 allows data communication between central processor 1714 and system memory 1717, which may include read-only memory (ROM) or flash memory (neither shown), and random access memory (RAM) (not shown), as previously noted. The RAM is generally the main memory into which the operating system and application programs are loaded. The ROM or flash memory can contain, among other code, the Basic Input-Output system (BIOS) which controls basic hardware operation such as the interaction with peripheral components. Applications resident with computer system 1710 are generally stored on and accessed via a computer-readable medium, such as a hard disk drive (e.g., fixed disk 1744), an optical drive (e.g., optical drive 1740), a floppy disk unit 1737, or other storage medium. Additionally, applications can be in the form of electronic signals modulated in accordance with the application and data communication technology when accessed via network modem 1747 or interface 1748.

[0077] Storage interface 1734, as with the other storage interfaces of computer system 1710, can connect to a standard computer-readable medium for storage and/or retrieval of information, such as a fixed disk drive 1744. Fixed disk drive 1744 may be a part of computer system 1710 or may be separate and accessed through other interface systems. Modem 1747 may provide a direct connection to a remote server via a telephone link or to the Internet via an internet service provider (ISP). Network interface 1748 may provide a direct connection to a remote server via a direct network link to the Internet via a POP (point of presence). Network interface 1748 may provide such connection using wireless techniques, including digital cellular telephone connection, Cellular Digital Packet Data (CDPD) connection, digital satellite data connection or the like.

[0078] Many other devices or subsystems (not shown) may be connected in a similar manner (e.g., document scanners, digital cameras and so on). Conversely, all of the devices shown in Fig. 17 need not be present to practice the present invention. The devices and subsystems can be interconnected in different ways from that shown in Fig. 17. The operation of a computer system such as that shown in Fig. 17 is readily known in the art and is not discussed in detail in this application. Code to implement the present invention can be stored in computer-readable storage media such as one or more of system memory 1717, fixed disk 1744, optical disk 1742, or floppy disk 1738. The operating system provided on computer system 1710 may be MS-DOS®, MS-WINDOWS®, OS/2®, UNIX®, Linux®, or another known operating system.

[0079] Moreover, regarding the signals described herein, those skilled in the art will recognize that a signal can be directly transmitted from a first block to a second block, or a signal can be modified (e.g., amplified, attenuated, delayed, latched, buffered, inverted, filtered, or otherwise modified) between the blocks. Although the signals of the above described embodiment are characterized as transmitted from one block to the next, other embodiments of the present invention may include modified signals in place of such directly transmitted signals as long as the informational and/or functional aspect of the signal is transmitted between blocks. To some extent, a signal input at a second block can be conceptualized as a second signal derived from a first signal output from a first block due to physical limitations of the circuitry involved (e.g., there will inevitably be some attenuation and delay). Therefore, as used herein, a second signal derived from a first signal includes the first signal or any modifications to the first signal, whether due to circuit limitations or due to passage through other circuit elements which do not change the informational and/or final functional aspect of the first signal.

[0080] Fig. 18 is a block diagram depicting a network architecture 1800 in which client systems 1810, 1820 and 1830, as well as storage servers 1840A and 1840B (any of which can be implemented using computer system 1810), are coupled to a network 1850. Storage server 1840A is further depicted as having storage devices 1860A(1)-(N) directly attached, and storage server 1840B is depicted with storage devices 1860B(1)-(N) directly attached. Storage servers 1840A and 1840B are also connected to a SAN fabric 1870, although connection to a storage area network is not required for operation of the invention. SAN fabric 1870 supports access to storage devices 1880(1)-(N) by storage servers 1840A and 1840B, and so by client systems 1810, 1820 and 1830 via network 1850. Intelligent storage array 1890 is also shown as an example of a specific storage device accessible via SAN fabric 1870.

[0081] With reference to computer system 1810, modem 1847, network interface 1848 or some other method can be used to provide connectivity from each of client computer systems 1810, 1820 and 1830 to network 1850. Client systems 1810, 1820 and 1830 are able to access information on storage server 1840A or 1840B using, for example, a web browser or other client software (not shown). Such a client allows client systems 1810, 1820 and 1830 to access data hosted by storage server 1840A or 1840B or one of storage devices 1860A(1)-(N), 1860B(1)-(N), 1880(1 )-(N) or intelligent storage array 1890. Fig. 18 depicts the use of a network such as the Internet for exchanging data, but the present invention is not limited to the Internet or any particular network-based environment.

Other Embodiments

[0082] The present invention is well adapted to attain the advantages mentioned as well as others inherent therein. While the present invention has been depicted, described, and is defined by reference to particular embodiments of the invention, such references do not imply a limitation on the invention, and no such limitation is to be inferred. The invention is capable of considerable modification, alteration, and equivalents in form and function, as will occur to those ordinarily skilled in the pertinent arts. The depicted and described embodiments are examples only, and are not exhaustive of the scope of the invention.

[0083] The foregoing describes embodiments including components contained within other components (e.g., the various elements shown as components of computer system 1710). Such architectures are merely examples, and, in fact, many other architectures can be implemented which achieve the same functionality. In an abstract but still definite sense, any arrangement of components to achieve the same functionality is effectively "associated" such that the desired functionality is achieved. Hence, any two components herein combined to achieve a particular functionality can be seen as "associated with" each other such that the desired functionality is achieved, irrespective of architectures or intermediate components. Likewise, any two components so associated can also be viewed as being "operably connected," or "operably coupled," to each other to achieve the desired functionality.

[0084] The foregoing detailed description has set forth various embodiments of the present invention via the use of block diagrams, flowcharts, and examples. It will be understood by those within the art that each block diagram component, flowchart step, operation and/or component illustrated by the use of examples can be implemented, individually and/or collectively, by a wide range of hardware, software, firmware, or any combination thereof, including the specialized systems illustrated in the figures described herein.

[0085] The present invention has been described in the context of fully functional computer systems; however, those skilled in the art will appreciate that the present invention is capable of being distributed as a program product in a variety of forms, and that the present invention applies equally regardless of the particular type of computer- readable media used to actually carry out the distribution. Examples of computer-readable media include computer-readable storage media, as well as media storage and distribution systems developed in the future.

[0086] The above-discussed embodiments can be implemented by software modules that perform one or more tasks associated with the embodiments. The software modules discussed herein may include script, batch, or other executable files. The software modules may be stored on a machine-readable or computer-readable storage media such as magnetic floppy disks, hard disks, semiconductor memory (e.g., RAM, ROM, and flash-type media), optical discs (e.g., CD-ROMs, CD-Rs, and DVDs), or other types of memory modules. A storage device used for storing firmware or hardware modules in accordance with an embodiment of the invention can also include a semiconductor-based memory, which may be permanently, removably or remotely coupled to a microprocessor/memory system. Thus, the modules can be stored within a computer system memory to configure the computer system to perform the functions of the module. Other new and various types of computer-readable storage media may be used to store the modules discussed herein.

[0087] The above description is intended to be illustrative of the invention and should not be taken to be limiting. Other embodiments within the scope of the present invention are possible. Those skilled in the art will readily implement the steps necessary to provide the structures and the methods disclosed herein, and will understand that the process parameters and sequence of steps are given by way of example only and can be varied to achieve the desired structure as well as modifications that are within the scope of the invention. Variations and modifications of the embodiments disclosed herein can be made based on the description set forth herein, without departing from the scope of the invention

[0088] Consequently, the invention is intended to be limited only by the scope of the appended claims, giving full cognizance to equivalents in all respects.

APPENDIX A

This chapter describes an overview of Oracle's Siebel Open UI. It includes the following topics:

■ About Siebel Open UI on page 17

■ Differences Between High Interactivity and Siebel Open UI on page 21

■ About Using This Book on page 30

About Siebel Open UI

This topic describes Siebel Open UI. It includes the following information :

■ Overview of Siebel Open UI on page 17

■ Open Development Environment on page 19

■ Multiple Client Environment on page 20

■ Support for More Than One Usage on page 20

■ New Notification User Interfaces on page 21

■ Mobile Environments on page 21

Overview of Siebel Open UI

Siebel Open UI is an open architecture that you can use to customize the user interface that your enterprise uses to display business process information. These processes must meet the requirements of a wide range of employee, partner, and customer applications. You can use Siebel Tools to do these customizations, and you can also use Web standards, such as HTML, CSS, or JavaScript. Siebel Open UI uses these standards to render the Siebel Open UI client in the Web browser. It uses no proprietary technologies, such as browser plug-ins or ActiveX.

Siebel Open UI can run any Siebel business application on any Web browser that is compliant with the World Wide Web Consortium (W3C) standards. It can display data in Web browsers that support Web standards on various operating systems, such as Windows, Mac OS, or Linux. For example:

■ Internet Explorer

■ Google Chrome

■ Mozilla Firefox

■ Apple Safari

Siebel Open UI uses current Web design principles, such as semantic HTML and unobtrusive JavaScript. These principles make sure configuration for the following items remains separate from one another:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 17

■ Data and metadata that determines HTML content

■ Cascading Style Sheet configurations that determine styling and layout

■ JavaScript behavior that determines interactivity and client logic

You can modify each of these items separately and independently of each other. For example, you can configure Siebel Open UI to hide some of the objects that it displays on a Siebel screen when it displays Siebel CRM data in a list or form on the smaller footprint of a mobile device. Hiding these objects, such as menus or tabs, can help to optimize mobile screen usage. Siebel Open UI can use swipe and zoom features that are native on a tablet for the same user interface that it uses for keyboard and mouse events that are native on a desktop.

Siebel Open UI can reference a third-party resource. For example, you can configure Siebel Open UI to get data from a supplier Web site, incorporate it with Siebel CRM data, and then display this data in the client. For example, it can get literature information from a supplier, and then include this information in a detailed display that includes information about the product, such as images, diagrams, or parts lists. It can mix this information with Siebel CRM data, such as customers who own this product, or opportunities who might be interested in purchasing this product.

The architecture that Siebel Open UI uses includes well-defined customization points and a JavaScript API that allow for a wide range of customization for styling, layout, and user interface design. For more information, see "Architecture of Siebel Open UI" on page 37. For more information about the JavaScript API that Siebel Open UI uses, see Appendix A, "Siebel Open UI Application Programming Interface."

For information about deploying Siebel Open UI, including supported features, see Article ID 1499842.1 on My Oracle Support. For more information about using Siebel Tools, see Using Siebel Tools.

Customizations That You Can Make with Siebel Open UI

The following list describes a few of the example customizations that you can make with Siebel Open UI. You can use JavaScript to implement most of these examples. It is often not necessary to use Siebel Tools to do these customizations:

■ Refresh only the part of the screen that Siebel Open UI modifies.

■ Use JavaScript to display and hide fields or to configure a spell checker.

■ Configure Siebel Open UI to display a list applet as a box list, carousel, or grid.

■ Display data from an external application in a Siebel CRM view or applet.

■ Display a Siebel CRM view or applet in an external application .

■ Configure Siebel Open UI to display a Google map.

■ Use cascading style sheets to modify HTML elements, including position, dimension, and text attributes of an element.

■ Use HTML to customize the logo that your company uses or to customize the background image.

The following are a few examples of customizations that you can make with Siebel Open UI in a mobile environment:

■ Use JavaScript to configure menus, menu items, and the layout for mobile devices.

18 Config u ring Siebel Open UI Version 8. 1/8.2, Rev. A

■ Display Siebel CRM data in a Google map or add maps that include location data.

■ Create a custom mobile list.

■ Configure scrolling, swipe, swipe scrolling, infinite scrolling, and the height of the scroll area.

■ Configure a view to use landscape or portrait layout.

■ Configure toggle controls and toggle row visibility.

■ Display a high interactivity view.

For more information about these examples, see Chapter 5, "Customizing Siebel Open UI" and Chapter 9, "Customizing Siebel Open UI for Siebel Mobile."

Open Development Environment

You can use Siebel Tools or a development tool of your choice to customize Siebel Open UI so that it fits in your business environment and meets specific user requirements. You might not require Web development in many situations because the Siebel Tools configuration works for the Siebel Open UI client similarly to how it works for the current Siebel Web Client. You can use a predefined, uncustomized deployment, or you can use Siebel Tools to customize the SRF and Siebel Web templates. You can use only Web development or you can use Siebel Tools and Web development depending on the implementation requirements.

You can use Siebel Open UI with the rendering environment of your choice. You can use your preferred Integrated Development Environment (IDE) to write native JavaScript code on top of the API that Siebel CRM uses, or with the JavaScript API that Siebel Open UI uses. For more information, see Chapter 5, "Customizing Siebel Open UI." For more information about the JavaScript API that Siebel Open UI uses, see Appendix A, "Siebel Open UI Application Programming Interface."

You can use HTML, CSS, or JavaScript to add features. For example, you can do the following :

■ Create smooth transitions between swipe, accordion, or carousel views.

■ Create multifont displays.

■ Expand, collapse, or resize an applet.

■ Use open-source JavaScript code that can reuse work from the open-source development community.

■ Use your preferred JavaScript environment, or use the environment that Siebel Open UI

provides.

■ Use a plug-in, proprietary development environment, or native development environment that you choose to create a custom rendering architecture that resides top of the JavaScript API that Siebel Open UI uses.

■ Use intraworkspace communication and DOM (Document Object Model) access and manipulation through standard JavaScript programming.

■ Do a limited pilot test of your customizations in your current Siebel Server implementation while most of your users continue to use the high-interactivity client.

■ Preserve your existing customizations.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Siebel Open UI JavaScript API Support

The JavaScript API that Siebel Open UI uses replaces browser scripting. You can use your own Integrated Development Environment to write JavaScript and you can customize the JavaScript API that Siebel Open UI provides. This JavaScript API allows you to do the following :

■ Include Siebel Open UI or individual Siebel Open UI objects, such as views or applets, in a third- party user interface.

■ Integrate external content in the Siebel Open UI client.

■ Use public and documented JavaScript APIs that support your business logic without rendering objects that depend on a specific or proprietary technology.

For more information about this JavaScript API, see Appendix A, "Siebel Open UI Application Programming Interface."

Multiple Client Environment

Siebel Open UI can do the following to support different client environments:

■ Display data in any client that meets the World Wide Web Consortium standards. For example, a corporate desktop, laptop, seven-inch tablet, or ten-inch tablet. Siebel Open UI can display a typical Siebel CRM desktop client in the smaller footprint that a tablet provides.

■ Display data in a browser or any other compliant client or mobile platform.

■ Display data simultaneously from a single Siebel business application to more than one client environment.

Siebel Open UI works the same way for the following client types:

■ Siebel Web Client

■ Siebel Mobile Web Client

■ Siebel Dedicated Web Client (Thick Client)

Support for More Than One Usage

Siebel Open UI adjusts to the unique attributes of each client so that the user can do the same task on a variety of client types. It can optimize the intrinsic capabilities of each client type or device so that they provide a desirable user experience for the novice or expert user. An administrator can also configure Siebel Open UI to meet these individual skill levels. Siebel Open UI can do the following :

■ Support applications that you can customize to meet appearance and behavior requirements or usage patterns of various devices, such as smartphones, tablets, desktop computers, or laptop computers.

■ Use flexible layout options that support a tree tab layout or a custom navigation design.

■ Automatically hide tabs and navigation panes when not in use to optimize space.

■ Allow employees, partners, and customers to use the same business process and validation with different levels of access.

■ Use user interactions that are consistent with current Web applications.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

^^mg^ teractivity and Siebel Ope

■ Support layout and gesture capabilities for mobile users who use a tablet or smartphone device.

New Notification User Interfaces

Siebel Open UI includes elements from social media and smartphones that improve user productivity, such as notification applets. It combines these capabilities with other Siebel CRM innovations to provide the following capabilities :

■ Use a notification area that displays messages. The user can access this area at any time without disrupting current work.

■ Hover the mouse to toggle between summary and detail information for a record .

■ Use native Web browser functionality. For example, bookmarks, zoom, swipe, printing and print preview, and spelling checker.

■ Use intuitive system indicators for busy events or to cancel a time-consuming operation.

■ Allow navigation through a wide range of data entry and navigation capabilities through the keyboard, mouse, tablet, or gesturing.

For more information, see "Notifications That Siebel Open UI Supports" on page 541.

Mobile Environments

Siebel Open UI on a mobile interface uses the same architecture that Siebel Open UI on a desktop application uses. For more information, see Siebel Connected Mobile Applications Guide.

Differences Between High Interactivity and Siebel Open UI

This topic describes the differences that exist between the h ig h-interactivity cl ient and the Siebel Open UI client. It includes the following information :

■ How Siebel CRM Renders High-Interactivity Clients on page 22

■ How Siebel CRM Renders Siebel Open UI Clients on page 24

■ Comparison of Customization Capabilities Between High Interactivity and Siebel Open UI on page 29

■ Summary of Differences Between High Interactivity and Siebel Open UI on page 28

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Overview of Siebel Open UI■ Differerice^ge fi^il

How Siebel CRM Renders High-Interactivity Clients

The Siebel Server uses SWE (Siebel Web Engine) tags in SWE templates to create the screens that it displays in the high-interactivity client that a Siebel application uses. A control is a contained, user interface element, such as a menu, toolbar, grid, combo box, and so on. The red borders in Figure 1 identify some of the controls that the Siebel Server renders.

Figure 1. How Siebel CRM Renders High Interactivity Clients

A typical Siebel CRM Web page includes several controls that Siebel Web Template (SWT) files define. For example:

■ Menus

■ Toolbars

■ Predefined query lists

■ Screen tabs

■ Applets

In high interactivity, each of these controls, or a group of controls, occupies an HTML frame. High interactivity positions the HTML frame and uses the position and dimension information that the HTML markup contains in this frame to hardcode them into place. High interactivity gets this information from the SWT files that it processes to render the page layout.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

MfeeteWftv a nd Siebel Open UI

A high interactivity client is a type of Siebel CRM client that resembles a Windows client. It supports fewer browsers than standard interactivity, but it includes a set of features that simplify data entry. For example, page refreshes do not occur as often as they do in standard interactivity. The user can create new records in a list, save the data, and then continue browsing without encountering a page refresh. For more information about high interactivity and standard interactivity, see Configuring Siebel Business Applications.

How High Interactivity Rendering Affects Your Ability to Customize Siebel CRM

A SWE template allows you to customize a high-interactivity client only according to the capabilities that the SWE tags provide. For example, you can add a custom list applet to a view, but you cannot modify the individual objects that this list applet contains. You cannot modify a list applet to render as a carousel because a view web template can reference an applet, but it cannot reference the objects that the applet contains, and you cannot modify the ActiveX controls that do render these objects.

Figure 2 illustrates how Siebel CRM uses repository metadata to render objects in a high-interactivity client. For example, Siebel CRM uses :

■ View metadata that resides in the repository on the Siebel Server to render a view object in the client.

■ Applet metadata and Siebel CRM data that reside in the repository to render an applet object in the client.

Figure 2 illustrates how a standard, custom rendering capability is not available on the high interactivity client because Siebel CRM uses a SWE tag that it gets from the Siebel Server to render each control, and you cannot modify these tags in the client. The configuration on the client is for the most part a black box configuration. You cannot modify it, or it is difficult to modify objects in the client without using Siebel Tools to do custom binding .

Siebel

Page

Rendering on High Interactivity Client

Figure 2. How Siebel CRM Uses Repository to Render Objects in High Interactivity Clients

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

Siebel CRM uses a SWE template to render each applet directly from the Siebel repository to the user interface in the client, and each applet references a business component to get Siebel CRM metadata and data from the repository. This configuration does not allow you to customize how Siebel CRM renders this applet unless you use Siebel Tools to modify the repository. For example, you cannot use JavaScript in the client to distribute data from a repository applet across more than one pane in a Siebel screen, such as displaying the address of a contact in a pane that is separate from the pane that displays other contact details, such as the contact name and phone number. You cannot use an alternative configuration, such as your custom configuration or a third-party configuration, to bind the Siebel business layer to user interface objects, except through Siebel Tools.

Only one view that displays content typically exists in a Siebel screen, and you cannot add more views unless you use Siebel Tools to modify the repository. Siebel Tools specifies the configuration for each instance of these objects that determines how Siebel CRM binds the object to the Siebel Business Layer. For example :

■ To bind the command that a menu item or toolbar button calls

■ To bind the business component and business component fields that an applet references to get Siebel CRM data

You can write scripts on the Siebel Server or the client, but these scripts only allow you to customize how Siebel CRM processes the requests that it receives from the user interface. They do not allow you to customize rendering.

For more information about applets, business components, views, the Siebel repository, Siebel metadata, Siebel Tools, and so on, see Configuring Siebel Business Applications

How Siebel CRM Renders Siebel Open UI Clients

Siebel CRM does the following to render a Siebel Open UI client:

■ Uses HTML div elements and HTML tables in SWE templates to determine physical layout instead of the HTML frames that high interactivity uses. Siebel Open UI does not use div elements to structure a page. The entire page hierarchy that Siebel Open UI uses is a hierarchy of div elements. Siebel Open UI does not use the HTML frame.

■ Uses cascading style sheets (CSS) to specify position, dimension, and styling for HTML elements, such as font color and font type, instead of the HTML code that high interactivity uses. This styling does not apply to the objects that an ActiveX control renders in a high-interactivity client, such as a list applet.

This configuration is more closely aligned with current guidelines for Web design than the configuration that high interactivity uses. Siebel Open UI allows you to customize how Siebel CRM renders individual objects in the client without having to use Siebel Tools, and it allows you use an alternative configuration, such as your custom configuration or a third-party configuration, to bind the Siebel business layer to user interface objects. Siebel Open UI allows you to customize an existing SWT file or create a new SWT file.

24 Config u ri ng Siebel Open UI Version 8. 1/8.2, Rev. A

How Siebel CRM Renders Div Containers on Siebel Servers

Figure 3 illustrates how the Siebel Server uses SWE tags that reside in SWE templates to render div containers on the Siebel Server. For example, it renders a swe:view tag as a view container. It does the same rendering on this server for Siebel Open UI that it does for high interactivity.

SWE Tags In SWE Templates on Siebel Server SWE Rendering on Siebel Server

Figure 3. How Siebel Servers Use SWE Tags to Render Containers on the Siebel Server

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Overview of Siebel

How Siebel CRM Handles Data in Siebel Open UI

Figure 4 illustrates how Siebel CRM uses a presentation model, which is a JavaScript file that resides in the client that specifies how to handle the metadata and data that Siebel Open UI gets from the Siebel Server. Siebel CRM then displays this information in a list applet or form applet in the client. The presentation model provides a logical abstraction of the metadata, transaction data, and behavior for part of the user interface. Siebel Open UI includes a presentation model for each significant part of the user interface, such as the application menu, toolbars, screen tabs, visibility drop-down lists, applet menus, different types of applets, and so on. The presentation model does not render the HTML in the user interface.

Siebel Siebel

Page Page

Roposltory Metadata on Siebel Server Rendering on Siebel Open UI Client

Legend

PM Presentation Model

Figure 4. How Siebel CRM Handles Data in Siebel Open UI

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A SS¾ ivity a nd Siebel Open UI

How Siebel CRM Renders Objects in Siebel Open UI

Figure 5 illustrates how Siebel CRM uses a physical renderer, which is a JavaScript file that Siebel Open UI uses to build the user interface. A physical renderer contains instructions that describe how to render the physical presentation and interaction for a user interface element, such as a grid, carousel, form, tree, tab, menu, button, and so on. Each physical renderer references a presentation model, and it uses the metadata, data, and behavior that this presentation model defines to render an object in the client. For more information about presentation models and physical renders, see "About the Siebel Open UI Development Architecture" on page 37.

Logond

P .Presentation Model PR Physical Renderer =· Reference

Figure 5. How Siebel CRM Renders Objects in Siebel Open UI

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

Examples of How You Can Customize Siebel Open UI

Siebel Open UI uses the presentation model and the physical renderer to separate the logical user interface from the rendering. This configuration allows you to modify the user interface without having to modify the logical structure and behavior of the client. For example, you can modify the physical renderer to use a third-party, grid-to-carousel control to display a list applet as a carousel without modifying a presentation model. For more information about this example, see "Customizing List Applets to Render as a Carousel" on page 167.

You can use the physical renderer of a control to implement a variety of configurations so that Siebel Open UI can render this control at nearly any physical location in the browser and with your custom logic. You can use the physical renderer to display different parts of the same applet in different physical panes in a Siebel screen. For example, you can configure Siebel Open UI to display a temporary recycle bin that uses data from the presentation model to render data in a pane that is physically separate from the data that the list applet displays. For more information about this example, see Chapter 4, "Example of Customizing Siebel Open UI."

You can use the presentation model to modify the logical behavior of the user interface without modifying the physical renderer. For example, you can modify a presentation model to add a list column in a list applet so that it iterates through list columns and renders them without modifying the physical renderer. This column can reside on the client even if the Siebel Server contains no representation of it.

Summary of Differences Between High Interactivity and Siebel Open UI

Siebel Open UI and high interactivity implement the physical user interface differently:

■ Siebel Open UI. The SWE renderer that Siebel Open UI uses structures the physical user interface through HTML div elements instead of the HTML frames that high interactivity uses. This configuration allows you to use cascading style sheets to do the layout for these div elements instead of hard coding the position of HTML frames. It simplifies reconfiguring the HTML for different user interface themes.

■ High interactivity. Uses a hierarchy of HTML frames. This hierarchy makes it difficult to

reconfigure the rendered HTML to support different user interface themes.

Siebel Open UI uses the same browser proxy configuration that high interactivity uses. This structure includes the object type hierarchy for applications, views, applets, business objects, and business components. It implements each of these objects in JavaScript. These JavaScript objects render HTML and handle user interaction through DOM events. Siebel Open UI uses no ActiveX controls to render the physical user interface.

The applet object that resides in the proxy contains all the same metadata and data that it requires to render the physical user interface that high interactivity uses. For more information, see "About Objects and Metadata" on page 33.

In some situations, Siebel Open UI gets more data locally from the proxy or the client, or it creates metadata in the client. A presentation model specifies how to display this local data. It also provides an interface to the proxy.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Siebel Open UI

Siebel Open UI uses a physical renderer to implement the binding that exists between a predefined JavaScript control and the Siebel Object Model in the proxy.

To create the HTML DOM structure for a JavaScript control, the renderer uses the metadata and data that Siebel Open UI populates into the client proxy. The renderer uses methods that reside in the presentation model to access this metadata.

Comparison of Customization Capabilities Between High Interactivity and Siebel Open UI

High interactivity and Siebel Open UI share the following customization capabilities:

■ Metadata configuration for all user interface objects resides in the Siebel Repository.

■ Layout configuration of user interface objects resides in SWE templates.

■ Negligible server scripting capabilities exist to render custom configurations.

Table 4 summarizes some of the significant customization differences that exist between high interactivity and Siebel Open UI. For a more detailed comparison, see Article ID 1499842.1 on My Oracle Support.

Table 4. Summary of Customization Differences Between High Interactivity and Siebel Open UI

High Interactivity Siebel Open UI

Renders the user interface as a collection of Renders the user interface as a collection of HTML div ; HTML frames. elements.

; Uses hard coding to determine styling, Uses CSS files to determine styling, sizing, and sizing, and positioning. Limits the positioning. Allows you to fully modify the user customizations you make to this style. interface. For example, you can create a custom user , interface for a small, nondesktop environment.

Siebel Web Engine can only render an Siebel Web Engine can render an entire view or only entire view. an individual applet.

Uses ActiveX. Limits the customizations Uses JavaScript that allows you to fully customize that you can make in the user interface. how Siebel Open UI renders the user interface.

Allows any current, compliant Web browser to use Siebel Open UI.

, An applet can reference only a business An applet can reference a business service, business component or a virtual business component, or virtual business component.

component.

Browser scripting for proxy objects resides in the client. For more information, see "Browser Script Compatibility" on page 598. Overview of Siebel Qpe flBBfBmi

About Using This Book

This topic includes information about how to use this book. It includes the following information :

■ "Important Terms and Concepts" on page 30

B "How This Book Indicates Computer Code and Variables" on page 31

■ "How This Book Describes Objects" on page 32

■ "About the Siebel Innovation Pack" on page 33

■ "Support for Customizing Siebel Open UI" on page 33

■ "Getting Help from Oracle" on page 35

Important Terms and Concepts

This book uses the following terms and concepts that you must understand before you customize Siebel Open UI:

■ A user is a person who uses the client of a Siebel business application to access Siebel CRM data.

■ The user interface is the interface that the user uses in the client to access data that Siebel Open UI displays.

■ The client is the client of a Siebel business application. Siebel Call Center is an example of a Siebel business application. Siebel Open UI renders the user interface in this client.

■ The server is the Siebel Server, unless noted otherwise.

■ An administrator is anyone who uses an administrative screen in the client to configure Siebel CRM. The Administration - Server Configuration screen is an example of an administrative screen.

■ Predefined Siebel Open UI is the ready-to-use version of Siebel Open UI that Oracle provides to you before you make any customization to Siebel Open UI.

■ A Siebel CRM object is an object that resides in the Siebel Repository File. For example, a screen, view, applet, business component, menu, or control is each an example of a Siebel object. A Siebel CRM applet is not equivalent to a Java applet. For more information, see Configuring Siebel Business Applications.

■ A predefined object is an object that comes already defined with Siebel CRM and is ready to use with no modification. The objects that Siebel Tools displays in the Object List Editor immediately after you install Siebel Tools, and the objects that the SRF (Siebel Repository File) contains before you make any customization are predefined objects.

■ A custom object is a predefined object that you modified or a new object that you create.

■ The term focus indicates the currently active object in the client. To indicate the object that is in focus, Siebel CRM typically sets the border of this object to a solid blue line.

■ To derive a value is to use one more properties as input when calculating this value. For example, Siebel Open UI can derive the value of a physical renderer property from one or more other properties.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

About Using This Book

■ The term class describes a JavaScript class. It does not describe the Siebel class object type, unless noted otherwise, or unless described in the context of the Siebel Object Hierarchy. For more information about the Siebel class object type, see Siebel Object Types Reference.

■ The term reference describes a relationship that exists between two objects, where one object gets information from another object or sends information to this object. For example, in the Siebel Object Hierarchy, the Opportunity List Applet references the Opportunity business component to get opportunity records from this business component, and the Opportunity business component references the S_OPTY table to get opportunity records from this table.

■ . The term Instance describes the current, run-time state of an object. For example, a business component instance is a run-time occurrence of a business component. It includes all the runtime data that the business component currently contains, such as the values for all fields and properties of this business component. For example, an instance of the Contact business component includes the current, run-time value of the City field that resides in this business component, such as San Francisco. You can configure Siebel Open UI to get a business component instance, and then modify this data or call the methods that this business component references.

For more information about these terms and other background information, see the following items:

■ A complete list of terms that this book uses, see "Glossary" on page 607.

■ Using the Siebel Open UI client, see Siebel Fundamentals for Open UI.

■ Enabling the Siebel Server to run Siebel Open UI, see Siebel Installation Guide for the operating system you are using.

■ Using Siebel Tools, see Using Siebel Tools.

How This Book Indicates Computer Code and Variables

Computer font indicates a value you enter or text that Siebel CRM displays. For example:

Th s s computer font

Italic text indicates a variable value. For example, the n and the method_name in the following format description are variables:

Named Method n: method_na e

The following is an example of this code:

Named Method 2 : Wri teRecord

How This Book Indicates Code That You Can Use as a Variable and Literal

You can write some code as a literal or a variable. For example, the Home method sets a record in the current set of records as the active row. It uses the following syntax:

busComp . Home O ;

where:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A Overview of Siebel Open UI »1

■ busComp identifies the business component that contains the record that Home sets.

You can use busComp as a literal or a variable. If you declare busComp as a variable in some other section of code, and if it contains a value of Account when you use the Home method, then Home sets a record in the Account business component as the active record . You can also use the following code, which also sets a record in the Account business component as the active record :

Account . Home () ;

Case Sensitivity in Code Examples

The code examples in this book use standard JavaScript and HTML format for uppercase and lowercase characters. It is recommended that you use the following case sensitivity rules that this book uses in code examples:

■ All code that occurs outside of a set of double quotation marks (" ") is case sensitive. The only exception to this rule occurs with path and file names.

■ All code that occurs inside a set of angle brackets (< > ) is case sensitive. The only exception to this rule is any code that you enclose with a set of double quotation marks that you nest inside a set of angle brackets.

The following example is valid :

functi on Recycl eBi nPModel () {

Si ebel AppFacade . ecycl eBi nPModel . supercl ass . constructor . appl y (thi s , arguments) ;

}

The following example is not valid. Bold font indicates the code that is not valid :

functi on Recycl ebi npmodel () {

Si ebel AppFacade . ecycl eBi nPModel . supercl ass . constructor . appl y (thi s , arguments) ;

}

How This Book Describes Objects

For brevity, this book describes how an object, such as a user property, does something . For example, this book might state the following :

The Copy Contact user property copies contacts.

In strict technical terms, the Copy Contact user property only includes information that some other Siebel CRM object uses to copy contacts.

For brevity, to describe how Siebel CRM uses the value that a property contains, this book typically only describes the property name. For example, assume Siebel CRM displays the value that the Display Name property contains. This property is a property of a tree node object. This book only states the following :

Siebel CRM displays the Display Name property of the tree node.

In reality, Siebel CRM displays the value that the Display Name property contains.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

About Objects and Metadata

A Siebel object definition defines the metadata that Siebel Open UI uses to run a Siebel application . The Account List Applet that Siebel Tools displays in the Object List Editor is an example of an object definition. It includes metadata that Siebel Open UI uses to render the Account List Applet, such as the height and width of all controls in the applet, and all the text labels that it must display on these controls. The Siebel Repository is a set of database tables that stores these object definitions. Examples of types of objects include applets, views, business components, and tables. You use Siebel Tools to create or modify an object definition .

The object manager hosts a Siebel application, providing the central processing for HTTP transactions, database data, and metadata, which is data that the object definitions contain. It is different from Siebel CRM data, which is data that is specific to your business, such as account names and account addresses.

For more information, Configuring Siebel Business Applications.

How This Book Describes Relationships Between Objects

An object definition includes properties and a property includes a value. For example, the Business Object property of the Account Address view contains a value of Account. To describe this relationship, this book might state the following :

The Account Address view references the Account business object.

Sometimes the relationship between objects occurs through more than one object. For brevity, this book does not always describe the entire extent of relationships that exists between objects through the entire Siebel object hierarchy. For example, because the Account business object references the Account business component, and the Account Address view references the Account business object, this book might state the following :

The Account Address view references the Account business component.

About the Siebel Innovation Pack

Oracle provides the functionality that this guide describes as part of Siebel Innovation Pack 2013. To use this functionality, you must install the innovation pack and do the postinstallation configuration tasks. For more information about the functionality that Siebel Innovation Pack 2013 includes, see the applicable Siebel Maintenance Release Guide on My Oracle Support.

Depending on the software configuration that you purchase, your Siebel business application might not include all the features that this book describes.

Support for Customizing Siebel Open UI

Siebel CRM supports the following customizations in Siebel Open UI. You must carefully consider the implications of doing this customization and development:

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A Overview of Siebel Open UI

■ Siebel Open UI allows you to use predefined or existing Siebel repository information in your deployment without customization. Siebel Open UI uses this repository information to render the user interface. This rendering does require user acceptance testing.

■ You can use Siebel Tools to customize Siebel Open UI so that it works in your business

environment and meets user requirements. Siebel Tools configuration for Siebel Open UI is similar to the configuration that you do for clients that Siebel CRM renders in high-interactivity and standard-interactivity. You configure the same Siebel Repository File and the same Siebel Web templates.

■ You can use your Web development skills and the Siebel Open UI JavaScript API to customize Siebel Open UI. For details about this API, see Appendix A, "Siebel Open UI Application

Programming Interface." Siebel Open UI uses this API to replace proprietary browser scripting that renders high-interactivity clients. Oracle continues to support browser scripting, but strongly recommends that you convert any browser script that your deployment currently uses so that it uses the Siebel Open UI JavaScript API.

■ You can combine Siebel Tools development with development of the Siebel Open UI JavaScript API simultaneously, as needed.

■ Siebel CMR supports including Siebel Open UI or individual Siebel Open UI objects in a third-party user interface. Views and applets are examples of Siebel Open UI objects.

■ Siebel CMR supports integrating external content in the Siebel Open UI client.

■ To rebrand your deployment and customize the user experience, you can modify the cascading style sheets that come predefined with Siebel Open UI.

■ You can use HTML, CSS, or JavaScript to add features. For example, you can do the following :

■ Build user interfaces on any technology that can integrate with the Siebel Open UI JavaScript API.

■ Use your preferred, open-source JavaScript environment, such as jQuery, from the open- source development community, or you can use the environment that Siebel Open UI provides.

■ Use a plug-in, proprietary development environment, or a native development environment.

You can use these environments to create a custom rendering architecture that integrates with the Siebel Open UI JavaScript API.

■ Use intraworkspace communication and DOM access and manipulation through JavaScript programming.

■ Do a pilot user acceptance test of your Siebel Open UI deployment that uses your current Siebel Server implementation. Users can continue to use the high interactivity Siebel client during this testing.

■ Preserve your existing configurations and customizations.

Support That Siebel Open UI Provides

It is strongly recommended that you carefully consider the support policies that this topic describes before you customize Siebel Open UI. For more information about the support that Oracle provides, see Scope of Service for Siebel Configuration and Scripting - Siebel Open UI (Article ID 1513378.1) on My Oracle Support.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

illie of Siebel O en UI

This chapter describes the architecture that you can use to customize Siebel Open UI. It includes the following topics:

■ About the Siebel Open UI Development Architecture on page 37

■ Life Cycle of User Interface Elements on page 54

About the Siebel Open UI Development Architecture

This topic describes the architecture that you can use to customize Siebel Open UI. It includes the following information:

■ Overview of the Siebel Open UI Development Architecture on page 37

■ Example of How Siebel Open UI Renders a View or Applet on page 41

■ Customizing the Presentation Model and Physical Renderer on page 43

■ Stack That Siebel Open UI Uses to Render Objects on page 46

■ Items in the Development Architecture You Can Modify on page 49

■ Example Client Customizations on page 50

■ Differences in the Server Architecture Between High Interactivity and Siebel Open UI on page 51

■ Differences in the Client Architecture Between High Interactivity and Siebel Open UI on page 53

Overview of the Siebel Open UI Development

Architecture

Siebel Open UI uses objects to deploy each element that it displays in the client. You can customize each of these objects in a way that is similar to how you customize each object in a high-interactivity client. You can customize each object separately. Each object resides in a layer that implements a particular area of customization. For example, you can customize each of the following items that you can customize in high interactivity:

■ Application

■ Screen

■ View

■ Applet

■ Menu

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 37

■ Application menu

■ Applet menu

■ Toolbar

■ Application toolbar

■ Navigation object

■ Tabs at different levels

■ Visibility menu

■ Predefined Query (PDQ) menu

Architecture You Can Use to Customize Siebel Open UI

Figure 6 illustrates the basic architecture that you can use to customize Siebel Open UI.

Siebel Server

Figure 6. Architecture You Can Use to Customize Siebel Open UI

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A Architecture

About the Presentation Model

A presentation model is a JavaScript file that specifies how to handle the metadata and data that Siebel Open UI gets from the Siebel Server, and then displays this information in a list applet or form applet in the client. It allows you to customize behavior, logic, and content. It determines the logic to apply, captures client interactions, such as the user leaving a control, collects field values, and sets properties. A presentation model can get the following items from the proxy, and then expose them for external use. These properties and methods are similar to the properties and methods that most software models use :

■ Properties. Contains information about the current state of each user interface element. For example, if Siebel Open UI currently displays or hides a field .

■ Methods. Implements behavior that modifies the state of an object. For example, if the user chooses a value, then a method can hide a field.

A presentation model can contain customization information that is separate from the predefined configuration information that Siebel Open UI uses for physical rendering. For example, it can display or hide a field according to a pick value.

For more information, see "Example of a Presentation Model" on page 42.

About the Physical Renderer

A physical renderer is a JavaScript file that Siebel Open UI uses to build the user interface. It allows you to use custom or third-party JavaScript code to render the user interface. It binds a presentation model to a physical control . It can enable different behavior between a desktop client and a mobile client. It allows the presentation model to remain independent of the physical user interface objects layer. It can display the same records in the following different ways:

■ List Applet

■ Carousel

■ Calendar

■ Mind Map

For more information, see "Example of a Physical Renderer" on page 43.

How Siebel Open UI Uses the Presentation Model and the Physical Renderer

A high-interactivity client allows you to use scripts, but it does not include a formal environment that binds data to the user interface. It customizes a controller instead of customizing a view. Siebel Open UI uses presentation models and physical Tenderers to meet this requirement.

A user interface object includes a combination of the following items:

■ Physical presentation and interaction for a user interface element. For example, a grid, carousel, form, tree, tab, menu, button, and so on.

Config u ring Siebel Open U I Version 8. 1/8.2, Rev. Architecture of Siebel Open

■ Logical presentation and interaction that Siebel Open UI can physically display in more than one way. For example, Siebel Open UI can display a list of records in a grid or in a carousel. The logical representation of this data includes the metadata that Siebel Open UI uses to determine the Siebel CRM information that this list of records contains. It does not include information that Siebel Open UI uses to physically display this list as a grid or carousel.

■ Presentation and interaction information. Includes application metadata, transaction data, and configuration information that determines client behavior. Siebel Open UI binds these items to the generic presentation . For example, it can determine whether or not a field is required, and then identify the data that it must display in a list column, or it can identify the business service method that it binds to a button .

A high-interactivity application can bind metadata, data, and logical behavior to a generic user interface in a highly configurable and declarative manner. It drives a fixed set of user interface presentation and interaction options. For example, you can configure a high-interactivity application so that a field is required or uses a hierarchical picklist. Siebel Open UI can use this configuration, but it also allows you to do the following customizations that you cannot do in high interactivity :

■ Add a completely new presentation or interaction feature in the user interface. For example, display or hide a field according to a pick value.

■ Create a new or modify an existing logical user interface object. For example, you can use Siebel Open UI to customize an object so that it displays a list of records in an infinite scroll list, which is an object that allows the user to view these records in a sliding window that displays records over a larger list of records that already exist in the client. It allows the user to do an infinite scroll in a mobile user interface. Note that, from a usability standpoint, it is almost always preferable to configure Siebel Open UI to use an interface that allows the user to page through sets of records rather than use a scroll list. This configuration reduces uncertainty regarding the records that Siebel Open UI has or has not displayed in the visible portion of the client.

■ Modify the type of user interface element that Siebel Open UI uses to display

information. For example, you can configure Siebel Open UI to display a list of records in a carousel instead of on a grid .

4 _; 0¾H Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Example of How Siebel Open UI Renders a View or

Applet

Figure 7 illustrates how Siebel Open UI renders the Contact Form Applet.

Figure 7. Example of How Siebel Open UI Renders a View or Applet

Explanation of Callouts

Siebel Open UI does the following to render the Contact Form Applet:

1 The user attempts to navigate to the Contact Form Applet.

2 Siebel Open UI creates the view that displays this applet. This creation is similar to how Siebel CRM creates a view in high-interactivity mode.

3 Siebel Open UI references the manifest to identify the files it must download to the client. For more information, see "Configuring Manifests" on page 128.

4 Siebel Open UI downloads the JavaScript files it identified in Step 3 to the client.

5 A presentation model formats the data and applies application logic. For more information, see "Example of a Presentation Model" on page 42.

6 A physical renderer registers itself with a corresponding object. A presentation model also does this registration. For more information, see "Example of a Physical Renderer" on page 43.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 41

Siebel Open UI loads the cascading style sheets according to entries that the theme.js file contains.

Siebel Open UI uses a presentation model, physical renderer, and cascading style sheets to render the Contact Form Applet.

Example of a Presentation Model

Figure 6 describes how the partialrefreshpnn.js file does a partial refresh. It is recommended that you include this business logic in a presentation model so that more than one modeler can reuse it. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support. To view an example that uses this file, see "Refreshing Applets That Contain Modified Data" on page 159.

Figure 8. Example of a Presentation Model

Explanation of Callouts

The partialrefreshpnn.js file includes the following sections :

1 Creates the JavaScript namespace.

2 Uses the Define method to make sure Siebel Open UI can identify the constructor. For more information, see "Define Method" on page 506.

3 Creates the presentation model class.

4 Customizes a predefined presentation model to support partial refresh logic.

5 Includes the logic that Siebel Open UI runs if the user changes records.

6 Includes the logic that Siebel Open UI runs if the user modifies a field value in a record. 2S Configuring Siebel Open UI Version 8.1/8.2, Rev. A ¾' evelopment Architecture

Example of a Physical Renderer

Figure 9 describes how the partialrefreshpr.js file does a partial refresh for a physical renderer. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support. To view an example that uses this file, see "Refreshing Applets That Contain Modified Data" on page 159.

AtJtl CHKia¾,.H.!SH-t,H.!tllil«K Ί- i ΤΒΓ.ίΠίϋ ΙΠ

)

*«w»t»f «fM tkni <{n*s««vr« » ion - fw«i« u t

ill '! »*-··*' i'?erTF¾ *.,?¾wwttt«-*«(i * "I" J.»sev|> i

'!{ r«jirtDr -j >-ti' ) .ί

τωιΪΜΐΚ -ββΐι - ».·ν

.!■.(

Figure 9. Example of a Physical Renderer

Explanation of Callouts

The partialrefreshpr.js file includes the following sections:

1 Creates the JavaScript namespace.

2 Uses the Define method to make sure Siebel Open UI can identify the constructor. For more information, see "Define Method" on page 506.

3 Creates the physical renderer class.

4 Specifies the ShowJobTitleRelatedField property.

5 Includes the logic that Siebel Open UI runs if it modifies ShowJobTitleRelatedField.

Customizing the Presentation Model and Physical

Renderer

Siebel Open UI uses two JavaScript files to implement the presentation model and the physical renderer that it uses to display an applet. For example, it uses the following files to display a carousel :

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 43

■ ListPModel.js for the presentation model

■ CarouselRenderer.js for the physical Tenderer

It uses the following files to display a grid :

■ JQGridRenderer.js for the physical renderer

■ ListPModel.js for the presentation model

Customizing the Presentation Model

Siebel Open UI considers static and dynamic values as part of the presentation model that it uses. For example, a list applet includes columns and renders data in each column in every row. Metadata specifies the column name and other details for each column, such as required, editable, and so on. These values are static. Siebel Open UI does not modify them unless you modify them as part of a customization effort. A list applet can also include dynamic values. For example, a value that identifies the record that is in focus, or the total number of visible records. Siebel Open UI can modify the value of a dynamic value in reply to an external event according to the behavior of the model. For example, if the user clicks a field in a record, and if this record is not in focus, then Siebel Open UI modifies the property that stores the focus information to the record that the user clicked. You can implement this type of functionality in a presentation model. For more information, see "About the Presentation Model" on page 39.

Example of Customizing the Static and Dynamic Values of a Presentation Model

You can modify a presentation model to add a list column. For example, you can modify the SIS Product List Applet so that it displays a Select column that allows the user to choose more than one record, and then press Delete to delete them. You only modify a presentation model to implement this example. You do not modify a physical render. Siebel Open UI uses the JQGridRenderer physical renderer for the grid control. JQGridRenderer is sufficiently generic that it can iterate any list of columns that the presentation model returns. To view an example of this modification, see "Customizing List Applets to Render as a Table" on page 176.

Example of Customizing the Behavior of a Presentation Model

You can add behavior to a presentation model. For example, you can configure a presentation model to display or hide a set of fields according to the value of another field. You can configure Siebel Open UI so that the Job Title field on the Contacts form applet determines whether or not it displays the Work* field and the Main Fax# field of a contact. If the Job Title includes a value, then Siebel Open UI displays the Work* field and the Main Fax* field. A presentation model controls this conditional display. The physical renderer requires no configuration to implement this example. It queries the presentation model, and then renders these fields according to the instructions that it gets from the presentation model. You can implement this behavior on the client without modifying any configuration on the Siebel Server. For a detailed description of an example that uses this type of configuration, see Chapter 4, "Example of Customizing Siebel Open UI."

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customizing the Physical Renderer

You can use a physical renderer to modify how Siebel Open UI renders an object. For example, Siebel Open UI displays the predefined Contact Affiliations list applet as a typical Siebel CRM list. You can modify this list to display as a carousel. You can modify how the user scrolls through a set of records, which is a physical aspect of the applet that a physical renderer defines. But this list is still a list of records that is a logical representation of the applet that the presentation model defines. You do not modify this logical representation. To view an example of this type of modification, see "Customizing List Applets to Render as a Carousel" on page 167. For more information, see "About the Physical Renderer" on page 39.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Stack That Siebel Open UI Uses to Render Objects

Figure 10 describes the stack that Siebel Open UI uses to render objects. It uses the applet object as an example.

Figure 10. Stack That Siebel Open UI Uses to Render Objects Explanation of Callouts

The stack that Siebel Open UI uses to render objects includes the following items:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

1 Physical layout and styling. Allows you to use HTML to display content, JavaScript to control logic, and cascading style sheets to control layout and styling in the client. You can position or hide controls to achieve almost any layout requirement. This high level of customization is not possible with a high-interactivity client because high interactivity hard codes the physical layout.

2 Physical renderer. For more information, see "About the Physical Renderer" on page 39.

3 Presentation model. For more information, see "About the Presentation Model" on page 39.

4 Proxy objects. Includes object instances for the client proxy. Each of these instances represents an instance of a corresponding repository object that resides on the Siebel Server. Example objects include a view, applet, business object, or business component. A proxy object includes only enough logic to allow the client to use the same functionality that the server object uses, including the data and metadata that the server object requires. A proxy object exposes the interface for scripting in the client, but it does not allow you to significantly modify the physical user interface. You can only customize the flow of information from the Siebel Server to the client. You cannot customize how Siebel Open UI uses the metadata or data in the proxy object to render the physical user interface. In this example, proxy objects include the applet proxy and business component proxy that contain data and metadata from the Server Response property set. For more information, see "Browser Script Compatibility" on page 598.

5 Siebel Property Set. A hierarchy that Siebel Open UI uses to communicate between objects that reside on the Siebel Server and the proxies that reside in the client. The high-interactivity client uses the same format for this property set.

6 SWE run-time applet object. Exposes scripting interfaces that allow you to modify the applet so that it can control the business component or business service that this applet references. The applet that resides on the Siebel Server gets a request from the proxy applet instance that resides in the client. If necessary, it sends the request to a business component or business service. Siebel Open UI does not currently include a scripting interface that allows you to modify the property set that the applet sends to the client.

7 Applet metadata. The applet object in the Siebel Repository File (SRF) that contains

information that Siebel Open UI uses to bind the user interface to the business component. Siebel Open UI maps this information through business component fields. This binding can include only a one-to-one mapping between one applet control and one business component field . Siebel Open UI does not allow more complex bindings. You can get data through a presentation model in the client to develop functionality that is similar to the functionality that more complex binding provides. For more information, see "About Objects and Metadata" on page 33.

Example Stack That Siebel Open UI Uses to Render Objects

This topic describes a typical example of how Siebel Open UI uses a presentation model and physical renderer for an applet that it displays in a view. Every object that Siebel Open UI renders uses this same object stack. You can customize objects in this stack to modify Siebel Open UI rendering and behavior. For example, you can customize the presentation model and physical Tenderers that implement view navigation to use tree navigation instead of the predefined nested tab navigation.

Config u ri ng Siebel Open UI Version 8. 1/8.2, Rev. A 47 Architecture

Figure 11 describes an example stack that Siebel Open UI uses to display a calendar applet.

Siebel Open UI Client

Jquery Full

Calendar

Jqiullcalferrttererjs

calpmodel.js

Proxies for

Activities

Siebel Property

Set

Figure 11. Example Stack That Siebel Open UI Uses to Render Objects

Explanation of Callouts

Siebel Open UI uses the following items to display a calendar applet:

1 Jquery FullCalendar. The physical JavaScript control. A third-party typically provides this control.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Architecture

2 jqfullcalrenderer.js. Binds the CallPresentationModel object that the calpmodel.js file contains with the third-party calendar control.

3 calpmodel.js. Describes the logical behavior for the calendar user interface that Siebel Open UI displays on top of a list applet that runs in high interactivity.

4 Activity proxies. Includes proxies for the Activity HI Calendar Applet and the Activity business component.

Items in the Development Architecture You Can Modify

Figure 12 indicates the predefined items in the development architecture that Oracle provides and the items that you can modify. It delineates areas where you can customize Siebel Open UI.

Legend

E3 Oracle provides, not customizable

I I Oracle provides, customizable

I I Customer provides

Figure 12. Items in the Development Architecture You Can Modify

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A Architecture

Example Client Customizations

Table 5 describes some example client customizations you can do in Siebel Open UI. For detailed examples, see Chapter 5, "Customizing Siebel Open UI."

Table 5. Example Client Customizations

Customization Work You Must Do

Customize a list applet You can use Siebel Tools to customize a list or form applet in the Siebel or form applet. Repository. This work completes the basic binding to the Siebel object layer and displays a list or form in the client. No client customization is required . For more information, see Using Siebel Tools.

Add custom client You modify a presentation model. For example:

behavior.

■ Display or hide a control. For example, show a control if the user chooses a value from a drop down list. You add the required logic to a presentation model. You add or remove the control from the set of controls that Siebel Open UI already displays in the applet proxy in the client. For example, to add a local control in the client, you add this control in the presentation model to the set of controls that the proxy already contains.

Some configuration requirements do not require you to modify the physical Tenderer. For example, it is not necessary to modify the physical Tenderer to display a control because the predefined implementation for getting all fields from the client is already available.

■ Modify the theme of a page. For example, you can configure Siebel Open UI to modify the theme of a page if the user modifies the orientation of a tablet device. You modify a state variable in a presentation model from portrait to landscape. You must modify the physical Tenderer for this example. You must add the logic that modifies styles that the user interface elements use when Siebel Open UI modifies the orientation state in the presentation model.

Add generic client You use a physical control to render the presentation model . For behavior. example, to render a list applet as a carousel, you use the appropriate third-party control.

Position controls and ou modify CSS files.

customize style.

Configuri ng Siebel Open UI Version 8. 1/8.2, Rev. A Ws nt Architecture

Differences in the Server Architecture Between High Interactivity and Siebel Open UI

Figure 13 compares the server architecture between high interactivity and Siebel Open UI.

Client

Siebet Server

Figure 13. Comparing Server Architecture Between High Interactivity and Siebel Open UI

Explanation of Callouts

This comparison between the architecture that high interactivity uses and that Siebel Open UI uses includes the following items:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A [ ^{~ ~} Ί ΐ j Architecture of

Rendering customization in high interactivity requires you to use a SWEFrame customization at the applet level.

Rendering customization in Siebel Open UI allows you to use SWEFrame customization, an equivalent customization, or to customize the physical renderer independently at any level of the object hierarchy, including at the subapplet level for an applet control.

High interactivity always starts rendering at the view level. It uses predefined code in the user interface hierarchy, from a request processing perspective.

Siebel Open UI uses objects, so rendering can occur at the screen, view, applet, or control level.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Differences in the Client Architecture Between High Interactivity and Siebel Open UI

Figure 14 compares the ActiveX UI architecture that a high-interactivity client uses to the architecture that Siebel Open UI uses.

High Interactivity . ^' Ar<Shltecture. Siepe) § r UI Arcri5teciure

JavaScrtpi UJ JavaScript Library

Controls

J Query Library

JavaScript'

' ActiveX yi Controls

( Customization API

Custom

Browser JavaSalpt Proxy

Script

Client

Ste el ^* M¾h Mar^rvity: Client Siebel Open Ul Client- Environment W

Style

Sty Ung Layout

Sheess

Layout, HTML HTML Composition Siebel Web Composition, fuw) and Coridrtic»ial

Condition-* Render ing Reftdertnij Templates;

Legend

. Sie el.Q6je :

Manager;,. ^{■ ~} I Pt edafiiied Objeras

I I Desigr time Configurable OBJects

Stebtrt Tocte 1 I Run-time Configurable Objects Configuration of

I I Other CostOTitziJltans

Repository Objects

Figure 14. Comparing Client Architecture Between High Interactivity and Siebel Open UI

Explanation of Callouts

This comparison between high interactivity and Siebel Open UI includes the following items:

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A 53 Architecture of

1 Client Environment. The Siebel Open UI client environment allows you to customize run-time configurable objects to meet a wide range of rendering requirements, from supporting more than one Web browser type to deploying to various client form factors.

2 Style sheets. The Siebel application or Web Server serves static style sheets.

3 Siebel Web Templates. The Siebel application or Web Server serves dynamic Siebel Web Templates.

Life Cycle of User Interface Elements

This topic describes how Siebel Open UI uses presentation model methods and physical renderer methods, and the methods that the presentation model and physical renderer calls during the life cycle of a user interface element.

The presentation model uses the following sequence of methods:

1 Init

2 Setup

The presentation model processes the events that it receives from the physical renderer during the life cycle. It also processes the replies for requests that the Siebel Server sends. Siebel Open UI can make the following calls to the presentation model during a life cycle:

■ Call from the physical renderer because of a user action.

■ Notification that the Siebel Server sends. For more information, see "Notifications That Siebel Open UI Supports" on page 541.

■ Reply property set that the Siebel Server sends.

■ Completion request to get a follow-up request after the proxy finishes processing a reply from the Siebel Server.

The physical renderer continues to render each modification that occurs in the presentation model, and the AttachPMBinding method binds each of these modifications during the Init call to the physical renderer. One of the following items then signals these modifications:

■ Siebel Open UI runs a presentation model method.

■ Siebel Open UI modifies the value of a presentation model property.

For more information about the methods that this topic describes, see Appendix A, "Siebel Open UI Application Programming Interface."

Summary of Presentation Model Methods

This topic summarizes some of the methods that a presentation model uses during the life cycle of a user interface element.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

How Siebel Open UI Uses the Init Method of the Presentation Model

The Init method uses the following methods to configure the properties, methods, and bindings of the presentation model. For an example that uses Init, see "Creating the Presentation Model" on page 62:

■ AddProperty. Adds a property to a presentation model. This property can be simple or derived.

If you use AddProperty to define a derived property, then Siebel Open UI uses the Get method on the presentation model to calculate and return the property value. For more information about deriving values, see "About Using This Book" on page 30. For more information, see "Get Method" on page 431.

■ AddMethod. Adds a method to the presentation model. For more information, see "AddMethod Method" on page 425.

■ AttachEventHandler. Attaches a method that handles the logical event. Siebel Open UI calls this method when it sends an event to the presentation model through the OnControlEvent method. For more information, see "OnControlEvent Method" on page 432 and

"AttachEventHandler Method" on page 427.

■ AttachNotificationHandler. Attaches a method that handles the notification that Siebel Open UI calls when the Siebel Server sends a notification to an applet. A notification is a message that Siebel Open UI sends to the client when this client requests Siebel Open UI to modify a business component. For example, to create or delete a business component record. For more information, see "Notifications That Siebel Open UI Supports" on page 541.

■ AttachPSHandler. Handles other incoming property sets that the Siebel Server sends to the client. It can extract the values that a property set contains to individual properties or do other processing.

■ AttachPreProxyExecuteBinding. Attaches a method to the presentation model. Siebel Open UI calls AttachPreProxyExecuteBinding before it processes the reply that it receives from the Siebel Server, but after it receives a reply from this server to the method that Siebel Open UI supplies as an argument. For more information, see "Customizing Events" on page 118.

■ AttachPostProxyExecuteBinding. Attaches a method to the presentation model. Siebel Open UI calls AttachPostProxyExecuteBinding after it processes the reply from the Siebel Server.

The physical renderer calls the following presentation model methods:

■ Get. Gets the value of a property that resides in a presentation model.

■ ExecuteMethod. Runs a method that the AddMethod method calls. For more information, see "ExecuteMethod Method" on page 430.

■ OnControlEvent. Calls an event. The physical renderer uses the OnControlEvent method to call the presentation model and send an event. The presentation model uses a binding that exists between the event and the presentation model method and the AttachEventHandler method to call the method. For more information, see "OnControlEvent Method" on page 432 and

"AttachEventHandler Method" on page 427

■ SetProperty. Sets the value of a presentation model property. The physical renderer can set this value directly in some situations. For more information, see "SetProperty Method" on page 432.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 55

How Siebel Open UI Uses the Setup Method of the Presentation Model

The Setup method extracts the values that a property set contains. If Siebel Open UI creates an object on the Siebel Server, such as a frame, then this server sends the property set that describes this object to the client. Siebel Open UI uses this property set to set up the presentation model properties in the client. The Setup method uses the AddProperty method to extract this property set into presentation model properties. It does this work the first time Siebel Open UI creates the user interface object in the client. For more information, see "Methods That Manipulate Property Sets" on page 518. For an example that uses Setup, see "Customizing the Setup Logic of the Presentation Model" on page 64.

Life Cycle of a Physical Renderer

Figure 15 illustrates the life cycle of a physical renderer. For examples of various life cycle flows, see "Life Cycle Flows of User Interface Elements" on page 523.

Legend

I I Method

Figure 15. Life Cycle of a Physical Renderer

Explanation of Callouts

The physical renderer uses methods in the following sequence:

1 Renderer. Creates the renderer.

2 Init. Initializes and sets up the AttachPMBinding method. For more information, see "Init Method" on page 431.

56.. . _ Configuring Siebel Open UI Version 8.1/8.2, Rev. A

ShowUI. Displays the physical control that corresponds to an applet control. It renders the container for the metadata, data, and physical event bindings. For example, when Siebel Open UI renders a list applet as a grid, ShowUI renders the third-party grid control that it uses for the applet. For more information, see "ShowUI Method" on page 464.

BindEvents. Sets up the user interface binding of physical events to the physical user interface, represented as HTML elements. It captures the user actions, and then translates these actions to logical events in the physical Tenderer before Siebel Open UI sends them to the presentation model for processing. For more information, see "BindEvents Method" on page 461.

BindData. Downloads metadata and data from the Siebel Server to the client proxy, and then binds this data to the user interface. The list columns that a list applet uses is an example of metadata, and the record set that this list applet uses is an example of data. For more information, see "BindData Method" on page 461.

AttachPMBinding. Attaches handlers to notifications that occur during the life cycle. For more information, see "AttachPMBinding Method" on page 428. For more information about notifications that can occur during the life cycle, see "Notifications That Siebel Open UI Supports" on page 541.

GetPM. Calls a method that the presentation model contains. It is recommended that you use GetPM only to call the following presentation model methods:

■ ExecuteMethod

■ OnControlEvent

■ Get

■ SetProperty

You can use ExecuteMethod or OnControlEvent to call a method that modifies the state of the presentation model or to call a method that reads this state. You can use the Get method to get the value of a presentation model property. You can use SetProperty to set the value of a presentation model property.

For more information, see "GetPM Method for Physical Renderers" on page 463 and

"OnControlEvent Method" on page 432.

EndLife. Ends the life of the physical renderer. For more information, see "EndLife Method" on page 462.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 57 Architecture of Siebel Open

Example of the Life Cycle of a User Interface Element

Figure 16 describes the life cycle of the calendar user interface element.

Siebel Open Ul Client

Button Click

o

Physical Renderer

mm Presentation Model

Activity HI

Calendar Applet

f Proxy

Figure 16. Example of the Life Cycle of a User Interface Element

Explanation of Callouts

The following sequence occurs during the life cycle of a calendar user interface object:

1 The user clicks a button that refreshes the calendar.

2 The Init method adds the following items to the physical renderer:

AttachPMBi ndi ng ("Processcal endarData" , Refreshul)

3 The physical renderer sends the following method to the presentation model :

OnCont rol Event ("Ref resh_Cal endar" , RequestCal endarData)

For more information, see "OnControlEvent Method" on page 432.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

The Init method adds the following items to the presentation model :

AddProperty (Meeti ngDates , 7 ist of dates ^' )

AddMethod (RequestCal endarData , implementation)

AttachEventHandl er ("Ref resh_Cal endar" , RequestCal endarData)

AttachNoti f cat onHandl er ("GetCal endarOUIData" , processCal endarData) AttachPostProxyExecute ("GetCal endarOUIData" . SetDefaul tFocus)

For more information, see "AttachEventHandler Method" on page 427.

The presentation model sends the RequestCalendarData method to the Activity HI Calendar Applet proxy.

The Activity HI Calendar Applet proxy sends a request to the Siebel Server to call the

RequestCalendarData method.

The Siebel Server gets metadata from the Activity HI Calendar Applet that resides on this server, and then sends the GetCalendarOUIData notification method to the presentation model. For more information, see "About Objects and Metadata" on page 33.

The presentation model does the following :

a Runs the ProcessCalendarData method and the SetDefaultFocus method.

b Sends the RefreshUI method to the physical Tenderer. This method gets the relevant properties from the presentation model.

The physical renderer refreshes the calendar.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

This cha pter i ncludes a detailed exa mple that describes the typical tasks that you can do to customize Siebel Open UI. It includes the following topics :

■ Roadmap for Customizing Siebel Open UI on page 61

■ Process of Customizing the Presentation Model on page 62

■ Process of Customizing the Physical Renderer on page 84

■ Configuring the Manifest for the Recycle Bin Example on page 94

■ Testing Your Modifications on page 95

Roadmap for Customizing Siebel Open

UI

You do the fol lowi ng tasks to customize Siebel Open UI :

1 Process of Customizing the Presentation Model on page 62

2 Process of Customizing the Physical Renderer on page 84

3 Configuring the Manifest for the Recycle Bin Example on page 94

4 Testing Your Modifications on page 95

You can use this sequence as a general guideline to create your own customizations. To summarize, you do the following work:

■ Modify a presentation model. You customize the presentation model that implements a recycle bin that contains the records that a user deletes in a view. You add a Select list column and modify the Delete button so that the user can choose more than one record, and then delete them from the server database. You configure Siebel Open UI to do a local backup on the client of the chosen records. This configuration requires you to modify the metadata that Siebel Open UI uses in the client and to modify client behavior. It does not require you to modify rendering . So, you only modify the presentation model . You do not modify the physical renderer to implement this part of the example.

■ Modify a physical renderer. You customize a physical renderer for a third-party carousel control that displays the recycle bin contents and allows the user to restore deleted records. You modify the physical renderer so that Siebel Open UI displays a local back up copy of the deleted records in a carousel control, and then allows the user to choose and restore each of these records. This configuration modifies the physical representation of the records so that Siebel Open UI displays them in a modified grid. It also modifies the physical interactivity that allows the user to choose records in the carousel .

For background information about the architecture that this example uses, see "Stack That Siebel Open UI Uses to Render Objects" on page 46 and "Life Cycle of User Interface Elements" on page 54.

Configuri ng Siebel Open UI Version 8. 1/8.2, Rev. A 6 1 Example

Process of Customizing the Presentation Model

This task is a step in "Roadmap for Customizing Siebel Open UI" on page 61.

To customize the presentation model, do the following tasks:

1 Creating the Presentation Model on page 62

2 Customizing the Setup Logic of the Presentation Model on page 64

3 Customizing the Presentation Model to Identify the Records to Delete on page 66

4 Customizing the Presentation Model to Delete Records on page 69

5 Overriding Predefined Methods in Presentation Models on page 74

6 Customizing the Presentation Model to Handle Notifications on page 75

7 Attaching an Event Handler to a Presentation Model on page 78

8 Customizing Methods in the Presentation Model to Store Field Values on page 81

9 Customizing the Presentation Model to Call the Siebel Server and Delete a Record on page 83

Creating the Presentation Model

This task is a step in "Process of Customizing the Presentation Model" on page 62.

The presentation model uses the Init method to configure the properties, methods, and bindings of the presentation model, and the Setup method to extract the values that a property set contains. For more information about these methods, see "Life Cycle of User Interface Elements" on page 54.

Figure 17 illustrates the code you use to create the presentation model. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

return BtiycSeBjr.Riiael :

( > .- re La rn · Si«b« Arcf »c*ae . Recycle fi lr£»-na fci ^■ :

Figure 17. Setting Up the Presentation Model

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Model

create the presentation model

Create the custom presentation model file:

a Download a copy of the recyclebinpmodel.js file to the following folder:

CZ.XF/V7l /CW£\SWEApp\PUBLIC\ 7anguage_code\fi 1 es\custom

This topic describes how to modify code that resides in the recyclebinpmodel.js file. It is recommended that you get a copy of this file to assist in your understanding of how to implement the example that this topic describes. This file includes all the code that this example uses. It also includes more comments that describe code functionality. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

For more information about the folders you can use to store your customizations, see "Organizing Files That You Customize" on page 122.

b Use a JavaScript editor to open the recyclebinpmodel.js file that you downloaded in Step a. Verify that the RecycleBinPModel class does not exist and that you do not configure Siebel Open UI to override this class. You add the following code:

i f (typeof (Si ebel AppFacade . Recycl eBi nPModel ) === "undef ned") {

Make sure that a namespace exists that Siebel Open UI can use to prevent conflicts:

Si ebel JS . amespace ("Si ebel AppFacade . Recycl eBi nPModel ") ;

Use the Define method to identify the presentation model file:

defi neC'si ebel /custom/recycl ebi npmodel " , [] , functi on () {

You must use the Define method to make Siebel Open UI can identify the constructor. You must include the relative path and the name of the presentation model file without the file name extension. For more information, see "Define Method" on page 506.

Define the class:

Si ebel AppFacade . Recycl eBi nPModel = (functi on() {

Load the SiebelApp. Constants namespace that defines the constants that Siebel Open UI uses: var consts = Si ebel JS . DependencyC'Si ebelApp . Constants") ;

Define the class constructor:

functi on Recycl eBi nPModel () {

si ebel AppFacade . Recycl eBi nPModel . supercl ass . constructor . appl y (thi s , arguments) ;

}

Set up the injected dependency chain :

Si ebel DS . Extend(Recycl eBi nPModel , Si ebel AppFacade . Li stPresentati onModel ) ;

For more information about injected dependency chains, see "About Dependency Injection" on page 69.

Return the constructor:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

return ecycl eB nPModel ;

} CO ;

return "S ebelAppFacade . Recycl eB nPModel " ;

}) ;

10 Save the recyclebinpmodel.js file.

Customizing the Setup Logic of the Presentation Model

This task is a step in "Process of Customizing the Presentation Model" on page 62.

In this topic, you customize the setup logic of the presentation model so that it adds the Selected list column to an applet. You add the control that you configure for this example to the ListColumns list that resides in the client.

Figure 18 illustrates the code you use to customize the setup logic of the presentation model. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 18. Customizing the Setup Logic of the Presentation Model To customize the setup logic of the presentation model

1 In the recyclebinpmodel.js file, identify the property or method of the object that you must modify.

To do this identification, you can examine methods in the JavaScript API that most closely match the behavior that your example requires. For more information about this JavaScript API, see Appendix A, "Siebel Open UI Application Programming Interface."

You can use the following list as a guide to get you started, depending on the area of the Siebel application that your customization must modify:

■ Application methods. For more information, see "Application Model Class" on page 478.

■ Applet methods. For more information, see "Presentation Model Class for Applets" on

page 433.

■ List applet methods. For more information, see "Presentation Model Class for List Applets" on page 452.

■ Applet control methods. For more information, see "Applet Control Class" on page 466.

■ Menu methods. For more information, see "Presentation Model Class for Menus" on page 458.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Model

■ Siebel business service methods. For more information, see "Business Service Class" on page 477.

In this example, you can examine the presentation model that Siebel Open UI uses for list applets to identify the property or method of the object that you must modify. To identify this property, see "Properties of the Presentation Model That Siebel Open UI Uses for List Applets" on page 453.

After examining these properties, you find that Siebel Open UI uses the GetListOfColumns method that resides in the presentation model. In general, when you examine a property or method in a list applet, it is recommended that you first examine the list presentation model that a list uses, and then the applet presentation model that a form applet uses.

You must add the Selected list column to a list applet. The Selected list column is a control that Siebel Open UI displays in the client. So, you add it to the list of listOfColumns that Siebel Open UI already uses.

2 Specify the method that the presentation model runs as part of the Setup life cycle:

Recycl eB nPModel . prototype . Setup = functi on(propSet) {

In this example, you configure Siebel Open UI to create a control that it displays only in the client, and then insert it into the GetListOfColumns property of the applet. You add this code in the Setup life cycle method of the presentation model because this logic is related to the work that Siebel Open UI does to create the applet. Siebel Open UI must create the applet first, and then insert the control. For more information, see "Summary of Presentation Model Methods" on page 54.

Create a new instance of the AppletControl object:

var mycontrol = S ebelApp . S_App . GetAppl etcontrol Instance

This example requires Siebel Open UI to create a new listOfColumns and add it to the

GetListOfColumns array. You can use the GetAppletControlInstance method to create a new instance of the AppletControl object. For more information, see "GetAppletControlInstance Method" on page 481.

Name the instance:

"Cl i ent_Sel ect" ,

You must specify a unique name for the instance. This example uses Client_Select, which is a unique value that Siebel Open UI can use to determine the operation that it must perform.

5 Specify the control type:

COnstS . get("SWE_CTRL_CHECKBOX") ,

"sel ect" ,

"Sel ect" ,

" 50") ;

thi s . GetC'GetLi stOfCol umns") ["Sel ecti onBox"] = mycontrol ;

Si ebelAppFacade . Recycl eBi nP odel . superclass . Setup . cal l (thi s , propSet) ; } ;

where:

■ consts . get("swE_CTRL_CHECKBOX") specifies the control as a checkbox.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 65 Example of Customizing Siebel Open .U¾¾R <l s¾ ofJSusEB

■ Sel ect specifies the display name. You can specify any display name.

■ 50 specifies the width of the column.

For more information about control types, see "Applet Control Class" on page 466.

6 Save the recyclebinpmodel.js file.

Customizing the Presentation Model to Identify the Records to Delete

This task is a step in "Process of Customizing the Presentation Model" on page 62.

In this topic, you modify the list column control that you created in Step 3 on page 65. This control uses a check box, so you must make sure that Siebel Open UI stores the value of this check box if the user toggles it.

Figure 19 illustrates the code that you use to customize the presentation model logic to identify the records to delete. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

jjr ' ^~* -'"mi ggffl ^J "; · " ⁼

I

Figure 19. Customizing the Presentation Model Logic to Identify the Records to Delete

To customize the presentation model to identify the records to delete

1 In the recyclebinpmodel.js file, add the method that Siebel Open UI must call :

thi s .Add ethod ("LeaveFi el d" , PreLeaveFi el d , {sequence : true , scope : thi s}) ;

where:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Model

■ AddMethod adds the LeaveField method.

To identify the method to add when you do your own customization work, you can examine the flowcharts for the life cycle that Siebel Open UI uses that meets your business requirement. To view these flowcharts, see "Life Cycle Flows of User Interface Elements" on page 523.

In this example, the business requirement is to save the value in a control. Siebel Open UI saves the value of a control when the user navigates away from the control, so it calls the LeaveField method to handle this requirement. For more information, see "LeaveField Method" on page 444 and "Flow That Handles Focus Changes in List Applets" on page 529.

■ PreLeaveFi el d , {sequence : true , scope : th s} configures Siebel Open UI to call your custom LeaveField method before it calls the predefined LeaveField method. It does this during the Init life cycle when it runs the AddMethod method. It is recommended that you set up the presentation model methods at the beginning of the Init life cycle call that contains most of the properties and dependency injections, including predefined and custom methods. For more information about Init, see "Life Cycle of User Interface Elements" on page 54. For more information, see "About Dependency Injection" on page 69.

It is recommended that you use a named method to specify the Prexxx customization method, such as PreLeaveField. This configuration makes sure that Siebel Open UI uses the same method for all presentation model instances. It is not recommended that you specify the Prexxx customization method as an anonymous method in the AddMethod call because Siebel Open UI creates this anonymous method for every instance of the presentation model that resides in memory, possibly for more than one applet in the same view. Defining an anonymous method in this situation might cause a conflict.

Create the condition :

i f (Ct rl . GetNameO === "Cl i ent_Sel ect") {

The Setup method uses the GetName method with a literal return value of Client_Select. It identifies the method that Siebel Open UI uses for your custom control. For more information, see "GetName Method for Applet Controls" on page 470.

Make sure Siebel Open UI returns your custom logic after it sets the CancelOperation part of the return value to true:

returnStructure [ "Cancel Operati on" ] = true ;

This configuration overrides the predefined code when Siebel Open UI calls LeaveField for your new list column. In this example, you must implement LeaveField for the control, so it is not desirable to call the predefined code for this control after Siebel Open UI finishes running your customization of the LeaveField method. For more information about using ReturnStructure when you modify a method, see "AddMethod Method" on page 425.

Configure Siebel Open UI to return a value of true after it sets the CancelOperation part of returnStructure to true:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

returnstructure [ "ReturnVal ue" ] = true ;

The LeaveField method returns a value of true to indicate success in this example, so you must make sure Siebel Open UI uses the same logic after your customization finishes running and returns a value. This configuration makes sure the Init life cycle continues on the success path after the custom LeaveField method runs. You can use ReturnValue to make sure Siebel Open UI sets the return value of your custom implementation to the required value. In this example, you set this value to true.

Disable the processing that Siebel Open UI does for the control that is in focus:

th s . ExecuteMethodC'SetActiveControl " , nul l ) ;

This code sets the active control to null. For more information, see "Disabling Automatic Updates" on page 69 and "SetActiveControl Method" on page 447.

Add the property that Siebel Open UI uses to store the set of records that are pending deletion: thi s .AddPropertyC'Del eti onPendi ngset" , [] ) ;

The set of records that are pending deletion represent the state of your custom presentation model, so you add the DeletionPendingSet property to store the field values for this set of records.

Identify the records that Siebel Open UI must delete:

var delobj = thi s . Get("Del eti onPendi ngSet") ;

var currentSel ecti on = thi s . Get("GetSel ection") ;

i f (val ue === "Y") {

delob [currentSel ection] = thi s . GetC'GetRecordSet") [currentSel ecti on] ;

}

el se{

delobj [currentSel ecti on] = nul l ;

}

Siebel Open UI must identify the records that the user chooses to delete so that it can populate a value into the DeletionPendingSet property.

To identify this property, you can examine the properties that the presentation model uses for the applet. This work is similar to the work you do in Step 1 on page 64 to identify the property in the presentation model that Siebel Open UI uses for lists, except in this topic you examine the properties described in "Properties of the Presentation Model That Siebel Open UI Uses for Applets" on page 436.

After examining these properties, you find that Siebel Open UI uses the GetSelection property to get the index of the record that the user has chosen from among all the records that Siebel Open UI displays. You also find that you can use the GetRecordSet property to get this full set of records.

Save the recyclebinpmodel.js file.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Model

About Dependency Injection

Dependency injection is a software technique that Siebel Open UI uses to create a dependency between a presentation model and a physical renderer. If Siebel Open UI modifies a method or property that resides in the presentation model, then it also modifies a method or property that resides in the physical renderer. It allows Siebel Open UI to implement logic at run time rather than during a compile. These dependency injections allow Siebel Open UI to use an injected dependency chain, which is a series of two or more dependency injections. You can modify Siebel Open UI to make this chaining depend on conditions that Siebel Open UI modifies at run time. It can use all the methods that the Init method references in "Summary of Presentation Model Methods" on page 54 for dependency injection. For an example that uses dependency injection, see "Customizing the Physical Renderer to Refresh the Recycle Bin" on page 89.

Disabling Automatic Updates

Siebel Open UI sends updated field values to the Siebel Server for any fields that the user has modified in the client. In this example, you must disable this update functionality for the current control. You can reference the documentation for the predefined applet to identify the presentation model property that you must modify. In this situation, the documentation indicates that you can configure Siebel Open UI to use the SetActiveControl property of the active control on the applet and set it to null. For more information, see "Disabling Automatic Updates" on page 69, "SetProperty Method" on page 432, and "SetActiveControl Method" on page 447.

ExecuteMethod calls a method that resides in the presentation model. It makes sure that Siebel Open UI runs all injected dependency chains that the method requires when it runs. You must use ExecuteMethod to call any predefined or custom method that resides in a presentation model. For more information, see "About Dependency Injection" on page 69 and "ExecuteMethod Method" on page 430.

Customizing the Presentation Model to Delete Records

This task is a step in "Process of Customizing the Presentation Model" on page 62.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A ! 69 J Example

Figure 20 illustrates the code you use to configure the presentation model to delete records. In this topic, you configure Siebel Open UI to customize and conditionally override the InvokeMethod method. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 20. Customizing the Presentation Model to Delete Records

To customize the presentation model to delete records

1 In the recyclebinpmodel.js file, add the method that Siebel Open UI uses to delete a record : thi s .AddMethodC'lnvokeMethod" , Prelnvoke ethod , {sequence : true , scope : thi s}) ;

You must identify the method that Siebel Open UI uses when the user clicks Delete. To do this identification, it is recommended that you examine the flowchart that Siebel Open UI uses during a typical life cycle when it calls methods that reside on the Siebel Server. The life cycle flowchart indicates that Siebel Open UI calls the DeleteRecord method when it calls the InvokeMethod method. You add this code in the Init method. For more information, see "Life Cycle Flows That Create New Records in List Applets" on page 531 and "DeleteRecord Method" on page 395.

This configuration is similar to the configuration you added in Step 1 on page 66 that includes the AddMethod method and the sequence statement.

2 Call the custom logic only if Siebel Open UI calls the DeleteRecord method :

i f (CmethodName === "Del eteRecord") && ! thi s . Get("lnDel eti on")) {

This code examines the value of the InDeletion property that you set up in Step 3.

ISll Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Set the InDeletion property to true only if Siebel Open UI starts the deletion process:

this.SetProperty("lnDeletion" , true) ;

This code determines whether or not Siebel Open UI is already running an instance of your custom delete process, and then makes sure that no more than one of these instances runs at the same time. The InDeletion property determines whether or not the deletion process is currently running.

You could use the following code in the Init method to add this property:

this .AddPropertyC'inDeletion" , false)

This example demonstrates how you can use SetProperty to use a property temporarily so that it is similar to a conditional flag. This example uses SetProperty to create this property only when necessary. If Siebel Open UI calls the Get method before it calls the SetProperty method, then the JavaScript returns a value of undefined, which is the default value that JavaScript assigns to any variable that is not defined.

Get the set of records where the Selected value of each of these records includes a check mark: var deletionPending = this.GetC'DeletionPendingSet") ;

This code gets the state of the set of records before the user clicks Delete. Siebel Open UI stores this information in the DeletionPendingSet property in the LeaveField customization that you added in Step 6 on page 68.

Determine whether or not the user has chosen at least one record for deletion:

if (deletionPend ng. length > 0){

This code represents this condition as > 0, where 0 indicates the number of records chosen. Iterate through all the records that the user has chosen to delete:

for (var counter = deletionPending. length - 1; counter >= 0; counter— ){ var currentobj = deletionPending[counter] ;

if (currentobj) {

}

}

Disable the processing that Siebel Open UI does for the control that is in focus:

this.ExecuteMethod("SetActiveControl", null) ;

For more information, see "Disabling Automatic Updates" on page 69 and "SetActiveControl Method" on page 447.

Modify the application state so that Siebel Open UI references the record that it must delete:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A [ 71 Example of Customizing Siebel Open UI <3(? ©B@SM0S0O¾°) ¾C¾@ (¾¾@©0ϋ¾)6Β@0¾

th s . Execute ethod ("Handl eRowSel ect" , counter , fal se , fal se) ;

To identify this code when you customize Siebel Open UI, it is recommended that you examine "Flow That Handles Navigation to Another Row in List Applets" on page 536. In this example, this flow indicates that you must use the HandleRowSelect method. HandleRowSelect resides in the presentation model that Siebel Open UI uses for list applets, so you can configure Siebel Open UI to use ExecuteMethod to call it. For more information, see "HandleRowSelect Method" on page 455.

9 Make sure that Siebel Open UI can call the DeleteRecord method :

i f Cth s . ExecuteMethodC'Canlnvoke ethod" , "Del eteRecord")) {

It is recommended that you configure Siebel Open UI to call Canlnvoke before it calls a method to make sure that it can call this method in the context of the object that is currently in scope. Siebel Open UI can use the Canlnvoke method to model complex logic for any record that exists in the Siebel Database on the Siebel Server. This logic can determine whether or not Siebel Open UI can call an operation according to the scope that it applies to a current object, such as a record that is in scope. In this example, it determines whether or not it can call the DeleteRecord method.

You can use the method descriptions in Appendix A, "Siebel Open UI Application Programming Interface" to identify the method that you must use in your customization work.

For more information about the method that this example uses, see "CanlnvokeMethod Method for Presentation Models" on page 437.

10 Add a property that Siebel Open UI can use to store information about the records that it sends to the Siebel Server for deletion :

thi s .AddPropertyC'ObjectsunderDel eti on" , [] ) ;

Delete confirmation occurs through an asynchronous notification, so Siebel Open UI must back up the information that describes the record that it is about to delete. The notification handler requires this information so that it can do the post-processing work for this record. Subsequent steps in this topic describe this notification handler. For more information, see "About

Synchronous and Asynchronous Requests" on page 74 and "Notifications That Siebel Open UI Supports" on page 541.

11 Delete the record :

thi s . GetC'ObjectsUnderDel eti on") [thi s . Get("GetSel ecti on")] = cu rrentob ;

var i nputPS = Si ebelApp . s_App . NewPropertySet() ;

th s . ExecuteMethod ("InvokeMethod" , "Del eteRecord" , i nputPS) ;

where:

■ objectsUnderDel etion inserts the record into a backed up record set, and if this insert occurs at an index location that is equal to the index of the selected row, then Siebel Open UI can reference the selected row to identify the correct index to use when processing the NotifyDeleteNotification reply. The Siebel Server sends this reply. Siebel Open UI must identify the record where it set the notification when it handles the NotifyDeleteNotifications notification. You can configure Siebel Open UI to call HandleRowSelect to select the row before it sends the request to delete the record.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ GetSel ecti on is a property of the applet presentation model that includes an index that Identifies the chosen record. This record resides in the record set that resides in the client. When you develop your own customization, you can reference the documentation to identify the property that your customization requires. For more information, see "Properties of the Presentation Model That Siebel Open UI Uses for Applets" on page 436.

■ InvokeMethod is a method that resides in the presentation model that Siebel Open UI uses for a list applet. You can use ExecuteMethod to call it.

■ fal se configures Siebel Open UI to make a synchronous request to the Siebel Server. A synchronous request makes sure that Siebel Open UI sends all DeleteRecord requests to the server before it exits the loop. If Siebel Open UI exits the loop during a synchronous request, then it sends all DeleteRecord requests sequentially. In this situation, Siebel Open UI sends the requests to the server so that the server can process a reply for the previous request, including the delete completion notifications. The server does this processing during a synchronous request before it sends the next DeleteRecord request. You can also use an asynchronous request where Siebel Open UI sends all the DeleteRecord requests to the server before it processes any of the replies for these requests. For more information, see "About Synchronous and Asynchronous Requests" on page 74.

Set the DeletionPendingSet property to zero:

thi s . SetPropertyC'Del eti onPend ngSet" , [] ) ;

This code sets the DeletionPendingSet property to zero after Siebel Open UI finishes all the DeleteRecord calls on the Siebel Server.

Set the CancelOperation member of the returnStructure to true:

returnStructure ["CancelOperat on"] = true ;

You configure Siebel Open UI to set this member before it exits the outer loop that processes the deletionPending records. You do this so that Siebel Open UI does not use the DeleteRecord argument to make another call to the predefined InvokeMethod method. For more information about ReturnStructure, see "AddMethod Method" on page 425.

Set the InDeletion flag to false: .

thi s . SetPropertyC'lnDel eti on" , f al se) ;

You configure Siebel Open UI to set this property before it exits the conditional block that does the InvokeMethod processing for the DeleteRecord method.

Save the recyclebinpmodel.js file.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 73 Example

About Synchronous and Asynchronous Requests

A synchronous request is a type of request that Siebel Open UI sends to the Siebel Server, and then waits for a reply to this request before it continues any other processing. An asynchronous request is a type of request that Siebel Open UI sends to the Siebel Server, and then continues other processing while it waits for a reply to this request. The GetSelection request is synchronous, so Siebel Open UI cannot send another request to move the selection to a different record before the Siebel Server sends a reply notification that indicates a successful deletion. When processing this notification, the intended row remains in the same row that Siebel Open UI most recently selected. Siebel Open UI can use the selected row as a common index that it can use to reference the record . For information about how you can configure an asynchronous request, see "Allowing Users to Interact with Clients During Business Service Calls" on page 120.

Overriding Predefined Methods in Presentation Models

This task is a step in "Process of Customizing the Presentation Model" on page 62.

If Siebel Open UI calls the GetFormattedFieldValue method for a control that it only displays in the Siebel Open UI client, then this client cannot not find the field in the list of fields that it uses, and the client creates an error. To avoid this situation, you can customize Siebel Open UI to override the predefined GetFormattedFieldValue method so that it does not create an error when it calls GetFormattedValue for your new list column .

To override predefined methods in presentation models

1 Use the flowcharts to identify the method that you must modify.

Siebel Open UI displays values for applet controls and list columns after it gets these values from the client. It caches these values in the client after it downloads them from the Siebel Server. To identify the method that handles these values, you can examine the flowchart that describes how Siebel Open UI creates a new record in a list applet, and then updates the client. In this example, the flowchart indicates that it calls the GetFormattedFieldValue method. If the physical renderer requires the ShowControlValue method, then it calls the presentation model to run the GetFormattedFieldValue method. For more information, see "Flow That Creates New Records in List Applets, Updating the User Interface" on page 534.

2 In the recyclebinpmodel .js file, configure Siebel Open UI to conditionally override and customize the method :

Recycl eBi nPModel . prototype . ini t = functi on() {

Si ebelAppFacade . Recycl eB nPModel . supercl ass . Ini t . cal l (thi s) ;

thi s .AddMethod ("GetFormattedFi el dVal ue" , PreGetFormattedFi el dval ue ,

{sequence : true , scope : thi s}) ; functi on PreGetFormattedFi el dval ue(control , busews , reclndex , returnStructure) { i f (control . GetNameC) === "Cl i ent_Sel ect") {

returnStructure ["CancelOperation"] = true ;

Config u ri ng Siebel Open UI Version 8. 1/8.2, Rev. A

retu rnSt ructu re ["Retu rnVal ue" ] = " " ;

}

}

where :

■ thi s . Add ethod adds the PreGetFormattedFieldValue method in the Init life cycle and specifies PreGetFormattedFieldValue as the customization.

■ sequence : true specifies to call the custom PreGetFormattedFieldValue before it calls the predefined GetFormattedFieldValue method.

■ The following code in the custom method determines whether or not the control that Siebel Open UI is currently examining is the client-only control :

i f (control . GetName C) === "Cl i ent_Sel ect")

If it is, then Siebel Open UI sets the CancelOperation member of the returnStructure to true and the ReturnValue to null . For more information about returnStructure, see "AddMethod Method" on page 425.

3 Save the recyclebinpmodel .js file.

Customizing the Presentation Model to Handle

Notifications

This task is a step in "Process of Customizing the Presentation Model" on page 62.

The Siebel Server sends a confirmation of the record deletion when it receives the InvokeMethod request for the DeleteRecord method . You can write a handler for the NotifyDeleteRecord notification to process this confirmation in the client. For more information, see "DeleteRecord Method" on page 395.

Siebel Open UI packages a notification that it gets from the Siebel Server in the business component layer as part of a reply property set. This property set includes information about server state modifications or replies to requests for state information. For example, if Siebel Open UI deletes a record on the server, then it sends a NotifyDeleteRecord notification to the client. When Siebel Open UI sends a request to the server, the server processes the request, Siebel Open UI examines the relevant modifications that exist on the server, and then collects and packages notifications that are ready to communicate to the client. If Siebel Open UI sends an InvokeMethod call for the

DeleteRecord method to the server, then the Siebel Web Engine sends a NotifyDeleteRecord notification from the business component layer to the client. For more information about the business component layer, see Configuring Siebel Business Applications.

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A 75 Example of Customizing Siebel Open UI■ Processle M

Figure 21 illustrates the code you use to customize the presentation model to handle notifications. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 21. Customizing the Presentation Model to Handle Notifications

To customize the presentation model to handle notifications

1 Identify the notification type that Siebel Open UI must handle.

Examine the notification types in the "Notifications That Siebel Open UI Supports" on page 541 topic. Look for a notification type that indicates it might include the information that your customization requires. For this example, the notification type for the NotifyDeleteRecord notification is SWE_PROP_BC_NOTI_DELETE_RECORD.

2 Examine the methods in the presentation model that indicate they might be useful for your customization.

The AttachNotificationHandler method is the appropriate method to use for this example. For more information, see "AttachNotificationHandler Method" on page 428.

3 In the recyclebinpmodel.js file, add the AttachNotificationHandler to the Init method of the presentation model :

th s .AttachNoti f cati onHandl er(consts . get("SWE_PROP_BC_NOTi_DELETE_RECORD") , Hand! eDel eteNoti f i cati on) ;

4 Add the custom method that Siebel Open UI uses to handle replies from NotifyDeleteRecord and to populate the recycle bin :

f uncti on Handl eDel eteNoti f cati on (propSet) {

5 Get the property that you use to identify the objects that are currently flagged for deletion: var ob ectsunderDel eti on = thi s . Get("ObjectsUnderDel etion") ;

You configured this property in Step 10 on page 72 to back up the records that Siebel Open UI is in the process of deleting.

6 Determine whether or not any records exist in the In Progress list:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

i f (objectsunderDel eti on . l ength > 0) {

Siebel Open UI must process these records and move them to the recycle bin. In this step and in several subsequent steps, you do more than one examination to make sure the notification instance that Siebel Open UI is handling is the instance that it requires for the notification handler. Some repeating notifications might exist that you must process to avoid duplication. Identify the row involved with the NotifyDeleteRecord notification :

var acti veRow = propSet .GetPropertyCconsts . get ("SWE_PROP_BC_NOTl_ACTlVE_ROW")) ;

In this example, you use the SWE_PROP_BC_NOTI_ACTIVE_ROW property. For more information about this property, see "Summary of Notifications That Siebel Open UI Supports" on page 542. Make sure that this notification confirms the deletion, and make sure that this notification is not a duplicate:

i f (act veRow == thi s . GetC'GetSel ecti on") && objectsunderDel eti on [acti veRow] ) { where:

■ The following code determines if the record that the NotifyDeleteRecord method references is the currently selected record :

acti veRow == thi s .GetC'GetSel ecti on")

This example uses a synchronous request, so Siebel Open UI selects the record that the DeleteRecord method references in the context of PrelnvokeMethod. It selects no other record after it makes this initial selection while the Siebel Server sends the delete confirmation notification to the client. For more information, see "About Synchronous and Asynchronous Requests" on page 74.

■ The following code makes sure that this notification is not a duplicate:

objectsunderDel eti on [ acti veRow ]

It determines whether or not Siebel Open UI has already removed the record that it is examining in a previous instance of handling the same notification for the same record. Add a property that Siebel Open UI can use to store the list of records that the user deletes but might retrieve from the recycle bin:

thi s . AddProperty ("De eti oncompl eteSet" , [] ) ;

Store the deleted record :

thi s . Get ("Del eti onCompl eteSet") . push (ob jectsunderDel eti on [acti veRow] ) ;

The conditional block where this code resides determines that this notification is not a duplicate NotifyDeleteRecord notification for the record that the DeleteRecord method requests deletion. So, this push statement pushes the deleted record into the DeletlonCompletedSet property that you defined Step 9.

Remove the record from the Deletion in Progress list:

objectsunderDel eti on [ activeRow ] = nul l ;

Add the RefreshList method:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A I 77 ^~ ]

Example of Customizing Siebel Open UI■ Proces^^l^^oSSBq ^^e^^Sej-^lE^

th s.AddMethod("RefreshL st", function(){}) ;

Siebel Open UI must refresh the recycle bin after Step 11 adds a record to this recycle bin. You can use dependency injection through the AttachPMBinding method to inform the physical renderer that the recycle bin requires a refresh. For more information, see "About Dependency Injection" on page 69. For more information, see "How Siebel Open UI Uses Nondetailed Data to Indicate Modifications That Occur in Detailed Data" on page 78.

13 Run the RefreshList method :

thi s . ExecuteMethod("RefreshLi st") ;

14 Save the recyclebinpmodel.js file.

How Siebel Open UI Uses Nondetailed Data to Indicate Modifications That Occur in Detailed Data

Siebel Open UI uses the dependency that exists between the presentation model and the physical renderer to indicate a high-level modification in a property or method, such as a modifying in the list of records that it must display. This dependency configures Siebel Open UI to run a high-level renderer method, such as a method that repopulates the entire physical markup of columns and data in the grid container. The renderer method then gets the detailed presentation model attributes, such as columns and data, through properties or methods that the presentation model contains.

This example uses the RefreshList method as an indicator that Siebel Open UI modified something in the DeletionCompletedSet property. When you configure the physical renderer in "Customizing the Physical Renderer to Refresh the Recycle Bin" on page 89, you configure Siebel Open UI to use AttachPMBinding to bind a physical renderer method to the RefreshList method. You also configure Siebel Open UI to use this physical renderer method to get the detailed data that the

DeletionCompletedSet method references. Siebel Open UI gets this data from the presentation model so that the physical renderer can render it. For more information, see "AttachPMBinding Method" on page 428.

Attaching an Event Handler to a Presentation Model

This task is a step in "Process of Customizing the Presentation Model" on page 62.

At this point in this example, you have set up and customized the presentation model to choose records to delete, to delete them, and then to move them to the recycle bin. In this topic, you modify the presentation model to allow the user to click an item in the carousel, and then click the plus sign (+) to restore the record.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Figure 22 illustrates the code you use to attach an event handler to a presentation model. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure. ftecyeiefliis?noee-. prototypes l«it - *unotl«iO <

Figure 22. Attaching an Event Handler to a Presentation Model

To attach an event handler to a presentation model

1 In the recyclebinpmodel.js file, add the method that handles the event. Siebel Open UI calls this method when the user clicks the plus sign (+) :

functi on OnCl i ckRestore( ndex) {

The name of an event handler typically starts with the following prefix:

On

2 Bind the OnClickRestore method to the RESTORE custom event:

th s . AttachEventHandl erC'RESTORE" , OnCl ckRestore) ;

This code adds the RESTORE custom event. The physical Tenderer sends this event to the presentation model, and then the presentation model runs OnClickRestore. The

AttachEventHandler method sets up a dependency injection, so you add it in the Init method. For more information, see "AttachEventHandler Method" on page 427 and "About Dependency Injection" on page 69.

3 Identify the method that Siebel Open UI uses when a user creates a record.

Examine the "Flow That Creates New Records in List Applets, Calling the Siebel Server" on page 532. Note that Siebel Open UI uses the NewRecord method, and then the WriteRecord method as an input argument for the InvokeMethod method when it runs InvokeMethod in the presentation model. For more information, see "NewRecord Method" on page 474.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Example of Customizing Siebel Open U

4 Determine how Siebel Open UI stores the field values of a new record that a user creates.

Examine "Flow That Handles Focus Changes in List Applets" on page 529. This flow describes the process that occurs between the initial NewRecord call and the WriteRecord call when Siebel Open UI creates a record in the client. It stores the field values in the client while the user enters these values and navigates from one field to another field. For more information, see

"WriteRecord Method" on page 407.

Siebel Open UI can do the following to create a record that it restores through the OnClickRestore event handler:

■ Run the InvokeMethod method for the NewRecord.

■ Store values that the user enters in each field, and use values from the records that Siebel Open UI stores in the recycle bin.

■ Run the InvokeMethod method for WriteRecord with the client already configured to include the field values for the record.

5 Make sure Siebel Open UI can use the NewRecord method in the applet:

(thi s . ExecuteMethodC'Canlnvoke ethod" , "NewRecord") ) {

If Siebel Open UI cannot run the NewRecord method, then it exits this conditional statement.

6 Add the property that Siebel Open UI uses to store the index that identifies the record it must restore:

thi s . AddPropertyC' restorati onindex" , -1) ;

The physical renderer must specify the record to restore. To do this, it uses the

DeletionCompletedSet property to get the restorationlndex of this record from the client and store it. It then sends this index to the presentation model as part of a request to restore the record. The restorationlndex is an index that resides in the DeletionCompletedSet property of the record.

Siebel Open UI sends this value from the recycle bin record that the user chooses to restore. The OnClickRestore method receives this property and Siebel Open UI then stores this value in the restorationlndex property of the presentation model.

7 Configure the OnClickRestore method :

thi s . SetPropertyC'i nRestorati on" , true) ;

thi s . SetProperty(" restorati onlndex" , i ndex) ;

thi s . ExecuteMethodC'lnvokeMethod" , "NewRecord" , nul l , fal se) ;

thi s . Execute ethod("lnvokeMethod" , "Wri teRecord" , nul l , fal se) ;

where:

80 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ NewRecord and WriteRecord are input arguments to the InvokeMethod method. In Step 3 you determined that Siebel Open UI uses the NewRecord method or the WriteRecord method as an input argument for the InvokeMethod, so you specify these methods in this code.

Siebel Open UI stores the field values of a record in the WriteRecord request before it sends this request to the Siebel Server. It stores these values differently depending on whether it creates a record from the recycle bin or whether the user creates a new record. The physical user interface layer does not store these values if the user attempts to restore a record from the recycle bin. It stores these values only if the user creates a new record. You can write the logic that stores these values in a Prexxx customization method of the WriteRecord method. You write this customization in the next topic in this example, "Customizing Methods in the Presentation Model to Store Field Values" on page 81.

This customization runs only while WriteRecord is running to restore a record from the recycle bin. It does not run when the user creates a new record and Siebel Open UI calls WriteRecord. When you start this restoration logic in the OnClickRestore method, you set a presentation model property that serves as a flag that indicates that a recycle bin restoration is in progress. An explicit AddProperty call does not exist for this property, so Siebel Open UI creates this property only if the user uses the recycle bin.

8 Save the recyclebinpmodel.js file.

Customizing Methods in the Presentation Model to Store Field Values

This task is a step in "Process of Customizing the Presentation Model" on page 62.

In this topic, you use the ExecuteMethod method to store the values of the record that the user is attempting to restore from the recycle bin.

Figure 23 illustrates the code you use to customize a method in the presentation model to store the field values of records. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure. function Pre revoke ⁽ let ho<-{ aatEeSaasei ^' ; palty Irgo;; fpY 'Mt »3te»es ^: ii£eH

Figure 23. Customizing a Method in the Presentation Model to Store the Field Values of Records

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 81 customize methods in the presentation model to store field values

In the recyclebinpmodel.js file, add a condition that makes sure Siebel Open UI runs the customization logic only if the user is restoring a record from the recycle bin, and not adding a new record: (

else f (methodName === "writeRecord" && this.Get("inRestoration")){

This if statement examines the value of the methodName in the WriteRecord argument and the value of the inRestoration property. For more information, see "WriteRecord Method" on page 407. Get the set of records for the recycle bin:

var recordset = this.Get("DeletionCompleteSet") ;

In Step 10 on page 77, you configured the DeletionCompletedSet property of the presentation model to store each record that the user adds to the recycle bin.

Get the back up copy of the record that the physical renderer requests to restore:

var record = recordset [this. Get ("restorationlndex")] ;

To get this value, you access the restorationlndex property that you added in Step 6 on page 80. Identify the method that Siebel Open UI uses to indicate that the user navigated away from an applet.

To do this, you can examine "Flow That Handles Focus Changes in List Applets" on page 529. Note that Siebel Open UI calls the LeaveField method as the last step in the flow. The LeaveField method determines whether or not Siebel Open UI removed the focus from a field in an applet, so Siebel Open UI uses this step in the flow as a flag to signal that it must store the field values. To get information about the methods that the flowcharts describe when you develop your own customization, you can use the descriptions in Appendix A, "Siebel Open UI Application

Programming Interface."

Get the list of columns that the list applet contains. This list is identical to the list of columns that the DeletionCompleteSet property contains:

var listOfColumns = this.Get("ListOfCo ^" lumns") ;

Get the list of controls that the list applets contains:

var controls = th s .GetC'GetControl s") ;

For more information about the GetControls property, see "Properties of the Presentation Model That Siebel Open UI Uses for Applets" on page 436.

Store the field values:

for (var i = 0, len = listOfColumns. length; i < len; i++){

var control = cont rols[listOf Col umns[i] .name] ;

if (control ){

this.ExecuteMethodC'LeaveField", control , record [control .GetFieldNameO] , true);}

}

}

where:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ The following code iterates through the applet controls that correspond to the list columns of the record that the DeletionCompleteSet property identifies:

for(var i = 0 , l en = l i stof Col umns . l ength ; i < l en ;

■ th s . ExecuteMethod calls the LeaveField method that you identified in Step 4. It calls this method one time for each iteration. It sends the field value from the corresponding control of the record that DeletionCompleteSet identifies. It sends this value to an argument. When this code iterates, it runs the LeaveField method for every control that Siebel Open UI must populate in the new record that it is using to restore the deleted record from the recycle bin.

Siebel Open UI must send the LeaveField method as a control and store a value for this control. In this example, Siebel Open UI iterates through each control that the list applet contains and sends the value of the corresponding list column that it uses for the control from the record that the DeletionCompleteSet property gets in Step 2.

For a description of the arguments that LeaveField uses, "Summary of Methods That You Can Use with the Presentation Model for Applets" on page 435.

■ record stores the field value of the record that Siebel Open UI is restoring . The subsequent WriteRecord call packages and sends these values to the Siebel Server. Siebel Open UI stores these values when it runs the LeaveField method. For more information about this flow, see "Flow That Handles Focus Changes in List Applets" on page 529, .

8 Save the recyclebinpmodel.js file.

Customizing the Presentation Model to Call the Siebel Server and Delete a Record

This task is a step in "Process of Customizing the Presentation Model" on page 62.

In this topic, you configure the presentation model to remove the record from the recycling bin. You use a dependency injection to call a method on the Siebel Server after the stack that Siebel Open UI uses to call the server has finished processing. For more information, see "About Dependency Injection" on page 69 and "Customizing Events" on page 118.

To customize the presentation model to call the Siebel Server and delete a record

1 In the recyclebinpmodel.js file, add the following code to the Init method in the presentation model:

th s .AttachPostProxyExecuteB nd ng ("Wri teRecord" , Postwri teRecord) ;

You use the Init method to send a WriteRecord call to the Siebel Server. For more information, see "WriteRecord Method" on page 407 and "AttachPostProxyExecuteBinding Method" on page 429.

2 Add the following code anywhere in the presentation model :

functi on Postwr teRecordCmethodName , i nputPS , outputPS) {

i f (thi s . Get("i nRestorati on")) {

thi s . Get ("Del eti onCompl eteset") [thi s . Get (" restorati onlndex") ] = nul 1 ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 83

Example of Customli«SgBSgjfS^MI iKe¾ra:e;r-e;ii

thi s . ExecuteMethod C' ef reshLi st") ;

th s . SetPropertyC'i nRestorat on" , fal se) ;

}

where:

Postwr teRecord does the following work:

■ Removes the record that Siebel Open UI restored in Step 7 on page 82. It removes this record from the DeletionCompleteSet property.

■ Calls the RefreshList method to start another round of binding to the physical renderer. In the next topic in this example you configure Siebel Open UI to call the

HandleDeleteNotification method to refresh the list and remove the record from the recycle bin in the client.

■ Sets the inRestoration property of the presentation model to fal se. You set up this property to true in step Step 7 on page 80 to indicate that Siebel Open UI is restoring a record. The restoration is now finished so you can configure Siebel Open UI to set inRestoration to false.

3 Save the recyclebinpmodel.js file.

Process of Customizing the Physical

Renderer

This task is a step in "Roadmap for Customizing Siebel Open UI" on page 61.

To customize the physical renderer, do the following tasks :

1 Setting Up the Physical Renderer on page 84

2 Customizing the Physical Renderer to Render List Applets on page 86

3 Customizing the Physical Renderer to Bind Events on page 88

4 Customizing the Physical Renderer to Bind Data on page 89

5 Customizing the Physical Renderer to Refresh the Recycle Bin on page 89

6 Customizing the Event Handlers on page 92

7 Modifying the CSS Files to Support the Physical Renderer on page 93

In this topic, you customize the JQGridRenderer physical renderer that Siebel Open UI uses with a presentation model for a typical Siebel list applet so that it renders this applet as a grid. You add the rendering capabilities for the carousel that Siebel Open UI uses to render the recycle bin. You also modify the grid style to accommodate the carousel control. You use methods in the physical renderer to do this work. For a description of these methods, including the sequence you use to configure them, see "Life Cycle of a Physical Renderer" on page.56.

Setting Up the Physical Renderer

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

84 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Figure 24 illustrates the code you use to set up the physical renderer. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Tt orn RecyeieSir.RenCiereE.;

Figure 24. Setting Up the Physical Renderer

To set up the physical renderer

1 Download a copy of the recyclebinrenderer.js file to the following folder:

C-.x.rV7L /C»A/£\SWEApp\PUBLlC\ 7anguage_code\fi 1 es\custom

It is recommended that you get a copy of this file to assist in your understanding of how to implement the example that this topic describes. This file includes all the code that this example uses. It also includes more comments that describe code functionality. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

For more information about the folders you can use to store your customizations, see "Organizing Files That You Customize" on page 122.

2 Use a JavaScript editor to open the recyclebinpmodel .js file that you downloaded in Step 1.

3 Verify that the RecycleBinRenderer class does not exist and that you do not configure Siebel Open UI to override this class :

i f (typeof (Si ebel AppFacade . Recycl eBi nRenderer) === " undef i ned") {

4 To prevent potential conflicts, create a namespace that Siebel Open UI can use :

Si ebel J S . Namespace C'S ebel AppFacade . Recycl eBi nRende rer") ;

5 Use the Define method to identify the physical renderer file:

defi ne ("s ebel /custom/recycl ebi nrendere r" , [" 3 rdParty/j carousel /l i b/ jquery . j carousel . mi n" , " si ebel /j qgri drende rer"] , functi on () {

You must use the Define method to make Siebel Open UI can identify the constructor. You must include the relative path and the name of the presentation model file without the file name extension . For more information, see "Define Method" on page 506.

6 Define the class :

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Si ebelAppFacade . Recycl eBi nRenderer = (functi on() {

7 Declare the variables that Siebei Open UI uses throughout the physical renderer code:

var si ebConsts = Si ebel DS . DependencyC'Si ebelApp . Constants") ;

8 Create the class constructor:

functi on Recycl eBi nRenderer(pm) {

S ebel AppFacade . Recycl eBi nRenderer . supercl ass . constructor . cal 1 (thi s , pm) ; thi s . l i stofcol s = ["Name" , "Locati on"] ;

}

9 Define the inheritance chain :

Si ebel JS . Extend (Recycl eBi nRenderer , si ebel AppFacade . JQGri dRenderer) ;

For more information about inheritance chains, see "About Dependency Injection" on page 69.

10 Save the recyclebinrenderer.js file.

Customizing the Physical Renderer to Render List

Applets

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

The ShowUI method of the JQGridRenderer physical renderer renders a list applet in the JQGrid control. The ShowUI method in the physical renderer that the recycle bin uses places the third-party JCarousel control next to the grid. For more information, see "ShowUI Method" on page 464.

Figure 25 illustrates the code you use to customize the physical renderer to render list applets. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

Figure 25. Customizing the Physical Renderer to Render List Applets

To customize the physical renderer to render list applets

1 In the recyclebinrenderer.js file, call the ShowUI method of the physical renderer:

86 Configuring Siebei Open UI Version 8.1/8.2, Rev. A ®3©DDD(j )Q off @QogasxiiQQsQoog @0Θ&Θ0 <¾xaa QD8 ^' "i feCustomizing the Physical Renderer

Si ebel AppFacade . Recycl eBi nRenderer . supercl ass . Showul . cal 1 (thi s) ;

If you customize a physical Tenderer, then it is recommended that you call each life cycle method of the predefined renderer before you run any custom logic.

2 Get the presentation model instance:

var pm = thi s . GetPMO ;

For more information, see "GetP Method for Physical Renderers" on page 463.

3 Calculate the placeholder ID of the HTML node that Siebel Open UI uses as the container for the predefined applet:

var pl acehol der = "s_" + pm .GetC'GetFul l ld") + "_div" ;

You use this ID to modify the HTML DOM. For example, to position the carousel in the recycle bin. The GetFullId property gets the unique ID of each applet that is in scope in a view. It is uses the following format:

s_Fi/77J-7_di v

where:

■ Fullld in this example is S_A1. The entire ID in this example is s_S_Al_div. Fullld is not a complete ID. It is a part of the ID string template named s_FullId_div.

For more information, see "Properties of the Presentation Model That Siebel Open UI Uses for Applets" on page 436.

4 Resize the container:

$C#" + pl acehol der)

This code attaches the siebui-list-recyclebin CSS class to reduce the width of the list applet and to provide sufficient room for the carousel in the recycle bin. This configuration is an example of using a cascading style sheet to dynamically modify how Siebel Open UI displays the HTML.

5 Add a CSS class:

. addcl ass ("si ebui - i st- recycl ebi n")

6 Add the container node for the carousel after the div container for the main applet, and add CSS classes to the carousel container:

. after("<ul i d=\" " + pl acehol der + "_recycle\" cl ass= ' si ebui -l i st-carousel carousel -ski n-tango ' ></ul>")

7 Get a DOM reference to this new node:

. nextAl l ("#" + pl acehol der + ".recycl e")

8 Set the size:

. jcarousel ({

scrol l : 10 ,

si ze : 0 ,

verti cal : true ,

i temFal 1 backDi mensi on : 150

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Example of Customizing Siebel Open!

9 Apply the carousel plug-in to the reference that Step 7 gets:

. dataC jcarousel ' )

10 Set up the plug-in:

. setupO ;

11 Save the recyclebinrenderer.js file.

Customizing the Physical Renderer to Bind Events

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

In this topic, you add the following functionality to the carousel :

■ If the user hovers the mouse over a record in the carousel, then display a restore button as a plus sign (+).

■ if the user removes the hover, then hide the restore button.

■ If the user clicks the plus sign (+), then call the presentation model to restore the record.

To add this functionality, you customize Siebel Open UI to attach an event handler to each of the following items:

■ To the carousel item for each hover activity.

■ To the HTML node that Siebel Open UI uses for the restore button. To customize the physical renderer to bind events

1 In the recyclebinrenderer.js file, call the BindEvents method of the physical renderer:

Si ebel AppFacade . Recycl eB nRendere r . supercl ass . Bi ndEvents . cal 1 (thi s) ;

For more information, see "BindEvents Method" on page 461.

2 Locate the HTML nodes that you must modify.

3 Attach event handlers for each event to the nodes that you located in Step 2:

$ C"#s_" + thi s . GetPM() . GetC"GetFul l ld") + "_di v")

. parentO

. del egateC

"d v . s ebui -carousel -i tern" , "mouseenter" , {ctx : thi s} , ShowRestoreButton)

. del egateC

"di v . si ebu -carousel -i tern" , "mousel eave" , {ctx : thi s} , Hi deRestoreButton)

. del egateC

"a . si ebui -ci tern-add" , "cl i ck" , {ctx : thi s} , AddFromRecycl eBi n) ;

You implement these event handlers in "Customizing the Event Handlers" on page 92. For more information, see "GetPM Method for Physical Renderers" on page 463.

4 Save the recyclebinrenderer.js file.

88 Configuring Siebel Open UI Version 8.1/8.2, Rev. A Renderer

Customizing the Physical Renderer to Bind Data

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

The carousel in this example does not render data: Siebel Open UI only renders data in this example if it adds a record to the recycle bin or deletes a record from the recycle bin.

To customize the physical renderer to bind data

1 In the recyclebinrenderer.js file, add the following code to

Si ebelAppFacade . Recycl eBi nRenderer = (functi on() {:

Recycl eBi nRenderer . prototype . Bi ndData = functi on() {

Si ebel AppFacade . Recycl eBi nRenderer . supercl ass . Bi ndData . appl y (thi s , arguments) ;

} ;

For more information, see "BindData Method" on page 461.

2 Save the recyclebinrenderer.js file.

Customizing the Physical Renderer to Refresh the

Recycle Bin

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

At this point in this example, you have configured the ShowUI, BindData, and BindEvents methods of the physical renderer, and this renderer displays the carousel with no records. To display deleted records in the carousel, you customize Siebel Open UI to bind the data from these deleted records to the carousel control. To do this, you use dependency injection through the AttachPMBinding method. For more information, see "About Dependency Injection" on page 69 and "AttachPMBinding Method" on page 428.

Siebel Open UI includes the AttachPMBinding method in the presentation model, but it is recommended that you configure Siebel Open UI to call it from the physical renderer so that the presentation model remains independent of methods that you declare in the physical renderer. AttachPMBinding adds a dependency from a physical renderer method to a presentation model method or property. If Siebel Open UI modifies a property value or runs a method in the presentation model, then it uses this dependency to call a method that resides in the physical renderer.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Example of Customizing Siebel QpenfUi

Figure 26 illustrates t e code you use to customize the physical renderer to refresh the recycle bin. Each number in this figure identifies the corresponding step number in the numbered task list that this book includes immediately after this figure.

function iR f re3¾Ga.xou*el''()'-i

1 ver pa «* this . Gexf¾ <> ^' _t . ^"'

= .ptt-Gex { ^β ,0β1β¾ίοη6όΐφ1βεβ3 ^' βτ ^, ' > > Θ el' .

'caxcuaes ^' L: * «l-.aai;ai ':3C xO,use;l ^' * ), i 9L.

•ϊότΐ βττ ,i -« O.; irecoraSet ^' ileng.cn.,· i, < ΐ** X

if { peccrdSet f i] } ;{

carousel

=sll ( this, recoxxtSet:|iJ , tftis.listOrCels, 1) + **</li>" ) ;

^• ccurit**;

el. =--icarc¾i.3el. - mil;

Figure 26. Customizing the Physical Renderer to Refresh the Recycle Bin

To customize the physical renderer to refresh the recycle bin

1 In the recyclebinrenderer.js file, bind the RefreshCarousel method that the physical renderer contains to the RefreshList method that the presentation model contains:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Physical Renderer

Si ebel 3 S . Extend (Recycl eBi nRendere r , Si ebel AppFacade . DQGri dRenderer) ; RecycleBinRenderer. prototype. init = function () {

Si ebel AppFacade . Recycl eBi nRenderer . supercl ass . mi t . cal 1 (thi s) ;

this .AttachPMBindingC'Ref reshList" , RefreshCarousel) ;

In this example, you implemented the RefreshList method in the presentation model in Step 12 on page 77. This presentation model calls the RefreshList method when the user adds a record or removes a record from the recycle bin. AttachP Binding configures Siebel Open UI to call RefreshCarousel when the presentation model runs the RefreshList method. You must configure your custom physical renderer to call the AttachPMBinding method so that it overrides the Init function. You must make sure you configure Siebel Open UI to call the Init function of the superclass before it creates or attaches a modification in your custom physical renderer.

You must specify all AttachPMBinding calls in the Init function in the physical renderer.

Configure the RefreshCarousel to read the value of the DeletionCompleteSet property in the physical renderer:

var ptn = this.GetPMO ,

recordset = pm.Get("DeletionCompleteSet") ;

Calculate the container in the HTML DOM that hosts the carousel:

el = $("#s_" + pm.Get("GetFunid ^M ) + "_div" + "..recycle") ;

Find the data in the carousel:

carousel = el .data(' jcarousel ') ;

Reset the data:

carousel . resetC) ;

Declare the following variable:

th s.listof Cols = [ "Name", "Location" ];

Refresh the carousel:

var count = 0;

for(var i = 0, len = recordset. length; i < len; i++){

if (recordSet[i]){

carousel

.add(count,

"<li>" + GetCurrentCarousel Items. call (this, recordSet[i] , thi s.listof Cols, i) + "</li>");

count++;

}

}

This code does the following work:

■ Loops through the set of records that the DeletionCompleteSet property contains.

■ Adds the records and the separate items.

■ Sends the index of the record that resides in the DeletionCompleteSet property to the GetCurrentCarouselltems method.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Example of Customlzina.Slebel O r

■ Uses the GetCurrentCarouselltems method to create the markup for each carousel item.

■ Uses GetCurrentCarouselltems to add the index to the markup for the individual item. This configuration makes sure the item is available if the user chooses to restore the record.

■ Iterates through a number of list columns according to the Location variable that you declare in Step 6.

8 Inform the carousel how many items Step 7 added:

carousel .si ze(count) ;

This step makes sure scrolling works correctly.

9 Hide the restore button on each carousel record:

el .find("a.siebui-citem-add") .hideO ;

10 Remove the DOM references:

el = carousel = nul 1 ;

It is recommended that you remove any DOM references that you configure.

11 Save the recyclebinrenderer.js file.

Customizing the Event Handlers

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

In this topic, you customize the event handlers that Siebel Open UI uses to handle the state of the restore button, and to handle the event that occurs if the user clicks a record in the recycle bin. You attached these event handlers in Step 3 on page 88.

To customize the event handlers

1 In the recyclebinrenderer.js file, add the ShowRestoreButton method to display the restore button:

function ShowRestoreButton (evt){

if(evt && evt.currentTarget){

S(evt.currentTarget) .children("a.siebui-citem-add") .show() ;

}

}

2 Add the HideRestoreButton method to hide the restore button:

function HideRestoreButton(evt){

if(evt && evt.currentTarget){

S(evt.currentTarget) .children("a.siebui-citem-add") .hide() ;

}

}

3 Add the AddFromRecycleBin method to call the presentation model:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Renderer

f uncti on AddFromRecycl eBi n (evt) {

var pm = evt. data. ctx. GetP O ;

ifCevt && evt.currentTarget){

pm.OnControlEventC'RESTORE",

SCevt.currentTarget) .parentC) .data("index")) ;

}

}

The AddFromRecycleBin method uses the OnControlEvent method to call the presentation model. It sends the index of the record that the user requests to restore. For more information, see "OnControlEvent Method" on page 432.

4 Save the recyclebinrenderer.js file.

Modifying the CSS Files to Support the Physical

Renderer

This task is a step in "Process of Customizing the Physical Renderer" on page 84.

In this topic, you modify the CSS files to support the CSS classes that the physical renderer uses.

To modify the CSS files to support the physical renderer

1 Open the CSS file.

2 Add the following code:

.s ebui-l st-recyclebin{

width: 85%;

float: left;

}

div. carousel -ski n-tango{

width: 15% ! mportant;

float: left;

text-al i gn : center ;

}

di v. siebui -carousel -col {

display:block;

} di . si ebui -carousel -i tem{

height :75px;

padding: 5px;

border :lpx solid #acacac;

text-al i gn : center ;

paddi ng-top : 20px ;

word-wrap : break-word ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

font- fam ly: an ^' al ;

font-s ze:llpx;

}

a . si ebui -ci tem-add{

display: block;

/*posi ti on : absol ute ; */

top:2px;

right :2px;

fl oat : right ;

width :16px;

height :16px;

background: url (.. images/plus. png) no-repeat center center;

}

3 Save the CSS file.

Configuring the Manifest for the Recycle Bin Example

This task is a step in "Roadmap for Customizing Siebel Open UI" on page 61.

This topic describes how to configure the manifest for the recycle bin example. For more information, see "Configuring Manifests" on page 128.

To configure the manifest for the recycle bin example

1 Make sure your presentation model and physical renderer uses the define method.

You do this in Step 4 on page 63 for the presentation model and in Step 5 on page 85 for the physical renderer.

2 Configure the manifest:

a Log in to the Siebel client with administrative privileges.

b Navigate to the Administration - Application screen, and then the Manifest Files view, c In the Files list, add the following new files.

Value

Name siebel/custom/recyclebinrenderer.js

Name siebel/custom/recyclebinpmodel.js d Navigate to the Administration - Application screen, and then the Manifest Administration view.

94 Configuring Siebel Open UI Version 8.1/8.2, Rev. A ( en? HTM Testing Your Modifications

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

Field Value 1

Type Applet

j Usage Type Physical Renderer

Name SIS 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 g In the Files list, add the following file:

si ebel /custom/recycl ebi nrenderer . js

In the UI Objects list, specify the following applet.

Field Value

Type Applet

Usage Type Presentation Model

Name SIS Account List Applet

In the Object Expression list, add a record with no value in the Expression field.

In the Files list, add the following file:

si ebel /custom/recycl ebi npmodel . j s

Testing Your Modifications

This task is a step in "Roadmap for Customizing Siebel Open UI" on page 61.

In this topic, you test your modifications.

To test your modifications

1 Log in to the Siebel Open UI client, and then navigate to the Accounts screen.

2 Use the Select column to choose five account records, and then click Delete.

Siebel Open UI deletes the records and adds them to the carousel recycle bin.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

To restore a record, click the following plus (+) icon in the carousel recycle bin :

Verify that Siebel Open UI recreates the record on the Siebel Server and adds it back to the Account list.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

This cha pter describes how to customize Siebel Open UI. It i ncludes the fol lowi ng topics :

■ Guidelines for Customizing Siebel Open UI on page 97

■ Doing General Customization Tasks on page 100

■ Managing Files on page 122

■ Configuring Manifests on page 128

Guidelines for Customizing Siebel Open UI

This topic describes guidelines for configuring Siebel Open UI . It includes the following information :

■ Guidelines for Customizing Presentation Models on page 97

■ Guidelines for Customizing Physical Renderers on page 99

■ Guidelines for Customizing Presentation Models and Physical Renderers on page 100

Some Siebel Open UI customizations use the same configuration that a Siebel Business Application uses. For example, you can use the information that Configuring Siebel Business Applications describes to configure the following items in Siebel Open UI :

■ List applets

■ Form applets

■ Views that contain more than one applet

■ Applet controls and list columns

Guidelines for Customizing Presentation Models

It is recommended that you apply the following guidelines if you configure a presentation model :

■ Make sure you customize Siebel Open UI so that the user-interface state is separate from the rendering of this state. The guidelines in this topic describe how to do this.

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A Customizing Siebel Open UI Guidelines for Cus¾¾OT

■ Add a new presentation model only after you consider all other customization options, such as modifying code in a Siebel Web Template file or using Siebel Tools to modify an object. To examine some examples that do not modify the presentation model, see Chapter 5, "Customizing Siebel Open UI."

A presentation model implements the entire abstraction of the user interface content, so the predefined implementation for a presentation model implements the predefined abstraction. There are only a few types of basic user interface abstractions, such as single record, list, tree, and so on. It is recommended that you use a predefined presentation model for each of these basic abstractions that Oracle provides you. The only situation where it is recommended that you use the predefined presentation model is for a new predefined abstraction. For example, to implement a graph abstraction for a social network model.

■ Make sure Siebel Open UI models all the state variables that it requires to achieve a rich client behavior, and that it models these state variables as presentation model properties. These properties can reside in the presentation model on the client, or the Siebel Server can provide them from an applet. You can add methods that modify these properties and that manage the state changes after you configure Siebel Open UI to add them. Siebel Open UI typically calls these methods due to a user action or if the server sends a notification. If a method modifies the logical state of the user interface, then Siebel Open UI uses the AttachPMBinding method to add a binding trigger to the physical renderer. This trigger binds the modified state to the physical user interface. For more information, see "AttachPMBinding Method" on page 428.

Siebel Open UI strictly defines each life cycle method. To help make sure your implementation is clean and readable, it is recommended that you use the following guidelines:

■ Make sure Siebel Open UI uses all presentation model state variables as properties. You must use the AddProperty method to create these properties. You must not use ordinary JavaScript variables to create these properties.

■ Use methods to implement all state changes of the presentation model. Use the AddMethod method to create these methods.

■ Make sure Siebel Open UI uses the AttachEventHandler method to bind each method that the presentation model contains to an event that the physical renderer contains. Each event is the result of some physical user action. This configuration makes sure Siebel Open UI binds each user action to the required logic and modifies the user interface state. For more information, see "AttachEventHandler Method" on page 427.

■ A presentation model method can start a call to the Siebel Server, and then the server sends a reply to this method. Siebel Open UI handles these calls asynchronously, except for high interactivity Siebel browser scripts. For more information, see "About Synchronous and

Asynchronous Requests" on page 74.

■ Siebel Open UI includes all modifications that occur in the business component layer in the reply in a Notification property set. You must use the AttachNotificationHandler method to add this notification. For more information, see "Notifications That Siebel Open UI Supports" on page 541.

■ Siebel Open UI packages a reply from the server for any predefined type of request. It includes this package in a reply property set that is predefined. You must use the

AttachPSHandler method to add the handler for any property set type that the server sends.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ You must use the AttachPostProcessingHandle method to add any post-processing handler that does follow up logic on a server request, such as a NewRecord request. You can add this logic after Siebel Open UI finishes processing the reply for this request. Setting the focus for a control is an example of this kind of configuration.

■ Siebel Open UI does the initial setup of the presentation model when it initializes the Siebel view or application, depending on whether the user interface object resides in or outside of the view. The server sends a property set that includes all the initialization attributes. The proxy uses most of these attributes, but you must use the AddProperty method to get the values that the presentation model requires to set and store the state.

■ You must use the following methods in the physical renderer the first time Siebel Open UI renders the user interface:

■ BindEvents. Binds the presentation model methods to the appropriate physical events on the physical control. For more information, see "BindEvents Method" on page 461.

■ BindData. Accesses all the properties in the presentation model and sends them to the physical control through the appropriate methods that this physical control exposes. For more information, see "BindData Method" on page 461.

■ You must configure Siebel Open UI to bind any state changes to the presentation model that occur after the physical renderer finishes the initial rendering. To do this, you configure Siebel Open UI to call the AttachPMBinding method on the physical renderer. This configuration specifies the method that the physical renderer must call or the properties that it must access so that it can send data back to the physical control. This configuration allows Siebel Open UI to render the user interface after it modifies the presentation model state.

Guidelines for Customizing Physical Renderers

It is recommended that you apply the following guidelines if you configure a physical renderer:

■ Use a physical renderer only to implement methods that render the presentation model state:

■ Do not include any other logic in a physical renderer.

■ Do not include business logic that modifies the user interface state.

■ Only use a physical renderer to send user action events to the presentation model, and use the presentation model to do all the work that is necessary to modify a state.

■ Allow the physical renderer to rebind the new presentation model state to the rendered user interface only after the presentation model finishes modifying the state of the logical user interface.

■ Do not use a physical renderer to add any presentation attributes to the Document Object Model (DOM). Example attributes include position, color, or any other styling. To modify a presentation attribute, you must attach or detach a style that you define in a CSS file.

■ Configure Siebel Open UI to do all rendering only in a physical renderer. It is strongly

recommended that you do not configure Siebel Open UI to do direct DOM manipulation. If you cannot avoid direct DOM manipulation, then you must do this manipulation in a physical renderer. Configure Siebel Open UI to send data, metadata, or state information to controls only from a physical renderer. For more information, see "About Objects and Metadata" on page 33.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 99

■ In most situations, if you add a presentation model, then you must also add a corresponding physical renderer. You typically use a presentation model to add custom logic in the client. This logic typically determines a physical behavior that requires a physical renderer to do the rendering. For example, in most situations, you cannot configure a predefined applet that also renders custom logic. Siebel Open UI structures custom JavaScript logic in the presentation model and physical renderer as a customization of predefined Siebel Open UI. This structure allows Siebel Open UI to use Oracle JavaScript and to use other logic that a predefined Siebel Open UI provides, such as events, Siebel arrays, and so on. It is not recommended that you configure JavaScript that is independent of Siebel Open UI, and that also modifies Siebel CRM data or physical behavior.

Guidelines for Customizing Presentation Models and Physical Renderers

It is recommended that you apply the following guidelines if you configure the presentation model and physical renderer for a client object:

■ Determine the following items for any element that you intend to customize:

■ The presentation model you must use

■ The physical user interface control you must use and the physical renderer that you must use with the presentation model

■ Configure the manifest so that Siebel Open UI can identify the JavaScript files it must download to the client so that it can render the user interface element. For more information, see "Configuring Manifests" on page 128.

■ Modify the physical renderer and presentation model for user interface objects that do not reside in a view, such as navigation tabs. Only one of these elements resides on a single Siebel page and they do not vary during a Siebel session. So, you can configure the physical renderer and the presentation model for each of these elements in the manifest.

■ You must place all custom presentation models and physical renderers in a custom folder. For more information about this folder, see "Organizing Files That You Customize" on page 122.

Doing General Customization Tasks

This topic describes some of the general customization tasks that you can do in Siebel Open UI. It includes the following information :

■ Enabling Object Managers for Siebel Open UI on page 101

■ Preparing Siebel Tools to Customize Siebel Open UI on page 104

■ Modifying the Application Configuration File on page 105

■ Adding Presentation Model Properties That Siebel Servers Send to Clients on page 106

■ Configuring Siebel Open UI to Bind Methods on page 110

■ Calling Methods for Applets and Business Services on page 111

1001 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ Using the Base Physical Renderer Class With Nonapplet Objects on page 113

■ Customizing Events on page 118

■ Creating Components on page 119

■ Allowing Users to Interact with Clients During Business Service Calls on page 120

Enabling Object Managers for Siebel Open UI

You must enable the object manager to use Siebel Open UI before you can do any customization work.

To enable object managers for Siebel Open UI

1 Enable the object manager for the Siebel Server:

a Log in to the Siebel CRM client with administrator privileges.

b Navigate to the Administration - Server Configuration screen, and then the Servers view. c In the Components list, query the Component field for the object manager where you must enable Siebel Open UI.

For example, query for the following value:

Cal l Center Object Manager (END)

d In the bottom applet, click Parameters.

e In the Component Parameters list, query the Parameter field for EnableOpenUI.

f Set the Value on Restart field to TRUE,

g Log out of the client and close the browser.

As an alternative to using the administrative screens, you can modify the application configuration file on the Siebel Server in the same way that you modify this file on the client in Step 2.

2 Enable Siebel Open UI on the Mobile Web Client:

a On the client computer, use a text editor to open the application configuration file.

For example, to open the configuration file for Siebel Call Center, navigate to the following folder, and then open the uagent.cfg file:

clien t_ ins ta 77_ J oca t ion \bi n

b In the InfraUIFramework section, set the EnableOpenUI parameter to the following value:

[Inf raulFramework]

Enabl eOpenul=TRUE

c Save, and then close the application configuration file.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Customizing Siebel Ορβη.υΐ· ¾ί≤^¾

d Log in to Siebel Call Center and verify that it opens the Siebel Open UI client.

To revert to the high-interactivity client, you can set the EnableOpenUI parameter to FALSE. If you do this reversion, then you must use Internet Explorer, version 8 or earlier when you open the client.

3 Stop the Siebel Server:

a On the computer where the Siebel Server resides, click the Start menu, Control Panel,

Administrative Tools, and then the Services menu item.

b In the Services dialog box, right-click the Siebel Server service, and then click Stop.

c Wait for the Siebel Server to stop.

4 Optional. Add object managers for Siebel Mobile:

a Stop the Gateway Server, and then make a backup copy of the siebns.dat file,

b Restart the Gateway Server.

c Set the SIEBEL_HOME environment variable to the following folder:

SES_HOME/s- ebsrvr

d Open Windows Explorer, and then navigate to the following folder:

SES_HOME/s ebs rvr/bi n/ 1 anguage_code

e Run the new_compdef_sia.ksh script or the new_compdef_sia.bat file. Use the following

parameters:

./create_new_compdef_sia. ksh GATEWAY : port_number ENTERPRISE user_name user_password language _^ code

f Examine the srvrcfg log files and make sure Siebel CRM did not log any errors when it enabled the new server components.

g Open the Server Manager, and then run the following commands:

enable compgrp HandheldSync for server server_name

enable compgrp HandheldSyncSIS for server server_name

5 Start the Siebel Server:

a Click the Start menu, Control Panel, Administrative Tools, and then the Services menu item, b In the Services dialog box, right-click the Siebel Server service, and then click Start, c Wait for the server to start.

d Optional. Make sure the server components you enabled Step g on page 102 are on line.

6 Optional. Add virtual directories for Siebel Mobile object managers:

a Use Windows Explorer to navigate to the following folder:

eappweb_iNSTALL\bi n\

b Create a back up copy of each of the following files:

□ eapp.cfg.

102 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

□ eapps_sia.cfg.

□ Web server configuration files. For example, obj.conf, httpd.conf, and so on. C Stop the HTTP server.

d Open Windows Explorer, and then navigate to the following folder:

eappweb_HOME/bi n

e Create a back up copy for each of the following files:

□ eapps.cfg.

u eapps_sia.cfg.

□ Web server configuration file,

f Navigate to the following folder:

EAPPWEB_HOME/ conf i g

g Run the new_virdirs.sh script or the new_virdirs.sh script. Use values from the following table:

Operating System Command 1

^! Windows Run the following command:

ne _vi rdi rs . bat language_code

Unix Run the following command :

h If the script fails to run correctly, then you must restore all files from the backup copies you made in Step b and Step e, and then run the script again until it successfully finishes.

i Restart the HTTP Server.

j Make sure you can use the URL to access the new server components.

7 Log in to the Siebel CRM client and make sure it displays the Siebel Open UI client.

How Siebel Open UI Loads the Siebel Application Depending on How You Set the EnableOpenUI Parameter

Siebel Open UI loads a Siebel application differently depending on how you set the EnableOpenUI parameter:

■ EnableOpenUI=FALSE:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A . 1-03

■ If you customized the default Siebel Web Template, then Siebel Open UI loads the application from the following folder:

s ebs rvr\webtempl \custom

■ If you did not customize the default Siebel Web Template, then Siebel Open UI finds no file in the s ebs rvr\webtempl \custom folder, and it loads the Siebel application from the following default folder:

si ebsrvr\webtempl

■ EnableOpenUI=TRUE :

■ If you customized the Siebel Open UI Siebel Web Template, then Siebel Open UI loads the Siebel application from the following folder:

si ebs rvr\webtempl \oui webtempl \custom

■ If you did not customize the Siebel Open UI Siebel Web Template, then Siebel Open UI finds no file in the si ebs rvr\webtempl \oui webtempl \custom folder, and it loads the Siebel application from the following folder:

si ebsrvr\webtempl \oui webtempl

■ If you did not customize the Siebel Open UI Siebel Web Template, and if Siebel Open UI does not find a file in the si ebs rvr\webtempl \oui webtempl folder, then it loads the Siebel application from the following default folder:

s ebs rvr\webtempl

Preparing Siebel Tools to Customize Siebel Open UI

This topic describes how to prepare Siebel Tools so that you can use it to customize Siebel Open UI . For more information, see Using Siebel Tools.

To prepare Siebel Tools to customize Siebel Open UI

1 Add the EnableOpenUI parameter to the Siebel Tools configuration file:

a In Windows Explorer, navigate to the following folder:

SlEBEL_TOOLS_ OM bi n\ language_code

b Use a text editor to open the tools. cfg configuration file,

c Add the following parameter to the InfraUIFramework section :

EnableOpenUI = TRUE

2 Display object types :

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b Choose the View menu, and then the Options menu item.

Configuri ng Siebel Open U I Version 8. 1/8.2, Rev. A

c Click the Object Explorer tab.

d Scroll down through the Object Explorer Hierarchy window to locate the object type you must display.

To display an object type and all child object types of this object type, make sure it includes a check mark with a white background. Display the Applet object type and all child objects of the Applet object type.

e Click OK.

Modifying the Application Configuration File

You can use the configuration file to specify parameters that determine how a specific Siebel application runs. For more information about the application configuration file, see Configuring Siebel Business Applications.

To modify the application configuration file

1 On the client computer, open Windows Explorer, and then navigate to the following folder:

ORACLE_HOM£ C \ i ent\bi n\ language_code

2 Use a text editor to open the application configuration file that you must modify.

Each Siebel application uses a different configuration file. For example, Siebel Call Center uses the uagent.cfg file. The application configuration file uses the .cfg file extension .

3 Locate the section that you must modify.

Each application configuration file uses square brackets to indicate a section . For example :

[inf raui Framework]

4 Modify an existing parameter or add a separate line for each parameter you must specify.

Use the following format:

parameter_name = " <paraml param2>"

where:

■ paraml and param2 are the names of the parameters.

For example:

TreeNodeCol l apseCapti on = "<i mg s rc= ' i mages/t ree_col l apse . g f ' al t= ' - ' border=0 al i gn=l eft vspace=0 hspace=0>"

Configuring Siebel Open U I Version 8. 1/8. 2, Rev. A

Adding Presentation Model Properties That Siebel Servers Send to Clients

This topic describes how to add presentation model properties that the Siebel Server sends to the client. It includes the following information :

■ "Adding Presentation Model Properties That Siebel Servers Send for Applets" on page 106

■ "Adding Presentation Model Properties That Siebel Servers Send for Views" on page 107

■ "Customizing Control User Properties for Presentation Models" on page 108

It is strongly recommended that you configure custom presentation model properties only if the predefined presentation model properties do meet your requirements.

Adding Presentation Model Properties That Siebel Servers Send for Applets

This topic describes a general approach to customizing applet user properties for presentation models. The Siebel Server sends these properties to the client.

To add presentation model properties that Siebel Servers send for applets

1 Add user properties to the applet:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c 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,

d In the Object Explorer, expand the Applet tree, and then click Applet User Prop,

e In the Applet User Props list, add the following applet user property.

Name Value

ClientPMUserPropn user_prOpertyJname ^■ ." .·:. ,

For example, You can specify¾ne or more user properties. Siebel Open UI ClientPMUserPropl sends these user properties to the presentation model that it uses in the client to display the applet. To specify more than one user property, use a comma and a space to separate each user property name. For example:

User Propertyl, user Property2

Each user property that you specify must exist in the Siebel repository, and each of these user properties must contain a value in the Value property.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Tasks

f (Optional) Specify more ClientPMUserPropn user properties, as necessary.

You can specify more than one ClientPMUserPropn user property, as necessary. Repeat Step e for each ClientPMUserPropn user property that you require.

g Compile your modifications.

2 Modify the presentation model :

a Use a JavaScript editor to open your custom presentation model file that Siebel Open UI uses to display the applet that you modified in Step 1.

b If your custom presentation model does not override the Setup method, then configure Siebel Open UI to do this override.

For more information about how to configure an override, see ""Process of Customizing the Presentation Model" on page 62.

c Locate the following section of code:

presentation_mode7. SetupCpropSet)

For example, if the class name is CustomPM, then locate the following code:

CustomPM . prototype . Setup = functi on (propSet)

d Add the following code to the section that you located in Step c:

var consts = Si ebel JS . DependencyC'Si ebelApp . Constants") ;

var apm = propSet . GetChi l dByType(consts . get("SWE_APPLET_PM_PS")) ;

where:

□ SWE_APPLET_PM_PS is a predefined constant that Siebel Open UI uses to get the

presentation model properties that it uses to display the applet. The Siebel Server sends these properties in a property set.

e Add the following code anywhere in the presentation model :

var val ue = apm . GetProperty("-/ser_/?ro erty_na/77e")

For example:

var val ue = apm . GetPropertyC'User Property].")

You must configure Siebel Open UI so that it runs the Setup method that you specify in Step c before it encounters the code that you add in Step e.

Adding Presentation Model Properties That Siebel Servers Send for Views

This topic describes how to customize view user properties for presentation models. The Siebel Server sends these properties to the client.

To add presentation model properties that Siebel Servers send for views

1 Add user properties to the view:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click View.

c In the Views list, query the Name property for the view that you must modify.

For example, query the Name property for Contact List View.

d In the Object Explorer, expand the View tree, and then click View User Prop.

e Do Step e on page 106 through Step g on page 107, except add view user properties to a view instead of adding applet user properties to an applet.

2 If your custom view presentation model does not override the Setup method, then configure Siebel Open UI to do this override:

Do Step 2 on page 107 except use vpm instead of apm:

a Use a JavaScript editor to open the presentation model file that Siebel Open UI uses to display the view that you modified in Step 1.

b Add the following code:

var consts = si ebel JS . DependencyC'Si ebelApp . Constants") ;

var vpm = propSet . GetChi l dByType (consts . get("SWE_vlEW_P _PS")) ; where:

□ swE_viEW_P _PS is a predefined constant that Siebel Open UI uses to get the presentation model properties that it uses to display the view. The Siebel Server sends these properties in a property set.

c Add the following code:

var val ue = vpm . GetProperty (" user_property_name"~)

For example:

var val ue = vpm. GetProperty("user Property].")

For more information about how to configure an override, see "Process of Customizing the Presentation Model" on page 62.

Customizing Control User Properties for Presentation Models

This topic describes how to customize control user properties for a presentation model.

To customize control user properties for presentation models

1 Add user properties to the control :

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

c 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,

d In the Object Explorer, expand the Applet tree, and then Control,

e In the Controls list, query the Name property for the control that you must modify.

For example, query the Name property for NewRecord.

f In the Object Explorer, expand the Control tree, and then click Control User Prop.

g In the Control User Props list, Do Step e on page 106 through Step g on page 107, except add control user properties to the control instead of adding applet user properties to an applet. Modify the custom presentation model of the applet where the control resides:

a Configure Siebel Open UI to get the control object. You can do one of the following:

□ Use the following code to get the control object from the GetControls presentation model property:

var control s = thi s . Get("GetControl s") ;

for (var control i n control s) {

var cpm = control . GetPMPropSet(consts . get("SWE_CTRL_PM_PS")) ;

// Do someth ng wi th cpm

}

□ Use the following the GetControl method to get an instance of the Account Name control : var myControl = thi s . GetControl ("Account Name") ;

var cpm = control . GetPMPropSet(consts . get("SWE_CTRL_PM_PS")) ;

b Add the following code:

var consts = Si ebel JS . DependencyC'Si ebelApp . Constants") ;

var cpm = co/?rro7. GetPMPropSet(consts . get("SWE_CTRL_P _PS")) ;

where:

□ GetPMPropSet is a method that gets the property set for this control. For more information, see "GetPMPropSet Method" on page 471.

□ SWE_CTRL_PM_PS is a predefined constant that Siebel Open UI uses to get the presentation model that it uses for the control object. The Siebel Server sends these properties in a property set.

c Add the following code:

var val ue = cpm . Get P rope rt C user_property_name" ^'

For example:

var val ue = cpm . GetProperty("User Propertyl")

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A | 109 ^■

Configuring Siebel Open UI to Bind Methods

This topic includes some examples that describe how to bind methods. For other examples that bind methods, see the following topics:

■ "Example of the Life Cycle of a User Interface Element" on page 58

■ "Customizing the Physical Renderer to Refresh the Recycle Bin" on page 89

■ "Text Copy of Code That Does a Partial Refresh for the Physical Renderer" on page 162

Binding Methods That Reside in the Physical Renderer

You can use the AttachPMBinding method to bind a method that resides in a physical renderer and that Siebel Open UI must call when the presentation model finishes processing.

To bind methods that reside in the physical renderer

1 Add the method reference in the physical renderer.

2 Configure Siebel Open UI to send the scope in the binderConfig argument of the AttachPMBinding method as a scope property.

For more information, see "AttachPMBinding Method" on page 428.

Conditionally Binding Methods

The example in this topic conditionally binds a

To conditionally bind methods

■ Add the following code:

thi s . AttachPMBi ndi ngC'DoSomethi ng" , f uncti on() {si ebel JS . Log ("After

DoSometh ng") ; } , {when : f uncti on ( function_name { return fal se ; }}) ;

where:

■ function_name identifies the name of a function.

{In this example, if Siebel Open UI calls DoSomething, then the presentation model calls the function_name that the when condition specifies, and then tests the return value. If function_name returns a value of:

■ true. Siebel Open UI calls the AttachPMBinding method.

■ false. Siebel Open UI does not call the AttachPMBinding method.

If you do not include the when condition, then Siebel Open UI runs the DoSomething method, and then calls the AttachPMBinding method. For more information, see "AttachPMBinding Method" on page 428.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Calling Methods for Applets and Business Services

This topic includes some examples that describe how to call methods for applets and business services. For other examples that call methods, see the following topics:

■ "Customizing the Presentation Model to Delete Records" on page 69

■ "Attaching an Event Handler to a Presentation Model" on page 78

■ "Using Custom JavaScript Methods" on page 364

■ "Using Custom Siebel Business Services" on page 367

■ "Customizing Siebel Pharma for Siebel Mobile Disconnected Clients" on page 372

Calling Methods for Applets

The example in this topic describes how to call a method for an applet when the user clicks a button.

To call methods for applets

1 Modify the physical renderer:

a Use a JavaScript editor to open the physical renderer for the applet that you must modify, b Locate the onclick code for the button that you must modify,

c Add the following code to the code you located in Step b:

var inPropSet = CCFMiscUtil_CreatePropSet() ;

//Define the inPropSet property set with the information that invokeMethod sends as input to the method that it calls.

var ai= {};

ai .async = true;

ai .selfbusy = true;

ai . scope = thi s ;

ai .mask = true;

ai.opdecode = true;

ai.errcb = function(){

//Code occurs here for the method that Siebel open Ul runs if the AJAX call fails

};

ai .cb = function(){

//code occurs here for the method that Siebel Open Ul runs if the AJAX call is successful

};

thi s .GetPM() . ExecuteMethodC'Invoke ethod" , input arguments, ai); where:

□ input arguments lists the arguments that InvokeMethod sends as input to the method that it calls.

For example, the following code specifies to use the InvokeMethod method to call the NewRecord method, using the properties that the inPropSet variable specifies for the ai argument:

Configuring Siebel Open Ul Version 8.1/8.2, Rev. A 111 Customizing

this.GetPMC) .ExecuteMethodC'invokeMethod" , "New ecord" , inPropSet, ai) ;

For more information, see "InvokeMethod Method for Application Models" on page 485 and "NewRecord Method" on page 474.

2 Modify the presentation model:

a Use a JavaScript editor to open the presentation model for the applet that you must modify. b Locate the code that calls the Init method.

c Add the following code to the code that you located in Step b:

thi s .AttachPreProxyExecuteBind ng("/77etAocLfl<3/7e" , function(methodName, inputPS, outputPS) {// Include code here that Siebel Open UI runs before the applet proxy sends a reply.}) ;

th s .AttachPostProxyExecuteBinding("/77etAooL/7a/77e" , function(methodName, inputPS, outputPS) {// Include code here that Siebel Open UI runs after the applet proxy sends a reply. }) ;

where:

u method_name identifies the name of the method that InvokeMethod calls. Note that Siebel Open UI comes predefined to set the value of the methodName argument in the following code to WriteRecord, by default. You must not modify this argument:

funct on (methodName, inputPS, outputPS)

For example:

thi s . AttachPreProxyExecuteBi ndi ng ("Wri teRecord" , f uncti on (methodName , inputPS, outputPS) {// Include code here that Siebel Open UI runs before the applet proxy sends a reply. }) ;

thi s . AttachPost Proxy ExecuteBi ndi ng("wri teRecord" , f uncti on (methodName , inputPS, outputPS) {// Include code here that Siebel Open UI runs after the applet proxy sends a reply. }) ;

For more information, see "WriteRecord Method" on page 407, "AttachPostProxyExecuteBinding Method" on page 429, and "AttachPreProxyExecuteBinding Method" on page 430.

Calling Methods for Business Services

The example in this topic describes how to call a method for a business service when the user clicks a button.

To call methods for business services

1 Use a JavaScript editor to open the physical renderer for the applet that you must modify.

2 Locate the onclick code for the button that you must modify.

3 Add the following code to the code you located in Step 2:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

var service = siebelApp.s_App.GetServiceC" 7-/57 ^' /7e55_5er'7ce_wa77e") ;

if (service) {

var inPropSet = CCFM scutil_CreatePropSetO ;

//Code occurs here that sets the inPropSet property set with all information that Siebel Open UI must send as input to the method that it calls,

var ai = {};

ai .async = true;

ai .self busy = true;

ai . scope = thi s ;

ai .mask = true;

ai.opdecode = true;

ai.errcb = function(){

//Code occurs here for the method that Siebel Open UI runs if the ADAX call fa ls

};

ai .cb = functionO{

//Code occurs here for the method that Siebel Open UI runs if the ADAX call is successful

};

servi ce . lnvoke ethod("ffe-77O0L7a/we" , " input_arguments" , ai ) ;

}

For more information, see "InvokeMethod Method for Application Models" on page 485.

Using the Base Physical Renderer Class With Nonapplet Objects

This topic describes how to use the Base Physical Renderer class with nonapplet objects that you customize. It includes the following topics:

■ Hierarchy That the Base Physical Renderer Class Uses on page 114

■ Modifying Nonapplet Configurations for Siebel CRM Version 8.1.1.10, 8.2.2.3, or Earlier on page 118

■ Declaring the AttachPMBinding Method When Using the Base Physical Renderer Class on page 116

■ Sending an Arbitrary Scope on page 117

■ Accessing Proxy Objects on page 117

The BasePhysicalRenderer class simplifies calls that Siebel Open UI makes to the AttachPMBinding method for nonapplet objects. You can configure Siebel Open UI to use the BasePhysicalRenderer class to identify the physical renderer, call AttachPMBinding, and specify the configuration for the scope of a nonapplet object. You can then use a custom physical renderer to call AttachPMBinding with the appropriate handler.

Siebel Open UI uses the PhysicalRenderer class to interface with and to render applets. Starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4, it uses the BasePhysicalRenderer class to render nonapplet objects. It uses this class to separate the interface to the physical renderer from the physical renderer. Siebel Open UI uses the BasePhysicalRenderer class only with nonapplet objects, such as the toolbar or predefined query bar.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customizing Siebel Open—

If your deployment includes nonapplet custom rendering, and if it uses Siebel CRM version 8.1.1.10, 8.2.2.3 or earlier, then it is strongly recommended, but not required, that you modify your configuration so that it uses the BasePhysicalRenderer class to render your custom, nonapplet objects. If your deployment uses the PhysicalRenderer class to render nonapplet objects, then this class will provide access to applet functionality and properties that it does not require to do the rendering, which could degrade performance or result in rendering problems.

Siebel Open UI defines the BasePhysicalRenderer class in the basephyrenderer.js file.

Hierarchy That the Base Physical Renderer Class Uses

Figure 27 illustrates the hierarchy that the BasePhysicalRenderer class uses for nonmobile applications. The member variable is a variable that is associated with the class. All methods can access this member variable.

BasePhysicalRenderer

GetPM

ShowUI

Bind Events

BindData

AttachP Binding

EndUfe

PhysicalRetiderer PDQRenderer

Legend

JQGridRenderer

I I Class

Member Variable

I 1 Methods

Figure 27. Hierarchy That the Base Physical Renderer Class Uses

Config uring Siebel Open UI Version 8. 1/8.2, Rev. A

Figure 28 illustrates the hierarchy that the BasePhysicalRenderer class uses for mobile applications.

Figure 28. Hierarchy That the Base Physical Renderer Class Uses for Mobile Applications

Using Methods with the Base Physical Renderer Class

Table 6 describes how to use methods with the BasePhysicalRenderer class.

Table 6. How to Use Methods with the Base Physical Renderer Class

Method Description

Init Use this method to initialize the BasePhysicalRenderer class. For more information, see "Init Method" on page 431.

! GetPM Use this method to return the name of the physical renderer. For more information, see "GetPM Method for Physical Renderers" on page 463.

ShowUI Use this method to display each control in a derived class. You can

configure Siebel Open UI to override this method if you must modify the control of the user interface object. For more information, see "ShowUI Method" on page 464.

BindEvents Use this method to attach an event to the physical control. You can configure Siebel Open UI to override this method if you must modify event binding. For more information, see "BindEvents Method" on page 461.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A ¹ 1 15

Customizing Siebel^

Table 6. How to Use Methods with the Base Physical Renderer Class

Method Description

i BindData ^{" "} . ^' . Use'¾!fiis5Tn ^' ethtid _. t0 ^" bind data to a physicfi control object that resides in a derived class. You can configure Siebel Open UI to override this method if you must modify the data binding. For more information, see "BindData Method" on page 461.

AttachPMBinding Use this method to configure Siebel Open UI to do the same work that the AttachPMBinding method does in a presentation model. You can use the following argument to call the AttachPMBinding method :

scope

You can use the following arguments with the AttachPMBinding method :

■ methodName. Identifies the method that the BasePhysicalRenderer class binds.

■ handler. Identifies the handler method for this binding.

■ handlerScope. Identifies the scope where the BasePhysicalRenderer class runs the handler. If you do not specify the handlerScope, then the BasePhysicalRenderer class uses the default scope.

For more information, see "AttachPMBinding Method" on page 428.

EndLife Use this method to end the life of the physical renderer. It is

recommended that you use the EndLife method to clean up the custom event handler. This clean up includes releasing events, deleting unused variables, and so on. For more information, see "EndLife Method" on page 462.

Declaring the AttachPMBinding Method When Using the Base Physical Renderer Class

If you configure Siebel Open UI to use the BasePhysicalRenderer class, then you must declare the AttachPMBinding method.

To declare the AttachPMBinding method when using the Base Physical Renderer class

1 Use a JavaScript editor to open your custom physical renderer.

2 Locate the Init method.

3 Add the following code to the Init method that you located in Step 2:

CustomPhysi cal Renderer . prototype . in t = functi on() {

// Be a good ci ti zen . Cal l supercl ass fi rst

Si ebel AppFacade . CustomPhysi cal Rende re r . supercl ass . ini t . cal 1 (thi s) ; // Cal l AttachPMBi ndi ng here .

}

For example:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Tasks

CustomPhysi cal Renderer . prototype . Ini t = funct on () {

Si ebelAppFacade . Customphys cal Renderer . supercl ass . mi t . cal l (thi s) ; thi s . AttachPMBi ndi ngC'EndQueryState" , EndQueryState) ;

}

Sending an Arbitrary Scope

An arbitrary scope is any scope other than the scope that calls the handler. You can configure Siebel Open UI to send to AttachPMBinding any scope that is available in the physical renderer. You can use the BasePhysicalRenderer class to send an arbitrary scope that identifies the handler method that Siebel Open UI must use.

To send an arbitrary scope

1 Use a JavaScript editor to open your custom physical renderer.

2 Add the following code to send an arbitrary scope as an argument:

thi s . AttachPMBi nd ng ("FocusOnAppl et" , FocusOnAppl et , arbitrary_scope ; For example:

thi s .AttachPMBi ndi ng ("FocusOnAppl et" , FocusOnAppl et , Si ebelAppFacade . S_App) ; where:

■ si ebelAppFacade . S_App is an arbitrary scope because it is not the calling scope that the thi s statement identifies, which Siebel Open UI assumes in BasePR, by default. In this example, the FocusOnApplet handler must exist in the SiebelAppFacade.S_App scope.

Accessing Proxy Objects

If you must write code that accesses a proxy object, then it is strongly recommended that you access this proxy object through a physical renderer. The physical renderer typically exposes the interfaces that allow access to operations on the proxy object. The example in this topic accesses a proxy object for an active control.

To access proxy objects

1 Use a JavaScript editor to open your custom physical renderer.

2 Add the following code:

thi s . ExecuteMethod C'SetActi veControl " , control ) ;

This example code accesses a proxy object so that Siebel Open UI can modify an active control.

It is recommended that you do not write code that directly accesses a proxy object from a physical renderer. In the following example, Siebel Open UI might remove the GetProxy method from the presentation model, and any code that references GetProxy might fail. It is recommended that you do not use the following code:

thi s . GetProxy () . SetActi veControl (control ) ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 1 1 17 ^~ )

Customizing Siebel Open UI Do i n ^" gi ^' Ge¾ ^' e^ *,C^^^^^^g

Modifying Nonapplet Configurations for Siebel CRM Version 8.1.1.10, 8.2.2.3, or Earlier

Siebel Open UI removed the scope argument for calls that it makes to the AttachPMBinding method with nonapplet objects, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4. You can modify your custom code to use this new configuration.

To modify nonapplet configurations for Siebel CRM versions 8.1.1.10, 8.2.2.3, or earlier

1 Use a JavaScript editor to open your custom physical renderer.

2 Locate the following code:

thi s . GetPMO . AttachPMB nd ng ("FocusOnAppl et" , FocusOnAppl et , {scope : thi s}) ;

In this example, AttachPMBindings uses the scope argument to do a call in Siebel CRM version 8.1.1.10, 8.2.2.3, or earlier.

3 Replace the code that you located in Step 2 with the following code:

th s . AttachPMB ndi ng ("FocusOnAppl et" , FocusOnAppl et) ;

You can use this code starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4.

Customizing Events

This topic includes some examples that describe how to customize Siebel Open UI to use events. For more information about how Siebel Open UI uses events and examples that configure them, see the following topics:

■ How Siebel Open UI Uses the Init Method of the Presentation Model on page 55

■ Life Cycle of a Physical Renderer on page 56

■ Attaching an Event Handler to a Presentation Model on page 78

■ Customizing the Physical Renderer to Bind Events on page 88

■ Customizing the Event Handlers on page 92

■ Siebel CRM Events You Can Use to Customize Siebel Open UI on page 563

Refreshing Custom Events

Siebel Open UI does not come predefined to refresh a custom event. The example in this topic describes how to modify this behavior.

To refresh custom events

1 Add the following code:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

tfeu'st'o'm'izin'alSi'eb'e'ltoyen [gjsnera Customization Tasks

this.AddMethod("RefreshHandler" , functionCx, y, z){

// Add code here that does processing for Ref reshHandler .

});

This code adds the RefreshHandler custom event handler.

2 Add the following code in the presentation model so that it is aware of the event that the RefreshEventHandler specifies:

th s . AttachEventHandl er ("Ref resh" , "Ref reshHandl er") ;

For more information, see "AttachEventHandler Method" on page 427.

3 Add the following code in the physical renderer:

control El ement.bind("c ^" lick", {ctx: this}, function (event) {

event. data. ctx. GetPM() .OnControl EventC'Ref resh" , valuel, value2, value3); });

This code binds the physical event to the presentation model. For more information, see "OnControlEvent Method" on page 432.

Overriding Event Handlers

The example in this topic configures Siebel Open UI to override an event handler that the predefined presentation model references.

To override event handlers

1 Configure Siebel Open UI to refresh a custom event.

For more information, see "Customizing Events" on page 118.

2 Add the following code to your custom presentation model:

thi s.AddMethod(SiebelApp. Constants. get ("PHYEVENT_lNVOKE_CONTROL") ,

function(controlName) {

// Process button click

return false;

});

This code configures Siebel Open UI to return the following value from the event handler. It makes sure this presentation model does not continue processing:

false

Creating Components

The example in this topic configures Siebel Open UI to attach a local component as the child of a view component, and it uses the property set that Siebel Open UI uses to create this component to specify the name of the module. Siebel Open UI uses this module for the presentation model and the physical renderer.

Configuring Siebel Open UI Version 8.1/8.2, Rev.

To create components

1 Create the property set. Use the following code:

var pslnfo = CCFMi scuti l_CreatePropSetO ;

pslnfo . SetProperty(consts . get("SWE_ulDEF_PM_CTR") , "si ebel /custom/customPM") ; pslnfo . SetProperty (consts . get ("SWE_UIDEF_PR_CTR") , "s ebel /custom/customPR") ; where:

■ si ebel /custom/customPM is the module name that identifies the siebel/custom/customPM.js presentation model

■ s ebel /custom/customPR is the module name that identifies the siebel/custom/customP .js physical renderer

2 Create the dependency object. Use the following code:

var dependency = {} ;

dependency . GetName = functi on () { return "custom_Dependency_object" ; }

This example assumes that it is not necessary that this component reference an applet, so the code limits the scope to a view.

3 Call the MakeComponent method. Use the following code:

Si ebel AppFacade . Component g r . MakeComponent (Si ebel App . S_App . GetActi vevi ew() , pslnfo , dependency) ;

For more information, see "MakeComponent Method" on page 502.

Allowing Users to Interact with Clients During Business Service Calls

The user cannot interact with the client during a synchronous request to a business service until the client receives the reply for this request from the Siebel Server. However, the user can interact with the client while it is waiting for a reply during an asynchronous request. This topic describes how to write JavaScript code so that it sends an asynchronous request that allows the user to continue to use the client without interruption during the call. You use the following code to specify an asynchronous call :

async = true or fal se

For example, the following code makes an asynchronous request:

async = true

To view an example presentation model that includes more than one instance of enabling and disabling an asynchronous call, download the msgbrdcstpmsync.js file, and then search this file for the following string :

l psca . async

To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

more information, see "About Synchronous and Asynchronous Requests" on page 74. llow users to interact with clients during business service calls

Use a JavaScript editor to open the presentation model that you must modify.

Locate the ExecuteMethod that calls the business service that you must modify.

Siebel Open UI uses the ExecuteMethod method to call a business service.. For more information, see "ExecuteMethod Method" on page 430.

Add the following code to the AddMethod call that you located in Step 2:

var service = siebelApp.s_App.GetService("serv7ce_/7a/77e") ;

var inPropSet = SiebelApp.S_App.NewPropertySet O ;

// set all the input arguments through inPropSet . SetPropertyC' property_name" , "property_va 7te")

var outPropSet;

if(service){

var config = {};

config.async = true;

config. scope = this;

config. cb = function(){

outPropSet = arguments [2] ;

if (outPropSet !== null){

output_property_set

}

}

service. InvokeMethod method_name" , inPropSet, config);

}

where:

■ nPropSet. SetProperty allows you to add input arguments to the business service on the Siebel Server.

■ service_name is the name of a business service that Siebel Open UI must call.

■ config.async is set to true.

■ config. scope = this attaches a scope to the callback function so that you are not required to use var that=this to resolve the scope. For more information, see "Coding Callback Methods" on page 375.

■ method_name is the name of a business service method that resides in the business service that you specify in service_name.

m output_property_set is the name of the property set that Siebel Open UI uses to store the output of this asynchronous call.

For example, the following code creates an asynchronous call to create a list of quotes:

var service = SiebelApp.s_App.GetService("create Quote Service");

var inPropSet = SiebelApp.s _^ App.NewPropertySet () ;

var outPropSet;

if (service){

var config = {};

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 121 ! Customizing

confi g . async = true ;

confi g . scope = thi s ;

confi g . cb = functi on() {

outPropSet = arguments [2] ;

i f (outPropSet ! == nul l ) {

quoteL st

}

servi ce . invokeMethod ("create Quote" , i nPropSet , confi g) ; where:

■ quoteLi st is an output property set that contains a list of quotes that Siebel Open UI gets from the Create Quote business service method.

Managing Files

■ Organizing Files That You Customize on page 122

■ Updating Relative Paths in Files That You Customize on page 125

■ Specifying Dependencies Between Presentation Models or Physical Renderers and Other Files on page 126

■ Specifying the Order That Siebel Open UI Uses to Download Files on page 127

You also configure manifest to manage files. For more information, see "Configuring Manifests" on page 128.

Organizing Files That You Customize

This topic describes how to organize files that you customize. A predefined file is a type of file that comes configured ready-to-use with Siebel Open UI. A custom file is a predefined file that you modify or a new file that you create. A .png file that you use for your company logo is an example of a custom file. You can customize the following types of files:

■ JavaScript files.

■ CSS files.

■ Image files, such as .jpg or . png files.

■ SWT (Siebel Web Template) files.

■ HTML files.

■ XML files.

Note the following guidelines:

■ You must modify any relative paths that your custom file contains. For more information, see "Updating Relative Paths in Files That You Customize" on page 125.

■ The folder structures that this topic describes applies to all cached and deployed files.

1 22 Config u ring Siebel Open U I Version 8. 1/8.2, Rev. A

■ Any third-party libraries that you use must reside in a predefined folder or in a custom folder.

CAUTION : You must not modify any files that reside in the folders that Table 7 on page 124 describes. You must make sure that these folders contain only Oracle content, and that your custom folders contain only custom content. This configuration helps to avoid data loss in these folders. If you modify any predefined file, then Siebel Open UI might fail, and it might not be possible to recover from this failure.

To organize files that you customize

m Store all your custom files that reside on the Siebel Server in one of the following folders :

ebel \custom

where :

■ ORACLE_HOME is the folder where you installed the Siebel Server.

■ Store all your custom CSS files and image files that reside on the client in one of the following folders:

CLIENT_H0ME\P\) L1C\ Ί anguage_code\ \ 1 es\custom

CL IEA/T_HOM£ PUBL1C\ 1 ' anguage_code\\ mages\custom

where :

■ CLIENT_HOME is the folder where you installed the client.

■ Store all your custom presentation models and physical Tenderers in the following folder:

CLIE/VT_H0ME\POBL1C\ language_code\ re 1ease_number\scr-\ pts\si ebel \custom

Oracle stores predefined presentation models and physical Tenderers in the following folder. You must not modify any file that resides in this folder:

CLIE/VT_H0ME\POBL1C\ 1 ' anguage_code\ re l 'ease_number\scri pts\s ebel \

■ Store all your custom web templates for Siebel Open UI in the following folder:

C-.J£/V_/O^ EBTE PL\OUIWEBTEMPL\CUSTO

■ Store all your custom web templates for high interactivity and standard interactivity in the following folder:

Configu ring Siebel Open U I Version 8. 1/8.2, Rev. A Customizing s llf pm

Where Siebel Open UI Stores Predefined Files in Siebel Open UI Clients

Table 7 describes where Siebel Open UI stores predefined files in the Siebel Open UI client. You must not modify any of these files. Instead, you can copy the file, and then save this copy to one of your custom folders.

Table 7. Where Siebel Open UI Stores Predefined Files in Siebel Open UI Clients

Where Siebel Open UI Stores Files in High-Interactivity and Standard- Interactivity Deployments

Siebel Open UI uses the following folders in a high-interactivity client or standard-interactivity client. This folder structure makes sure existing high-interactivity or standard-interactivity applications and customizations can continue to work simultaneously with Siebel Open UI:

ebsrvr\WEBTEMPL

Siebel Open UI uses the following folder only for high-interactivity and standard-interactivity clients:

0/MCZ.£_/ 0^^s ebsrvr\WEBTEMPL\custom

Siebel Open UI uses the following folders only in the Siebel Open UI client:

124 Configuring Siebel Open UI Version 8. 1/8.2, Rev. A Files

Siebel Open UI uses the following folder for Siebel Open UI, high-interactivity, and standard- interactivity clients:

ORA L Ε_ΗΟΜέ\ si ebs rvr\WEBTEMPL

If more than one folder contains web templates with the same name, then Siebel Open UI uses the first file that it encounters according to the following search order:

■ For Siebel Open UI clients:

■ 0«/¾C-.E_HOME\siebsrvr\WEBTEMPL\OUIWEBTEMPL\custom

■ ORy Ci.E_HOME\siebsrvr\WEBTEMPL\OUIWEBTEMPL

■ OR/*CLE_HO E\siebsrvr\WEBTEMPL

■ For high-interactivity and standard-interactivity clients:

■ 0 ?>AC-.E_HOME\siebsrvr\WEBTEMPL\custom

■ OR/4CZ.E_HOME\siebsrvr\WEBTEMPL

Updating Relative Paths in Files That You Customize

If you customize a file, and if you save this custom file in a custom folder, then you must modify any relative paths that this file references. For example, if you copy the rules from a predefined .ess file into a custom .ess file, then you must modify the relative paths that your custom .ess file references so that they reference the correct file. For an example of this configuration, see "Customizing the Logo" on page 146.

To update relative paths in files that you customize

1 Create a custom file.

For more information about custom files, see "Organizing Files That You Customize" on page 122.

2 Search your custom file for any relative paths.

For example, images/ in the following code is an example of a relative path :

s rc=i mages/ebus . gi f

3 Modify the relative path so that it can correctly locate the file that it references.

For example:

src=a. JflV7L 0» £/eappweb/PUBLlC/enu/i mages/ebus . gi f

4 Do Step 2 and Step 3 for every relative path that your custom file contains.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 125

Specifying Dependencies Between Presentation Models or Physical Renderers and Other Files

A presentation model or physical renderer sometimes includes a module dependency, which is a relationship that occurs when this presentation model or physical renderer depends on another file. The Define method recognizes each of these items as a JavaScript code module, which is an object that the module_name argument identifies as depending on other modules to run correctly. You specify the module_name argument when you use the Define method to identify the JavaScript files that Siebel Open UI must download for a presentation model or physical renderer. For more information, see "Define Method" on page 506.

Consider the following example that uses the customPR.js file to define the physical renderer. This renderer depends on plug-in X and plug-in Y, and it uses the following directory structure :

■ 3rdParty

X

□ x-core.js

Q x-helper.js

Y

j core .js

sieb el

■ custom

j customPR.js

In this example, the following logical dependencies exist between the customPR.js file and the x- core.js file, x-helper.js file, and the customPR.js file:

3rdPerty X/x-helpler

3rdParty/Y/c»re

Siebel Open UI then uses the following logic at run-time for this example :

1 The user navigates to a view that includes an applet that uses the customPR physical renderer.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Files

2 The Siebel Server sends a reply to the client that includes information about the property set and the physical layout.

3 The view processes the information that the Siebel Server sends in Step 2, and then determines that it must use siebel/custom/customPR.js to render the applet.

4 The RequireJS script loader uses the customPR.js file name to identify siebel/custom/customPR as the module name, and then sends a request to the Siebel Server for this module.

5 If Siebel Open UI already loaded this module, then it returns the module object to the client and proceeds to Step 7.

6 If Siebel Open UI has not already loaded this module, then it does the following work:

a Sends a request to the web server for the siebel/custom/customPR.js file.

b If dependencies exist, then Siebel Open UI sends a request for these dependent modules, and then runs the modules in the browser.

c Siebel Open UI runs the script for the siebel/custom/customPR.js file in the browser.

7 Siebel Open UI uses the module object to create a new instance of the presentation model and the physical renderer.

To help manage your customizations, it is strongly recommended that you use a module name that is similar to the relative location of the file name. You use the manifest administration screens to specify the manifest for these dependencies.

To specify dependencies between presentation models or physical renderers and other files

■ Use the list_of_dependencies argument when you use the Define method in your presentation model or physical renderer.

For an example that uses the list_of_dependencies argument, see "Setting Up the Physical Renderer" on page 84. For more information, see "Define Method" on page 506.

■ If file dependencies require that you configure Siebel Open UI to download files in a specific order, then do "Specifying the Order That Siebel Open UI Uses to Download Files" on page 127.

Specifying the Order That Siebel Open UI Uses to

Download Files

In some situations, you must configure Siebel Open UI to use a specific order when it downloads and runs JavaScript files in the client.

To specify the order that Siebel Open UI uses to download files

■ Use the following code:

defi ne("si ebel /custom//wocfo7e_fl /e" , ["order ! dependent_modul el" , '

order ! dependent_moduT e2" , "order ! dependent_moduT eri] , functi on() {

Configuring Siebel Open UI Version 8. 1/8.2, Rev.

return " name_space . module_name" ;

}) ;

where:

■ order ! is a prefix that specifies to download and run dependent modules in the order that you specify them. You add this prefix immediately before the module name. Siebel Open UI downloads and runs these modules in the order that you specify them.

■ dependent_module specifies the file name that Siebel Open UI must load and the relative path where this file resides.

For example, assume the siebel/phyrenderer file depends on the following file :

3 rdParty/X/x-core . s

In this example, Siebel Open UI must download and run the 3rdParty/X/x-core.js file before it downloads and runs the siebel/phyrenderer file. You can use the following code to specify this order: defi ne C"si ebel /custom/ 7a 77e- 770fl'£ 7e" , ["o rder ! 3 rdParty/x/x-core" , "orde r ! si ebel / phyrende re r"] , functi on () { retu r n " name_space . modu Je_name" ;

}) ;

It is recommended that you use the order! prefix only if necessary. For information about file dependencies, see "Specifying Dependencies Between Presentation Models or Physical Renderers and Other Files" on page 126.

Configuring Manifests

This topic describes how to configure Siebel Open UI manifests. It includes the following topics:

■ "Overview of Configuring Manifests" on page 128

■ "Configuring Custom Manifests" on page 132

■ "Adding Custom Manifest Expressions" on page 143

■ "Adding JavaScript Files to Manifest Administrative Screens" on page 144

Overview of Configuring Manifests

A manifest is a set of instructions that Siebel Open UI uses to identify the JavaScript files that it must download from the Siebel Server to the client so that it can render screens, views, and applets. For an overview of how Siebel Open UI uses this manifest, see "Example of How Siebel Open UI Renders a View or Applet" on page 41.

Config uring Siebel Open U I Version 8. 1/8.2, Rev. A

Siebel CRM versions 8.1.1.9 and 8.1.1.10 use an XML manifest file to identify these JavaScript files in the following situations:

■ When Siebel Open UI initializes the Siebel application. Siebel Open UI does this download only for one Siebel application at a time.

B The first time Siebel Open UI must display an applet in a Siebel application.

Starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4, Siebel Open UI replaces the XML manifest file with manifest data that it stores in the Siebel Database. You cannot modify this predefined manifest data, but you can use the Manifest Administration screen in the client to configure the manifest data that your customization requires. For information about using a utility that migrates your custom manifest configurations from Siebel CRM version 8.1.1.9 or 8.1.1.10 to version 8.1.1.11 or 8.2.2.4, see the topic about migrating the Siebel Open UI manifest file in Siebel Database Upgrade Guide.

Example of How Siebel Open UI Identifies the JavaScript Files It Must Download

Figure 29 describes an example of how Siebel Open UI uses the manifest to identify the JavaScript file it must download so that it can use the presentation model for the SIS Account List Applet. The manifest maps the siebel/custom/recyclebinpmodel .js file to the presentation model that it uses to display this applet. For details about this example, see "Creating the Presentation Model" on page 62 and "Configuring the Manifest for the Recycle Bin Example" on page 94.

Figure 29. Example of How Siebel Open UI Identifies the JavaScript Files It Must Download

Explanation of Ca I louts

The example manifest administration includes the following items :

1 The Files list specifies the siebel/custom/recyclebinpmodel .js file.

130 I Config uri ng Siebel Open U I Version 8. 1/8.2, Rev. A

I

2 The presentation model specifies siebel/custom/recyclebinpmodel when it calls the define method.

Example of a Completed Manifest Administration

Figure 30 includes an example of a completed manifest administration that configures Siebel Open UI to download JavaScript files for the Contact List Applet. For information about how to configure this example, see "Configuring Custom Manifests" on page 132.

Figure 30. Example Manifest Administration

Explanation of Callouts

The example manifest administration includes the following items :

1 The Grid group uses the AND operator to group three expressions into the following group expression :

Desktop AND EditList AND Grid

A group expression is a type of expression that Siebel Open UI uses to arrange subexpressions into a group in the Object Expression list.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

2 Siebel Open UI uses the Level field to determine the order it uses to evaluate expressions. It uses the following sequence :

a It uses the Level field to determine the order it uses to evaluate group expressions. In this example, it uses the following sequence:

□ Evaluates the Grid group first.

□ Evaluates the Tile group next.

□ Evaluates the Map group last.

b It uses the Level field within a group to determine the order it uses to evaluate each

subexpression, which is a type of expression that Siebel Open UI displays as part of a group in the Object Expressions list. It displays each subexpression in an indented position below the group expression. In this example, it uses the following sequence to evaluate subexpressions that reside in the Grid group:

□ Evaluates the Desktop expression first.

□ Evaluates the EditList expression next.

□ Evaluates the Grid expression last. -

In this example, Siebel Open UI evaluates all the expressions that reside in the Grid group, and then does one of the following according to the result of this evaluation :

■ All expressions that reside in the Grid group evaluate to true. Siebel Open UI

downloads the file that the Files list specifies.

■ Any expression that resides in the Grid group evaluates to false. Siebel Open UI discards the entire Grid group, and then evaluates the Tile group.

3 Siebel Open UI uses the Files list to identify the files it must download . In this example, it does the following evaluation :

■ If the platform is a desktop, and if the mode is EditList, and if the user chooses Grid, then it downloads the siebel/jqgridrenderer.js file.

■ If the platform is a desktop, and if the mode is EditList, and if the user chooses Tile, then it downloads the siebel/Tilescrollcontainer.js file.

To view an example that allows the user to choose Grid or Tile, see "Allowing Users to Change the Applet Visualization" on page 182.

Configuring Custom Manifests

This topic describes how to configure the example described in "Example of a Completed Manifest Administration" on page 131. For other examples that configure the manifest to download objects for:

■ Web templates and modified applet modes, see "Allowing Users to Change the Applet Visualization" on page 182, and "Customizing Tiles for List Applets" on page 306.

■ Different web templates, physical Tenderers, and presentation models depending on the applet, see "Displaying Applets Differently According to the Applet Mode" on page 190.

132 Config u ring Siebel Open UI Version 8. 1/8.2, Rev. A

■ Phones, tablets, or desktops, see "Customizing the Number of Columns in Mobile Applets" on page 292.

■ Desktops or mobile platforms, see "Customizing Mobile Lists" on page 299.

■ A physical renderer that renders tiles on a desktop, see "Customizing Tiles for List Applets" on page 306.

■ The physical renderer and the presentation model, see "Configuring the Manifest for the Recycle Bin Example" on page 94.

■ Only for the physical renderer, see "Customizing Tiles for Mobile Lists" on page 312. To configure custom manifests

1 Make sure your custom presentation model or physical renderer uses the Define method :

a Use a JavaScript editor to open your custom presentation model or physical renderer.

b In the section where you configure Siebel Open UI to do the setup, make sure you use the Define method to identify the presentation model file or the physical renderer file.

For an example that does this setup, see "Example of How Siebel Open UI Identifies the JavaScript Files It Must Download" on page 130.

2 Configure the manifest files:

a Log in to the Siebel client with administrative privileges.

b Navigate to the Administration - Application screen, and then the Manifest Files view.

c Verify that the Manifest Files view includes the files that Siebel Open UI must downjoad for your custom deployment.

For this example, verify that the Manifest Files view includes the following files: si ebel /I stappl et . s

s ebel /jqgri d renderer . js

If the Manifest Files view does not include these files, then add them now. For more information, see "Adding JavaScript Files to Manifest Administrative Screens" on page 144.

3 Configure the UI object:

a Navigate to the Administration - Application screen, and then the Manifest Administration view, b In the UI Objects list, specify the following applet.

Field Value

Type Applet

Usage Type Physical Renderer

Name Contact List Applet

For information, see "Fields of the UI Objects List" on page 137.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 133

Configure the Grid group:

For information about how to configure a group, see "Adding Group Expressions" on page 140. a In the Object Expression list, add the following subexpression.

Field Value

Group Name Leave empty.

' Expression Desktop

i Level 1

Operator Leave empty.

Web Template Name Leave empty.

For information, see "Fields of the Object Expression List" on page 139.

Add another subexpression.

Field Value

i Group Name Leave empty.

Expression EditList

Level 2

Operator Leave empty.

Web Template Name Leave empty.

Add another subexpression.

Field Value

Group Name Leave empty. .

Expression Grid

Level 3

Operator Leave empty.

Web Template Name Leave empty.

Add the following group expression.

Field Value

Group Name Leave empty.

Expression Grid

Level 1

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Field Value

Operator Leave empty.

Web Template Name Leave empty. e Use the Move Up and Move Down buttons to arrange the subexpressions in ascending numeric order according to the value in the Level field. Make sure the Object Expression list displays all subexpressions below the group expression.

f Use the Indent and Outdent buttons so that Siebel Open UI displays the subexpressions below and indented from the group expression. The tree in the Inactive Flag field displays this indentation.

g In the UI Objects list, query the Name property for the name of the UI object that you are configuring. This query refreshes the Manifest Administration screen so that you can edit the Group Name and Operator fields of the group expression.

h In the Object Expressions list, expand the tree that Siebel Open UI displays in the Inactive Flag field.

i Set the following fields of the group expression.

Field Value

Group Name Grid

Operator AND Specify the files that Siebel Open UI must download for the Grid group:

a Make sure the Grid group expression is chosen in the Object Expression list,

b In the Files list, click Add.

c In the Files dialog box, click Query,

d In the Name field, enter the path and file name of the file.

For example, enter the following value:

s ebel /jqg r d renderer . s

e Click Go.

If the Files dialog box does not return the file that your deployment requires, then you must use the Manifest Files view to add this file before you can specify it in the Files list. For more information, see "Adding JavaScript Files to Manifest Administrative Screens" on page 144. f Click OK.

Configure the Tile group:

a Repeat Step 4, with the following differences:

□ For the group expression, set the Group Name field to Tile and the Level field to 2. u For the last subexpression, set the Expression field to Tile.

b Repeat Step 5, except add the following file:

s ebel /t l escrol l Tenderer . s

Configure the Map group:

a Repeat Step 4, with the following differences:

□ For the group expression, set the Group Name field to Map and the Level field to 3. u Add only one subexpression with the Expression field set to Map.

b Repeat Step 5, except add the following file:

si ebel /custom/si ebelmaprenderer . j s

In the Object Expression list, use the Move Up, Move Down, Indent, and Outdent buttons until the Object Expression list resembles the configuration in Figure 30.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Manifests

Fields of the UI Objects List

Table 8 describes the fields of the UI Objects list.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customizing Siebe

Table 8. Fields of the UI Objects List

Description

Usage Type Specify how Siebel Open UI must download files. Choose one of the following values:

■ Common. Siebel Open UI downloads the files when it initializes the Siebel application. Siebel Call Center is an example of a Siebel application.

■ Theme. Siebel Open UI downloads only the files it requires to support a theme that you customize.

■ Presentation Model. Siebel Open UI downloads the files that your custom presentation model requires.

■ Physical Renderer. Siebel Open UI downloads the files that your custom physical renderer requires.

■ Web Template. Siebel Open UI downloads files according to the Name property of the web template file. You specify this web template file in the web template in Siebel Tools. For more information, see "Identifying the Web

^• Template File Name" on page 142.

For more information, see "How Siebel Open UI Chooses Files If Your Custom Manifest Matches a Predefined Manifest" on page 141.

Enter the name of your custom object. For example, if you set the Type to Applet, then you must specify the value that Siebel Tools displays in the Name property of the applet.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Fields of the Object Expression List

Table 9 describes the fields of the Object Expression list. You can configure a simple expression, or you can configure a complex expression that includes AND or OR operators, and that can include nested levels. For an example that includes complex expressions, see "Configuring Custom Manifests" on page 132.

Table 9. Fields of the Object Expression List

Field Description

Group Name If the record that you are adding to the Object Expressions list is part of a group of two or more expressions, and if this record is the group expression, then enter a value in the Group Name field and leave the Expression field empty.

The Object Expressions list is a hierarchical list. You can use it to specify complex expressions that you enter as more than one record in this list.

You must add more than one record and indent at least one of them before you can enter a group name. For information about how to do this work, see "Adding Group Expressions" on page 140.

Expression If the record that you are adding to the Object Expressions list is:

■ Not a group expression. Set a value in the Expression field and leave the Group Name field empty.

■ A group expression. Leave the Expression field empty and enter a value in the Group Name field.

If the Expression list does not include the expression that your deployment requires, then you must add a custom expression. For more information, see "Adding Custom Manifest Expressions" on page 143.

Level Enter a number to determine the order that Siebel Open UI uses to evaluate expressions that the Object Expression list contains. Siebel Open UI evaluates these expressions in ascending, numeric order according to the values that the Level field contains. If the Type field in the UI Objects list:

■ Is Application, then Siebel Open UI evaluates every expression. It downloads each file that the Files list specifies for each expression that it evaluates to true.

■ Is not Application, and if Siebel Open UI evaluates an expression to true, then it does the following:

■ Downloads the file that the Files list specifies for this expression

■ Does not process any expression that exists further down in the order

■ Does not download any other files

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 139

Customizing. Siebe kO^Ti

Table 9. Fields of the Object Expression List

Description

Operator If the record that you are adding to the Object Expressions list is a group

expression, then you must specify the logical operator that Siebel Open UI uses to combine the subexpressions that the group contains. You can use one of the following values:

■ AND. Specifies to combine subexpressions. If you specify AND, then Siebel Open UI downloads files only if it evaluates every subexpression in the group

. ^' to true. ' ^■ :· ^■" .] · ^'■■

■ OR. Specifies to consider individually each subexpression that resides in the group. If you specify OR, then Siebel Open UI downloads files according to the first subexpression that it evaluates to true.

If the record that you are adding to the Object Expressions list is not a group expression, or if it does not reside at the top of the hierarchy, then leave the Operator field empty.

Web Template If you set the Usage Type field in the UI Objects list to Web Template, then you Name must specify the name of the Siebel CRM web template file in the Web Template

Name field. To identify this file name, see "Identifying the Web Template File Name" on page 142.

Adding Group Expressions

You must use the sequence that this topic describes when you add a group expression. For an example that uses this sequence, see "Configuring Custom Manifests" on page 132. For more information about group expressions and subexpressions, see "Example of a Completed Manifest Administration" on page 131.

To add group expressions

1 Navigate to the Administration - Application screen, and then the Manifest Administration view.

2 In the UI Objects list, locate the UI object that you must modify.

3 In the Object Expression list, add the subexpressions.

4 Add the group expression. Leave the Group and Operator fields empty.

5 Use the Move Up and Move Down buttons to arrange the subexpressions in ascending numeric order according to the value in the Level field. Make sure the Object Expression list displays all subexpressions below the group expression.

6 Use the Indent and Outdent buttons so that Siebel Open UI displays the subexpressions below and indented from the group expression. The tree in the Inactive Flag field displays this indentation.

7 In the UI Objects list, query the Name property for the name of the UI object that you are configuring. This query refreshes the Manifest Administration screen so that you can edit the Group Name and Operator fields of the group expression.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

8 In the Object Expressions list, expand the tree that Siebel Open UI displays in the Inactive Flag field.

9 Set the values for the Group Name field and the Operator field of the group expression.

How Siebel Open UI Chooses Files If Your Custom Manifest Matches a Predefined Manifest

If the values that you specify in the Type, Usage Type, and Name fields of the UI Objects list are identical to the values that a predefined UI object specifies, then Siebel Open UI uses your custom manifest. For example, Siebel Open UI comes predefined with a UI Object record with the Type set to Applet, the Usage Type set to Physical Renderer, and the Name set to Contact List Applet. To override this configuration, you must do the following work:

■ Create a new record in the UI Objects list that contains the same values in the Type, Usage Type, and Name fields that the predefined record contains.

■ Add a new record in the Object Expression list that evaluates to true.

■ Add a new record in the Files list for the object expression that evaluates to true.

The only exception to this rule occurs in the following situation :

■ You set the Type to Application.

■ You set the Usage Type to Common.

■ A winning expression exists in your customization. A winning expression is an expression that Siebel Open UI evaluates to true, and that Siebel Open UI then uses to identify the files it must download according to the configuration that the Manifest Administration view specifies.

In this situation, Siebel Open UI downloads the files that:

■ The predefined manifest configuration specifies

■ The winning expression of your custom manifest configuration specifies

Configu ring Siebel Open U I Version 8. 1/8.2, Rev. A 14 1

Table 10 describes how Siebel Open UI chooses files if your manifest configuration matches the predefined manifest configuration for a UI object. The Configuration column describes values that the UI Objects list of the Manifest Administration screen contains.

Table 10. How Siebel Open UI Chooses Files If Your Custom Manifest Matches the Predefined

Manifest

Predefined Custom

Configuration Configuration Exists Configuration Exists Result

Type is Yes ^' . ^' No Siebel Open UI downloads

Application and files according to the winning Usage Type is predefined expressions. Common

Type is Yes Yes Siebel Open UI downloads

Application and files according to the winning Usage Type is predefined expression and Common the winning custom

expressions.

Usage Type is Yes No Siebel Open UI downloads not Common files according to the first predefined expression that it evaluates to true.

If more than one expression exists, then it uses the level to determine the sequence it uses to evaluate these expressions.

Usage Type is Yes Yes Siebel Open UI downloads not Common files according to the first custom expression that it evaluates to true.

If more than one expression exists, then it uses the level to determine the sequence it uses to evaluate these expressions.

If Siebel Open UI does not evaluate any custom expression to true, then it uses a predefined expression for this object.

Identifying the Web Template File Name

This topic describes how to identify the file name that a web template ΐΐ¾3¾ Configuring Siebel Open UI Version 8.1/8.2, Rev. A

To identify the web template file name

1 Open Siebel Tools.

For more information, see Using Siebel Tools.

2 In the Object Explorer, click Web Template.

3 In the Web Templates list, locate the object definition for the web template.

For example, if you entered Applet Form Grid Layout in the Name field in the UI Objects list, then query the Name property in the Web Templates list for Applet Form Grid Layout.

4 In the Object Explorer, expand the Web Template tree, and then click Web Template File.

5 In the Web Template Files list, note the value that Siebel Tools displays in the Filename property.

For example, Siebel Open UI uses the CCAppletFormGridLayout.swt file for the Applet Form Grid Layout web template.

Adding Custom Manifest Expressions

This topic describes how to add a custom manifest expression.

To add custom manifest expressions

1 Log in to the Siebel client with administrative privileges.

2 Navigate to the Administration - Application screen, and then the Manifest Expressions view.

3 In the Expressions list, add the following expression.

Field Value

Name Enter text that describes the expression . For example, enter the following value:

Desktop

Siebel Open UI uses this value as an abbreviation for the expression that it displays in the Expression field in the Object Expression list in the Manifest Administration screen. It uses this abbreviation only to improve readability of the Object Expression list.

Expression Enter an expression . For example :

GetProfi l eAttrC'Pl atform Name") = ' Desktop '

Siebel Open UI uses this value when it evaluates expressions that reside in the Object Expression list. For more information, see "GetProfileAttr Method" on page 483.

Config u ri ng Siebel Open U I Version 8. 1/8.2, Rev. A Customizing Siebel Optjfttty

Adding JavaScript Files to Manifest Administrative

Screens

This topic describes how to add a JavaScript file to the manifest administrative screens.

To add JavaScript files to manifest administrative screens

1 Log in to the Siebel client with administrative privileges.

2 Navigate to the Administration - Application screen, and then the Manifest Files view.

3 In the Files list, add a new record for each JavaScript file that you must add.

Make sure you include the path. For example, to add the mycustomrenderer.js file, you add the following value:

custom/mycustomrenderer . j s

You can now add this file in the Files list in the Manifest Administration view. For more information about how to do this, see Step 5 on page 135.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

This chapter describes how to customize Siebel Open UI for Siebel Mobile and Siebel Mobile disconnected. It includes the following topics:

■ Overview of Customizing Siebel Mobile on page 275

■ Customizing Layout, Views, Menus, Lists, and Controls on page 279

■ Customizing Transitions, Themes, Styles, and Colors on page 322

■ Customizing Scrolling and Swipe on page 336

■ Customizing How Siebel Open UI Interacts with Siebel Mobile Applications on page 343

For information about customizing only Siebel Mobile disconnected, see Chapter 10, "Customizing Siebel Open UI for Siebel Mobile Disconnected."

Overview of Customizing Siebel Mobile

This topic includes an overview of how to customize Siebel Mobile. It includes the following information:

■ Mobile Controller and Physical Renderers You Can Modify to Customize Siebel Mobile on page 275

■ Third Party JavaScript Plug-Ins You Can Use to Customize Siebel Mobile on page 276

■ Templates and Style Sheets You Can Use to Customize Siebel Mobile on page 277

■ Setting Up Configuration for Siebel Mobile Examples on page 277

■ Determining Whether or Not Siebel Open UI Is Enabled for Siebel Mobile on page 278

For information about the following items, see Siebel Connected Mobile Applications Guide:

■ Enabling Siebel Open UI to support Siebel Mobile

■ Enabling the Siebel Server for Siebel Mobile

■ Enabling the Mobile Web Client to use Siebel Open UI

■ Detailed list of Siebel Web Templates, screens, and views that support Siebel Mobile

Mobile Controller and Physical Renderers You Can

Modify to Customize Siebel Mobile

You use the JQMLayout mobile controller to control landscape and portrait layout for each type of mobile device.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A j 275 Customizing Siebel Open UI forjSiebell

Table 18 describes the physical renderers you can use with Siebel Mobile. It stores these renderers in the following folder:

Table 18. Physical Renderers You Can Use with Siebel Mobile

Renderer Item Rendered

JQMFormRenderer Form applet

JQMListRenderer List applet

JQMCalListRenderer Calendar applets for Siebel Mobile

! JQMGridRenderer Grid list applet

JQMNavBarRenderer Navigation control

JQMMapCtrl Google map

JQMSearchCtrl Search box

JQMPDQPhyRenderer PDQ dropdown list

JQMVisDropdownPhyRenderer Visibility dropdown list

JQMMBMenuRenderer Applet menu dropdown list

JQMScrollContainer Vertical scrolling in the JQMListRenderer and i

1 JQMGridRenderer

JQMMsgBarRenderer Message bar

Third Party JavaScript Plug-Ins You Can Use to

Customize Siebel Mobile

Siebel Mobile supports the following third-party plug-ins:

■ Mobiscroll 2.0. Add a date and time picker that uses a wheel scroller. For more information, see the Mobiscroll documentation.

■ jQuery Mobile 1.1.1. You can use the following plug-ins. For more information about jQuery, see the jQuery documentation:

■ jQuery UI Google Map 3.0. Integrate Google maps.

■ jQuery SwipeButton.js. Add the swipe delete that an iPhone uses to a list view.

■ jQuery scrollview. Add grab-and-drag scrolling.

■ jQuery. signaturepad.min.js. Create a signature canvas.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Templates and Style Sheets You Can Use to Customize Siebel Mobile

Siebel Mobile comes predefined with the theme-black. ess file. You can modify this style sheet to implement the appearance and behavior that you require for Siebel Mobile. The mobiletheme.js file also controls styling. Siebel Open UI prefixes the name of each web template that Siebel Mobile uses with the following text:

CC

Table 19 describes these templates. It stores these templates in the following folder:

Table 19. Web Templates that Siebel Open UI Uses for Siebel Mobile

Web Template Description

\ CCViewDetailMap_Mobile.swt Maps page.

^• CCViewDetail_Mobile.swt Detail page.

CCViewDetail_Mobile_RelatedItems.swt Related items page.

CCViewDetail_Mobile_Signature.swt Signatures page.

CCAppletFormMobile.swt Form page.

SIAAppletFormGridLayout_NoMenu_OUI.swt Signature Capture Applet that Siebel Open UI uses in the Signature page.

: CCAppletFormMobile - Icon.swt All parent form applets.

, CCAppletFormMobile - Icon-NoMenu All parent form applets.

CCFormButtonsTop_OUIMobile_NoMenu.swt Renders the applet title and buttons without the menu button.

! CCViewDetail_Order_Mobile.swt Renders the order screen and the return screen in

Siebel Consumer Goods.

Setting Up Configuration for Siebel Mobile Examples

In this topic you set up the configuration that some of the Siebel Mobile examples in this chapter require.

To set up configuration for Siebel Mobile examples

1 Create a shortcut to the Chrome browser:

a In Microsoft Windows, choose the Start menu, click Programs, Siebel Client, left-click Siebel Call Center - ENU, and then drag it to the desktop to create a shortcut.

b Right-click the shortcut you created Step a, and then click Properties.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 277 Customizing Siebel Open UI for Siebel Mobile

c Modify the value in the Target window of the Properties dialog box so that this shortcut does the following:

□ Uses the pharma_mobile.cfg file. For more information, see "Modifying the Application Configuration File" on page 105.

u Uses Chrome. You enter the path to the Chrome executable. For example:

D:\sea\client\BlN\siebel.exe /c d:\sea\cl ent\b n\enu\pharma_mob le.cfg /u user _^ name /p user_password /b "C:\Program Files

(x86)\Googl e\chrome\Appl i cati on\chrome . exe"

This shortcut allows you to simulate a tablet mode in the Chrome browser. Make sure you use this shortcut in the mobile topics that this chapter describes.

The pharma_mobile.cfg file is the application configuration file for the ePharma Siebel Mobile application. You can replace pharma_mobile.cfg in this path with the configuration file that your application uses, as necessary.

2 Modify the shortcut that you use to start Siebel Call Center.

This shortcut must allow administration privileges for the Siebel Administrator responsibility. To do this, you add the editseeddata switch to the end of the Target string in the shortcut. For example:

D:\sea\cl ent\BlN\siebel.exe /c d:\sea\client\b n\enu\uagent.cfg /u user_name /p user_password /b "C:\Program Files Cx86)\Google\Chrome\Application\chrome.exe" / editseeddata

Determining Whether or Not Siebel Open UI Is Enabled for Siebel Mobile

This topic includes code that you can use to determine whether or not Siebel Open UI is enabled for Siebel Mobile. You can use this code at run-time to make sure Siebel Open UI is enabled for Siebel Mobile before Siebel Open UI runs any of your customizations that affect Siebel Mobile.

To determine whether or not Siebel Open UI is enabled for Siebel Mobile

■ Do one of the following:

■ In JavaScript code that runs on the client, you can use the following code:

if (SiebelApp.s_App.lsMobileApplicationO === "true")

For more information, see "IsMobileApplication Method" on page 487.

■ In a Siebel Web Template that Siebel Open UI runs on the Siebel Server, you can use

IsMobileApplicationMode in a swe:case condition. For example:

<swe : swi tch>

<swe:case condition="web Engine State Properties, isMob leApplicat onMode">

<div id="tbm_l" class="ToolbarButton">

<swe: tool bar name="GoOffline" >

<s e : tool bari tem property="FormattedHtml "/>

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

</swe:toolbar>

</div>

</swe:case>

<swe:default>

<div class="Tier2ToolbarConta ner">

<s e:pageitem id="21">

<div class="Pageltetn"xs e:this property="FormattedHtml " /></div>

</swe:pageitem>

</d v>

</s e:default>

</s e : swi tch>

Customizing Layout, Views, Menus,

Lists, and Controls

This topic describes how to configure layout, views, menus, lists, and controls. It includes the following information:

■ Customizing the Layout for Mobile Devices on page 279

■ Configuring Views to Use Landscape or Portrait Layout on page 282

■ Configuring Siebel Open UI to Display High Interactivity Views in Mobile Web Clients on page 286

■ Using Siebel Web Templates to Modify Siebel Mobile Views on page 288

■ Customizing Menus and Menu Items on page 291

■ Customizing the Number of Columns in Mobile Applets on page 292

■ Customizing the Number of Columns in Mobile Tables on page 295

■ Customizing Mobile Lists on page 299

■ Customizing Tiles on page 303

■ Adding Toggle Controls on page 317

■ Configuring Siebel Open UI to Toggle Row Visibility on page 320

■ Adding the Show More Button to Your Custom Form Applets on page 320

Customizing the Layout for Mobile Devices

This topic describes how to customize the layout according to the mobile device that the user uses, such as a tablet, mobile phone, WebOS, and so on.

To customize the layout for mobile devices

1 Open the .ess file from one of the following locations:

■ The Siebel Server installation folder:

ORACLE_HOM£ vlEBMASTER\f i 1 es\ language_code

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 279

Lists, and Controls

■ The Siebel client installation folder:

■ The Siebel Tools installation folder:

ORA CL E_HOM£ pu B L IC\ language_ code\fl L E s

2 Add code to the ess file you opened in Step 1 that uses media query to create device specific styles.

For more information, see the topic about CSS media queries at the Mozilla Developer Network at https://developer.mozilla.org/en-US/docs/CSS/Media_queries.

For example, add the following code to create styles for tablet or mobile phone:

/* iPad */

©media all and (min-dev ce-width: 481px) and (max-device-width: 1024px) and (ori entati on : 1 andscape)

©media all and (min-device-width: 481px) and (max-device-width: 1024px) and (ori entati on : portrai t)

/* i Phone */

©media all and (max-device-width: 480px) and (or entati on landscape)

©media all and (max-device-width: 480px) and (ori entati on: portrait)

3 Identify the .swt file that you must modify, and then open it for editing.

For a similar example that identifies and modifies a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

4 Add the following tags to the .swt file:

■ swe:if

■ swe: switch

■ swe: case

■ swe:default

To add these tags you use the following code:

<swe : swi tch>

<swe:case condition="web Engine state Properties, checkMobileDevice, ' Devi ce : device_ type' ">

<div id="scrnbar" landscape="Defau1 t" portrait="Hide">

<div id="content" landscape="Default" portrai t="show">

</swe:case>

<swe:default>

<swe: switch>

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Layout, Views, Menus,

¾ist:s, and Controls

<swe:case condit on="Web Eng ne State Properties, CheckMobileDevice,

' Devi ce : device_ type' ">

<div id="scrnbar" landscape="Show" portrait="Hide">

<div id="content" landscape="H de" portrait="Show">

</swe:case>

</swe : swi tch>

</swe:default>

</swe : swi tch>

where:

■ device_type is a device that Siebel Open UI supports. The SupportedMobileBrowser server parameter identifies these devices. For more information, see "Specifying the Supported Mobile Browser" on page 282.

For example, the following code sets the layout for a tablet or mobile phone:

<swe: switch>

<swe:case condition="Web Engine State Properties, CheckMobileDev ce,

' Devi ce:i Pad" ">

<div id="scrnbar" landscape="Default" portrait="Hide">

<div id="content" landscape="Default" portrait="Show">

</swe:case>

<swe:default>

<swe:switch>

<swe:case condition="web Engine State Properties, CheckMob leDevice,

' Devi ce:i hone' ">

<div id="scrnbar" 1 andscape="Show" portrait="Hide">

<div id="content" landscape="Hide" portra t="Show">

</swe : case>

</swe : swi tch>

</swe:default>

</swe : swi tch>

Set the following parameter in the InfraUIFramework section of the application configuration file so that Siebel Open UI supports the device type that you specify in Step 4:

SupportedMobileBrowser = device_type_l,device_type_n

For example:

SupportedMob leBrowser = Pad, i Phone, i Pod, And ro d.webos

For more information, see "Modifying the Application Configuration File" on page 105.

Make sure Siebel Open UI is enabled for Siebel Mobile.

For more information, see "Determining Whether or Not Siebel Open UI Is Enabled for Siebel Mobile" on page 278.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 281

Lists, and Controls

Specifying the Supported Mobile Browser

You can use the SupportedMobileBrowser parameter to identify the devices that Siebel Open UI loads in the JQM (jQuery Mobile) view. It uses the following default string value. A comma separates each value that the string contains:

Supported obi 1 eBrowser = i Pad , Phone , i Pod , Androi d-Chrome-Mobi 1 e , Androi rich rome , ebOS

If you do not specify this parameter in the Server Manager or in the application configuration file, then Siebel Open UI uses this default value. You can append values to add more devices. You must append a unique combination of the user agent. For example, to add a parameter for Android Xoom, you use the following string :

Androi d-xoom

You use the following code:

SupportedMobi 1 eBrowser = i Pad , i Phone , i Pod , Androi d-Chrome-Mobi 1 e .Androi rich rome , And roi d-xoom , ebOS

For more information, see "Modifying the Application Configuration File" on page 105.

Configuring Views to Use Landscape or Portrait Layout

This topic describes how to configure a view to use landscape or portrait layout. It uses the Opportunity List View as an example.

To configure views to use landscape or portrait layout

1 Identify the view that you must modify.

a Log in to the client, and then navigate to the Opportunities screen.

b Click Opportunities List.

c Click Help, and then click About View.

d Make a note of the view name.

For example, Opportunity List View.

2 Identify the Web template file that the view that you identified in Step 1 uses:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click View.

c In the Views list, query the name property for Opportunity List View.

d In the Object Explorer, expand the View tree, and then click View Web Template.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

e In the View Web Templates list, make a note of the value that the Web Template property contains.

For example:

vi ew Detai l (Parent wi th Poi nter)

f In the Object Explorer, click Web Template.

g In the Web Templates list, query the Name property for the web template name.

For example, query the Name property for the following value. If the name includes a special character, such as a parenthesis, then you must use double quotation marks to enclose the entire value:

" i ew Detai l (Parent wi th Poi nter) "

h In the Object Explorer, expand the Web Template tree, and then click Web Template File. i In the Web Template Files list, make a note of the value that the Filename property contains.

This value identifies the name of the Web template file that you must modify. For example, CCViewDetaiLParentPntr.swt.

Modify the Web template file:

a Choose the application-level View menu, Windows, and then click Web Templates Window, b Scroll down in the Web Templates window to locate, and then click the following file:

CCVi ewDetai l_ParentPnt r

If you click CCViewDetail_ParentPntr, then Siebel Tools displays the HTML code that the CCViewDetaiLParentPntr.swt file contains. It displays this code in a separate window. c Right-click the window that displays the HTML code, and then choose Edit Template.

d Locate the div element that you must modify.

e Modify the code.

For example, add the following code:

<div i d="contentl" l andscape="Defaul t" portrai t="Show">

<div i d="content2" l andscape="Defaul t" portrai t="Hi de">

For more information, see "Landscape and Portrait Tags You Can Add to Div Elements" on page 284.

Test your modifications.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A j 283

Landscape and Portrait Tags You Can Add to Div Elements

Table 20 describes the attributes that you can add to a div element that the Web template file contains. Siebel Open UI uses this configuration to determine the orientation when it loads a view or if the user modifies the orientation. It processes each tagged div element for hide or display according to the attribute value for the landscape and portrait layout. It does not process any div element that includes an invalid value for the landscape or portrait tags.

Table 20. Landscape and Portrait Tags You Can Add to Div Elements

Attribute Value Description

landscape Default If the view is in landscape layout, then Siebel Open UI displays the div element. It uses the default ess style to determine how to display the div element.

To allow the user to toggle between landscape and portrait layout, you add the following ess class to the div element. Siebel Open UI toggles the display every time the user clicks the control :

toggl e

landscape Show If the view is in landscape layout, then Siebel Open UI displays the div element. Siebel Open UI toggles the display every time the user clicks the control.

landscape Hide If the view is in landscape layout, then Siebel Open UI hides the div element. Siebel Open UI toggles the display every time the user clicks the control.

portrait Default If the view is in portrait layout, then Siebel Open UI displays the div element. It uses the default ess style to determine how to display the div element.

To allow the user to toggle between landscape and portrait layout, you add the following ess class to the div element. Siebel Open UI toggles the display every time the user clicks the control :

toggl e

portrait Show If the view is in portrait layout, then Siebel Open UI displays the div element. Siebel Open UI toggles the display every time the user clicks the 'control.

portrait Hide If the view is in portrait layout, then Siebel Open UI hides the div element. Siebel Open UI toggles the display every time the user clicks the control. .

Configuring Web Templates to Use Landscape or Portrait Layout

The example in this topic configures a web template to use landscape or portrait layout.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

configure web templates to use landscape or portrait layout

Modify the web template:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b Choose the application-level View menu, Windows, and then click Web Templates Window, c Scroll down in the Web Templates window to locate, and then click the following file:

CCPageContai ner

d Right-click the window that displays the HTML code, and then choose Edit Template.

e Add the following landscape tag:

<s e:frame type="Screenbar" html Attr="landscape=' Default" portrait='Hide' marginheight='0' marginwidth='0' noresize sc roll ing=' Auto' ">

<swe : i ncl ude f i 1 e="CCFrameScreenbar . swt"/>

</swe : f rame>

f Add the following portrait tag:

<swe:frame type="Content" htmlAttr="landscape='Default' portrait='Sho ' marg nheight='0' marg nw dth='0' noresize scroll ing= 'Auto' ">

<swe : ncl ude f 1 e="CCFrameContentHl . swt"/>

</swe : f rame>

Modify the cascading style sheet:

a Use a text editor to open the theme-blue. ess file.

b Add the following code:

Omedia all and (orientation: landscape)

{

#_swescrnbar {

width: 20%;

float: left;

}

#_swecontent {

width: 77%;

float: right;

}

}

©media all and (orientation:portrait)

{

#_swecontent {

width: 98%;

float: none;

}

#_swescrnbar{

width: 98%;

float: none;

}

}

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 285

c If any div element is hidden in landscape mode or portrait mode, then you must create a toggle class. Do the following work:

□ Locate the proper media query in the theme-blue. ess file.

□ Create a toggle class in the query you located in Step o for the div element. Use one of the following tags:

l andscape = ' Defaul t '

portrai t = ' Defaul t '

This configuration allows Siebel Open UI to call the toggle layout. In this example, no hidden div element exists, so it is not necessary to create a toggle class for #_swescrnbar or #_swecontent for landscape layout.

Configuring a Nested Tag with Landscape or Portrait Layout

Siebel Open UI queries all div elements that contain landscape or portrait attributes to determine hide or display configuration. It does this for all div elements that exist in the DOM. Siebel Open UI allows the following configuration :

■ If the parent div element is displayed, then the child div element of this parent can be displayed or hidden.

■ If the parent div element is not displayed, then the child div element of this parent must be hidden. It cannot be displayed.

You must make sure that any tags you add use this configuration. For example, consider the following example code:

<div i d="content" l andscape="Defaul t" portra t="H de">

<di v i d="button"/>

<di v i d="vi e ">

<di v i d="appl etl" l andscape="Hi de" portra t="Show"/>

<di v i d="appl et2"/>

</d v>

</di v>

This code does the following :

■ Landscape layout. Displays the button and applet2, but hides appletl .

■ Portrait layout. Hides the button, applet2, and appletl .

Configuring Siebel Open UI to Display High Interactivity Views in Mobile Web Clients

This topic describes how to configure Siebel Open UI to display a high interactivity view in the Mobile Web Client.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

onfigure Siebel Open UI to display high interactivity views in Mobile Web Clients Modify the screen :

a Open Siebel Tools using the Siebel Mobile tag.

For more i nformation, see Using Siebel Tools.

b In the Object Explorer, click Screens.

c In the Screens list, query the Name property for ePharma Account Mobile.

d In the Object Explorer, expand the Screen tree, and then click Screen View.

e In the Screen Views list, query the Name property for Pharma Account Contact View - Mobile. f Choose the Edit menu, and then click Copy Record.

g Modify the following properties of the copy of the screen view that you created in Step f.

Property Value

View TNT SHM Intermediary Account Opportunities View

; Sequence ⁷

Viewbar Text -String Override Opportunities

j Menu Text -String Override Opportunities

Compile your modifications.

Test your modifications :

a Use the shortcut that you modified in Step c on page 278 to open the ePharmacy application.

Siebel Open UI displays the ePharmacy application in desktop mode,

b In Chrome, click the Preferences menu, and then the Advanced menu item,

c Make sure the following option includes a check mark, and then close the dialog box:

Show Developer Menu in Menu Bar

d Click the menu bar, click Develop, click User Agent, and then choose iPad.

To use the iPad simulation mode, you can also click the mask icon, and then choose iPad. Chrome displays the mask icon to the left of the wrench icon in the upper-right corner of the Chrome browser.

Config uring Siebel Open U I Version 8. 1/8.2, Rev. A ! 287

Lists, and Controls

e Click the Accounts screen, and then click the Opportunities tab.

Siebel Open UI displays the view you modified . Make sure it resembles the following view. This view is not converted for use in Siebel Mobile so Siebel Open UI does not display the mobile user interface. To apply this user interface, see "Using Siebel Web Templates to Modify Siebel Mobile Views" on page 288.

f Close the ePharmacy application.

Using Siebel Web Templates to Modify Siebel Mobile Views

This topic describes how to apply a Siebel Web Template (SWT) to a Siebel Mobile view.

To use Siebel Web Templates to modify appearance and behavior

1 Configure Siebel Open UI to display the desktop view that you must modify in the Mobile Web Client.

For more information, "Configuring Siebel Open UI to Display High Interactivity Views in Mobile Web Clients" on page 286.

2 Modify the view :

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click View.

288 Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

c In the Views list, query the name property for the following value:

TNT SHM Intermedi ary Account Opportuni ti es vi ew

d Make a copy of the record that you located in Step c.

e Modify the following properties of the view that you created in Step d.

Property Value

; Name TNT SHM Intermediary Account Opportunities View - Mobile Project Mobile LS "

Business Object Account

In the Object Explorer, expand the View tree, and then click View Web Template.

In the View Web Templates list, modify the following property Base view web template.

Property Value

: Web Template View Detail Mobile Related Items h In the Object Explorer, expand the View Web Template tree, and then click View Web Template Item.

i In the View Web Template Items list, query the Name property for Opportunity List Applet, j Modify the following property of the Opportunity List Applet view web template item.

Property Value

Item Identifier 4 k In the View Web Template Items list, query the Name property for SIS Account Entry Applet. I Modify the following properties SIS Account Entry Applet view web template item.

Property Value 1

Applet Mobile Pharma Account Form Applet

Name Mobile Pharma Account Form Applet

Mode Base

In the Object Explorer, click View, and then modify the following properties of the TNT SHM Intermediary Account Opportunities View.

Property Value

Thread Applet Mobile Pharma Account Form Applet

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 289

Lists, and Controls . ~ ?- j

Modify the screen :

a In the Object Explorer, click Screen.

b In the Screens list, query the Name property for ePharma Account Mobile,

c In the Object Explorer, expand the Screen tree, and then click Screen View,

d In the Screen Views list, query the Name property for the following value:

TNT SHM intermed ary Account Opportuni ti es vi ew

e Modify the following property of the TNT SHM Intermediary Account Opportunities View -

Property Value

View TNT SHM Intermediary Account Opportunities View - Mobile

4 Compile your modifications.

5 Configure the responsibilities:

a Use the shortcut that you modified in Step 2 on page 278 to open Siebel Call Center, b Navigate to the Administration - Application screen, and then click the Responsibilities link, c In the Responsibilities list, query the Responsibility field for Siebel Administrator,

d In the Views list, add the following view:

TNT SHM intermedi ary Account Opportuni ti es vi ew - Mobi l e

6 Test your modifications:

a Use the shortcut that you modified in Step c on page 278 to open the ePharmacy application.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

b Click the Accounts screen, and then click the Opportunities tab.

Siebel Open UI displays the view you modified . Make sure it resembles the following view.

Customizing Menus and Menu Items

This topic describes how to customize menus and menu items.

Customizing Menus

This topic describes how to customize a menu button for an applet. To customize menus

■ Modify the CCListButtonsTop_Mobile.swt file.

Customizing Menu Items

This topic describes how to customize the menu items that a menu displays. Siebel Mobile uses a list applet to display a menu. It restricts the height of each menu item. The user can scroll up or down in the menu to access each menu item. You can modify an applet method menu item or a class method menu item.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A Customizing Siebel

Lists, a nd Controls

To customize menu items

1 Open Siebel Tools.

For more information, see Using Siebel Tools.

2 Optional. Modify the applet method menu item :

a In the Object Explorer, click Applet.

b In the Applets list, query the Name property for the name of the list applet that Siebel Open UI uses to display the menu.

c In the Object Explorer, expand the Applet tree, and then click Applet Method Menu Item. d Add an applet method menu item.

3 Optional. Modify the class that the applet uses :

a In the Object Explorer, click Class.

b In the Class list, query the Name property for CSSSWEFrame or CSSSWEFrameList.

c In the Object Explorer, expand the Class tree, and then click Class Method Menu Item, d Add a class method menu item.

For more information about setting the properties for an applet method menu item or a class method menu item, see Configuring Siebel Business Applications.

Customizing the Number of Columns in Mobile Applets

Siebel Open UI comes predefined to display a maximum of four list columns in a Siebel Mobile phone client, and eight list columns in a tablet. This topic describes how to write a custom renderer that overwrites this number of maximum columns. You can customize the number of columns at the following different levels for tablets and for phones:

■ Applet level. Maximum number of list columns.

■ Globally. Default maximum number of list columns. The custom renderer modifies only the global configuration.

To customize the number of columns in mobile applets

1 Modify the applet:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet,

c In the Applets list, locate the applet that you must modify,

d In the Object Explorer, expand the Applet tree, and then click Applet User Prop.

Config u ri ng Siebel Open U I Version 8. 1/8.2, Rev. A

e In the Applet User Properties list, add the following applet user properties.

Name Value

Max List Columns Phone Enter a number. For example, to display a maximum of five columns in a phone, enter the number 5.

Max List Columns Tablet Enter a number. For example, to display a maximum of seven columns in a tablet, enter the number 7.

ClientPMUserProp Enter the following value:

i Max List Columns Phone, Max L st Columns Tablet i You add a series of applet user property names. Use a comma to separate each name. Siebel Open UI sends these applet user ί properties from the Siebel Server to the client at run time. In this example, you add the other applet user properties that you specify in this step. f Compile your modifications.

Add custom physical Tenderers.

Siebel Open UI comes predefined to use the jqmlistrenderer.js file for the phone and the jqmtabletlistrenderer.js file for the tablet to determine the maximum number of columns. Siebel Open UI derives the jqmtabletlistrenderer.js file from the jqmlistrenderer.js file. You can create a custom physical renderer to overwrite the SetDefaultMaxListColumns method that these files specify. Do the following:

a Create a JavaScript file in the following folder:

scri pts\si ebel \custom

You must use this folder. You can use any file name. For this example, use

custom_phone_renderer.js. For more information, see "Organizing Files That You Customize" on page 122.

b Add the following code to the file you created in Step a. This code overwrites the methods that Siebel Open UI uses to render columns in a phone:

if (typeof (Si ebelAppFacade.JQMPhoneLi stRenderer) ===

"undefined") {

Si ebel JS . Namespace ( ' Si ebel AppFacade . JQMPhoneLi stRenderer ' ) ;

def i ne("s ebel / qmphonel i strenderer" , ["order ! 3rdParty/ qmobi 1 e/ mobi scrol 1. custom-2.5.0. mi n" ,

"order! 3 rdParty/ jqmob le/ query . swipeButton .m n" , "order ! 3 rdParty/ qmobi le/ jquery. easing.1.3",

"order! 3 rdParty/ qmobi le/ jquery .mobi le. scroll view" , "order! 3 rdParty/ jquery. mobile. scrollview-ext" ,

"order! siebel/jqmsearchctrl " , "order ! si ebel/ qmformrende re r" , "order ! siebel/ jqmscroll container" , "order ! si ebel/jqmli strenderer"] ,

function () {

Si ebel AppFacade. JQMPhoneLi stRenderer = (functionO {

function JQMPhoneLi stRenderer (pm)

Configuring Siebel Open UI Version 8.1/8.2, Rev. A ^• 29.3

Lists, and Control!

{Si ebel AppFacade . JQMPhoneLi st enderer . supercl ass . constructor . cal 1 (

this, pm) ;

}

Si ebel 3S. Extend (JQMPhoneLi stRenderer, Si ebel AppFacade. JQMLi stRenderer) ;

JQMPhoneLi stRenderer. prototype. SetDefaultMaxListColumns = functionO { this.m_defaultMaxListColumns = 5;

//overwritten value

for phone maximum list columns

};

return JQMPhoneLi stRenderer ;

};

}O0 ;

return "Si ebel AppFacade . JQMPhoneLi stRenderer" ;

});

}

c Create a new JavaScript file named custom_tablet_renderer.js in the following folder:

pts\si ebel \custom

You must create a separate file for each platform.

3 Configure the manifest:

a Log in to the Siebel client with administrative privileges.

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

b Navigate to the Administration - Application screen, and then the Manifest Files view, c In the Files list, add the following file.

Field Value 1

: Name siebel/jqmphonelistrenderer.js

You add the custom files that you created in Step 2.

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 Specify the name of the applet that you modified in Step 1.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a phone platform.

Expression Phone

Level

In the Files list, add the following file:

si ebel /jqmphonel i st Tenderer . s

In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the'applet on a tablet platform.

Field Value

i In the Files list, add the following file:

si ebel / j qmtabl etl i st renderer . j s

j In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a desktop platform.

Value

Expression Desktop

Level 3 k In the Files list, add the following file:

si ebel /j qml i st rende rer . j s

4 Test your modifications:

a Log in to the client through a phone, and then verify that Siebel Open UI displays the maximum number of columns that you specified for the phone.

b Log in to the client through a tablet, and then verify that Siebel Open UI displays the maximum number of columns that you specified for the tablet.

Customizing the Number of Columns in Mobile Tables

Siebel Open UI comes predefined to display a maximum of four list columns in a phone and eight list columns in a tablet. You can use applet user properties or JavaScript to modify the number of columns that Siebel Open UI displays.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Lists, and Controls

Siebel Open UI uses the JQMListRenderer physical renderer to render an applet in a telephone. The JQMGridRenderer is a list physical renderer that renders controls in a table, such as a combo box, pick list, check box, date and time control, or text control . It is read-only, by default. However, the user can click an editable cell in a table to update the value in this cell . You can configure the manifest so that Siebel Open UI uses the JQMGridRenderer instead of JQMListRenderer. For more information, see "Configuring Manifests" on page 128.

Figure 33 includes an example of the Contacts list that the JQMTabletGridRenderer renders in a tablet. The JQMTabletGridRenderer is a physical renderer that Siebel Open UI uses to render an applet in a tablet.

Figure 33. Example of a List That the JQMTabletGridRenderer Renders in a Tablet

Using Applet User Properties to Modify the Number of Columns in Tables

This topic describes how to use applet user properties to modify the number of columns that Siebel Open UI displays in a table that it renders in a list applet.

To use applet user properties to modify the number of columns in tables

1 Modify the applet:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for the applet that contains the table that you must modify.

d In the Object Explorer, expand the Applet tree, and then click Applet User Prop.

296 . Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

e In the Applet User Properties list, add the following applet user properties.

f Compile your modifications.

Configure the manifest:

a Log in to the Siebel application.

b Navigate to the Administration - Application screen.

For more information about the screens you use in this step, see "Configuring Manifests" on page 128.

c Click Manifest Administration.

d In the UI Objects list, add the following UI applet.

Field Value

j Type Applet

i Usage Type Physical Renderer

Name My Applet

This step defines the user interface object for My Applet.

Lists, and Controls

e In the Object Expression list, add the following expressions. Use the File list to add each file.

Expression Level File

: Phone. siebel/jqmgridrenderer.js

! Tablet 2 siebel/jqmtabletgridrenderer.js

1 Desktop 3 siebel/jqmgridrenderer.js ¹

Using JavaScript to Modify the Number of Columns in Tables

This topic describes how to use JavaScript to modify the number of columns that Siebel Open UI displays in a table that it renders in a list applet.

To use JavaScript to modify the number of columns in tables

1 Copy one of the following files to your custom folder:

■ jqmgridrenderer.js. Copy this file to modify a table that Siebel Open UI displays in a phone.

■ jqmtabletgridrenderer.js. Copy this file to modify a table that Siebel Open UI displays in a tablet.

You must copy these files only to the following folder:

1 es\custom

For more information about where these JavaScript files reside and the folders that you can use to store your customizations, see "Organizing Files That You Customize" on page 122.

2 Use a JavaScript editor to open the file that you copied in Step 1.

3 Add the following code:

if (typeof (siebelAppFacade. JQ CustomGrid enderer) === "undefined") {

Si ebel 3S . Namespace ( ' Si ebel AppFacade .3QMCustomGri dRenderer ' ) ;

//Module with its dependencies

define ("s ebel / qmcustomg rid Tenderer " , ["order ! 3rdParty/jqmobi le/

mobi scroll .custom-2.5.O.min" , "order ! 3rdParty/jqmobile/

query . swi peButton . mi n" , "order ! 3rdParty/jqmobi 1 e/

"order ! 3 rdParty/jqmobi le/jquery. mobi le. scrol 1 view" , "order! 3rdParty/ jquery . mobi 1 e . scrol 1 vi ew-ext" , "order ! si ebel / qmsearchct rl " , "order ! si ebel / jqmformrenderer" , "order! siebel/jqmscrollcontainer" , "order !siebel/ jqmgridrenderer"] ,

function () {

Si ebel AppFacade. JQMCustomGridRenderer = (functionO {

Siebel 3 S. Extend OQMCustomGri dRenderer , si ebel AppFacade . JQMGri dRenderer) ; HQMCustomGri dRenderer. prototype. SetDefaultMaxListColumns = functionO { this.m_defaultMaxListcolumns = 3;

};

4 Save your modifications.

5 Add the physical renderer that you modified in Step 3 to the manifest:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

a Log in to the Siebel application.

b Navigate to the Administration - Application screen, and then the Manifest Files list, c In the Files list, add the following file.

Value

Name siebel/jqmcustomgridrenderer.js d Do Step 2 on page 297, and also add the siebel/jqmcustomgridrenderer.js file to each platform that you add in Step e on page 298.

Customizing Mobile Lists

This topic describes how to configure Siebel Open UI to create a custom mobile list.

To customize mobile lists

1 Configure the manifest:

a Log in to the Siebel client with administrative privileges.

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

b Navigate to the Administration - Application screen, and then the Manifest Files view, c In the Files list, add the following file.

Field Value I

Name siebel/jqmcustomlistrenderer.js

Name siebel/jqgridrenderer.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„, , , 4 · Applet ^■■' · '- ' ^{' "}

Us ^* a¾¾ Type Physical Renderer

Name LS Pharma Account Calls List Applet - Mobile

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Lists, and Controls ^''

f In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on a mobile platform.

Field Value

j Expression Mobile

j Level ^' 1 ^'■ ■

In the Files list, add the following file:

si ebel /jqmcustoml st Tenderer . j s

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

j Expression Desktop

j Level V 2 ^{' :} i In the Files list, add the following file:

si ebel /jqg r d renderer . s

2 Configure the list renderer:

a Download the jqmlistrenderer.js file to the following folder:

1 ' anguage_code\fi 1 es\custom

To get a copy of this file, see Article ID 1494998.1 on My Oracle Support,

b Rename the file you downloaded in Step a to jqmcustomlistrenderer.js.

c Use a JavaScript editor to open the jqmcustomlistrenderer.js file.

30,0' Configuring Siebel Open UI Version 8.1/8.2, Rev. A SigBgHftgSile■ Customizing Layout, Views, Menus,

Lists, and Controls

Modify the following code that resides in the jqmcustomlistrenderer.js file. Bold font indicates the code that you must modify.

Replace This Old Code. .With This New Code

Si ebel App . S_App . egi sterconstruct def i ne("si ebel /jqmcustoml i strenderer" , orAgai nstKey (si ebel App . Constants . ["order ! 3rdParty/jqmobi le/

get("SWE_UIDEF_LIST_PRENDR") _> "Sie mobi scroll .custom-2.5.0.min",

bel AppFacade . JQMCustomLi stRendere "order! 3rdParty/jqmobile/

r"); query . swipeButton.min" , "order ! 3rdParty/ jqmobile/ jquery. easing.1.3",

"order 13rdParty/jqmobile/

jque ry . mobi 1 e . sc rol 1 vi ew" ,

"order !3rdparty/ jquer . mobi 1 e . scrol 1 vi ew- ext" , "order ! siebel/jqmsearchctrl " ,

"order ! si ebel /jqmformrenderer" ,

"order ! si ebel / jqmscrol 1 contai ner"] , function () {

Use the Define method to identify the physical renderer file. You must use the Define method to make Siebei Open UI can identify the constructor. You must include the relative path and the name of the presentation model file without the file name extension. For more information, see "Define Method" on page 506.

Locate the following code in the this. GetJQMListO .html("<ol id= ^,M + listld 3QMCustomListRenderer.prototype.Sho + " ^, ></ol>");

wUI method: -· ^' . ^' * ^?:,'!: ° ^'

thi s.GetDQMListQ .html ("<ul id=' "

+ listld + "'></ul>");

DQMLi stRenderer . prototype . GetLi st return $("#" +

Heightreturn $("#" + thi s.GetSc roll contai ner ()) . chi ldrenC'ol ") thi s . GetScrol 1 contai ner ()) . ch 1 dr height O;

en("ul").heightO;

Locate the second occurrence of the Delete the entire section.

following code:

for (index = 0; index <

Col Li st. length; index++)

Test your modifications:

a Log in to the ePharma application.

b Reset the Safari browser so that it uses mobile mode.

c Navigate to the Calls screen.

Configuring Siebei Open UI Version 8.1/8.2, Rev. A mm

d Make sure the Calls applet uses the new physical renderer when in mobile mode. This renderer displays calls in the following numbered list.

Modify the style:

a In Windows Explorer, navigate to the following folder:

Ο.ΐΕΝΤ_Η0Μέ\ΡΌΒΐτ£ 7anguage_code\fi 1 es

b Use an editor to open the theme-black. ess file.

c Locate the following code:

. ui-li -heading {

font-family: Helvetica, Neue;

font-size: 15pt; /15pt;/ /*100 ; */

font-weight: bold;

display: block;

margin: .5em 0 0 .4em;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

d Modify the code that you located in Step c. You modify the display from block to inline. See the following bolded code:

ui-Ή -heading {

font-fam ly: Helvetica, Neue;

font-size: 15pt; /15pt;/ /*100 ; */

font-weight: bold;

display: inline;

margin: .5em 0 0 .4em;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

Test your modifications:

a Restart the Safari browser.

b Navigate to the Calls screen.

c Make sure the Calls applet uses the following inline display.

Customizing Tiles

his topic describes how to customize tiles. It includes the following topics:

"Overview of Customizing Tile Applets" on page 304

"Customizing Tiles for List Applets" on page 306

"Customizing Tiles for Mobile Lists" on page 312

"Configuring Horizontal and Vertical Scrolling in Tile Applets" on page 314

"Adding Controls to Tile Applets" on page 317

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Lists, and Controls

Overview of Customizing Tile Applets

Figure 34 includes an example of an applet that Siebel Open UI displays as a set of tiles. A tile is a type of user interface object that Siebel Open UI uses to display a Siebel CRM record as a square or rectangle.

- Q ffl # m a m. ·

23

VARUM AJ

MS ^■ »

ϊί,·«22

frtlikiai.s

.ijstia yw>aa<-t«:

Figure 34. Example Tile Applet

This example includes the following items:

■ The Contact List applet and the Contact List View.

■ Usage of the cascading style sheet to indicate the chosen tile in blue. You can modify this cascading style sheet to customize color usage.

■ Usage of applet controls to display images. These controls determine the pick applet icon, MVG icon, email icon, and other icons that Siebel Open UI displays in the chosen tile. If the user clicks a different tile, then Siebel Open UI hides the icons in the current tile and displays them in the tile that the user clicks. You can modify the applet controls in Siebel Tools to customize how Siebel Open UI displays them. For more information, see "Adding Controls to Tile Applets" on page 317.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Customizing Layout, Views, Menus,

* Lists, and Controls

Applet Mode Configurations for Tiles

This topic describes two applet modes that Siebel Open UI can use to display a tile applet. You can modify the applet modes in "Customizing Tiles for List Applets" on page 306.

Figure 35 includes an example of an applet that Siebel Open UI displays in the Query applet mode. The user can query records in the applet, but cannot modify and field values.

Figure 35. Example Tile Applet in the Query Applet Mode

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 305

Lists, and Controls^,

Figure 36 includes an example of an applet that Siebel Open UI displays in the Edit applet mode. The user can query records in this applet and can also modify field values. Siebel Open UI displays the control field values in each tile as a label, by default. The user clicks the field value to edit it.

Figure 36. Example Tile Applet in Edit Mode

Customizing Tiles for List Applets

This topic describes how to customize tiles so that Siebel Open UI can display them in different applet modes. To view a tile applet that is similar to the applet that you configure in this topic, see "Overview of Customizing Tile Applets" on page 304. For information about custom tiles in a mobile environment, Customizing Tiles for Mobile Lists on page 312.

To customize tiles for list applets

1 Configure the SWT file so that Siebel Open UI can use it to render tiles:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for the applet that you must modify.

For example, query for Opportunity List Applet,

d In the Object Explorer, expand the Applet tree, and then click Applet Web Template.

Config u ring Siebel Open UI Version 8. 1/8.2, Rev. A

In the Applet Web Templates list, choose the record that Siebel Open UI uses to display the applet in the applet mode that your deployment requires.

For example, if you must display the applet in Base mode, then choose the record that includes Base in the Name property.

Make a note of the value that the Web Template property contains.

For example, the Web Template property contains the following value for Base mode:

Appl et Li st (Base/Ed tLi st)

In the Object Explorer, click Web Template.

Query the Name property for the value that you noted in Step f.

For example, query the Name property for the following value. If the value includes special characters, such as parentheses or a slash, then enclose the value in quotation marks:

"Appl et Li st (Base/Edi tLi st) "

In the Object Explorer, expand the Web Template tree, and then click Web Template File.

In the Web Template Files list, make a note of the value that the Filename property contains.

For example, the Filename property contains the following value for the Applet List (Base/ EditList) web template :

CCAppl etLi st_B_EL . swt

In Windows Explorer, navigate to the following folder:

si ebsrvr\webtempl \ouiwebtempl

Make a copy of the file that you noted in Step j, and then rename this copy.

For example:

CCAppl etLi st_B_EL_custom_ti 1 es . swt

Add each of the following tags to the copy that you created in Step I.

SWE Tag Description

swe:this property="NoGrid" Specifies that the current list layout is not a Grid layout. swe:this property="Horizontal" Specifies the scroll direction. For more information, see

"Configuring Horizontal and Vertical Scrolling in Tile Applets" on page 314.

For example code that includes these tags, see "Code That You Can Use to Customize Tiles for List Applets" on page 310.

Modify the swe:list tag so that it includes the HTML layout for each tile.

The swe: list tag includes the swe: list-record tag that specifies the layout for each tile. For example code that includes this HTML layout, see the contents of the swe:list tag in "Code That You Can Use to Customize Tiles for List Applets" on page 310.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Lists, and;;Gpnj-r|l ^,a

2 Create a new web template:

a In the Object Explorer, click Web Template.

b In the Web Templates list, add the following web template.

Property Value

i Name Applet Tile ^■

I Type Applet Template - List

In the Object Explorer, expand the Web Template tree.

In the Object Explorer, click Web Template File.

In the Web Template Files list, add the following web template file.

Property Value

! Name Applet Tile i

1 Filename Specify the file that you modified in Step 1. For this example, you ! i _, ' specify the following file: '

CCAppl etL st_B_EL_custom_ti 1 es . swt

! Bitmap AppletJJst ¹

3 Configure the applet so that Siebel Open UI can display it as a tile layout:

a In the Object Explorer, click Applet.

b In the Applets list, query the Name property for the applet that you must modify.

For example, query for Opportunity List Applet,

c In the Object Explorer, expand the Applet tree, and then click Applet Web Template, d In the Applet Web Templates list, add the following applet web template.

Property Value

Enter a name that describes the applet mode. For this example, Siebel Open UI must allow the user to edit values, so enter the following value:

Ψ

Edi t Li st

308 Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Property Value

i Type Choose the applet modes that Siebel Open UI must use to display

I the applet. For this example, choose the following value:

! Edi t Li st

For more information, see "Applet Mode Configurations for Tiles" on page 305.

Web Template Choose the following web template that you added in Step 2:

Appl et Ti l e Configure the manifest:

a Log in to the Siebel client with administrative privileges.

b Navigate to the Administration - Application screen, and then the Manifest Administration view.

For more information about the screens you use in this step, see "Configuring Manifests" on page 128.

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

Field Value

Type Applet

, Usage Type Physical Renderer

' Name Opportunity List Applet

In the Object Expression list, add the following expression. Siebel Open UI uses this expression to render the applet on the desktop.

Field Value I

Expression Desktop

Level 1 e In the Files list, add the following file:

si ebel /Ti 1 escrol 1 contai ner . s

Test your modifications.

a Log in to the client, and then navigate to the Opportunities List.

Configu ri ng Siebel Open UI Version 8. 1/8.2, Rev. A b Verify that the client displays a list that resembles the following layout.

Code That You Can Use to Customize Tiles for List Applets

Siebel Open UI comes predefined with the CCAppletList_Tile.swt file that resides in the following folder, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4:

siebsrvr\webtempl\ou webtempl

It includes an example tile format that you can customize to meet your deployment requirements. It includes the following code. Bold font indicates modifications that customize tiles:

<!— Template Start: CCAppletList_Tile.swt -->

<swe : i ncl ude f i 1 e="CCAppl et_NamedSpacer . swt"/>

<swe: control id="1100">

<div class="CmdTxt">

<s e:this property="FormattedHtml " h ntText="Outs de Applet Help Text" hi ntMapType="Control "/>

</d v>

</swe:control>

<swe:form>

<swe : i ncl ude f i 1 e="CCTi tl e_Named . swt"/>

<div class="swe:this.SelectStyle">

<swe : switch>

<swe:case condi tion="web Engine State Properties, lsMobileApplication ode"> <swe : ncl ude f 1 e="CCLi stButtonsTop_ ob 1 e . swt"/>

</swe : case>

<swe:default>

<swe : i ncl ude f 1 e="CCLi stButtonsTop . swt"/>

</swe:default>

</swe:sw tch>

<swe: error type="Popup">

<div class="swe: class AppletBack">

<div class="error">

<swe:th s property="FormattedHtml "/>

</di v>

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

tteoDDQsOoog SQoQxsO (¾xas QD2 Gtec? Si§b¾l Mobile Customizing Layout, Views, Menus,

Lists, and Controls

</di >

/swe:error>

div class="AppletHlListBorder siebui-tile-container">

<swe:this property="NoGrid"/>

<swe : thi s property="Hori zontal "/>

<swe : 1 i st>

<swe : 1 i st- record>

<div class="s ebui-tile-name">

<swe:for-each count="3" startvalue="500" teratorName="currentid">

<swe:control id="swe:currentld" hintMapType="Formltem">

<di v cl ass="si ebui -form-data" al gn="swe : thi s .TextAl i gnment">

<swe:this property="FormattedHtml" h ntText="Field"/> </div>

</swe: control >

</swe:for-each>

</di v>

<d v cl ass="si ebui - ti 1 e-detai 1 s- rowl">

<ul>

<swe:for-each count="4" startValue="510" iteratorName="currentId"> <li>

<swe:control d="swe:currentld" h ntMapType="Formltem">

<di v cl ass="si ebui -form-data" al i gn="swe : thi s .TextAl gnment">

<swe:this property="FormattedHtml " h ntText="Field"/>

</di v>

</swe: control >

</li>

</swe:for-each>

</ul>

</di v>

<di v cl ass="si ebui -til e-i mage">

<swe:for-each count="2" startvalue="520" iteratorName="currentId">

<swe:control id="swe:currentld" hintMapType="Formitem">

<di v cl ass="si ebui -form-data" al i gn="swe : thi s .TextAl i gnment"> <swe:this property="FormattedHtml" h ntText="Field"/>

</div>

</swe: control >

</swe : f or-each>

</div>

<di v cl ass="s ebui -ti 1 e-cl ear"/>

<di v cl ass="si ebui -ti 1 e-detai 1 s-row2">

<ul>

<swe:for-each count="4" startvalue="530" teratorName="currentid"> <li>

<swe: control id="swe:currentld" hint apType="Formltem">

<di v cl ass="si ebui -form-data" al i gn="swe : thi s .TextAl i gnment" <swe:this property="FormattedHtml" hintText="Field"/> </di v>

</swe: control >

</li>

</swe:for-each>

</ul>

</di v>

</div>

</swe : 1 i st- record>

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Lists, a nd Controls \ ^{■' ■} · -, ;

</swe : 1 i st>

</di v>

</di v>

</swe : form>

< ! -- Templ ate End : CCAppl etLi st_Ti l e . swt -->

Customizing Tiles for Mobile Lists

This topic describes how to customize tiles that the mobile tile renderer displays. A mobile tile is a type of user interface object that Siebel Open UI uses to display a Siebel CRM record as a small square or rectangle.

To customize tiles for mobile lists

1 Verify that your deployment includes the Applet Tile Mobile web template :

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Web Template.

c In the Web Templates list, query the Name property for Applet Tile Mobile, and then verify that Siebel Tools includes an object definition for this web template.

d In the Object Explorer, expand the Web Template tree, and then click Web Template File. e Verify that the Filename property references the CCAppletList_MobileTile.swt file.

If your deployment does not include this web template, then add it now. Note that Siebel Open UI includes the predefined CCAppletList_MobileTile.swt file in the

s ebel \webtempl \oui webtempl folder, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4.

2 Modify the web template that the applet references :

a In the Object Explorer, click Applet.

b In the Applets list, query the Name property for the applet that you must modify.

For this example, query for the following predefined applet:

CG Contact L st Appl et Mobi l e

c In the Object Explorer, expand the Applet tree, and then click Applet Web Template.

d In the Applet Web Templates list, modify the following property of the Edit List applet web template.

Property Value

Web Template Applet Tile Mode e Right-click in the Applet Web Templates list, choose Edit Web Layout, and then use the Web Layout Editor to arrange columns, add columns, remove columns, and make other layout modifications, as necessary-

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Compile your modifications.

Configure the manifest:

a Log in to the Siebel application with administrator privileges.

b Navigate to the Administration - Application screen, and then the Manifest Files list.

For more information about the screens you use in this step, see "Configuring Manifests" on page 128.

c In the Files list, add the following file.

Value

Name siebel/TileLayoutMobilePR.js d Navigate to the Administration - Application screen, and then the Manifest Administration list, e In the UI Objects list, add the following UI applet.

Field Value

Type Applet

Usage Type Physical Renderer

Name CG Contact List Applet Mobile

In the Object Expression list, add the following expression.

Field Value

^: Expression Mobile

Level 1

In the Files list, add the following file.

Field Value

Name Siebel/TileLayoutMobilePR.js

Siebel Open UI uses the TlleLayoutMobilePR.js file to render applet tiles, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4. It resides in the following folder:

Si ebel \eapps\publ i c\enubui 7cLnumber scr- pts\si ebel \ Test your modifications:

a Clear the cache, and then navigate to the applet that you specified in Step e on page 313.

b Make sure Siebel Open UI displays an applet that is similar to the following, with the tiles organized on the left side of the applet and the form on the right.

Configuring Horizontal and Vertical Scrolling in Tile Applets

You can configure tiles so that the user can scroll them horizontally or vertically. The configuration you do to configure scrolling in tile applets is the same configuration that you do to configure infinite scrolling. For more information, see "Configuring Infinite Scrolling" on page 340.

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

To configure horizontal and vertical scrolling in tile applets

■ Add the following tags to the web template file that Siebel Open UI uses to display the tile applet.

You can configure these tags when you edit the web template file in Step 1 on page 306.

SWE Tag Description

swe:this property="No ^' Grid". . Specifies that the current list layout is not a Grid layout. swe:this property ="Horizontal" Specifies the scroll direction. You use the following format:

<swe : thi s property=" direction" />

where:

■ direction is Horizontal or Vertical.

Horizontal Scroll and Vertical Scroll Layouts

Figure 37 includes an example of a horizontal scroll configured in a tile applet. The user can click the left or right arrow to scroll through the records.

Figure 37. Example Horizontal Scroll in Tile Applet

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Lists, and Controls - - ^"*

Figure 38 includes an example of a vertical scroll configured in a tile applet. The user can click the up or down arrow to scroll through the records.

Figure 38. Example Vertical Scroll in Tile Applet

Smooth Scrolling

Smooth Scrolling is a feature that allows the user to hold down the mouse button on the scroll arrow to scroll the container according to the number of pixels that the scroll speed specifies. Siebel Open UI continues scrolling as long as the user holds down the mouse button . It stops scrolling when the user releases the mouse button . Siebel Open UI uses Smooth Scrolling, by default.

To set the scroll speed for all tile applets, the user can navigate to the Application screen, Tools, User Preferences, and then set the Default Scroll Speed field in the Behavior form . To set the scroll speed for a single tile applet, the user can use the slide control that each tile applet displays in the lower- right corner of the applet. For more information about how the user sets the scroll speed, see Siebel Fundamentals.

Scrolling By Visible Tiles

Scrolling By Visible Tiles is a feature that allows the user to click the mouse on the scroll arrow to start scrolling rather than holding down the mouse button on the scroll arrow. For each mouse click, Siebel Open UI scrolls the number of records according to the number of tiles that it displays in the tiles container rather than according to pixels.

For example, assume the record set includes 10 tiles and tile one through tile five of this record set are visible in the tile container. The width of the container determines the number of records that are visible. If the user clicks the right pointing scroll arrow, then Siebel Open UI scrolls the tiles container to display tiles six through ten .

Config uring Siebel Open U I Version 8. 1/8.2, Rev. A

Adding Controls to Tile Applets

Figure 37 illustrates how you can use a method to control the behavior of a button that Siebel Open UI displays in a tile applet. This example includes an Add Item button in a Product catalog that allows the user to add an item to the shopping cart. Each tile represents one product. Siebel Open UI uses the cascading style sheet to display the state of the Add Item button as enabled in the active tile and to display it as not chosen in other tiles. The CSS controls how Siebel Open UI represents these states. To add a control, you use Siebel Tools to add it to the applet, and then create a placeholder for it in the SWT file. For more information about adding controls to applets, see Configuring Siebel Business Applications.

Figure 39. Example of Adding Controls to Tile Applets

Adding Toggle Controls

This topic describes how to add a toggle control that allows the user to toggle between displaying or hiding content in landscape or portrait layout.

To add toggle controls

1 Identify the .swt file that you must modify, and then open it for editing.

For a similar example that identifies and modifies a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

Lists, and ^Controls**

2 Add a div element to the Web template file that you identified in Step 1.

For more information, see "Attributes That You Can Use with the Div Element for a Toggle Control" on page 318.

For example, the following code sets the display options for the back button that the jqmToggleCtrl control renders. It slides the element out of the viewport toward the right when the toggle displays the control, and it slides the element out of the viewport toward the left when the toggle hides the control:

<div name=" jqmToggleCtrl" id=" jqmToggleCtrl " ctrltype="button"

ctrllabel="lDS_SWE_MOBlLE_BACK" effect="sl de" showoptions="{ ' di rection' :

'right'}" hi deoptions="{' direction' : 'left'}" style="d splay: none ;"></div>

For another example, the following code sets the display options for the back button that the jqmToggleCtrl control renders. It displays the element at 100% opacity when the toggle displays the control, and it displays the element at 0% opacity when the toggle hides the control:

<div name="jqmToggleCtrl" d=" jqmToggleCtrl " ctrltype="button"

ctrllabel="lDS_SWE_ OBlLE_BACK" effect="size" showopt ons="{' percent ' : '100'}" hideoptions="{'percent' : '0'}" styl e="di splay: none ; "></div>

Attributes That You Can Use with the Div Element for a Toggle Control

Table 21 describes the attributes that you can use with the div element that determines how to display a toggle control.

Table 21. Attributes That You Can Use with the Div Element for a Toggle Control

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Layout, Views, Menus,

ST/V. Lists, and Controls

Table 21. Attributes That You Can Use with the Div Element for a Toggle Control

Attribute Description

effect I Sets the animation effect that Siebel Open UI uses when the user clicks the toggle control. If you do not specify a value for this attribute, then Siebel Open UI uses no affect. You can use one of the following values:

blind

clip

drop

explode

fold

puff

slide

scale

size

pulsate

For more information, see the page about user interface effects at the jQuery Web site at http://docs.jquery.com/UI/Effects/.

showoptions Sets the display options for the effect. If you do not include showoptions, then

Siebel Open UI sends empty options to the show method and uses the default that jQuery uses.

You can use a pair of single quotation marks to enclose the value instead of the double quotation marks that JSON syntax requires. Siebel Open UI replaces these single quotation marks with double quotation marks so that showoptions complies with JSON. For more information, see the JSON Web site at http://www.json.org. For more information, see "Example Show and Hide Options" on page 319.

hideoptions Behavior is the same as the behavior for the showoptions attribute, except

hideoptions sets the hide options for the effect.

Example Show and Hide Options

The following code includes examples of the showoptions and hideoptions attributes:

effect="clip" showoptions="{ 'di rection' : 'horizontal'} hideoptions="{ ' d rection ' : ^• vertical'}"

effect="slide" showoptions="{'di rection' : 'left'} hideoptions="{ 'd rection ' : 'right'}" effect="scale" showoptions="{ 'percent' : 100} hideoptions="{ ' percent ' : 0}"

effect="size" showoptions="{ ' to' : {'width': 280, 'height': 185}}"

hideoptions="{'to' : {'width': 280, 'height': 185}}"

Configuring Siebel Open UI to Toggle Row Visibility

This describes how to configure Siebel Open UI to toggle between displaying or hiding a row each time the user clicks this row.

To configure Siebel Open UI to toggle row visibility

1 Identify the .swt file that you must modify, and then open it for editing.

For example, CCAppletList_B_ELswt. For a similar example that identifies and modifies a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

2 Add the following div element to the Web template file that you identified in Step 1 :

div enabl etogg1 e="true"

For example:

swe : s i tch>

<swe : case cond ti on="Web Engi ne State Properti es , lsMobi l eAppl i cati onMode">

<di v enabl etoggl e="true"x/di v>

</s e : case>

</swe : swi tch>

You add this code to a different div element depending on whether or not you modify the web template that one of the following items use:

■ Applet. Add the code to the root div element of the list applet.

■ View. Add the code to the div element that is the parent of the root div element that the list applet uses.

If the user clicks a row, then Siebel Open UI calls the ToggleMobileLayout binder method only if it finds the child node that contains div enabletoggle="true".

You can use the AttachPMBinding method to bind the ToggleMobileLayout method to an existing method. For more information, see "AttachPMBinding Method" on page 428.

Siebel Open UI can bind the ToggleMobileLayout method to the HandleRowSelect method. The HandleRowSelect method detects row clicks on a list applet. The enabletoggle element enables this capability. For more information, see "HandleRowSelect Method" on page 455.

Adding the Show More Button to Your Custom Form Applets

This topic describes how to configure Siebel Open UI to add the Show More Button to your custom form applets. This button allows the user to view controls that the applet contains, but that Siebel Open UI does not come predefined to display in the visible area of the screen.

To add the Show More Button to your custom form applets

1 Modify the Web template file:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b Choose the View menu, Windows, and then click Web Templates Window.

c Scroll down in the Web Templates window, and then click the following file:

CCVi e Detai l_Mobi 1 e_Rel atedltems

You modify a .swt file to add the Show More button. For this example, you modify the CCViewDetail_Mobile_ elatedItems.swt file that controls the contact form. For an example that includes details about how to identify and modify a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

Note that Siebel Open UI comes predefined to enable the Show More button for these .swt files. It uses these .swt files for all mobile form applets.

d Right-click the window that displays the HTML code, and then choose Edit Template.

e Locate the div element that Siebel Open UI uses to display the Show More button for the form applet container.

In this example, you modify the div element that contains the following code:

swe : appl et hi ntMapType="Appl et"

f Add the following code to the div element that you located in Step e:

<d i d="_FormParentRel atedltems"

cl ass="S ebel Detai 1 ParentContai ne rRel atedltems s ebui - NoScrol l FormContai ner">

<swe : appl et hi ntMapType="Appl et" i d="l" hi ntText="Parent Form Appl et" property="FormattedHtml " var="Parentwi thPoi nter"/>

</div>

The siebui-NoScroll FormContainer class that resides in the .swt file controls the Show More feature. This class determines whether or not to display the Show More icon every time the user changes the orientation or resizes the window on the mobile device.

Test your modifications:

a Use a mobile device to log in to the client, and then navigate to the Contact form.

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A 321 Customizing Siebel

Styles, and Colors

b Verify that Siebel Open UI displays the Show More icon.

For example, Siebel Open UI displays the Show More icon to the right of the Comments field in the following image, as indicated by the red box.

c Click the Show More icon.

d Verify that Siebel Open UI expands the applet container, displays more fields, and displays the Show Less icon.

Note that if all controls that the form applet contains fit into the visible area of the screen, then Siebel Open UI does not display the Show More icon.

e Click the Show Less icon.

f Verify that Siebel Open UI contracts the applet container, displays fewer fields, and displays the Show More icon.

Customizing Transitions, Themes,

Styles, and Colors

This topic describes how to configure transitions, themes, styles, and colors. It includes the following information :

■ Customizing Transitions That Siebel Open UI Displays When It Changes Views on page 323

■ Customizing Themes That Siebel Open UI Displays in Siebel Mobile Clients on page 325

■ Customizing List Applet Styles on page 327

■ Customizing jQuery Color Swatches That Siebel Open UI Displays in Siebel Mobile Clients on page 329

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

KgSgjmzi _, ng Transitions, Themes,

" *J _f Styles, and Colors

Customizing Transitions That Siebel Open UI Displays When It Changes Views

The example in this topic describes how to add a custom CSS3 transition. A CSS3 transition is a visual effect that Siebel Open UI uses anytime it displays a view or refreshes a view after the user clicks New, Edit, Save, or Cancel in Siebel Mobile. Slide Left is an example of a transition. Siebel Open UI comes predefined with the Slide Left transition enabled. It automatically constrains the transition field depending on whether the user is using a desktop computer, tablet, or phone. The transition LOV field displays Slide Left and None for tablets and phones. If the user sets a transition on one platform, such as a tablet, and then uses another platform, such as a phone, then Siebel Open UI resets the transition to empty.

To customize transitions that Siebel Open UI displays when it changes views

1 Create a custom CSS file.

2 Use the following classes to add the transition to the file you created in Step 1:

. si ebui -prev- Trans itionEffect-begi n

. si ebui -prev- TransitionEffect-end

. si ebui -next- Transi ti onEffect-begi n

. si ebu -next- TransitionEffect-end

where:

■ TransitionEffect identifies the transition effect name. For example, the following code

specifies the slide-in transition effect:

.siebui-prev-slidein-begin {

position : absolute;

width : 100% ! important ;

top : 0;

z-index : 999;

-webkit-transition : top Is ease-in-out;

-moz-transition : top Is ease-in-out;

-o-transition : top Is ease-in-out;

transition : top Is ease-in-out;

}

.siebui-prev-slidein-end {

top : 2000px ! important;

}

.siebui-next-slidein-begin {

margin-top : -2000px;

height : 0 ! important;

-webkit-transition : margin-top Is ease-in-out;

-moz-transition : margin-top Is ease-in-out;

-o-transition : margin-top Is ease-in-out;

transition : margin-top Is ease-in-out;

}

.siebui-next-slidein-end {

margin-top : 0;

height : 100% ! important;

}

Configuring Siebel Open UI Version 8.1/8.2,

Add the transition effect to the PAGE_TRANSITION list of values:

a Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.

For more information, see Using Siebel Tools.

b Click the Screens application-level menu, click System Administration, and then click List of Values.

c Right-click in the List of Values list, click New Record, and then add the following value to the PAGE TRANSITION list of values for tablets.

Property Value

Type PAGE_TRANSITION

Display Value Slide In

Language-Independent Code SLIDEIN

Parent LIC Tablet d Right-click in the List of Values list, click New Record, and then add the following value to the PAGE_TRANSITION list of values for phones.

Property Value

Type PAGE_TRANSITION

Display Value Slide In

Language-Independent Code SLIDEIN

Parent LIC Phone e Compile your modifications.

Test your modifications:

a Log in to the client,

b Navigate to the Setting screen.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

c Verify that Siebel Open UI displays the transitions you specified in Step 2 in the Transition field.

For example, verify that Siebel Mobile displays the Slide In transition. en ώ © >

Befeaviar ^' ίί»¾5ΦΟ«> ©

d Choose a value in the Transition field.

If you do not choose a transition or if you choose None, then Siebel Open UI does not use a transition.

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

f Navigate between views, and verify that Siebel Open UI uses the transition you chose in Step d.

Customizing Themes That Siebel Open UI Displays in Siebel Mobile Clients

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. You can add a custom theme. The example in this topic describes how to add a custom theme named Mobile Theme Gold that Siebel Open UI displays on a tablet.

To customize themes that Siebel Open UI displays in Siebel Mobile clients

1 Create a new style sheet named theme-gold. ess. Save this new file in the following folder:

You can use any .ess file that includes your custom theme. For this example, use theme-gold. ess.

2 Use a JavaScript editor to open the tablettheme.js file that resides in the following folder:

If you must add a theme to a phone, then open the mobiletheme.js file instead of the tablettheme.js file.

3 Add the following custom theme to the file that you opened in Step 2:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 325 Customizing Siebel Open UI7fd¾f6¾

Styles, and Colors \ -/'f¾l

/* Addi ng a new custom theme */

si ebel App . Theme anage r . addTheme (

" theme_name" ,

where:

■ theme_name identifies the name of your custom theme.

■ your_custom_file is a .ess file that includes your custom color theme.

For this example, use the following code:

/* Addi ng a new custom theme */

s ebel App . ThemeManage r . addTheme (

"MOBILE_THEME_GOLD" ,

{

CSS : {

"css_i d" : "fi l es/custom/theme-gol d . ess"

}

}

) ;

4 Add the new theme to the OUI_THEME_SELECTION list of values:

a Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.

For more information, see Using Siebel Tools.

b Click the Screens application-level menu, click System Administration, and then click List of Values.

c Right-click in the List of Values list, and then click New Record.

d Add the following value to the OUI_THEME_SELECTION list of values.

Property Value

Type OUI_THEME_SELECTION

Display Value Mobile Theme Gold

Language-Independent Code MOBILE_THEME_GOLD

The value that you specify must match the theme name that you defined in Step 3 in the tablettheme.js file. In this example, this name is MOBILE_THEME_GOLD.

Parent LIC NAVIGATION_BUTTON_TABLET

If you are configuring for a phone, then use

NAVIGATION_BUTTON_PHONE instead of

NAVIGATION_BUTTON_TABLET.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

5 Test your modifications:

a Use a tablet to log in to the Siebel Mobile client.

b Click User Preferences, click Behavior, and then click Edit.

c Verify that the Theme field includes the following Mobile Theme Gold value:

d Click Mobile Theme Gold, and then click Save.

e Log out of the Siebel Mobile client, and then log back in to this client.

f Verify that the Siebel Mobile client displays a theme that is similar to the following :

User Preferences 3 O

Startup View

Theme Mobile Theme Gold

Confirm Before Deleting Record

Customizing List Applet Styles

This topic describes how to customize the style that Siebel Open UI uses for each control that it displays in a list applet.

To customize list applet styles

1 Modify the applet:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 327

Styles, and Colors

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for the list applet that you must modify,

d In the Object Explorer, expand the Applet tree, expand the List tree, and then click List Column, e In the List Columns list, query the Name property for the list column that you must modify, f Specify the following property.

Property Description

ί HTML Attribute Enter the name of a class. For example, enter the following value:

Cl ass = "account-l ocati on"

I You can enter any value that is unique within the HTML code that Siebel

Open UI uses to render this list column. The value must be unique so ' that the client can correctly identify this attribute.

The HTML Attribute object type adds an HTML tag attribute to an HTML tag that the client creates when it displays the list column. In this example, the client creates an HTML tag attribute named account-location.

g Compile your modifications.

2 Specify the styling, and then test your modifications:

a Use a CSS editor to open the CSS file that Siebel Open UI uses to render the list applet.

For example, open the theme-mb-structure-ext.css file.

b Specify the styling.

In this example, you add the following code to specify the color, font, justification, and so on, for the account-location class that you specified in Step f:

. account-l ocati on{

col or :Ol ive ;

f ont-styl e : tal c ;

fl oat : ri ght ;

wi dth : 45%;

text-al i gn : ri ght ;

margi n : -2 .2em 0 ;

col or : Fuchsi a ;

font-wei ght : bol d ;

}

c Save, and then close the CSS file.

d Refresh your browser, and then make sure Siebel Open UI displays the styles that you specified.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customizing jQuery Color Swatches That Siebel Open UI Displays in Siebel Mobile Clients

This topic describes how to use ThemeRoller to customize the color swatch that Siebel Open UI displays in Siebel Mobile clients. A color swatch is a jQuery Mobile user interface element that includes a header bar, content body, and button states. ThemeRoller is a jQuery Mobile tool that allows you to create color swatches.

Siebel Open UI uses the following items to define the style in a Siebel Mobile client:

■ Structure. Defines web page layout.

■ Swatches. Defines the color swatches in ThemeRoller format.

■ Style. Provides style refinement capabilities.

Siebel Open UI uses the following file to define the structure of the JQM style, starting with Siebel CRM versions 8.1.1.11 and 8.2.2.4 :

j query . mobi l e . structu re- 1. 3 .0. m n . ess

Siebel Open UI does not include the default JQM swatches. Instead, it uses the default Siebel Mobile swatches that the theme-mb-swatches. min .css file contains. These files replace the jquery.mobile- l . l . l .min.css file that Siebel Open UI uses in versions before Siebel CRM versions 8.1.1.11 and 8.2.2.4.

To customize color schemes that Siebel Open UI displays in Web pages

1 Open version 1.3.0 of the following jQuery Mobile ThemeRoller website :

http ://jquerymobile.com/themeroller/?ver= 1.3.0

Configuri ng Siebel Open UI Version 8. 1/8.2, Rev. A ! 329 Customizing Siebel Open UI for Siebel Mobile□ Customizing Transitions, Themes, Styles, and Colors

2 Create six swatches lettered A through F, each of which uses a different color scheme.

For example:

For an alternative to creating these swatches, see "Importing Predefined Siebel Open UI Swatches to ThemeRoller" on page 332.

3 Click Download.

4 In the Download Theme dialog box, enter in a name in the Theme Name field, and then click Download Zip.

You can specify a name for the theme, such as my-swatches. Note that this name is different than the name of the zip file that you download. jQuery Mobile ThemeRoller automatically creates the name of the zip file and adds the following prefix to it:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

jquery-mob 1 e-theme- Unzip the file that you downloaded in Step 4.

Open the following folder of the file that you unzipped in Step 5:

themes

Note the following items that reside in the themes folder:

■ images subfolder

■ my-swatches.css file

■ my-swatches.min.css file

Copy the CSS files that you noted in Step 7 to the folder that Siebel Open UI uses for cascading style sheets.

For example, copy these items to the following folder that resides in the Mobile Web Client client:

CLlENr_HOM£ PUBLl \ 1 anguage_code\f i 1 es

For more information about the folders that you can use to store your customizations, see "Organizing Files That You Customize" on page 122.

Copy the images that reside in the images folder to the image folder that your Siebel installation uses.

For example, the Mobile Web Client uses the following folder:

CLIENT_H0M£\PU L1C\ Ί anguage_code\i mages

Use an editor to open the my-swatches.min.css file.

Replace each occurrence of i mages with the following :

. . i mages

Replace the theme-mb-swatches.min.css file with the my-swatches.min.css file:

a Open the folder that Siebel Open UI uses for cascading style sheets, and then make a backup copy of the theme-mb-swatches.min.css file.

b Rename the my-swatches.min.css file that you copied in Step 6 to theme-mb-swatches.min.css.

If you prefer not to replace the theme-mb-swatches.min.css file, then do the following work:

■ Navigate to the following folder, and then use a JavaScript editor to open the mobiletheme.js file:

ORACLE_HOM£\si ebs rvr\WEBMASTER\si ebel _bui 1 d\sc ri pts\si ebel \custom

■ Add the following code:

si ebel App . ThemeManager . addResource (

"SBL-MOBILE" ,

{

ess : {

"ss-theme" : "fi l es/my-swatches . mi n . css

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 331 Customizing Siebel Ogl¾||p IBBBBUa hlir,a1in iit.i m!s¾iiin¾;iiBi:e5fl Styles, and Colors .,, .

}

}

) ;

13 Log in to the Siebel Open UI client, and then clear the browser cache.

14 Make sure Siebel Open UI displays the new color schemes.

Importing Predefined Siebel Open UI Swatches to ThemeRoller

This topic describes how to import the predefined swatches that Siebel Open UI uses to use ThemeRoller instead of creating them from scratch in Step 2 on page 330.

To import predefined Siebel Open UI swatches to ThemeRoller

1 Use an editor to open the theme-mb-swatches.css file, and then copy the contents of this file to the clipboard.

The theme-mb-swatches.css file is the compressed version of the theme-mb-swatches.min.css file. It resides in the following folder:

2 Use a web browser to navigate to the following website:

http://jquerymobile.com/themeroller/?ver= 1.3.0

3 Click Import.

4 Paste the contents of the clipboard into the window in the Import Theme dialog box.

5 Click Import.

6 Modify the results, as necessary.

Swatches That Siebel Open UI Displays in Siebel Mobile Clients

Table 22 describes the swatches that Siebel Open UI displays in Siebel Mobile clients.

Table 22. Swatches That Siebel Open UI Displays in Siebel Mobile Clients

Swatch Description

Swatch A Defines the application-level navigation bar.

! Swatch B Defines items that Siebel Open UI displays in a list.

; Swatch C Defines objects in list applets that some other swatch does not already define.

Swatch D Defines the applet that Siebel Open UI displays in a grid.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A ¾gstomizing Transitions, Themes,

Styles, and Colors

Table 22. Swatches That Siebel Open UI Displays in Siebel Mobile Clients

Swatch Description

Swatch E Defines the form applet that Siebel Open UI displays when the user navigates to the third level tab.

Swatch F Defines the form applet that Siebel Open UI displays when the user navigates to the second level tab.

Swatches That Siebel Open UI Displays in List Applets

Figure 40 includes an example of the swatches that Siebel Open UI displays in the Accounts list.

Figure 40. Swatches That Siebel Open UI Displays in List Applets

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 333 Customizing Siebel

Styles, and Colors

Swatches That Siebel Open UI Displays in Form Applets

Figure 41 includes an example of the swatches that Siebel Open UI displays in the Account form.

Figure 41. Swatches That Siebel Open UI Displays in Form Applets

334 Configuring Siebel Open UI Version 8.1/8.2, Rev. A ⁽ 3ooe( mfeta£) §0Θ(¾Θ0 QDS (fc ? Transitions, Themes,

:i Styles, and Colors

Swatch That Siebel Open UI Displays in Grids

Figure 42 includes an example of the swatch that Siebel Open UI displays in a grid.

Figure 42. Swatch That Siebel Open UI Displays in Grids

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 335 Customizing Siebel Opemi UI for Siebel Mobile Customizing Scrolling and Swipe

Swatch That Siebel Open UI Displays in Pop-Up Objects

Figure 43 includes an example of the swatch that Siebel Open UI displays in a pop-up object.

V. ACiO-jnl ReiJu-!i Dcfiitariii!l CilaM JtouiJ

Pick Product

Rw) ^afesa @ J tofts *<tt

@3EGS33 (^-scas.® (¾ΕΕΕΞΕ>

Figure 43. Swatch That Siebel Open UI Displays in Pop-Up Objects

3 gcro§™§ mm

This topic describes how to configure scrolling and swipe. It includes the following information :

□ Configuring Generic Scrolling in Siebel Mobile on page 337

□ Configuring Swipe Scrolling on page 339

□ Configuring Infinite Scrolling on page 340

□ Configuring the Height of the Scroll Area on page 341

□ Configuring Swipe to Delete on page 342

For information about configuring scrolling in a tile applet, see "Configuring Horizontal and Vertical Scrolling in Tile Applets" on page 314.

336 Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Configuring Generic Scrolling in Siebei Mobile

Siebel Open UI uses the following physical renderers to render a list applet in Siebei Mobile:

■ jqmlistrenderer

■ jqmgridrenderer

Siebei Open UI uses the jqmscrollcontainer predefined class for each of these renderers or for any other renderer that renders scrolling in a list applet.

The jqmscrollcontainer supports pagination only in the Y direction . It does not support pagination in the X direction. It supports only one scroll container for one physical renderer for each list applet. A scroll container is an object that contains an HTML div element. Siebei Open UI makes any HTML markup that this div element contains scrollable.

To configure generic scroll in Siebei Mobile

1 Identify the method you must use to configure generic scrolling.

For more information, see "Methods You Can Use to Configure Generic Scrolling" on page 338.

2 Edit the method that you identified in Step 1.

Configuring Siebei Open UI Version 8. 1/8.2, Rev. A

Customizing Siebel Op¾W

Methods You Can Use to Configure Generic Scrolling

Table 23 describes the methods that you can use with the jqmscrollcontainer class to configure generic scrolling. You can configure the physical Tenderers that use this class to directly reference these methods.

Table 23. Methods You Can Use to Configure Generic Scrolling

Method Description

EnableListScrolling You use the following syntax:

Enabl eL stScrol l ng =

functi onCco/7ta 7/7er_JZ7, list, x_di recti on, y_di recti on) where:

1 ■ container_ID identifies the ID of the scroll container. This container is the parent container where this method creates a child div. Siebel

I _ Open UI makes any HTML markup that this child div contains scrollable.

i ■ list contains one of the following values:

■ true. The physical Tenderer uses the jqmlistrenderer to

Tenderer the data in a list.

■ false.

■ X_direction contains one of the following values:

■ true. Siebel Open UI scrolls in the X direction.

■ false.

■ Y_direction contains one of the following values:

■ true; Siebel Open UI scrolls in the Y direction.

■ false.

MakecontainerScrollable You use the following syntax:

Makecontai nerScrol l abl e =

functi on(co/7t«3777e _iX>, list, x_di recti on, y_di recti on) where:

■ container_io identifies the ID of the scroll container. This method creates this div and uses it as the scroll container.

The MakecontainerScrollable method uses all other arguments in the same way that the EnableListScrolling method uses them.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

and Swipe

Table 23. Methods You Can Use to Configure Generic Scrolling

Method Description |

: SetScrollcontainer You use the following syntax:

SetScrol l contai ner = functi on(Scrol l vi ewcontai ner)

Scrollviewcontainer: is same as above.

If you configure Siebel Open UI to call this method, then you must make sure this method sends this argument as a null value. Siebel Open UI sets this method to the scroll container in the predefined class.

GetScrollcontainer You use the following syntax:

GetScrol l contai ner = functi onO

This method gets the div Id of the scroll container that Siebel Open UI sets in the predefined class.

Configuring Swipe Scrolling

The desktop Siebel Open UI client uses next and previous buttons to allow the user to scroll through a record set. Siebel Mobile uses automatic pagination on swipe scrolling instead of next and previous. For example, if a page can display 10 records, then it might display fewer records to meet display requirements, and allow the user to can scroll up or down to view more records. If the user encounters the 10th record and keeps scrolling, then Siebel Open UI sends a request to the Siebel Server for more records, displays these new records in the client removes the old records. To configure this behavior, you can edit the following files:

■ jquery.easing. l .3.js

■ jquery.mobile.scrollview.js

■ jquery.mobile.scrollview.css

If the user stops the scroll in the up direction or in the down direction, then Siebel Open UI starts the Touchend event. If the user scrolled out of the current page, then it sends a request to the Siebel Server for the next or for the prior set of records.

w t*t&>*i

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

ifPS

Configuring Infinite Scrolling

You can customize how Siebel Open UI displays infinite scrolling, which is a feature that allows the user to scroll through records in a list applet indefinitely. Siebel Open UI continues to scroll records as long as the user clicks the key that controls scrolling.

To configure infinite scrolling

1 Set the following parameter in the InfraUIFramework section of the application configuration file :

Scrol l AmountS ze = integer

You can set the ScrollAmountSize parameter to an integer value. The default value is 5. For more information, see "Modifying the Application Configuration File" on page 105.

2 Save your modifications, and then close the application configuration file.

3 Log in to the Siebel Server, and then enter the following Server Manager command :

change param Scrol l AmountSi ze= ^a 7i/e for comp app JicarionObjMg r_enu

where :

■ value is an integer

■ application identifies a Siebel application

For example:

change param Scrol l AmountSi ze=50 for comp ePharmamOb Mgr_enu

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A Swipe

4 Set the following object manager parameters for the object manager that your Siebel application uses.

Parameter Description

NumberOfListRows Specify the number of rows that the Siebel application displays in

To make sure Siebel Open UI scrolls smoothly, it is recommended that you set NumberOfListRows to a value that is three times greater than the value you set for ScrollAmountSize.

For example:

NumberOfListRows = 21

ScrollAmountSize = 7

For another example:

NumberOfListRows = 30

ScrollAmountSize = 10

For more information about setting object manager parameters, see Siebel System

Administration Guide.

Configuring the Height of the Scroll Area

Siebel Open UI sets the height of the scroll area that it displays in a list applet to the height of the view area of the device, by default. You can configure this height.

To configure the height of the scroll area

1 Identify the .swt file that the list applet that you must modify references, and then open this .swt file for editing.

For a similar example that identifies and modifies a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

2 Add the ListAppletContainer class to the container div.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customizing

Configuring Swipe to Delete

You can configure Siebel Open UI so that if the user swipes a record in a list applet from left to right, then it displays a Delete button that allows the user to confirm the deletion . The user can click Delete to delete the record, or step off the record or tap it to cancel the deletion . Swipe to Delete comes enabled with Siebel Open UI, by default.

To configure Swipe to Delete

1 Identify the list applet that you must modify :

a Log in to the client.

b Navigate to the list applet where you must configure Swipe to Delete.

For example, navigate to the Accounts list,

c Click the application-level Help menu, and then click About View,

d In the About View dialog box, notice the name of the list applet.

For example, CG Account List Applet,

e Click OK.

2 Modify the DeleteRecord control :

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for the list applet you noticed in Step 1.

d In the Object Explorer, expand the Applet tree, and then click Control.

e In the Controls list, query the Name property for DeleteRecord, and then modify the following property.

Property Value

Method Invoked DeleteRecord

If the DeleteRecord control does not exist, then add it now. Note that Swipe to Delete only displays the Delete button if the user swipes from left to right on a record. It does not display a permanent Delete button. For more information, see "DeleteRecord Method" on page 395. f Compile your modifications.

3 Test your modifications:

a Log in to the client, and then navigate to the applet you noticed in Step 1.

b Swipe a record from left to right.

c Make sure Siebel Open UI displays the Delete button.

Configu ri ng Siebel Open UI Version 8. 1/8.2, Rev. A

@DO083QJDQSQOO@ ©θΘβΘθ (¾Χ3Β QD- for Siebel Mobile■ Customizing How Siebel Open UI

Interacts with Siebel Mobile Applications

d Step off the record and make sure Siebel Open UI hides the Delete button,

e Swipe a record from left to right, and then click Delete,

f Make sure Siebel Open UI deletes the record .

To disable Swipe to Delete, remove the control that you modified in Step 2, and then compile your modifications.

How Siebel Open UI Uses Swipe to Delete

Siebel Open UI uses the CanDelete method in the jquery.swipeButton.min.js file that resides in the following folder to control Swipe to Delete:

CL J£/V7l//CW£\eappweb\PUBLlc\ 1 ' anguage_code\re l ' ease_number\scr pts\3 rdParty\jqmobi l e

The CanDelete method makes sure that Siebel Open UI places the focus on the list item and makes sure that the Delete button is enabled or disabled according to the Canlnvoke reply that the DeleteRecord method sends. If the applet that you query in Step c on page 342 does not include a control with a Method Invoked property set to DeleteRecord, then Siebel Open UI does not display a button when the user swipes a record from left to right.

Customizing How Siebel Open UI

Interacts with Siebel Mobile

Applications

■ Adding Maps That Include Location Data in Siebel Mobile on page 343

■ Configuring Siebel Open UI to Display Siebel CRM Data on Google Maps on page 346

Adding Maps That Include Location Data in Siebel

Mobile

This topic describes how to configure Siebel Open UI to add maps that include location data in Siebel Mobile. Siebel Open UI uses the location of the mobile device service to map contacts. It can access these services through methods. The location service allows you to use the zip code or postal code to map contacts, accounts, or activities. For more information, "Method That Integrates Google Maps" on page 514.

To add maps that include location data in Siebel Mobile

1 Make sure you prepare the data that this example requires.

For more information, see "Setting Up Configuration for Siebel Mobile Examples" on page 277.

2 Add a map button to the Contact List Applet:

Configuring Siebel Open UI Version 8. 1/8. 2, Rev. A

a Open Siebel Tools. Choose the Siebel Mobile tag in the log in dialog box.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for Contact List Applet.

d In the Object Explorer, expand the Applet tree, expand the List tree, and then click List Column, e In the List Columns list, add the following list column.

Property Value I

Name Personal Full Address

Field Personal Full Address

Display Name - String Reference SBL_ADDRESS-1004224839-0NU

In the Object Explorer, click Control.

In the Controls list, add the following control.

Property Value

Name ShowAccounts

Caption - String Reference SBL_MAP-1009093849-828

HTML Type MiniButton

Method Invoked ShowMapLocations

3 Configure Siebel Open UI to display the Address field :

a In the Object Explorer, click Applet Web Template.

b In the Applet Web Templates list, query the Name property for Edit List.

c In the Object Explorer, expand the Applet Web Template tree, and then click Applet Web

Template Item.

d In the Applet Web Template Items list, query the Name property for Account, and then set the Inactive property to TRUE.

e In the Applet Web Templates list, right-click the Edit List record, and then click Edit Web Layout. f In the Web Layout Editor, drag and drop the following list column from the Controls/Columns Palette to an appropriate location in the canvas:

' Personal Ful l Address ' (Di spl ay Name : Add ress)

g Drag and drop the following control from the Controls/Columns Palette to an appropriate location in the canvas:

' ShowAccounts ' (Di spl ay Name : Map)

h Save your modifications, and then close the Web Layout Editor.

344 Config u ring Siebel Open UI Version 8. 1/8.2, Rev. A

i In the Object Explorer, click Applet.

j In the Applets list, right-click the Contact List Applet, and then click Compile Selected Objects.

Compile this applet into the SRF that the client uses.

Modify the mobile contact list view to use the correct web template:

a In the Object Explorer, click Web Template.

b In the Web Templates list, add the following web template.

Property Value

Name View Detail Map Mobile

: Project Mobile LS

i Type View Template c In the Object Explorer, expand the Web Template tree, and then click Web Template File, d In the Web Template Files list, add the following web template file.

Property Value

Name View Detail Map Mobile Template

File Name CCViewDetailMap_Mobile.swt j Bitmap CCViewDetailMap_Mobile.swt e Right-click the View Detail Map Mobile Template record, and then click Compile Selected Objects. Compile this file into the SRF that the client uses.

f In the Object Explorer, click View.

g In the View list, query the Name property for Pharma Contact List View - Mobile.

h In the Object Explorer, expand the View tree, and then click View Web Template.

i In the View Web Templates list, query the Name property for Base, and then set the following property.

Property Value

^; Web Template View Detail Map Mobile j In the Views list, right-click the Pharma Contact List View - Mobile record, and then click Compile Selected Objects. Compile this file into the SRF that the client uses.

Test your modifications:

a Use Safari to open the ePharmacy application.

b Reset Safari for mobile mode.

c Navigate to the Contacts screen.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

d Make sure Siebel Open UI displays a Map button on the contact list applet.

If Safari does not display the map, then make sure you set the Safari browser proxy correctly. e Click the Map button and make sure Siebel Open UI displays a Google map at the bottom of the list applet.

f Make sure the map includes markers that identify the physical location of the contacts. For example:

Configuring Siebel Open UI to Display Siebel CRM Data on Google Maps

In this topic you configure Siebel Open UI to display Siebel CRM data in a Google map. If the user clicks a map button, then Siebel Open UI displays a Google map that can include markers that identify the current location of the mobile user, markers that identify the locations of various Siebel CRM address records, and routing information. It allows the user to get driving directions and to view other information, such as the customer name and account revenue for each marker.

Displaying Siebel CRM Data in a Google Map in a Separate Window

In this topic you configure Siebel Open UI to display Siebel CRM data in a Google map in a separate window. It displays this window if the user clicks a map icon from a field in a form applet. It references a field that includes the location information that it displays in the Google map.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

display Siebel CRM data in a Google map in a separate window

Modify the applet:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for the form applet that you must modify.

For example, query the Name property for Account Form Applet,

d In the Object Explorer, expand the Applets tree, and then click Control,

e In the Controls list, query the Name property for the control that you must modify.

For example, query the Name property for the BillToStreetAddress control,

f Note the name of the value in the Field property.

Siebel Open UI will display the map icon in this field. For example, the Street Address field, g In the Object Explorer, click Applet User Prop.

h In the Applet User Properties list, add the following applet user property.

Property Value

Name MAP_LOCATION_FIELDS

Value Enter the name of a business component field . For example :

; Bi l l i ng Address

i. ■ ] ·' ^■ · · '

I To specify more than one field, use a comma to separate each field name.

For example:

Bi l l ng Address , Shi ppi ng Address

At run-time, Siebel Open UI will create a separate push pin in the Google map for each field that you specify. i Compile your modifications.

Test your modifications :

a Log in to the client.

b Verify that Siebel Open UI displays a map icon in the field that you noted in Step f.

For example, navigate to the Accounts screen, click Accounts List, and then verify that Siebel Open UI displays a map icon in the City field in the form applet.

c Click this map icon, make sure Siebel Open UI opens a new window, and then displays a Google map in this window.

Config u ring Siebel Open U I Version 8. 1/8.2, Rev. A

Interacts with Siebel Mobile Application^

d Make sure this map includes route and direction information for the route that exists between the current geographic location of the mobile user and the address location of the current Siebel CRM address record.

Displaying Siebel CRM Data in a Google Map in a List Applet

In this topic you configure Siebel Open UI to display Siebel CRM data in a Google map in a list applet. If the user clicks a map button in a field in a list applet, then Siebel Open UI displays this map immediately below the list of records in this list applet.

To display Siebel CRM data in a Google map in a list applet

1 Add the map button:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet.

c In the Applets list, query the Name property for the list applet that must contain the map button, d In the Object Explorer, expand the Applet tree, and then click Control,

e In the Controls list, add the following control.

Property Value

Name Enter any value.

Caption Enter any value.

HTML Type MiniButton

Method Invoked ShowMapLocations

The ShowMapLocations method dynamically loads the Google map method, initializes the geocoder service to get the latitude and longitude of the address, and creates a marker for each location that exists in the array.

Siebel Open UI can call this method from a list applet. To call the method, it creates a button or link control and binds a click event with the control. In jqmListRenderert, it loops through the set of records in the list applet, examines the available columns and the non-null value of address fields of the record. To create the full address and add it in the array, it binds the ShowMap button control that is defined in the web template with the click event that the jqmListRenderer defines and calls the ShowMapLocations method in the JQMMapCtrl class. f In the Object Explorer, click Applet Web Template.

g In the Applet Web Template list, query the Name property for Edit List.

h In the Object Explorer, expand the Applet Web Template tree, and then click Applet Web

Template Item.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

@ΟΟΘθ3ΟϋθθΕ20ΟΟ© ΘΟθβθΟ (¾Χ3Β QD2 ifeC? t¾ bilte « iustomizing How Siebel Open UI nter ^' a,cts w.i,th Siebel Mobile Applications

i In the Applet Web Template Items list, add the following applet web template item.

Property Value

Name Enter any value.

Control Choose the control that you added in Step e.

Add an applet user property:

Do Step h on page 347 except do this step for the button that you added in Step 1 on page 348.

If this applet user property references a field that Siebel Open UI does not display in the client, then do the following work:

a In the Object Explorer, click Applet.

b In the Applets list, locate the applet that you must modify.

c In the Applets list, click the link that Siebel Tools displays in the Business Component property. d In the Object Explorer, expand the Business Component tree, and then click Business

Component User Prop.

e In the Business Component User Properties list, add the following business component user property.

Property Value

Name PrivateFields

Value Enter the name of a business component field. For example:

B l l i ng Address

To specify more than, one field, use a comma to separate each field name. For example:

Bi l l i ng Address , Sh ppi ng Address

Modify the .swt file:

a Identify the .swt file that you must modify, and then open it for editing.

For a similar example that identifies and modifies a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

b Add the following code immediately after the SiebelContentListContainer div element:

<swe : i f condi ti on="web Engi ne State Properti es , IsMobi l eAppl i cati onMode">

<di v i d="Si ebelMapContai ner" name="Si ebel apContai ner"

styl e="di spl ay : none ; ">

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A ffl&jj&i

Interacts with Sieb^M ll

<di v i d=" jqmMapCtrl " name=" qmMapCtrl " ></di v>

</d >

</swe : f >

This code adds the map container and div element. Siebel Open UI uses it to render the inline map.

c Optional. To specify a current location that Siebel Open UI uses if the current geolocation is not available, you can add the following code:

<div i d=" jqmMapCtrl " name=" jqmMapCtrl " myLocati

For example:

<di v i d=" jqmMapCtrl " name=" jqmMapCtrl " myLocati on="8 New Engl and Executi ve Park , Burl i ngton , MA 01803 USA"x/di v>

Removing Map Buttons and Icons from Applets

This topic describes how to remove the map button from a list applet and the map icon from a form applet.

To remove map buttons and icons from applets

1 Modify the applet:

a Open Siebel Tools.

For more information, see Using Siebel Tools.

b In the Object Explorer, click Applet,

c In the Applets list> locate the applet that you must modify,

d In the Object Explorer, expand the Applet tree, and then click Control,

e In the Controls list, query the Method Invoked property for the following value:

ShowMapLocati ons

f Set the Inactive property to Y for all records that Siebel Tools returns,

g In the Object Explorer, click Applet User Prop.

h In the Applet User Properties list, query the Name property for MAP_LOCATION_FIELDS.

i Set the Inactive property to Y for all records that Siebel Tools returns.

2 Optional. If the Value property of a MAP_LOCATION_FIELDS applet user property references a field that Siebel Open UI does not display in the client, and if no other applet uses this field for the location service then, then you can remove this field from the business component user property. Do the following :

a In the Object Explorer, click Applet.

b In the Applets list, click the link that Siebel Tools displays in the Business Component property.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

c In the Object Explorer, expand the Business Component tree, and then click Business

Component User Prop.

d In the Business Component User Properties list, search the Name property for the following value:

Pr vateFields

e Set the Inactive property to Y for all records that Siebel Tools returns,

f Set Inactive = Y (if value is a single field).

g Remove the field from the list if the value includes more than one field.

3 Compile your modifications.

4 Modify the Web template file:

a Identify the .swt file that you must modify, and then open it for editing,

b Remove the following code:

<swe:if condition="web Engine State Properties, lsMob leApplication ode"> <div id="SiebelMapContainer" name="Siebel apConta ner" styl e="di spl ay : none ; ">

<div id=" qmMapCtrl " name=" qmMapCtrl " ></div>

</d v>

</swe : i f >

For a similar example that identifies and modifies a web template, see "Configuring Views to Use Landscape or Portrait Layout" on page 282.

Removing Map Buttons and Icons from All Applets

This topic describes how to remove the map button from all list applets and the map icon from all form applets.

To remove map buttons and icons from some applets

■ Location service auto check the availability of the Google method. It disables Map button on the list applets and removes Map icon from the form applet.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

This chapter describes how to customize Siebel Open UI for Siebel Mobile disconnected. It includes the following topics :

■ Overview of Customizing Siebel Open UI for Siebel Mobile Disconnected on page 353

■ Doing General Customization Tasks for Siebel Mobile Disconnected on page 356

■ Customizing Siebel Pharma for Siebel Mobile Disconnected Clients on page 372

■ Customizing Siebel Service for Siebel Mobile Disconnected Clients on page 375

■ Methods You Can Use to Customize Siebel Mobile Disconnected on page 387

Overview of Customizing Siebel Open UI for Siebel Mobile Disconnected

This topic describes an overview of customizing Siebel Open UI for Siebel Mobile disconnected. It includes the following information :

■ "Operations You Can Customize When Clients Are Offline" on page 353

■ "Operations You Cannot Customize When Clients Are Offline" on page 354

■ "Process of Customizing Siebel Open UI for Siebel Mobile Disconnected" on page 355

For examples that customize Siebel Open UI for Siebel Mobile and for Siebel Mobile disconnected, see Chapter 9, "Customizing Siebel Open UI for Siebel Mobile."

Operations You Can Customize When Clients Are Offline

You can customize the following operations when the client is offline :

■ Create, read, update, and delete parent objects and child objects.

■ Modify user interface behavior according to data characteristics, such as read only, required, and can invoke. Siebel Open UI uses the IsReadonly, IsRequired, and Canlnvoke methods to achieve this behavior.

You can customize the following items when the client is offline :

■ Association applets

■ Applet menu and applet menu items

■ Pick applets

■ Picklists

Configu ring Siebel Open UI Version 8. 1/8.2 , Rev. A Customizing Siebel Open

Siebel Open UI for Siebel M .

Static picklists

Error statuses

Static drill downs

Expressions

Searches

Operations You Cannot Customize When Clients Are Offline

You cannot customize the following operations when the client is offline:

■ Multivalue fields.

■ Multivalue groups.

■ Dynamic controls. A dynamic control is a type of control that Siebel Open UI creates dynamically at run time. The Siebel repository does not specify a dynamic control. For example, a view might contain a placeholder for a control that Siebel Open UI dynamically creates and displays at run time.

■ Dynamic drilldowns.

■ Toggle applets.

■ Language-dependent code conversion to language-independent code. The Siebel Server does this conversion during synchronization.

■ Custom layout modification.

■ Effective dating. The Siebel EAI Adapter allows Siebel Open UI to access effective dating data.

Effective dating data is data that identifies the start date and the end date for a field or link. A third-party application can request and receive effective dating data from the Siebel application. For more information about effective dating, see Overview: Siebel Enterprise Application Integration and Siebel Public Sector Guide.

■ Siebel Application Response Measurement (SARM) usage.

■ Siebel eScript or Siebel Visual Basic usage. Scripts that reside on the Siebel Server do not work in an offline client, so you must migrate them to JavaScript that resides on the client. Business service scripts do work in offline clients.

■ Drilldown visibility. Siebel Open UI comes predefined to use the visibility that the drill down definition specifies. If this definition does not exist, or if it contains no values, then Siebel Open UI uses the view to determine drilldown behavior. If the view does not specify drilldown behavior, then Siebel Open UI uses business component visibility in the following order to determine drilldown behavior:

■ SalesRep

■ Personal

■ Org

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ Numeric totals in applets. Some applets display the total for a series of numbers that reside in a column in a list applet or for all records. Siebel Open UI cannot display these totals while the client is offline.

■ COM object usage, such as runtime events, data maps, or variable maps.

B Cascade delete.

■ Search specification on a link.

■ Sort specification that includes a date field .

■ User properties for various objects except for the user properties associated with items described in "Operations You Can Customize When Clients Are Offline" on page 353.

■ Default applet menu items.

■ Workflow processes.

■ CreateRecord method.

■ New record creation from an association popup applet. Siebel Open UI comes predefined to disable this creation. You can customize Siebel Open UI to enable it.

Note the following offline behaviors:

■ Siebel Open UI displays only the data that it downloads during a full download for any business component field that it populates through a join that joins different tables.

■ If more than one business component references the same table, and if Siebel Open UI modifies a business component record for one of these business components, then it does not populate this modification to the other business components until the user goes online and synchronizes the client with the Siebel Server.

■ If the Owner Delete property of a business component is set to TRUE, then the user cannot delete a record in this business component even if this user owns or creates this record. This user must go online to the delete the record . For more information about this property, see Siebel Object Types Reference.

Process of Customizing Siebel Open UI for Siebel Mobile Disconnected

It is recommended that you use the sequence of steps that this topic describes to customize Siebel Open UI to use a Siebel application in a Disconnected client. Siebel Pharma and Siebel Service are each an example of a Siebel application . To view examples that use these steps, see "Customizing Siebel Pharma for Siebel Mobile Disconnected Clients" on page 372 and "Customizing Siebel Service for Siebel Mobile Disconnected Clients" on page 375.

To customize Siebel Open UI for Siebel Mobile Disconnected

1 Configure the manifest, if necessary.

For more information, see "Modifying Manifest Files for Siebel Mobile Disconnected" on page 356.

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A I 355 i

2 Create a new JavaScript file or copy an existing one.

You must place all custom presentation models and physical Tenderers in a custom folder. For more information about this folder, see "Organizing Files That You Customize" on page 122.

3 Register your custom JavaScript method or Siebel business service.

For more information, see "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" on page 361.

4 Add your custom code :

a Declare your variables.

b Use the CanlnvokeMethod method to make sure Siebel Open UI can call your custom method or business service.

c Specify the logic for your custom JavaScript method or Siebel business service.

d Use InvokeMethod to call your custom JavaScript method or Siebel business service.

For more information, see "Using Custom JavaScript Methods" on page 364.

5 Test your modifications.

Doing General Customization Tasks for Siebel Mobile Disconnected

This topic describes how to do general customization tasks for Siebel Mobile disconnected i n Siebel Open UI. It includes the following topics :

■ "Modifying Manifest Files for Siebel Mobile Disconnected" on page 356

■ "Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence" on page 359

■ "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" on

page 361

■ "Using Custom JavaScript Methods" on page 364

■ "Using Custom Siebel Business Services" on page 367

■ "Configuring Data Filters" on page 369

■ "Configuring Objects That Siebel Open UI Does Not Display in Clients" on page 369

■ "Configuring Error Messages for Disconnected Clients" on page 369

Modifying Manifest Files for Siebel Mobile Disconnected

The cache manifest file specifies the resources that Siebel Open UI must download to the disconnected client for offline use. Each application uses a separate cache manifest file that uses the following format:

app 7 ication _^ name. mani f est

Config u ring Siebel Open UI Version 8. 1/8.2, Rev. A

©BeOsmQsQoD© SOo&oO Ofpooo [feggsigggilijiggilgl nected■ Doing Genera l fi eilM obile Disconnected

where :

■ application_name identifies the name of the Siebel application, such as Siebel Service for Mobile.

Siebel Open UI converts this name to lower case and replaces each space that the name contains with an underscore. For example, s ebel_servi ce_for_mobi l e . man fest is the cache manifest file that Siebel Open UI uses for Siebel Service for Siebel Mobile disconnected .

Manifest files reside in the following folder on the Mobile Web Client:

\SWEApp\PUBLlc\ Ί anguage_code\s\ ebel_servi ce_for_mobi 1 e . mani f est

Manifest files reside in the following folder on the Siebel Server:

\SES\si ebs r r\WEB ASTER\ Ί anguage_code\si ebel_servi ce_for_mobi 1 e . mani f est

Siebel Open UI includes only the cache manifest files that it requires to support the Siebel application that you deploy.

To modify manifest files for Siebel Mobile disconnected

1 Add resources to the cache manifest file that your application uses, as necessary.

If your deployment requires custom resources to run an application offline, then you must add these resources to the cache manifest file that this application uses. For example, assume you must configure Siebel Open UI to run Siebel Service for Siebel Mobile disconnected so that it can download the following resources, and then use them while the client is offline :

■ my_style.css

■ my_image. png

■ my_script.js

In this situation, you can create a file named my_cache. manifest that includes the following information :

CACHE MANIFEST

# 2012-4-27 : vl

# Expl i ci tl y cached " master entri es ' .

CACHE :

f i 1 es/my_styl e . ess

i mages/my_i mage . png

23012/scri pts/my_scri pt . j s

The cache manifest file must use the HTML 5 standard . This standard allows you to run a Perl script in Step 4 that merges your custom cache manifest files into the predefined application cache manifest files. Siebel Open UI includes this script starting with the Siebel CRM 8.1.1.10 Quick Fix release.

2 Make a backup copy of the predefined manifest file that you must modify.

For example, siebel_service_for_mobile. manifest. You modify this file in Step 4.

It is recommended that you do this backup because the script that you run in this task modifies the siebel_service_for_mobile. manifest file. You can use this backup if you encounter a problem when running this script.

Configu ring Siebel Open UI Version 8.1/8.2, Rev. A 357 Customizing

Customization

3 Open a Windows command line on the computer where the manifest files reside, and then navigate to the following folder:

\SWEApp\PUBLlc\ Janguage_code\mergemani f est . pi

The SWEApp folder resides on the Mobile Web Client. If you are doing this task on the Siebel Server, then navigate to the following folder:

fest . pi

4 Enter the following command :

Perl mergemani fest . pl -s my_cache. manifest -d application_name. manifest

where:

■ my_cache. manifest specifies the source manifest file. If you do not include the -s switch, then Siebel Open UI uses the custom. manifest file, by default.

■ appllcatlon_name. manifest specifies the destination manifest file. You must include the -d switch.

For example:

Perl mergemani fest . pl -s my_cache . mani fest -d si ebel_servi ce_for_mob l e . mani fest

This command merges the custom manifest file that you modified in Step 1 into the predefined siebel_service_for_mobile. manifest file. Note the following :

■ You must run this script any time you modify your cache manifest file or do an upgrade.

■ You must make sure the source and destination files exist.

■ This script adds the CACHE, NETWORK, and FALLBACK sections that reside in the

my_cache. manifest, if they exist, to the end of the corresponding sections that reside in the siebel_service_for_mobile. manifest file. Your custom entries take precedence over the predefined Oracle entries that reside in this file.

■ If a file contains more than one CACHE section, NETWORK section, or FALLBACK section, then this script merges these sections into one section. For example, if two CACHE sections exist, then this script merges these CACHE sections into a single CACHE section. This merge does not modify the sequence where the entries reside in the files.

■ The script does not add duplicate entries to the destination file. If the merge results in duplicate entries, then Siebel Open UI removes the first duplicate from the destination file. It adds this removed entry to the destination. log file that resides in the folder where the destination file resides.

■ The script does not include empty lines in the destination file.

■ This script creates the destination. log file every time it runs.

■ If the script finishes the merge, and if the result of this merge is identical to the destination file, then the script does not update the destination file, and the destination file retains its original timestamp.

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

ffi¾ S½t» _. (B| Mobile Disconnected■ Doing General

.SBstiornii za io n Tas ks f or Siebel Mobile Disconnected

Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence

Siebel Mobile disconnected uses a local database, which is a database that resides in the browser that stores the data that Siebel Open UI requires. If Siebel Open UI runs in a Siebel Mobile disconnected environment, and if a method in JavaScript code interacts with this local database; then this method is an asynchronous method, and any method that calls this method is also an asynchronous method. This situation might result in Siebel Open UI running code in an incorrect sequence. For example, it might run section B of the code before it runs section A, but the correct logic is to run section A, and then run section B. This topic describes how to configure Siebel Open UI to call an asynchronous method as if the call occurred in a synchronous environment. This configuration makes sure Siebel Open UI runs the asynchronous method in the correct sequence.

To register methods to make sure Siebel Open UI runs them in the correct sequence

1 On the client computer, use a JavaScript editor to open the file that includes the business service call that you must modify.

For more information, see "Using Custom JavaScript Methods" on page 364.

2 Locate the code that includes the business service call that you must modify.

3 If the call to any asynchronous method from a business service method must run only one time, then use the callback method and the setReturnValue method.

For example, you can use the ExecuteQuery and FirstRecord methods. Assume you locate the following code in Step 2:

business_service. prototype . Submi t = functi on 0 {

retobj = be . ExecuteQueryC) ;

err = retobj . err ;

i f( ! err) {

retobj = be . Fi rstRecord O ;

f ( ! retob . err) {

//Do an operati on here that sets the return val ue to bRet

return({err : fal se , retval : bRet}) ;

}

}

el se{

Si ebel App . S_App . Of f 1 i neErrorObject . SetErrorMsgC'/tfessag'e/re " ,

errParamArray) ;

return({err : true}) ;

}

} ;

■ where business_service identifies the name of the business service that your custom code calls. For example, PharmaCallSubmitsvc.

For more information, see "SetErrorMsg Method" on page 420, "FirstRecord Method" on page 396 and "ExecuteQuery Method" on page 395.

In this example, you replace the code that you located in Step 2 with the following code:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Customizing Siebel Open UI Sieimi

Customization Tasks for S i e be I Mo If ΙΊ¾Ε35ΒΒΗ3!Β!!ΒΕΙΒΒΒ

PharmaCallSubmitsvc. prototype. Subm t = function () {

be. ExecuteQueryO ;

$ . cal 1 back (thi s , f uncti on ( retob j ) {

err = retobj .err;

if(!err){

be. Fi rstRecordO ;

$ . cal 1 backCthi s , f uncti on(retobj) {

if (! retobj .err){

//Do an operation here that sets the return value to bRet

$.setReturnValue({err:false, retval :bRet}) ;

}

});

}

else{

Si ebe App . S_App . Of f 1 i neEr rorobject . SetErrorMsg ("messageKey" , errParamArray) ;

$.setReturnValueC{err:true}) ;

}

});

};

The callback method and the setReturnValue method in this example configures Siebel Open UI to use the same flow to run this code that it uses when it makes a synchronous call in a connected environment. For information about these methods, see "callback Method" on page 419 and "setReturnValue Method" on page 418.

4 If Siebel Open UI must run the call to any asynchronous method from a business service method more than one time, then use the eachAsyncOp method.

For example, assume you located the following code in Step 2:

business_service. prototype. Submit = function O {

var n;

for(var i =0;i<n;i++){

// Code that goes into preExecute

bc.SetFieldvalue(fieldName[i] ,fieldData[i]) ;

// code that goes into postExecute

}

retobj = bc. riteRecordO ;

if (! retobj .err){

//Call code here that sets the return value to bRet

return ({err: false , retval : bRet}) ;

}

el se{

return ({err:true}) ;

}

};

In this example, you replace the code that you located in Step 2 with the following code:

PharmaCallSubmitsvc. prototype. Submit = function () {

var preExecutecall= function(i){

args[0]=fieldName[i] ;//send the args while calling the async operation which is bc.SetFieldValue here

args[l]=fieldData[i] ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

return args; // arguments returned must always be in an array

}

var postExecutecall= function(retObj){

i (! retOb .err){

//Do domething using the return value obtained from the async call

}

}

var configobj =

{execute : be . SetFi el dval ue , preExecute : preExecutecal 1 , postExecute : postExecuteca 11 , i terati ons : n , executeScope : be} ;

$ . eachAsyncOp (thi s , conf i gobj ) ;

$ . cal 1 back(thi s , f uncti on(returnobj) {

if(! retOb .err){

bc.writeRecordO ;

$ . cal 1 backCthi s , f uncti on (retob ) {

if (! retObj .err) {

//Call code here that sets the return value to bRet $.setReturnvalue({err:false,retval :bRet}) ;

}

});

}

});

};

In this example, Siebel Open UI uses the eachAsyncOp method to call the SetFieldValue method more than one time to set the value for more than one field. For information about these methods, see "eachAsyncOp Method" on page 419 and "SetFieldValue Method" on page 404, and "WriteRecord Method" on page 407.

Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects

This topic describes how to use a Siebel business service or a JavaScript service to customize a predefined, Siebel CRM applet or business component.

Customizing Predefined Business Components

The example in this topic describes how to register and call a custom JavaScript method that customizes a predefined business component. You must configure Siebel Open UI to register a custom method before Siebel Open UI can call it.

To customize predefined business components

1 Use a JavaScript editor to create a new JavaScript file.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customization Tasks foifs^rW

2 Specify the input properties that Siebel Open UI must send to the ServiceRegistry method.

The ServiceRegistry method uses input properties to register your custom method. For more information, see "Properties You Must Include to Register Custom Business Services" on page 412.

You add the following code:

a Create the namespace for the JavaScript class. In this example, you create a namespace for the pharmacallsvc class:

if (typeof (Si ebelApp. pharmacallsvc) === "undefined") {

Si ebel 35. Namespace ( ' si ebel App . pharmacal 1 svc ' ) ;

b Define the variables:

var oconsts = SiebelApp.offl neconstants;

var inputob = {};

c Specify the business component where Siebel Open UI applies your customization. In this example, you specify the Pharma Professional Call - Mobile business component:

inputobj [oconsts. get "DOUIREG_OB3_ ")] = "Pharma Professional Call - Mobile";

d Specify the type of object that you are customizing. In this example, you are customizing a business component:

inputobj [oconsts. getC"DOUlREG_OB3_TYPE")] =

oconsts. get("DOUIREG_OBJ_TYPEBUSCOMP") ;

e Specify the name of the predefined method that you are customizing. In this example, you are customizing the WriteRecord method:

inputobj [oconsts. get("DOUlREG_OB3_MTHD")] = "WriteRecord";

f Specify the name of the JavaScript class where the method you are customizing resides. In this example, this method resides in the pharmacallsvc class:

inputobj [oconsts. get C"DOUIREG_SRVC_NAME")] = "pharmacallsvc";

g Specify the name of the custom service method that contains the customization of the

WriteRecord method:

inputobj [oconsts. getC"DOUlREG_SRVC_MTDH")] = "WriteRecord";

h Specify the type of customization:

inputobj [oconsts. get("DOUlREG_EXT_TYPE")] =

oconsts. get("DOUIREG_EXT_TYPEPRE") ;

3 Register the custom JavaScript method that you specified in Step 2. This code calls the

ServiceRegistry method:

SiebelApp.S_App.GetModel () .ServiceRegistry(inputObj) ;

4 Define the constructor:

Si ebel App. pharmacallsvc = (function () {

function pharmacal 1 svcO {

}

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

5 Extend the custom JavaScript class :

S ebel 3S . Extend (pharmacal 1 svc , S ebelApp . Servi ce odel ) ;

6 Specify the custom WriteRecord method:

pharmacal 1 svc. prototype. WriteRecord = function (pslnputArgs) {//get the inputs var psOutArgs = si ebel App. S_.App.NewPropertySet() ;

return psOutArgs; //return the outputs

};

return pharmacal 1 svc;

} CO ;

}

The custom method must include your customization logic. This code gets the property set from the predefined WriteRecord method and uses it as input to your custom WriteRecord method. The custom WriteRecord method then returns an output property set to the predefined WriteRecord method.

The following code is the completed code for this topic:

if (typeof (Si ebel App. pharmacal 1 svc) === "undefined") {

Si ebel 3S . Namespace ( ' Si ebel App . harmacal 1 svc ' ) ;

var oconsts = siebelApp.Offlineconstants;

var inputobj = {};

inputobj [oconsts. get("DOUlREG_OB3_NAME")] = "Pharma Professional Call - Mobile"; inputobj [oconsts. get C"DOUIREG_OB3_TYPE")] =

oconsts. getC"DOUIREG_OB3_TYPEBUSCOMP") ;

inputobj [oconsts. get("DOUlREG_OB3_MTHD")] = "WriteRecord";

inputobj [oconsts. get C"DOUIREG_SRVC_NAME")] = "pharmacal 1 svc" ;

inputobj [oconsts. get C"D0UIREG_SRVC_MTDH")] = "WriteRecord";

inputobj [oconsts. get("DOUIREG_EXT_TYPE")] = oconsts . get("DOUIREG_EXT_TYPEPRE") ; SiebelApp.s_App.GetModel () . Servi ceRegistry (inputobj) ;

Si ebelApp. pharmacal 1 svc = (function () {

function pharmacallsvcO {

}

Si ebel 3S . Extend (pharmacal 1 svc , Si ebel App . Servi ceModel ) ;

pharmacal 1 svc. prototype. WriteRecord = function (pslnputArgs) {//get the inputs var psOutArgs = SiebelApp. s_App.NewPropertySet() ;

return psOutArgs ;//return the outputs

} ;

return pharmacal! svc;

} ());

Customizing Predefined Applets

The example in this topic registers a custom method that customizes a predefined applet. The work you do in this topic is very similar to the work you do in "Customizing Predefined Business

Components" on page 361. The only difference occurs when you specify the input object for the applet and the type of object.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customization Tasks for, S i e be I - M o b 11 e¾D ι scan rtejeEeid

To customize predefined applets

■ Do Step 1 on page 361 through Step 6 on page 363 with the following differences:

■ For Step c on page 362, specify the applet where Siebel Open UI applies your customization.

In this example, you specify the Pharma Call Entry Mobile applet:

inputobj [oconsts. get("DOUlREG_OBD_NAME")] = "Pharma Call Entry Mobile";

■ For Step d on page 362, specify the type of object that you are customizing. You specify an applet instead of a business component:

inputobj [oconsts.get("DOUIREG_OBD_TYPE")] =

OCOnstS . get("DOUIREG_OBD_TYPEAPPLET") ;

The following code is the completed code for this topic:

if (typeof (SiebelApp.pharmacallsvc) === "undefined") {

Si ebel J S . amespace ( ' Si ebel App . pharmacal 1 svc ' ) ;

var oconsts = SiebelApp.Offlineconstants;

var inputobj = {};

inputobj [oconsts. get("DOUlREG_OB:_NAME")] = "Pharma Call Entry Mobile";

inputobj [oconsts. get("DOUlREG_OBJ_TYPE")] =

OCOnstS. get("DOUIREG_OBD_TYPEAPPLET") ;

inputobj [oconsts. get C"DOUlREG_OBJ_MTHD")] = "invokeMethod" ;

inputobj [oconsts. get("DOUlREG_SRVC_NAME")] = "pharmacal 1 svc" ;

inputobj [oconsts. get("DOUIREG_SRVC_MTDH")] = "InvokeMethod";

inputobj [oconsts. getC"DOUIREG_EXT_TYPE")] = oconsts. get ("DOUIREG_EXT_TYPEPRE") ; SiebelApp.S_App.GetModel () . ServiceRegistry (inputobj) ;

SiebelApp.pharmacallsvc = (function () {

function pharmacallsvcO {

}

Si ebel 3 s . Extend (pharmacal 1 svc , Si ebel App . Servi ceModel ) ;

pharmacal 1 svc. prototype. InvokeMethod = function (pslnputArgs) {//get the inputs var psOutArgs = SiebelApp. s_App.NewPropertySet() ;

return psOutArgs;//return the outputs

};

return pharmacallsvc;

} O);

}

Using Custom JavaScript Methods

The example in this topic describes how to call a custom JavaScript method that does not customize a predefined method. Siebel Open UI does not require you to register a custom JavaScript method. Instead, you configure Siebel Open UI to do the following work:

■ Override the InvokeMethod to call your custom method.

■ Override the CanlnvokeMethod method to enable or disable your custom method.

The offline_predefined_js_call_example.js file contains the code that this example describes. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

364 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

use custom JavaScript methods

Use a JavaScript editor to create a new JavaScript file.

Register the InvokeMethod and CanlnvokeMethod methods. You add the following code:

if (typeof (SiebelApp.pharmacallsvc) === "undefined") {

Si ebel 3S . Namespace( ' Si ebelApp . pharmacal 1 svc ' ) ;

var inputobj = {};

var oconsts = siebelApp.Offlineconstants;

inputob [oconsts.get("DOUlREG_OB3_NAME")i = "Pharma Call Entry Mobile";

inputobj [oconsts. get("DOUIREG_OB3_TYPE")] =

OCOnstS. get("DOUIREG_OBD_TYPEAPPLET") ;

inputobj [oconsts. getC"DOUlREG_OBJ_MTHD")] = "CanlnvokeMethod";

inputobj [oconsts. get("DOUlREG_SRVC_NAME")] = "pharmacallsvc" ;

inputobj [oconsts. getC"DOUlREG_SRVC_MTDH")] = "CanlnvokeMethod" ; inputobj [oconsts. get("DOUIREG_EXT_TYPE")] =

oconsts. get("DOUIREG_EXT_TYPEPRE") ;

SiebelApp. s_App.GetModel () .ServiceRegistry(inputObj) ;

inputobj [oconsts. get("DOUlREG_OBJ_NAME")] = "Pharma Call Entry Mobile";

inputobj [oconsts. get("DOUlREG_OBD_TYPE")] =

oconsts. get("DOUIREG_OBJ_TYPEAPPLET") ;

inputobj [oconsts. get("DOUlREG_OBJ_MTHD") ] = "InvokeMethod";

i nputobj [oconsts . get("DOUlREG_SRVC_NAME") ] = "pharmacal 1 svc" ;

inputobj [oconsts. getC"DOUlREG_SRVC_MTDH")] = "InvokeMethod";

inputobj [oconsts. get("DOUlREG_EXT_TYPE")] =

oconsts . get("DOUiREG_EXT_TYPEPRE") ;

SiebelApp. s_App.GetModel O .ServiceRegistry( nputObj) ;

SiebelApp.pharmacallsvc = (function O {

function pharmacallsvc(pm) {

}

Si ebel JS . Extend(pharmacal 1 svc , Si ebelApp. Servi ceModel ) ; //Extendi ng pharmacallsvc. prototype. InvokeMethod = function (psinputArgs) { var svcMthdName = "";

var psOutArgs = SiebelApp.S_App.NewPropertySet() ;

For more information about this code, see the description about the inputObj argument in "ServiceRegistry Method" on page 411. Also see "CanlnvokeMethod Method" on page 388 and "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" on page 361.

Get the value of the MethodName argument from the psinputArgs method :

svcMthdName = psinputArgs .GetPropertyC'MethodName") .toStringO ;

Call the Submit method:

if (svcMthdName === "Submit") {

this.Submit() ;

$.callback(th s, function (retobj) {

For information, see "callback Method" on page 419.

Do one of the following:

■ If InvokeMethod handles the submit call that you define in Step 4, then you use the following code to set the Invoked property to true:

Configuring Siebel Open UI Version 8.1/8.2, Rev. Customizing Siebel Open UI iHoKtie

Customization Tasks for Siebeil

if ( ! retobj . err) {

psOutArgs . SetPropertyC'lnvoked" , true) ;

$.setReturnValue({err: "", ret al : psOutArgs});

}

else {

psOutArgs . SetPropertyC'lnvoked" , true) ;

$.setReturnvalue({err: retobj.err, retval: psOutArgs});

}

});

}

For information see "setReturnValue Method" on page 418.

■ If InvokeMethod does not handle the submit call that you define in Step 4, then you must use the following code to configure Siebel Open UI to set the Invoked property to false. This code is required for any InvokeMethod method that you configure Siebel Open UI to override: else {

psOutArgs . SetPropertyC'lnvoked" , f al se) ;

$.setReturnValue({err: "", retval: psOutArgs});

}

return(psOutArgs) ;

};

■ If the current, overridden CanlnvokeMethod method handles the submit call that you define in Step 4, then you must set the Invoked property to true. Siebel Open UI includes the return value in the RetVal property for the method from CanlnvokeMethod. You can set this method according to your requirements:

pharmacall svc. prototype. CanlnvokeMethod = function (pslnputArgs) { var psOutArgs = s ebelApp.S _^ App.Ne PropertySetC) ;

var svcMthdName = "";

svcMthdName = pslnputArgs .GetPropertyC'MethodName") .toStringO ;

if (svcMthdName === "Submit") {

psOutArgs. SetPropertyC'lnvoked", true) ;

psOutArgs . SetPropertyC'Retval " , true) ;

$.setReturnValue({err: "", retval: psOutArgs});

}

For more information about RetVal, see "setReturnValue Method" on page 418.

6 If the current, overridden CanlnvokeMethod method does not handle the submit call, then use the following code to set the Invoked property to false:

else {

psOutArgs . SetPropertyC'lnvoked" , fal se) ;

psOutArgs . SetPropertyC'Retval " , fal se) ;

$.setReturnvalue({err: "", retval: psOutArgs});

}

return(psOutArgs) ;

};

pharmacall svc. prototype. Submit= function (pslnputArgs) {

var psOutArgs = SiebelApp.s_App.Ne PropertySet() ;

return(psOutArgs) ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

};

return pharmacallsvc;

} O);

Using Custom Siebel Business Services

This topic describes how to call a Siebel business service that you customize. You must configure Siebel Open UI to register this business service before Siebel Open UI can call it.

To use custom Siebel business services

1 Use a JavaScript editor to create a new JavaScript file.

2 Register your custom business service. You add the following code:

var nputob = {};

inputob [oconsts.get("DOUlREG_OBa_NAME")]= " business_service" ;

inputobj [oconsts. get("DOUIREG_SRVC_NA E")] = "class";

SiebelApp.s_App.GetModel O .ServiceRegistry (inputobj) ;

where:

■ business_service identifies the name of a custom business service.

■ class identifies the JavaScript class that the custom business service references.

For example:

if (typeof (SiebelApp. PharmaCallVal datorsvc) === "undefined") {

Si ebel 3 S . Namespace ( ' si ebel App . PharmaCal 1 Val i dato rsvc ' ) ; var oconsts = SiebelApp. Offlineconstants;

var inputobj = {};

inputObj[oconsts.get("DOulREG_OBJ_NAME")]= "LS Pharma validation Service" inputobj [oconsts. get "DOUIREG_SRVC_NAME")] = "PharmaCallValidatorsvc" ;

Si ebel App . S_App . GetModel () . Se rvi ceRegi st ry (i nputob j ) ;

SiebelApp. PharmaCallValidatorsvc = (function () {

function PharmaCal 1 Val idatorsvcO {

Si ebel App . PharmaCal 1 Val i datorsvc . supercl ass . const ructor . cal 1 (thi s) ;

}

Si ebel JS . Extend (PharmaCal 1 al i datorsvc , Si ebel App . Servi ce odel ) ;

For more information about the methods that this step uses, see the following topics:

■ "Properties You Must Include to Register Custom Business Services" on page 412

■ "ServiceRegistry Method" on page 411

■ "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" page 361

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 367

Customization Tasks for Sie e ^ ^' ^Blte'^seo'n^

3 Use CanlnvokeMethod to determine if Siebel Open UI can call your custom business service method.

For example, the following code determines if Siebel Open UI can call the CallValidate business service method:

Pharmacallvalidatorsvc. prototype. CanlnvokeMethod = function (svcMthdName) { if (svcMthdName === "CallValidate") {

$.setReturnValue({err: "", retval : true});

return ;

}

else {

return

Si ebel App . PhartnaCall val i datorsvc . supercl ass . CanlnvokeMethod . cal 1 (thi s , svcMthdName) ;

}

};

For more information about the methods that this step uses, see "CanlnvokeMethod Method" on page 388.

4 Use InvokeMethod to call your custom business service method.

For example, the following code calls the CallValidate business service method:

Pharmacallvalidatorsvc. prototype. InvokeMethod = function (svcMthdName, psinpargs) {

var psOutArgs = SiebelApp.s_App.NewPropertySet() ;

if (I svcMthdName) {

$.setReturnValue({err: "", retval: true});

return;

}

if (svcMthdName === "CallValidate") {

this. Call Val idate(psinpargs) ;

$.callback(this,function(retObj){

psOutArgs = retobj . retval ;

this.CleanupO ;

$.setReturnvalue({err:false, retval :psOutArgs}) ;

return;

});

}

}

else {

return

Si ebel App. PharmaCal 1 val i datorsvc. superclass . InvokeMethod . call (thi s ,

svcMthdName, psinpargs);

}

Pharmacallvalidatorsvc. prototype. CallValidate = function (psinpropset) { var psOutArgs = SiebelApp.s_App.NewPropertySet() ;

//some Logic

$.setReturnvalue({err:false, retval :psOutArgs}) ;

};

};

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

return PharmaCal lval i datorsvc ;

} CO ;

}

For more information about the methods that this step uses, see the following topics :

■ "Invoke Method for Business Services" on page 410

■ "InvokeMethod Method for Applets" on page 389

■ "setReturnValue Method" on page 418

■ "callback Method" on page 419

Configuring Data Filters

It is recommended that you configure filters to reduce the amount of business component data that Siebel Open UI must download to do offline operations. Siebel Open UI comes predefined with a number of data filters. You can modify these filters. For more information about how to modify them, see the chapter about working with data filters In Siebel Disconnected Mobile Applications Guide.

Configuring Objects That Siebel Open UI Does Not

Display in Clients

The Handheld Business Service only downloads fields, business component data, and business object data that Siebel Open UI displays in the client. You must configure Siebel Open UI to download these objects that it does not display in the client. To do this, you use the Settings tab of the Mobile Application view in the Administration - Siebel Remote screen in the administrative client. For more information, see the topic about configuring application settings in Siebel Disconnected Mobile Applications Guide.

Configuring Error Messages for Disconnected Clients

This topic describes how -to configure Siebel Open UI to use the SetErrorMsg method in your custom code to return and display a custom error message in a disconnected client.

To configure error messages for disconnected clients

1 Use an editor to open the file that calls a custom applet, business component, or business service.

This is the same file that you create in "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" on page 361.

2 Locate the code that might return an error message.

For example, assume your deployment includes the following code, and that this code calls a method that might return an error message :

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A 369

Customization Tasks ifor %e&e.

BusComp. prototype. Caller = function 0

this.CalledC) ;

$ . cal 1 back(thi s , f uncti on(retobj) {

In this example, the Called method might return an error message. It calls the Caller method. These methods might reside in different locations in a production environment.

3 Add the following code to the code that you located in Step 2:

//Check for any errors

if (retobj .err){

$.setReturnValue(retObj) ;

}

else{

//Positive case

$.setReturnvalue({err: false, retval : false}) ;

}

D;

return;

}

This code determines whether or not the Called method returns an error message. If it:

■ Returns an error message, then this code calls the setReturnValue method.

■ Does not return an error message, then the following code sets the err return value to null:

$ . setReturnval ue({err : f al se , retval : f al se}) ;

For information see "setReturnValue Method" on page 418.

4 Add the following code to the code that you located in Step 3:

BusComp. prototype. Called = function (){

var errParamArray = [] ;

e rrParamAr ray .push {.valuel, valueN) ;

Si ebel App . S_App . of f 1 i neErrorObject . SetErrorMsg messageKey" , errParamArray) ; $ . setReturnValue ({err: "AppropriateErrorCode" , retval : false}) ;

where:

■ valuel is a property that Siebel Open UI sends to the SetErrorMsg method. You can configure Siebel Open UI to send up to eight properties.

■ messageKey is a key that Siebel Open UI maps to the message string that it displays. For more information, see "SetErrorMsg Method" on page 420.

In this example, the following code calls the SetErrorMsg method:

Si ebel App. s_App. Off li neErrorObject. SetErrorMsg ("AppropriateErrorCode" , errParamArray) ;

The following code makes sure Siebel Open UI returns an err value. The err value contains the error code:

$.setReturnvalue({err: "AppropriateErrorCode" , retval : false}) ;

return ;

370 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

The following code is the completed code that this example uses:

BusComp. prototype. Caller = function 0

this.CalledO ;

$ . cal 1 backCthi s , f uncti on ( retob ) {

//Check for any erros

if (retobj . err){

$.setReturnvalue(retObj) ;

}

el se{

//Positive case

$ . setReturnvalue({err : fal se , retval : fal se}) ;

}

});

return ;

}

BusComp. prototype. Cal led = function (){

var errParamArray = [] ;

errParamAr ray. push {.fieldName) ;

SiebelApp.s_App.Offl ineErrorOb ect . SetErrorMsg {."ErrorCode" , errParamArray) ; $.setReturnValue({err:"AppropriateErrorCode", retval : false}) ;

return ;

}

where:

■ ErrorCode identifies a messageKey. Siebel Open UI gets the message text for the message key from the swemessages_/ang__ge_coce.js file that resides in an local folder. For example, swemessages_enu.js.

■ fieldName identifies the name of a business component field. This field contains the values that Siebel Open UI displays in the error message. For example, the predefined BCErrNoSuchField message key includes the following message text in the swemessages_enu.js file:

"Field '%_' not found in BusComp."

SetErrorMsg replaces %1 with the value that Siebel Open UI passes in the errParamArray. For example:

errParamArray . push("Name") ;

SiebelApp.S_App.Offl ineErrorObject. SetErrorMsg ("BCErrNoSuchField" .errParamArray )

In this example, Siebel Open UI replaces with the value Name:

"Field 'Name' not found in BusComp."

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Pharma for Siebel Mobile Disconnected^Clij

Customizing Siebel Pharma for Siebel Mobile Disconnected Clients

This topic includes an example of customizing Siebel Pharma in Siebel Open UI for display in a Siebel Mobile disconnected client. For more information about the functionality that these customizations modify, see the chapter that describes how to use the Siebel Mobile Disconnected Application for Siebel Pharma in Siebel Disconnected Mobile Applications Guide.

This topic customizes Siebel Pharma to submit a Pharma Call record depending on whether or not Siebel Open UI already submitted this call. It makes sure Siebel Open UI does not overwrite a call that it already submitted to the Siebel Server. To submit a call in Siebel Pharma, the user must do the following work:

■ Enter all information for the call.

■ Add at least one sample for the call.

■ Get the required signature for the samples that the call includes.

B Set the status for the call to Planned or Signed.

■ Tap Submit.

Siebel Pharma locks a call after it submits this call, and then the user can no longer edit or update the call. You can modify some of this behavior. For more information about the work you do in this topic, see "Process of Customizing Siebel Open UI for Siebel Mobile Disconnected" on page 355. For more information about the methods that this example uses, see "Methods You Can Use to Customize Siebel Mobile Disconnected" on page 387.

To customize Siebel Pharma for Siebel Mobile Disconnected clients

1 Create a new JavaScript file.

You can use any file name that is meaningful to your deployment. For example, you can use a short name that indicates what the business service accomplishes. It is recommended that the file name end with svc.js or servicers. For example, callsvc.js. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support. For more information about the folders you can use to store your customizations, see "Organizing Files That You Customize" on page 122.

2 Register an asynchronous business component method. You add the following code to the file you created in Step 1 :

var i nputArgs = {} ;

var oconsts = si ebel App . offl i neconstants ;

var ch l dBCArrOb s = [] ;

nputArgs [oconsts . get C"DOUlREG_OBD_NAME") ] = " Pharma cal l Entry Mobi l e" ;

i nputArgs [oconsts . get C"DOUlREG_OB J_TYPE") ] =

OCOnstS . get ("DOUlREG_OBJ_TYPEAPPLET") ;

i nputArgs [oconsts . get ("DOUIREG_OB3_MTHD") ] = "CanlnvokeMethod" ;

i nputArgs [oconsts . get C"DOUlREG_SRVC_NAME") ] = "pharmacal l svc" ;

i nputArgs [oconsts . get ("DOUlREG_SRVC_MTDH") ] = "CanlnvokeMethod" ;

nputArgs [oconsts . get C"DOUlREG_EXT_TYPE") ] = oconsts . get ("DOulREG_EXT_TYPEPRE") ;

S ebelApp . S _^ App . GetModel O . Servi ceRegi stry (i nputArgs) ;

nputArgs [oconsts . get ("DOUIREG_OBD_NAME") ] = "Pharma Cal l Entry Mobi l e" ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Siebel Mobile Disconnected■ Customizing Siebel

Pharma for Siebel Mobile Disconnected Clients

inputArgs[oconsts.get("DOUlREG_OB3_TYPE")] =

OCOnstS.get("DOUIREG_OBJ_TYPEAPPLET") ;

i nputArgs [oconsts. get ("DOUIREG_OB:J_MTHD")] = "invokeMethod" ;

i nputArgs [oconsts . get ("DOUlREG_SRVC_NAME") ] = "pharmacal 1 svc" ;

inputArgs[oconsts.get("DOUIREG_SRVC_MTDH")] = "invokeMethod";

i nputArgs [oconsts. get C"DOUIREG_EXT_TYPE")] = oconsts . get ("DOUlREG_EXT_TYPEPRE") ;

SiebelApp.s_App.GetModel () . Serv ceRegistry( nputArgs) ;

This code registers the CanlnvokeMethod method of the pharmacallsvc business service with the CanlnvokeMethod of the Pharma Call Entry Mobile business component. It configures Siebel Open UI to call CanlnvokeMethod of the pharmacallsvc business service every time it calls CanlnvokeMethod on the business component. For more information, see "ServiceRegistry Method" on page 411 and "CanlnvokeMethod Method" on page 388.

Add the following code immediately after the code you added in Step 2:

Si ebelApp. pharmacall svc = (function O {

function pharmacall svc (pm) {

}

Si ebel JS . Extend (pharmacal 1 svc , S ebel App . Servi ceModel ) ;

This code adds the pharmacallsvc method to the pharmacallsvc business service.

Specify the logic for your asynchronous method. You add the following code immediately after the code you added in Step 3:

pharmacall svc. prototype. CanlnvokeMethod = function (psinputArgs) {

var psOutArgs = S ebelApp.s_App.NewPropertySet() ;

var svcMthdName = "";

var pBusComp = thi s .GetContextO . BusCompO ;

svcMthdName = psinputArgs .GetPropertyC'MethodName") .toStringO ;

if (svcMthdName === "Submit") {

pBusComp.GetFieldvalue("Call Status") ;

$.callback(this, function (retobj) {

var call Status = retobj . retval ;

i f (cal 1 Status ! == "Submi tted") {

psOutArgs . SetProperty ("Invoked" , true) ;

psOutArgs . SetPropertyC'RetVal " , true) ;

$.setReturnValue({err: false, retval : psOutArgs});

}

el se{

psOutArgs . SetPropertyC'lnvoked" , true) ;

psOutArgs . SetPropertyC'RetVal " , f al se) ;

$.setReturnvalue({err: false, retval : psOutArgs});

}

});

}

};

This code defines CanlnvokeMethod. This method determines whether or not Siebel Open UI can call a method in the current context of the business component. In this example, if the value for the active call record is:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Customizing Siebel Open UI for Siebel MobilelDisconnigctea

Pharma for Siebel Mobile Discorinectedi lientsr

■ Not submitted. CanlnvokeMethod returns a value of true, and this code sets the properties to call the CanlnvokeMethod of the business service.

■ Submitted. CanlnvokeMethod returns a value of false, and this code sets the properties to not call the CanlnvokeMethod of the business service.

This code uses the svcMthdName variable to send a value that indicates whether or not Siebel Open UI submitted the record. It sends this value to the code that you define in Step 5.

For information about the methods that this step uses, see "setReturnValue Method" on page 418, "GetFieldValue Method" on page 397, and "callback Method" on page 419.

5 Add the following code immediately after the code you added in Step 4:

pharmacall svc. prototype. invokeMethod = function (psinputArgs) {

var svcMthdName = "";

var psOutArgs = siebelApp.s_App.NewPropertySet() ;

svcMthdName = psinputArgs .GetPropertyC'MethodName") .toStringO ;

if (svcMthdName === "Submit") {

this.SubmitO ;

$.callback(this, function (retobj) {

psoutArgs . SetPropertyC'lnvoked" , true) ;

$.setReturnvalue({err: false, retval : psOutArgs}) ;

});

}

};

This code configures Siebel Open UI to run InvokeMethod on the business service if the svcMthdName variable that you defined in Step 4 contains a value of Submit.

6 Define the method that includes your customization logic. You add the following code

immediately after the code you added in Step 5:

pharmacall svc. prototype. Submit = function () {

var model= siebelApp.S_App.GetModel O ;

var pBusObj = model .GetBusob ect("boName") ;

var pBusComp = pBusObj .GetBusCompC'bcName") ;

var now = new Date();

var strstatusField = pBusComp.GetuserPropertyC'Status Field");

var pickName =

SiebelApp.S_App.GetActiveview() .GetActiveAppletO .GetControl ("Status") . GetPickAppletO ;

pBusComp.SetFieldvalue(strStatusField, "submit", true);

$.callback(this, function (retobj) {

pBusComp.writeRecordO ;

$ . call back(thi s , function (retobj) {

});

});

}

This code defines the Submit method. It sets the value for the Status field to Submitted. It uses the following methods:

■ BusComp. For information, see "BusComp Method for Applets" on page 388.

■ SetFieldValue. For information, see "SetFieldValue Method" on page 404.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ WriteRecord . For more information, see "WriteRecord Method" on page 407.

For more information about how this code uses the callback method, see "Coding Callback Methods" on page 375.

7 Test your modifications:

a Tap Calls on the application banner to display the Calls list.

b Tap a call in the list that you know you have not submitted, and then tap Submit to submit the call.

c Verify that Siebel Open UI does the following :

□ Modifies the call status to Submitted .

□ Locks the call

□ Decreases the sample inventory for the sales representative according to the samples and promotional items that the call dropped off

□ Closes the call.

□ Allows you to review, but not edit the call details.

d Tap a call in the list that you know you have already submitted, and then tap Submit to submit the call.

Make sure Siebel Open UI does not overwrite this call. Make sure it displays a dialog box that describes that you have already submitted this call.

Coding Callback Methods

The code in Step 6 on page 374 is an example of how to code a callback method in an asynchronous environment. For example, it uses the SetFieldValue and the WriteRecord methods, which are asynchronous methods, rather than the SetCommitPending method, which is a synchronous method . A callback method is a type of JavaScript method that Siebel Open UI sends to method A as a property, and then calls this callback method from method A, where A is any JavaScript method.

If you configure Siebel Open UI to call an asynchronous method, then it is recommended that the next line of code that occurs after this call include a callback method. For example, the following code from Step 4 on page 373 uses a callback method to handle the asynchronous GetFieldValue method : pBusComp . GetFi el dVal ue ("Cal l status") ;

$ . cal l back(thi s , functi on (retobj) {

var cal l Status = retob . retval ;

i f (cal l Status ! == "Submi tted") {

For more information, see "GetFieldValue Method" on page 397 and "callback Method" on page 419.

Customizing Siebel Service for Siebel Mobile Disconnected Clients

This topic includes some examples that describe how to customize Siebel Service in Siebel Open UI for a Siebel Mobile disconnected client. It includes the following information :

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A 375

■ "Allowing Users to Commit Part Tracker Records" on page 376

■ "Allowing Users to Return Parts" on page 378

■ "Allowing Users to Set the Activity Status" on page 384

For more information about:

■ Work you do in this topic, see "Process of Customizing Siebel Open UI for Siebel Mobile

Disconnected" on page 355

■ Methods that these examples use, see "Methods You Can Use to Customize Siebel Mobile

Disconnected" on page 387

■ Functionality that these customizations modify, see the chapter that describes how to use the Siebel Mobile Disconnected Application for Siebel Service in Siebel Disconnected Mobile Applications Guide

Allowing Users to Commit Part Tracker Records

The example in this topic describes how to enable the Commit button so that users can commit a Part Tracker record . To set the Commit Flag for a Part Tracker record, the user navigates to the Activities - Part Tracker view, chooses a Part Tracker record, and then clicks Commit. If the part is:

■ Not already committed, then Siebel Open UI commits the part.

■ Already committed, then Siebel Open UI displays a message that the part is already committed .

To allow users to commit Part Tracker records

1 In Windows Explorer, navigate to the following folder:

f 1 ne

2 Copy the servicecommitpartconsumed.js file to the following folder:

C..J£/V7L /OA/£\S EApp\PUBLlc\ Ί anguage_code\f i 1 es\custom\

For more information, see "Organizing Files That You Customize" on page 122.

3 Use a JavaScript editor to open the file you created in Step 2.

4 Locate the following code that resides near the beginning of the file :

i f (typeof (si ebelApp . comm tpartconsumed) === "undefi ned") {

Si ebel JS . amespace ( ' Si ebel App . commi tpartconsumed ' ) ;

5 Add the following code immediately after the code that you located in Step 4:

var i nputArgs = {} ;

var oconsts = Si ebelApp .offl neconstants ;

i nputArgs [oconsts . get("DOUlREG_OBJ_NAME")]= "SHCE Servi ce FS Acti vi ty Part Movements Li st Appl et - Mobi l e" ;

i nputArgs [oconsts . get ("DOUIREG_OB3_TYPE") ] =

oconsts . get("DOUIREG_OB3_TYPEAPPLET") ;

i nputArgs [oconsts . get C"DOUlREG_OBJ_MTHD")]= "Commi tPartMvmtCl ent" ;

376 Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

inputArgs[oconsts.get("DOUlREG_S VC_NAME")]= "comm tpartconsumed" ; i nputArgs [oconsts . get ("DOUlREG_SRVC_MTDH")] = "commi tPartMvmtCl i ent" ;

inputArgs[oconsts.getC"DOUIREG_EXT_TYPE")]= null ;

S ebelApp. s_App.GetModel () . Serv ceRegistry(i nputArgs) ;

This code registers the service. For more information, see "ServiceRegistry Method" on page 411. Add the following CanlnvokeMethod method immediately after the code that you added in Step 5:

commitpartconsumed. prototype. CanlnvokeMethod = function (svc thdName) { if (svcMthdName === "CommitPartMvmtClient") {

return true;

}

else

return Si ebelApp . comm tpartconsumed . supercl ass . CanlnvokeMethod . ca 1 ( thi s , svcMthdName) ;

} ;

This code determines whether or not Siebel Open UI can call a method in the current context of the business component.

Add the following InvokeMethod method immediately after the code that you added in Step 6:

commi tpartconsumed. prototype. invokeMethod = function (svcMthdName, psinpargs) { var psOutArgs = SiebelApp.S_App.NewPropertySet() ;

if (! svcMthdName) {

return (false);

}

if (svcMthdName === "CommitPartMvmtClient") {

psOutArgs = thi s. Commi tPartMvmtCl i ent() ;

}

else {

return Si ebelApp . commi tpartconsumed . supercl ass . InvokeMethod . cal 1 (

thi s , svcMthdName , psinpargs);

}

return (psOutArgs);

} ;

This code calls the CommitPartMvmtClient service method if the user clicks the Commit button. Add the following code immediately after the code that you added in Step 7:

commi tpartconsumed. prototype. CommitPartMvmtClient = function () {

Si ebel 3S.LogC Invoked Comm tPartMvmtClient Method.');

var pServicelnvBC;

var cszCommitFlag;

var pModel ;

pModel = Si ebelApp. S_App. Model ;

var pservicelnvBO = pModel .GetBusObjectC'boName") ;

pServicelnvBC = pServicelnvBO.GetBusCompC'bcName") ;

cszCommitFlag = pServicelnvBC. GetFieldValue("Commit Txn Flag");

if (cszCommitFlag === Ύ'){

Si ebel 3S. Log("Consumed Part is Already in Committed State');

}

else

{

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

Service for Siebel W^ fi^Sm^^^f ri

// pServ celnvBC.Act ateFi el (.("Comm t Txn Flag");

//pServicelnvBC.UpdateRecordC) ;

pServicelnvBC.SetFieldvalueC'Commit Txn Flag", "Y", true);

pServicelnvBC.WriteRecordC) ;

}

};

This code determines whether or not the record is already committed. The Dolnvoke method calls the CommitPartMvmtClient method, and then the CommitPartMvmtClient method examines the value of the Commit Txn Flag field. If this value is:

■ Y. Siebel Open UI has already committed the record and displays a Consumed Part Is Already In Committed State message.

■ N. Siebel Open UI has not committed the record and writes the record to the local database.

For more information about the methods that this code uses, see "GetFieldValue Method" on page 397, "SetFieldValue Method" on page 404, and "WriteRecord Method" on page 407.

Allowing Users to Return Parts

The example in this topic describes how to enable the RMA button so that a user can return a part. To return a part, the user creates a part tracker record, and then clicks the RMA button to create a Return Material Authorization (RMA) record. The work you do to allow a user to return a part is similar to the work you do to allow a user to commit a Part Tracker record. For example, registering the service, calling the Canlnvoke method, Dolnvoke method, and so on.

You add the code that specifies how to do the RMA return in step Step 4 on page 378 through Step 10 on page 383. The rma_return.js file contains this code. To get a copy of this file, see Article ID 1494998.1 on My Oracle Support.

To allow users to return parts

1 In Windows Explorer, navigate to the following folder:

CL J£/V7L/CW£\eappweb\PUBLlC\ Tanguage_code\reTease_number scri pts\si ebel \of f 1 i ne

2 Use a JavaScript editor to open the servicecmtparts.js file.

3 Add the following code to the InvokeMethod method:

var model = SiebelApp.s_App.GetModel () ;

var pBusOb = model .GetBusObject("boName") ;

var pBusComp = pBusOb .GetBusCompC'bcName") ;

This code gets the active business component for the applet that displays the RMA button.

4 Add the following code. This code declares the objects:

if (typeof (SiebelApp.comm tpartconsumed) === "undefined") {

Si ebel JS . Namespace( ' si ebel App . commi tpartconsumed ' ) ;

var inputArgs = {};

var oconsts = siebelApp.Offlineconstants;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

inputArgs[oconsts.getC"DOUlREG_OBJ_NAME")]="SHCE Service FS Activity Part Movements List Applet - Mobile";

i nputArgs [oconsts. get ("DOUlREG_OBJ_TYPE")]=oconsts. getC"DOUIREG_OB3_TYPEAPPLE T") ;

i nputArgs [oconsts. get("DOUlREG_OBJ_MTHD")]="CanlnvokeMethod" ;

i nputArgs [oconsts .get ("DOUlREG_SRvC_NAME")]="commi tpartconsumed" ; i nputArgs [oconsts. getC"DOUlREG_SRVC_MTDH")]="CanlnvokeMethod";

i nputArgs [oconsts. get ("DOUlREG_EXT_TYPE")]=oconsts. get C"DOUlREG_EXT_TYPEPRE")

SiebelApp.s_App.GetModel () .ServiceRegistry(i nputArgs) ;

inputArgs={};

i nputArgs [oconsts. get ("DOUlREG_OB3_NAME")]="SHCE Service FS Activity Part Movements List Applet - Mobile";

i nputArgs [oconsts. get ("DOUIREG_OB3_TYPE")]=OCOnstS. get ("DOUIREG_OBD_TYPEAPPLE T");

i nputArgs [oconsts. get ("DOUIREG_OBJ_MTHD")]="lnvokeMethod";

i nputArgs [oconsts . get ("DOUlREG_SRVC_NAME") ]="commi tpartconsumed" ; i nputArgs [oconsts. get ("DOUIREG_SRVC_MTDH")]="lnvokeMethod" ;

i nputArgs [oconsts . get ("DOUIREG_EXT_TYPE") ] =oconsts . getC"DOUIREG_EXT_TYPEPRE")

SiebelApp.s_App.GetModel () .ServiceReg stry(i nputArgs) ;

inputArgs={} ;

For information about the methods that this code uses, see the following topics:

■ "CanlnvokeMethod Method" on page 388

■ "ServiceRegistry Method" on page 411

■ "InvokeMethod Method for Applets" on page 389

Add the following code. This code calls the CanlnvokeMethod method:

Si ebelApp.commi tpartconsumed = (function () {

function commi tpartconsumed(pm) {

}

var commitObj = new commi tpartconsumed () ;

commi tpartconsumed . prototype . CanlnvokeMethod = function (pslnputArgs) { var psOutArgs = SiebelApp.s_App.NewPropertySet() ;

var svcMthdName = "";

svcMthdName = pslnputArgs .GetPropertyC'MethodName") .toStringO ;

if (svcMthdName === "Commi tPartMvmtClient") {

psOutArgs . SetPropertyC'Invoked" , true) ;

psOutArgs . SetPropertyC'Retval " , true) ;

$.setReturnvalue({err:false, retval :psOutArgs}) ; else if (svcMthdName === "OrderPartsRMA") {

psOutArgs . SetPropertyC'Invoked" , true) ;

psOutArgs . SetPropertyC'Retval " , true) ;

$.setReturnvalue({err:false, retval :psOutArgs}) ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Customizing Siebel Open UI fo r S i e be KM oh He

Service for Siebel Mobile ^' Jsctin'neetemejJgffifeia

else{

psOutArgs.SetPropertyC'lnvoked", false) ;

psOutArgs . SetPropertyC'Retval " , false) ;

$.setReturnvalue({err:false, retval :psOutArgs}) ;

}

};

6 Add the following code. This code calls the InvokeMethod method:

commitpartconsumed. prototype. InvokeMethod = function (psinputArgs) {

var svcMthdName = "";

var psOutArgs = SiebelApp.s_App.NewPropertySet() ;

svcMthdName = psinputArgs .GetPropertyC'MethodName") .toStringO ;

if (svcMthdName === "CommitPartMvmtCl ent") {

thi s . Commi tPartMvmtCl i ent C) ;

$ . cal 1 backCthi s , f uncti on ( retob j ) {

psOutArgs . SetPropertyC'invoked" , true) ;

$.setReturnvalue({err: false, retval : psOutArgs}) ;

});

}

el se{

psOutArgs.SetPropertyC'lnvoked", false) ;

$.setReturnvalue({err:false, retval :psOutArgs}) ;

}

if (svcMthdName === "OrderPartsRMA") {

thi s .OrderPartsRMAO ;

$ . cal 1 back(thi s , f uncti on(retobj) {

psOutArgs . SetPropertyC'invoked" , true) ;

$.setReturnvalue({err:false, retval :psOutArgs}) ;

});

}

else{

psOutArgs . SetPropertyC'invoked" , f al se) ;

$.setReturnvalue({err:false, retval :psOutArgs}) ;

}

};

};

For information about the methods that this code uses, see "setReturnValue Method" on page 418.

7 Add the code that gets values for the following fields:

■ Product Id

■ Product Name

■ Used Quantity

■ Id

■ Status

■ Asset Number

■ Part Number

You add the following code:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

comm tpartconsumed. prototype. createRMAOrder = function (orderType) { var sOrderld;

var cszOrderld;

var sAssetNum;

var sPartNum;

var sStatus;

var sProductld;

var sProductName;

var sQuantity;

var sAct tyPartMvmtlD;

var pModel ;

var pFSActi v tyPartsMovementBC;

var pActionBC;

var sSR_ld;

var pServi ceRequestBC;

var pOrderEntry_OrdersBC;

var pOrderEntry_LineltemBC;

var errParamArray = [] ;

pModel = Si ebelApp. S_App. Model ;

var pBusObj = pModel .GetBusobjectC'boName")

pFSActivityPartsMovementBC=pBusOb .GetBusCompC'bcName") ;

$ . call backCthi s , funct on(retob ) {

sOrderld=retObj . retval ;

if (utils.IsEmpty(sOrderId)){

pFSActi vi tyPartsMovementBC . GetFi el dva ue(" ") ;

var oPsDR_Header : PropertySet = siebelApp. s_.App.NewPropertySetC) ;

// Cannot use the same property set in GetMultipleF e dvalues, mu different

// one for the values. The process will not error, but siebel Open Ul will not place

// the values in the property set.

var lPS_values: PropertySet = SiebelApp. S^pp. NewPropertySetO ;

oPsDR_Header.SetProperty("Product Id","") ;

oPsDR_Header.SetProperty("used Quantity","") ;

oPsDR_Header . SetProperty 'ld" , "") ;

oPsDR_Header .SetProperty("Asset Number" , "") ;

oPsDR_Header.SetProperty("Part Number","") ;

$ . cal 1 backCthi s , functi on(retobj) {

sPartNum=retObj . retval ;

pActionBC =

S ebelApp. S_App. GetActi vevi ew() .GetActi veAppletC) . BusComp() . ParentBuscompC) ; pActionBC. GetFieldValueC'Activity SR Id");

$ . cal 1 backCthi s , functi onCretob ) {

sSR_ld = retobj . retval ;

ifCsSR_ld==""){

//Activity has no associated SR... Hence the operation will be aborted Si ebelApp . S_App .off 1 i neErrorobject . SetErrorMsg C"IDS_ERR_FS_MISSING_ SR", errParamArray);

$.setReturnvalueC{err: "IDS_ERR_FS_MISSING_SR" , retval:""});

return ;

}

});

});

Configuring Siebel Open Ul Version 8.1/8.2, Rev. A 381 Customizing Siebel Open UI for S i e be I M o bil β Ρ §¾ο n;n:e:cte:ai

Service for Siebel Mobile Disconnecteo¾ClijE

}

});

}

For information about the methods that this code uses, see "GetFieldValue Method" on page 397 and "callback Method" on page 419.

8 Add the code that gets the parent business component and the following business components:

■ Service Request

■ Order Entry - Orders

■ Order Entry - Line Items

This code also determines whether or not a service request is not associated with the activity. If not, then it aborts the operation. You add the following code:

else{

pModel = S ebelApp.S_App. Model ;

pServ ceRequestBC = pModel .BusObj ("Serv ce Request") . BusCompC'Service Request") ;

pOrderEntry_OrdersBC = SiebelApp. S_App. odel .GetBusObj ("Service

Request") . BusCompC'Order Entry - Orders");

pOrderEntry_LineltemBC = pModel .BusOb ("Service Request") . BusCompC'Order Entry - Line Items") ;

//CREATE ORDER Header.

pOrderEntry_OrdersBC. ExecuteQueryO ;

$ . cal 1 back (thi s , f uncti on(retOb ) {

9 Add the code that creates the Order Header record and sets the field values. For example, for the Order Type field. You add the following code:

pOrderEntry_ordersBC.NewRecord(true) ;

$ . cal 1 back(thi s , f uncti on ( retob j ) {

sLocaleval = Si ebel App. S_App. Model .GetLovNameval (orderType ,

"FS_ORDER_TYPE") ;

p0rderEntry_0rdersBC.SetFieldvalue("0rder Type", sLocaleval, true);

$ . cal 1 back(thi s , f uncti on ( retob ) {

porderEntry_OrdersBC.wri teRecord() ;

$ . cal 1 back(thi s , f uncti on (retob ) {

p0rderEntry_0rdersBC. GetFieldvalue ("Id") ;

$ . cal 1 back (thi s , f uncti on ( retob j ) {

sOrderltemld=retOb . retval ;

pOrderEntry_ordersBC.GetFieldvalue("ld") ;

$ . cal 1 back (thi s , f uncti on (retobj) {

m_sOrderHeaderld=retObj . retval ;

pOrderEntry_LineItemBC. ExecuteQueryO ;

$ . cal 1 back (thi s , f uncti on ( retob ) {

For information about the methods that this code uses, see "SetFieldValue Method" on page 404, "WriteRecord Method" on page 407, "NewRecord Method" on page 474.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Add the code that creates the order line item record, commits this record, and sets the value for the Order Item Id field in the active business component. This value is the row Id of the order header record that Siebel Open UI creates. This code sets the field value for each of the following fields:

■ Product

■ Quantity Requested

■ Asset #

■ Product Status Code

■ Order Header Id

You add the following code:

pOrderEntry_Li neltemBC. NewRecord (true) ;

$ . cal 1 back(thi s , f uncti on ( retobj ) {

pOrderEntry_LineltemBC.SetFieldvalueC"Product Id", sProductld, true); $ . call back(thi s , f uncti on(retobj) {

pOrderEntry_LineltemBC.SetFieldvalue("Product" , sProductName , true) ; $ . cal 1 back(thi s , f uncti on (retob j ) {

pOrderEntry_Li neltemBC . SetFi el dval ueC'Quanti ty Requested" , sQuanti t y, true);

$ . cal 1 back(thi s , f uncti on( retobj ) {

i f ( ! uti 1 s . IsEmpty (sAssetNum)) {

pOrderEntry_LineltemBC.SetFieldvalue("Asset Number" , sAssetNum, true) ;

$ . cal 1 back (thi s , f uncti on (retobj ) {

});

}

i fC ! uti 1 s . IsEmpty (sPartNum)) {

pOrderEntry_LineltemBC.SetFieldvalue("Part Number", sPartNum, tr ue) ;

$ . cal 1 back (thi s , f uncti on (retobj ) {

});

}

if (!utils.lsEmpty(sStatus)){

pOrderEntry_LineltemBC.SetFieldvalue("Product Status Code", ssta tus, true);

$ . cal 1 back (thi s , f uncti on (retobj) {

});

}

porderEntry_Li neltemBC. Get Fi el dval ue ("id") ;

$ . cal 1 back (thi s , f uncti on (retobj ) {

sOrderltemld=retObj . retval ;

pOrderEntry_LineltemBC.SetFieldValue("Order Header Id", m_sOrder Headend, true);

$ . cal 1 back (thi s , f uncti on (retobj) {

p0rderEntry_LineltemBC.WriteRecord() ;

$ . cal 1 back(thi s , f uncti on ( retobj ) {

pFSActivityPartsMovementBC. SetF el dval ue("Order item Id", so rderltemld, true);

Configuring Siebel Open UI Version 8.1/8.2, Rev. A Customizing Siebel Open UI for Siebel Mob i ΐ elKi s¾S¾n;n:e¾te¾i Ifei!i s't-e'niii M mTenaiieiBHii Service for Siebel Mobile Disconnected ciients¾g¾i

$ . cal 1 backCthi s , f uncti on (retob ) {

pFSActi vi tyParts ovementBC . Wri teReco rd () ;

$ . cal 1 backCthi s , f uncti on(retobj) {

}) ;

}) ;

}) ;

}) ;

}) ;

}) ;

}) ;

}) ;

}) ;

}) ;

11 Save, and then close the servicecmtparts.js file.

12 Test your modifications:

a Log in to the disconnected client,

b Click the Activities tab.

c Create an activity, and then click Part Tracker,

d Create a part tracker record.

e Click the RMA button to create a Return Material Authorization (RMA) record.

f Make sure Siebel Open UI creates the RMA record and displays the correct values in the fields of this record, such as the Product Id, Product Name, Used Quantity, Quantity Requested, Asset #, and so on.

Allowing Users to Set the Activity Status

The example in this topic describes how to enable the activity status so that the user can update this status during the service call life cycle. For example, a field service representative can examine an Activity that is set to Dispatched, set this status to Acknowledged to acknowledge that this representative examined the activity, set the status to EnRoute, travel to the customer site, set it to Arrive, set it to In Progress while working on the service call, and then set it to Finish after finishing the service call. Siebel Open UI includes the following status values:

■ Dispatched

■ Acknowledged

■ Declined

■ En Route

■ Arrive

■ In Progress

■ Hold

■ Resume

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

■ Finish

Siebel Open UI enables and disables the status depending on the current value of the status. For example, if the representative sets the status to Acknowledged, then Siebel Open UI allows the user to choose the EnRoute status and disables all other values.

The work you do to allow a user to set the status is similar to the work you do to allow a user to commit a Part Tracker record. For example, registering the service, and so on. For more information, see "Allowing Users to Commit Part Tracker Records" on page 376.

To allow users to set the activity status

1 In Windows Explorer, navigate to the following folder:

C-.J£/V7L OA/£\eappweb\PUBLlc\ language_ code\ re 7ease_/7tf7?Z;eAsc ri pts\si ebel \offl i ne

2 Use a JavaScript editor to open the serviceactstat.js file.

3 Locate the following code:

servi ceactstat . prototype . lnvokeSetActStatus=f uncti on (psInpArgs , svcMthdName) { var psoutArgs=SiebelApp.S_App.Ne PropertySet() ;

if(!psInpArgs){

return (false);

}

if(psInpArgs. propArray .MethodName=="AcceptStatus")

{psOutArgs=thi s .SetActi vi tyStatus ("Acknowledged") ;

}

el se f(psInpArgs . propArray . ethodName=="Start" | | psInpArgs . propArray .

MethodName=="Arr vedStatus"){psOutArgs=thi s. SetAct vi tyStatus ("in

Progress" , "Arri vedstatus") ;

}

else i f(psInpArgs . propArray . MethodName=="Decl i neStatus") {

psOutArgs=thi s . SetActi vi tyStatus ("Decl i ned") ;

}

else if(psInpArgs. propArray. MethodName=="EnrouteStatus"){

psOutArgs=thi s .SetActi i tyStatus ("In Progress") ;

}

el se i f(psInpArgs . propArray. MethodName=="SuspendStatus") {

psOutArgs=this. SetActi vi tyStatus ("On Hold") ;

}

else if(psInpArgs. propArray. MethodName=="ResumeStatus"){

psOutArgs=this. SetActi vityStatus("ln Progress") ;

}

el se i f(psInpArgs .propArray . MethodName=="End" | | psInpArgs .propArray . MethodName==" Fi ni shedstatus") {

psOutArgs = thi s . SetActivi tyStatus("Done" , "Fi ni shedstatus") ;

}

4 Add the following code immediately after the code you located in Step 3 :

servi ceactstat . prototype . SetActivi tyStatus=functi on (pstatus , pDateMethodlnv) { Si ebelJS. Log C Service Method SetActi vi tyStatus ...') ;

var strstatvalue ;

var pickName;

Config u ring Siebel Open UI Version 8. 1/8.2, Rev. A

var pickListDef;

var pModel ;

var pBusComp;

pModel= SiebelApp.S_App.GetModel() ;

var pBusOb = pModel .GetBusObjectC'boName") ;

pBusComp = pBusOb .GetBusCompC'bcName") ;

Si ebel App . S _^ App . GetActi vevi ew() . GetAct eAppl et () . GetControl ("Status") . GetPi c kAppl et();

$ . cal 1 back (thi s , f uncti on (retob j ) {

pickName = retobj . retval ;

$ . cal 1 back(thi s , f uncti on(retobj) {

pickListDef=retOb . retval ;

pModel =Si ebel App. s_App. Model ;

pModel . GetLovNameval ("Acknowl edged" , pi ckLi stDef . LOVType) ;

$ . call back(thi s , f uncti on (retobj) {

strstatvalue=retOb . retval ;

pBusComp.ActivateFi eld ("Status") ;

$ . cal 1 back(thi s , f uncti on (retobj) {

pBusComp . SetFi el dval ue("Status" , strstatval ue .true) ;

$ . cal 1 back(thi s , f uncti on (retobj) {

});

});

});

});

});

pBusComp . Acti vateFi el d ("Status") ;

$ . cal 1 back(thi s , f uncti on(retobj) {

pBusComp . SetFi el dval ue ("Status" , strstatval ue , t rue) ;

$ . cal 1 back(thi s , f uncti on(retobj) {

});

});

if (pDateMethodlnv!="")//Todo - Refine this condition for uninitialized/defined or remove this condition

{

var no =new Date();

if (pDateMethodlnv == "Arr vedstatus")

{

pBusComp . SetFi el dval ue ("started" , now .true) ;

$. cal lback(this,f uncti on(retObj){

pBusComp. SetFi el dval ue("Done" , "" , true) ;

$ . cal 1 back(thi s , f uncti on ( retob ) {

});

});

}

else if (pDateMethodlnv=="Fini shedstatus")

{

pBusComp.SetFieldValueC'Done" , now, true) ;

$ . call back(thi s , f uncti on (retobj ) {

pBusComp. SetFi el dval ue(" Percent Complete" , "100%" , true) ;

$ . cal 1 back (thi s , f uncti on (retobj ) {

});

});

}

" m Configuring Siebei Open UI Version 8.1/8.2, Rev. A

}

pBusComp .wri teRecordO ;

} ;

For information about the methods that this code uses, see "callback Method" on page 419 and "SetFieldValue Method" on page 404, and "WriteRecord Method" on page 407.

5 Test your modifications :

a Log in to the disconnected client.

b Update the status of an activity.

Make sure Siebel Open UI displays the correct status activity. For example, if you set the status to Acknowledged, then make sure Siebel Open UI allows you to choose the EnRoute status and disables all other values.

Methods You Can Use to Customize

Siebel Mobile Disconnected

This topic describes the methods that exist in the Application Programming Interface that you can use to customize Siebel Mobile Disconnected in Siebel Open UI. It includes the following information :

"Methods You Can Use in the Applet Class" on page 387

"Methods You Can Use in the Business Component Class" on page 390

"Methods You Can Use in the Business Object Class" on page 408

"Methods You Can Use in the Business Service Class" on page 410

"Methods You Can Use in the Application Class" on page 413

"Methods You Can Use in the Model Class" on page 417

"Methods You Can Use in the Service Model Class" on page 418

"Methods You Can Use in Offline Classes" on page 418

■ "Other Methods You Can Use with Siebel Mobile Disconnected" on page 420

You can configure Siebel Open UI to override or customize some of the methods that this topic describes. For more information about how to customize or override a method, see "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" on page 361.

Methods You Can Use in the Applet Class

This topic describes methods that you can use that reside in the Applet class. It includes the following information :

■ "BusComp Method for Applets" on page 388

■ "BusObject Method for Applets" on page 388

■ "CanlnvokeMethod Method" on page 388

Configu ri ng Siebel Open U I Version 8. 1/8.2, Rev. A

■ "InvokeMethod Method for Applets" on page 389

■ "Name Method for Applets" on page 389

BusComp Method for Applets

The BusComp method returns the business component that the applet references. It uses the following syntax:

App let. BusCompO

For example, the following code gets the metadata for the business component that the active applet references:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompO ;

Each applet references a business component. If you configure Siebel Open UI to call BusComp on an applet, then it returns the business component that this applet references.

The BusComp method includes no arguments.

For information about using BusComp in the context of a business object, see "GetBusComp Method for Business Objects" on page 409.

BusObject Method for Applets

The BusObject method returns the business object that the business component references. It uses the following syntax:

Applet. BusObjectO

For example:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusOb j ect () ;

The BusObject method includes no arguments.

CanlnvokeMethod Method

The CanlnvokeMethod method determines whether or not Siebel Open UI can call a method. It returns the following properties. If you use CanlnvokeMethod, then you must configure it so that it returns these properties:

■ Invoked. This property returns one of the following values:

■ true. Siebel Open UI examined the method.

■ false. Siebel Open UI did not examine the method.

■ etVal. This property returns one of the following values:

■ true. Siebel Open UI can call the method.

■ false. Siebel Open UI cannot call the method.

The CanlnvokeMethod method uses the following syntax :

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Appl et . CanlnvokeMethod .methodName)

where:

■ methodName is a string that contains the name of the method that CanlnvokeMethod examines.

CanlnvokeMethod gets this string as a property that resides in an input property set. ^'

For examples that use CanlnvokeMethod, see the following topics:

■ "Using Custom JavaScript Methods" on page 364

■ "Using Custom Siebel Business Services" on page 367

■ "Customizing Siebel Pharma for Siebel Mobile Disconnected Clients" on page 372

■ "Allowing Users to Return Parts" on page 378

InvokeMethod Method for Applets

The InvokeMethod method calls a method. If you use InvokeMethod, then you must configure it so that it returns a property set that includes one of the following values:

■ true. Siebel Open UI called the method.

■ false. Siebel Open UI did not call the method.

It uses the following syntax:

Appl et .InvokeMethod.methodName) ;

where:

■ MethodName is the value of an input property that identifies the method that InvokeMethod calls.

For example, InvokeMethod in the following code calls the method that the value of the

svcMthdName variable contains:

Appl et . InvokeMethod(svcMthdName) ;

For examples that use InvokeMethod, see "Using Custom JavaScript Methods" on page 364 and "Allowing Users to Commit Part Tracker Records" on page 376.

Name Method for Applets

The Name method for an applet returns the name of an applet. It uses the following syntax :

App let. NameO

For example:

Si ebelApp . s _^ App . GetActi eV ewO . GetActi veAppl etO . NameO ;

The Name method includes no arguments.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 389

Customize Siebei Mobile Disconnected

Methods You Can Use in the Business Component Class

This topic describes methods that you can use that reside in the Business Component class. It includes the following information :

■ "ActivateField Method" on page 391

■ "ActivateMultipleFields Method" on page 392

■ "Associate Method" on page 393

■ "ClearToQuery Method" on page 393

■ "CountRecords Method" on page 394

■ "DeactivateFields Method" on page 395

■ "DeleteRecord Method" on page 395

■ "ExecuteQuery Method" on page 395

■ "FirstRecord Method" on page 396

■ "GetAssocBusComp Method" on page 396

■ "GetFieldValue Method" on page 397

■ "GetLinkDef Method" on page 398

■ "GetLastErrCode Method for Business Components" on page 398

■ "GetLastErrText Method for Business Components" on page 399

■ "GetMultipleFieldValues Method" on page 399

■ "GetPicklistBusComp Method" on page 400

■ "GetSearchExpr Method" on page 401

■ "GetSearchSpec Method" on page 401

■ "GetUserProperty Method" on page 402

■ "GetViewMode Method" on page 402

■ "InvokeMethod for Business Components" on page 402

■ "Name Method for Business Components" on page 402

■ "NextRecord Method" on page 403

■ "ParentBusComp Method" on page 403

■ "Pick Method" on page 403

■ "RefreshBusComp Method" on page 403

■ "Refresh Record Method" on page 404

■ "SetFieldValue Method" on page 404

■ "SetMultipleFieldValues Method" on page 404

■ "SetSearchSpec Method" on page 405

Configuring Siebei Open UI Version 8.1/8.2, Rev. A

■ "SetViewMode Method" on page 406

■ "UndoRecord Method" on page 406

■ "UpdateRecord Method" on page 407

■ "WriteRecord Method" on page 407

ActivateFleld Method

The ActivateFleld method activates a business component field. It returns nothing. It uses the following syntax:

this.ActivateField( 7 ^' e7fl?_V7a/77e) ;

bc.ActivateFieldC" fie1d_name"~) ;// calling from another JavaScript file

where:

■ field_name identifies the name of a business component field.

A field is inactive except in the following situations, by default:

■ The field is a system field, such as Id, Created, Created By, Updated, or Updated By.

■ The Force Active property of the field is TRUE.

■ The Link Specification property of the field is TRUE.

■ An active applet includes the field, and this applet references a business component that is active.

■ The field resides in an active list applet, and the Show In List property of the list column that displays this field in the applet is TRUE.

Note the following:

■ Siebel CRM calls the ActivateFleld method on the field, and then runs the ExecuteQuery method.

■ If Siebel CRM calls the ActivateFleld method after it calls the ExecuteQuery method, then the ActivateField method deletes the query context.

■ The ActivateField method causes Siebel CRM to include the field in the SQL statement that the ExecuteQuery method starts. If Siebel CRM activates a field, and if a statement in the

GetFieldValue method or the SetFieldValue method references the file before Siebel CRM performs a statement from the ExecuteQuery method, then the activation has no effect.

Example

The following example uses the ActivateField method to activate the Login Name field that resides in the Contact business component:

var model= SiebelApp. s_App.GetModel O ;

var boContact = model .GetBusObjectC'Contact") ;

var bcContact = boContact. GetBusCompC'Contact") ;

bcContact.ClearroQueryO ;

bcContact. ActivateField("Login Name") ;

var sLoginName = "SPORTE " ;

bcContact. SetSearchSpecC'Login Name", sLoginName);

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 391

bcContact . ExecuteQueryO ;

$.callback(this , function () {

if (! retobj .err) {

model . ReleaseBO(boContact) ;

}

}

ActivateMultipleFields Method

The ActivateMultipleFields method activates more than one field. It returns nothing. It uses the following syntax:

BusComp . Acti vate ul ti pi eFi el ds(Si ebel PropertySet) ;

where:

■ Si ebel PropertySet is a property set that identifies a collection of properties. These properties identify the fields that Siebei CRM must activate.

Example 1

The following example uses the ActivateMultipleFields method to activate all the fields that the property set contains, including the Account Products, Agreement Name, Project Name, Description, and Name fields:

var ps = SiebelApp.s_App.NewPropertySet() ;

ps.setPropertyC'Account Products","") ;

ps .setPropertyC'Agreement Name" , "") ;

ps.setProperty("Project Name" ,"") ;

ps .setProperty ("Description" , "") ;

ps . setProperty ("Name" , " ") ;

BusComp . Acti vateMul ti pi eFi el ds (ps) ;

Example 2

The following example in Siebei eScript queries the Contact business component and returns the First Name and Last Name of the first contact that it finds:

var model= SiebelApp.s_App.GetModel () ;

var ContactBC = model .GetBusObjectC'Contact") ;

var ContactBC = boContact.GetBuscompC'Contact") ;

if (ContactBC)

{

var fieldsPS = SiebelApp.S_App.Ne PropertySet() ;

var valuesPS = SiebelApp.s_App.NewPropertySet() ;

fieldsPS. SetProperty("Last Name", "");

f i el dsPS. SetProperty ("First Name", "");

ContactBC . Acti vateMul ti pi eFi el ds (f i el dsPS) ;

ContactBC . ClearToQueryO ;

ContactBC .ExecuteQueryO;

$. call back (this, function () {

if ( ! retobj . err) {

ContactBC . Fi rstRecordO ;

$.callback(this, function () {

Configuring Siebei Open UI Version 8.1/8.2, Rev. A

if ( ! retObj . err) {

ContactBC .GetMultipleFieldvaluesCfieldsPS, valuesPS);

var si Name = valuesPS.GetPropertyC'Last Name");

var sfName = valuesPS. GetPropertyC'Fi rst Name");

}

}

}

}

Associate Method

The Associate method adds an association between the active record that resides in the child association business component and the parent business component. You can customize or override this method. It returns the retObj object with err set to one of the following values:

■ true. The Associate method successfully added the record.

■ false. The Associate method did not successfully add the record.

It uses the following syntax:

BusComp. AssociateC)

where:

■ BusComp identifies an instance of the child business component.

For example:

SiebelApp.S_App. FindApplet(appletName) . BusComp () .Assoc ateC) ;

It includes no arguments.

An association business component is a type of business component that includes an intertable. For more information, see "GetAssocBusComp Method" on page 396.

ClearToQuery Method

The ClearToQuery method clears the current query. It returns nothing. It uses the following syntax:

BusComp. ClearToQuery C) ;

It includes no arguments.

Note the following:

■ The ClearToQuery method does not clear the sort specification that Siebel Open UI defines in the Sort Specification property of a business component.

■ You must use the ActivateField method to activate a field before you can use the ClearToQuery method. For more information see "ActivateField Method" on page 391.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 393

Customize Siebel Mobile Disconnected

■ Any search specifications and sort specifications that Siebel Open UI sends to a business

component are cumulative. The business component performs an AND operation for the queries that accumulate since the last time Siebel CRM performed the ClearToQuery method. An exception to this configuration occurs if Siebel Open UI adds a new search specification to a field, and if this field already includes a search specification. In this situation, the new search specification replaces the old search specification.

Example

The following example uses the ClearToQuery method:

var model= S ebel App . S_App . Get odel O ;

var oEmpBusObj= model .GetBusObject("Emp1oyee") ;

var oEmpBusComp = oEmpBusOb .GetBusCompC'Employee ") ;

var sLoginName;

oEmpBusComp.clearToQueryO ;

oEmpBusComp.SetSearchspecC'Login Name", sLog nName) ;

oEmpBusComp. ExecuteQueryO ;

For another example usage of the ClearToQuery method, see "CountRecords Method" on page 394.

CountRecords Method

The CountRecords method returns the number of records that a business component contains according to the search specification and query specification that Siebel Open UI runs on this business component. It uses the following syntax:

BusComp.CountRecordsQ ;

It includes no arguments.

Example

The following example uses the CountRecords method:

var model= Si ebel App. S_App. GetModel O ;

var bo = model .GetBusObject("Opportunity ") ;

var be = bo.GetBusComp("Opportunity") ;

if (be)

{

be . ClearToQuery (J ;

be .Setsearchspec ("Name", "A");

be .ExecuteQueryO;

$.callback(th s, function () {

if ( ! retobj . err) {

var count = be .CountRecordsO ;

$.setReturnvalue({err:false, ret al :count}) ;

}

}

}

For more information, see "ClearToQuery Method" on page 393.

394 Configuring Siebel Open UI Version 8.1/8.2, Rev. A

DeactivateFields Method

The DeactivateFields method deactivates fields from the SQL query statement of a business component. It deactivates fields that are currently active. DeactivateFields applies this behavior except in the following situations:

B The Force Active property is TRUE.

■ A link requires the field to remain active.

■ A business component class requires the field to remain active.

The DeactivateFields method returns nothing.

It uses the following syntax:

BusComp . Deact vateF el ds C)

For example:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompO · Deacti vate Fi el ds () ;

It includes no arguments.

You must use the ActivateField method to activate a field before you configure Siebel Open UI to perform a query for a business component. After Siebel Open UI deactivates a field, you must configure it to query the business component again or the Siebel application fails.

DeleteRecord Method

The DeleteRecord method deletes the current record from the local database. It returns one of the following values:

■ erronfalse. DeleteRecord deleted the record.

■ errontrue. DeleteRecord did not delete the record.

It uses the following syntax:

buscomp . Del ete ecord (pslnputArgs) ;

ExecuteQuery Method

The ExecuteQuery method runs a query according to the current value of the Search Specification property, the current value of the Sort Specification property, or according to both of these properties. The business component contains these properties. ExecuteQuery runs this query on the local database. It returns one of the following values:

■ If an error occurs, then it returns err with an error message. For example:

{err : " Error Message" , retval : " " }

■ If an error does not occur, then it returns an empty err message. For example:

{err : "" , retval : ""}

It uses the following syntax:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A jfc§R9

Customize Siebel Mobile Disconnected

busComp . ExecuteQuery () ;

where:

busComp identifies the business component that ExecuteQuery uses to get the search specification or sort specification. You can use busComp as a literal or a variable. For more information, see "How This Book Indicates Code That You Can Use as a Variable and Literal" page 31.

First Record Method

The FirstRecord method moves the record pointer to the first record in a business component, making this record the current record. It uses the following syntax:

BusComp . Fi rstRecord O ;

For example:

Si ebelApp . S_App . Fi ndAppl et(appl etName) . BusCompO . Fi rstRecordO I

GetAssocBusComp Method

The GetAssocBusComp method returns an instance of the association business component. It uses the following syntax:

BusComp . GetAssocBusCompO ;

It includes no arguments.

For more information, see "Associate Method" on page 393.

You can use an association business component to manipulate an association. You can use the GetAssocBusComp method and the Associate method only with a many-to-many relationship that uses an intersection table. For example, with accounts and contacts.

Note the following :

■ To associate a new record, you add it to the child business component.

■ To add a record, you use the GetAssocBusComp method and the Associate method.

If a many-to-many link exists, and if Siebel CRM defines an association applet for the child applet, then you can use the GetAssocBusComp method with the child business component of a parent-child view.

Example of Using the GetAssocBusComp Method

The following example associates a contact that includes the ContactID Id with an account that includes the Accountld Id :

var Model = s ebelApp . s_App . GetModel O

var account BO = Model . GetBusObj ("Account") ;

var accountBC = accountBO. GetBusCompC'Account") ;

var contactBC = accountBO. GetBusCompC'Contact") ;

accountBC . SetSearchSpec C"id" , [Accountld] ) ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

accountBC. ExecuteQuery C) ;

$ . call backCthi s , f uncti on() {

accountBC. F rstRecordC) ;// positions on the account record

$. call backCth s , f uncti on () {

contactBC. ExecuteQuery () ;

$ . cal 1 backCthi s , f uncti on C) {

contactBC. Fi rstRecordC) I

$ . cal 1 backCthi s , f uncti onO {

var assocBC = contactBC. GetAssocBusCompO ;

assocBC . SetSearchSpecC'Id" , [ContactlD] ) ;

assocBC. ExecuteQuery O ;

$ . cal 1 backCthi s , f uncti onO {

assocBC. F rstRecordC) ;// positions on the contactbc

$ . cal 1 backCthi s , f uncti onC) {

contactBC. AssociateC)// adds the association

})

})

})

});

});

});

GetFieldValue Method

The GetFieldValue method returns the value of a field for the current record or for the record object that Siebel Open UI examines. It uses the following syntax:

Buscomp . GetFi el dval ue C" fie Td_name" , pRecord)

where:

■ field_name is a string that contains the name of a field. Siebel Open UI returns the value that this field contains.

■ pRecord is an optional argument that returns the entire record that Siebel Open UI examines. If you do not specify pRecord, or if it is empty, then GetFieldValue returns only a value in field_name of the active record.

For example, the following code returns the value of the Account Name field from the current record of the business component:

Buscomp . GetFi el dval ue C'Account Name")

For another example, the following code returns the field value of the Account Name field. A business component can include more than one record, but only one of these records is the active record. You can use pRecord to get the value of a field from a record that is not the active record:

Buscomp. GetFieldValueC'Account Name" , recordobject)

The GetFieldValue method returns an object that includes an error code and a return value. For more information, see "Configuring Error Messages for Disconnected Clients" on page 369 and "SetErrorMsg Method" on page 420.

For more examples that use the GetFieldValue method, see the following topics:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 397

Customize Siebe : 0P¾ ^is ^Te:eirejB

■ "Customizing Siebel Pharma for Siebel Mobile Disconnected Clients" on page 372

■ "Allowing Users to Commit Part Tracker Records" on page 376

■ "Allowing Users to Return Parts" on page 378

You can configure Siebel Open UI to override the GetFieldValue method. GetLinkDef Method

The GetLinkDef method returns the link definition of the child business component. This business component is the child in the parent and child relationship of a link. It returns this definition after Siebel Open UI processes data for the child business component. This definition includes values for the following properties :

■ Name

■ RecordNum

■ childBusCompName

■ destFieldName

■ interChildColName

■ interParentColName

■ interTableName

■ parentBusCompName

■ primeldFieldName

■ searchSpec

■ sortSpec

■ srcFieldName

■ NoDelete

■ Nolnsert

■ NointerDelete

■ NoUpdate

■ SrcFieldValue

If the value of a property is empty, then GetLinkDef does not return this property in the return object.

The GetLinkDef method uses the following syntax:

li nkdef = busComp . GetLi nkDef O ;

var sourcefi el dName = l i nkdef . srcF el dName ;

GetLastErrCode Method for Business Components

The GetLastErrCode method returns the error code for the most recent error that the disco client logged. It uses the following syntax :

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

BusComp. Get LastE rrCode ()

For example:

Si ebel App . s_App . Fi ndAppl et (appl etName) . BusComp () . GetLastErrCode () ;

This method includes no arguments.

The error code that this method returns is a short integer. An error code of 0 (zero) indicates no error occurred.

GetLastErrText Method for Business Components

The GetLastErrText method returns a string that contains the text message for the most recent error that the disconnected client logged. It uses the following syntax:

BusComp. GetLastE rrText O

For example:

Acti eBusObjectO .GetLastErrrextO ;

This method includes no arguments.

GetMultipleFieldValues Method

The GetMultipleFieldValues method returns a value for each field that a property set specifies. It uses the following syntax:

BusComp . GetMul ti pi eF el dval ues (f i el dNamesPropSet , f el dval uesPropSet)

where:

■ fi el dNamesPropSet is a property set that identifies a collection of fields.

■ fieldvaluesPropSet is a property set that includes values for the fields that the

fieldNamesPropSet argument specifies.

If an error occurs, then GetMultipleFieldValues returns err with an error message. For example:

{err: " Error Message" , retval : ""}

If an error does not occur, then GetMultipleFieldValues returns an empty err message. For example:

{err: "", retval : ""}

You cannot use the same instance of a property set for the fieldNamesPropSet argument and for the fieldvaluesPropSet argument.

Example of Using the GetMultipleFieldValues Method

The following example uses the GetMultipleFieldValues method:

var oPsD _Header = SiebelApp.s_App.NewPropertySet() ;

// Cannot use the same property set in GetMult pleF eldValues, must use a different // one for the values. The process will not error, but Si ebel Open ui will not place

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 399 Customizing Siebel Open UI for Siebel

Customize Siebel Mobile Disconnected

// the values in the property set.

var lPS_values = siebelApp.S_App.NewPropertySet() ;

oPsDR_Header.SetProperty("Last Name","");

oPsDR_Header.SetPropertyC" First Name","") ;

oPsDR_Header.SetProperty("Middle Name","") ;

var model= SiebelApp.S_App.GetModel () ;

var boContact = model .GetBusObject("Contact") ;

var bcContact = boContact. GetBusCompC'contact") ;

bcContact .ActivateMul ti pi eFi el ds (oPsDR_Header) ;

bcContact.SetSearchSpec("Last Name", "Mead*");

ExecuteQueryC) ;

$ . cal 1 back(thi s , functi on() {

Fi rstRecordO ;

$.callback(this,functionC){

// use a different property set for the values, if you use the same one

// for arguments you get no values back.

GetMultipleFieldvalues(oPsDR_Header, l S_values) ;

// Get the value from the output property set.

$ . cal 1 back(thi s , functi on () {

SiebelDS. LogC'FullName is " +1 S_values .GetPropertyC'Fi rst Name") + lPS_values.GetProperty("Middle Name")+ 1 PS_values .GetPropertyC'Last Name"));

});

});

});

GetPicklistBusComp Method

The GetPicklistBusComp method returns a pick business component that Siebel CRM associates with a field that resides in the current business component. If no picklist is associated with this field, then this method returns an error. It uses the following syntax:

BusComp . GetPi ck i stBusComp(Fi el dName)

You can use the GetPicklistBusComp method to manipulate a picklist, and you can use the name of the pick business component that the GetPicklistBusComp method returns.

How Siebel Open UI Uses the GetPickListBusComp Method With Constrained Picklists

If Siebel CRM uses the GetPickListBusComp method or the Pick method to pick a record that resides in a constrained picklist, then the constraint is active. The pick business component that these methods return contains only the records that meet the constraint.

Configuring Siebel Open UI to Pick a Value from a Picklist

This topic describes how to configure Siebel Open UI to pick a value from a picklist. To configure Siebel Open UI to pick a value from a picklist

1 Use a JavaScript editor to open the JavaScript file that you must modify. This file resides on the client.

400 I Configuring Siebel Open UI Version 8.1/8.2, Rev. A

2 Add code that uses the Pick method to pick the value.

For example, add the following code to the method that Siebel Open UI uses to register the service:

thi s . GetFi el dval ue ("Ci ty")

$ . cal 1 back (thi s , f uncti on (retOb j ) {

i f (retob . retval === "San Mateo")

{

var oBCPi ck = thi s . GetPi ckl i stBusCompC'State") ;

oBCPi ck . SetSearchSpecC'Val ue" , "CA") ;

oBCPi ck . ExecuteQuery (ForwardOnl y) ;

$ . cal 1 back(thi s , f uncti on () {

oBCPi ck . Fi rstRecordO ;

$ . cal 1 back(thi s , f uncti on() {

i f (oBCPi ck . CheckActi veRowO) {

oBCPi ck . Pi ckO ;

}

}) ;

}) ;

}

This code configures Siebel Open UI to use the GetPicklistBusComp method to create an instance of the picklist business component. For more information, see "Pick Method" on page 403.

GetSearchExpr Method

The GetSearchExpr method returns a string that contains the current search expression that Siebel Open UI defines for a business component. The following search expression is an example of a string that GetSearchExpr might return :

[Revenue] > 10000 AND [Probabi l i ty] > . 5

The GetSearchExpr method uses the following syntax:

BusComp . GetSearchExprC) ;

For example:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompO . GetSearchExpr () ;

The GetSearchExpr method includes no arguments.

If an instance of the business, component does not exist, then the GetSearchExpr method returns nothing.

GetSearchSpec Method

The GetSearchSpec method returns a string that contains the search specification that Siebel Open UI defines for a business component field in. For example, it might return the following search specification :

> 10000

The GetSearchSpec method uses the following syntax:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 401

Customize Siebel Mobile Disconnected ^ ^ ^

BusComp . GetSearchSpec(Fi el dName) ;

For example:

S ebelApp . s_App . Fi ndAppl et (appl etName) . BusCompC) . GetSearchSpec (Fi el dName) ;

GetUserProperty Method

The GetUserProperty method gets the value of a business component user property. It uses the following syntax:

BusComp . GetUserProperty {business_component_user_property)

where:

■ business_component_user_property is a string that identifies the name of a business component user property.

For example, the following code gets the value of the Deep Copy business component user property:

Si ebelApp . S_App . Fi ndAppl et (appl etName) . BusCompO . GetUserProperty ("Deep Copy") ;

GetViewMode Method

The GetViewMode method returns a Siebel ViewMode constant or the corresponding integer value for this constant. This constant identifies the current visibility mode of a business component. This mode determines the records that a query returns according to the visibility rules.

The GetViewMode method uses the following syntax:

BusComp . Getvi ewModeO

It includes no arguments.

For example:

Si ebelApp . S_App . Fi ndAppl et (appl etName) . BusCompC) . Getv ewModeO ;

InvokeMethod for Business Components

The InvokeMethod method that you can use with business components works the same as the InvokeMethod method that you can use with applets. For more information about the InvokeMethod method that you can use with applets, see "InvokeMethod Method for Applets" on page 389.

Name Method for Business Components

The Name method returns the name of a business component. It uses the following syntax:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompC)

It includes no arguments.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

NextRecord Method

The NextRecord method moves the record pointer to the next record that the business component contains, making this next record the current record. It adds the next record that the current search specification and sort specification identifies, and then sets the active row to this record . It adds this record to the current set of records. It does this work only if the current set of records does not already contain this next record. It returns this next record. It uses the following syntax :

Buscomp. NextRecord O

For example:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompO . NextRecord O ;

It includes no arguments.

ParentBusComp Method

The ParentBusComp method returns the parent business component of a business component. It uses the following syntax :

BusComp . ParentBusCompO

It includes no arguments.

For example :

S ebel App . s_App . F ndAppl et (appl etName) . BusCompO . arentBuscomp Q

Pick Method

The Pick method places the currently chosen record that resides in a pick business component into the appropriate fields of the parent business component. It uses the following syntax :

BusComp . p ck()

The Pick method includes no arguments.

You cannot use the Pick method to modify the record in a picklist field that is read-only.

For usage information, see "Configuring Siebel Open UI to Pick a Value from a Picklist" on page 400. For more information about pick business component, see Configuring Siebel Business Applications.

RefreshBusComp Method

The RefreshBusComp method runs the current query again for a business component and makes the record that was previously active the active record . The user can view the updated view, but the same record remains highlighted in the same position in the list applet. This method returns nothing .

It uses the following syntax :

BusComp . Invoke ethod ("RefreshBusComp")

For example :

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customize Siebel Mobile Disconnected

"buscomp. invokeMethodC'Ref reshBusComp") $.callback(th s, function (retobj) { if (! retobj. err) {}});"

It includes no arguments.

RefreshRecord Method

The RefreshRecord method updates the currently highlighted record and the business component fields in the Siebel client. It positions the cursor on the highlighted record. It does not update other records that are currently available in the client. This method returns nothing.

It uses the following syntax:

BusComp. InvokeMethodC'Ref reshRecord ")

For example:

"buscomp. InvokeMethodC'Ref reshRecord") $. call back (th s, function (retobj) { if (! retobj. err) {}});"

It includes no arguments.

SetFieldValue Method

The SetFieldValue method sets a field value in a record. It returns one of the following values depending on whether it successfully set the field value:

■ Successfully set the field value. Returns an empty error code.

■ Did not successfully set the field value. Returns an error code.

It uses following syntax.

SetFi el dval ue ( fie IdName, fie TdVa lue) ;

where:

■ fieldName is a string that contains the name of the field that SetFieldValue updates.

■ fieldValue is a string that contains the value that SetFieldValue uses to update the field.

For examples that use the SetFieldValue method, see the following topics:

■ "Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence" on page 359

■ "Customizing Siebel Pharma for Siebel Mobile Disconnected Clients" on page 372

■ "Allowing Users to Commit Part Tracker Records" on page 376

■ "Allowing Users to Return Parts" on page 378

■ "Allowing Users to Set the Activity Status" on page 384

SetMultipleFieldValues Method

The SetMultipleFieldValues method sets new values in the fields of the current record of a business component. It uses the following syntax:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Del Mobile Disconnected■ Methods You Can Use to

, . Customize Siebel Mobile Disconnected

BusComp . SetMul ti pi eFi el dval ues (oPropertySet)

The FieldName argument that the property set contains must match the field name that Siebel Tools displays. This match must be exact, including upper and lower case characters.

In the following example, the FieldName is Name and the FieldValue is Acme:

oPropertySet . SetProperty ("Name" , "Acme")

Note the following:

■ If an error occurs in the values of any of fields that the property set specifies, then Siebel Open UI stops the process it is currently running.

■ You can use the SetMultipleFieldValues method only on a field that is active.

■ You must not use the SetMultipleFieldValues method on a field that uses a picklist.

Example

The following example in Siebel eScript uses the SetMultipleFieldValues method to set the values for all fields that the property set identifies, including the Name, Account, and Sales Stage:

var model = Si ebelApp . S_App . GetModel O ;

var bo = model . GetBusObj ("Opportuni ty") ;

var be = bo . GetBusCompC'Opportuni ty") ;

var ps = Si ebelApp . S_App . NewPropertySetO ;

ps . SetProperty ("Name" , "Cal l Center Opportun ty") ;

ps . SetProperty ("Account" , "Marri ott internati onal ") ;

ps . SetProperty ("Sal es Stage" , "2-Qual i fi ed") ;

be . Acti vateMul ti pi eFi el ds (ps) ;

be . NewRecordO ;

$ . cal 1 back (thi s , f uncti on () {

be . SetMul ti pi eFi el dval ues (ps) ;

$ . cal 1 back(thi s , f uncti on () {

ps = nul 1 ;

c .wri teRecord ;

SetSearchSpec Method

The SetSearchSpec method sets the search specification for a business component. It returns nothing. It uses the following syntax:

BusComp . SetSearchSpec( 7 ^' e7i va 77e, searchSpec ;

For example:

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompO . SetSearchSpec ("Id" , st real 1 Id) ; where:

■ FieldName is a string that identifies the name of the field where Siebel Open UI sets the search specification.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 405

■ searchSpec is a string that contains the search specification .

You must configure Siebel Open UI to call the SetSearchSpec method before it calls the ExecuteQuery method. To avoid an unexpected compound search specification on a business component, it is recommended that you configure Siebel Open UI to call the ClearToQuery method before it calls the SetSearchSpec method .

SetViewMode Method

The SetViewMode method sets the visibility type for a business component. It returns nothing . It uses the following syntax :

BusComp. SetV ewMode(inMode) ;

where:

■ i nMode identifies the view mode. It contains one of the following integers:

■ 0. Sales Representative.

■ 1. Manager.

■ 2. Personal .

■ 3. All .

■ 4. None.

■ 5. Organization.

■ 6. Contact.

For example :

Si ebel App . S_App . Fi ndAppl et (appl etName) . BusCompO . Setvi ewMode (i nMode) ;

UndoRecord Method

The UndoRecord method reverses any unsaved modifications that the user makes on a record. This includes reversing unsaved modifications to fields, and deleting an active record that is not saved . It returns one of the following values:

■ true. UndoRecord successfully deleted the record.

■ false. UndoRecord did not successfully delete the record.

It uses the following syntax :

BusComp . undo ecord O ;

It includes no arguments.

For example:

S ebel App . S _^ App . Fi ndAppl et (appl etName) . BusComp C) . UndoRecord O ;

You can use the UndoRecord method in the following ways :

406 Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

To delete a new record. Use it after Siebel CRM calls the NewRecord method and before it saves the new record to the Siebel database.

To reverse modifications that the user makes to field values. Use it before Siebel CRM uses the WriteRecord method to save these changes, or before the user steps off the record.

UpdateRecord Method

The UpdateRecord method places the current record in the commit pending state so that Siebel Open UI can modify it. It returns the retObj object with retVal set to one of the following values:

■ true. The UpdateRecord method successfully placed the current record in the commit pending state.

■ false. The UpdateRecord method did not successfully place the current record in the commit pending state.

It uses the following syntax:

th s . updateRecordO ;

where:

■ thi s identifies a business component instance.

For example, the following code calls the CanUpdate method. If CanUpdate indicates that Siebel Open UI can update the active row, then this code places the current record in the commit pending state for the business component that thi s specifies:

thi s . updateRecord(fal se)

The UpdateRecord method can run in a Siebel Mobile disconnected client.

For more information, see "CanUpdate Method" on page 439.

WriteRecord Method

The WriteRecord method writes any modifications that the user makes to the current record. If you use this method with:

■ A connected client. WriteRecord writes these modifications to the Siebel Database that resides on the Siebel Server.

■ Siebel Mobile disconnected. WriteRecord writes these modifications to the local database that resides on the client.

The WriteRecord method returns one of the following values:

■ error:false. WriteRecord successfully wrote the modifications to the local database.

■ errontrue. WriteRecord did not successfully write the modifications to the local database. The WriteRecord method uses the following syntax :

buscomp . ri te record (bAddSyncQ)

where:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Customize Siebel Mobile Disconnected

■ bAddSyncQ is an optional argument that specifies to synchronize the modification that

WriteRecord makes to the Siebel Server. You can set this argument to one of the following values:

■ true. Siebel Open UI synchronizes the modification. This is the default setting.

■ false. Siebel Open UI does not synchronize the modification.

For examples that use the WriteRecord method, see the following topics:

■ "Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence" on page 359

■ "Customizing Predefined Business Components" on page 361

■ "Customizing Siebel Pharma for Siebel Mobile Disconnected Clients" on page 372

■ "Allowing Users to Commit Part Tracker Records" on page 376

Example

You must first configure Siebel Open UI to create new records and set values for fields. You can then use the following code to call the WriteRecord method to save the new record to the offline database: var model = S ebelApp. S_App .GetModel () ;

var bo = model .GetBusObject("Opportunity ");

var be = bo.GetBusComp("Opportunity") ;

var strDEANumber = 9089;

var strDEAExpDate = 02/12/2013;

bc.SetFieldValue("DEA#" , strDEANumber) ;

$. call back (this, function O {

if (! retobj .err) {

bc.SetFieldValueC'DEA Expiry Date", strDEAExpDate);

$.callback(this, function () {

if (! retob .err) {

bc.SetFieldValueC'DEA Expiry Date", strDEAExpDate);

$.callback(this, function () {

if (! retobj .err) {

bc.writeRecordO ;

}

}

}

}

Methods You Can Use in the Business Object Class

This topic describes methods that you can use that reside in the Business Object class. It includes the following information:

■ "GetBusComp Method for Business Objects" on page 409

■ "GetLastErrCode Method for Business Objects" on page 409

■ "GetLastErrText Method for Business Objects" on page 409

■ "Name Method for Business Objects" on page 410

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

GetBusComp Method for Business Objects

The GetBusComp method returns the business component instance that a business object references. It uses the following syntax :

S ebel App . S_App . odel . GetBusObj .business_objecf) . Gex.RusComp(.business_component) where :

■ business_object identifies the name of a business object.

■ business_component identifies the name of a business component.

Each view references a business object, and each business object references one or more business components. If you configure Siebel Open UI to call GetBusComp in the context of a business object, then you must do the following :

■ use the business_object argument to specify the name of the business object that the view references.

■ use the buslness_component argument to specify the name of a business component that the business object references.

For example, the following code gets the business component instance for the Order Entry - Orders business component that the Service Request business object references :

Si ebel App . s_App . Model . GetBusOb ("Se rvi ceRequest") . GetBusCompC'Orde r Ent ry - Orders ")

For information about using BusComp in the context of an applet, see "BusComp Method for Applets" on page 388. For more information about views, business objects, and business components, and how they reference each other, see Configuring Siebel Business Applications.

GetLastErrCode Method for Business Objects

The GetLastErrCode method returns the error code for the most recent error that the disconnected client logged. It uses the following syntax :

BusObj. GetLastE rrCode ()

For example :

Acti veBusObj ect O . GetLastErrCode O ;

This method includes no arguments.

The error code that this method returns is a short integer. An error code of 0 (zero) indicates no error occurred.

GetLastErrText Method for Business Objects

The GetLastErrText method returns a string that contains the text message for the most recent error that the disconnected client logged . It uses the following syntax :

BusObj. GetLastE rrText Q

For example:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A

ActiveBusObjectO . GetLastErrText Q ;

This method includes no arguments.

Name Method for Business Objects

The Name method returns the name of a business object. It uses the following syntax:

Busob ect . NameO ;

This method includes no arguments.

Methods You Can Use in the Business Service Class

This topic describes methods that you can use that reside in the Business Service class. It includes the following information :

■ "Invoke Method for Business Services" on page 410

■ "ServiceRegistry Method" on page 411

Invoke Method for Business Services

The Invoke method that you can use with a business service calls the CanlnvokeMethod business service and the InvokeMethod business service. It returns a property set. It uses following syntax : serv ce . invoke Qmet io Lname, psPropertySet) ;

where:

■ method_name is a string that identifies the business service method that the Invoke method calls. The Invoke method also calls the following methods:

■ CanlnvokeMethod. Determines whether or not Siebel Open UI can call the business service method that method_name identifies. Any custom business service file you create must include the CanlnvokeMethod business service method.

■ InvokeMethod. Calls the business service method that method_name identifies. Any custom business service file you create must include the InvokeMethod business service method.

For more information about using these methods, see "Using Siebel Business Services or JavaScript Services to Customize Siebel CRM Objects" on page 361.

■ psPropertySet is a property set that the Invoke method sends to the method that method_name identifies.

The following example calls the CanAddSample method of the LS Pharma Validation Service business service:

var servi ce = si ebelApp . S_App . GetServi ce("LS Pharma Val i dati on Servi ce") ;

var outputset = servi ce . Invoke ("CanAddSampl e" , psPropertySet) ;

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Si bel Mobile Disconnected Methods You Can Use to

Customize Siebel Mobile Disconnected

For an example that uses the Invoke method with a business service, see "Using Custom Siebel Business Services" on page 367.

ServiceRegistry Method

The ServiceRegistry method registers a custom business service method that you define. You must use it any time that you configure Siebel Open UI to call a custom business service method. It returns one of the following values:

■ true. Siebel Open UI successfully registered the method.

■ false. Siebel Open UI did not successfully register the method.

It uses following syntax:

S ebelApp . s_App . GetModel Q . Servi ceRegi stry(i nputObj) ;

where:

■ i nputob is an object that specifies a set of properties, where each property specifies a name and a value. The number of properties varies according to object type. For a list of properties that you can use, see "Properties You Must Include to Register Custom Business Services" on page 412. The inputObj argument uses the following syntax :

i nputobj [oconsts . get C'wame") ] = " va lue" ;

where:

■ name specifies the property name

■ value specifies the property value

For example, the following code specifies the D0UIREG_0B3_NAME property with a value of Pharma Call Entry Mobile:

i nputobj [oconsts . get("DOUlREG_OBJ_NAME ") ] = "Pharma cal l Entry Mobi l e" ;

The following code specifies the property name:

OCOnstS.get("DOUIREG_OB3_NAME")

Siebel Open UI registers a method for a custom service when it loads the script files that it uses for this custom service. This configuration makes sure that Siebel Open UI calls the ServiceRegistry method from the correct location in the code. To view this code in the context of a complete example, see "Using Custom JavaScript Methods" on page 364.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A I 41 1 Customizing Siebel¾p en (3DS (Six? SQGit sO KlGDQfl}© ®υ¾35 )00θ@0®3

Customize SierXeitlffi

Properties You Must Include to Register Custom Business Services

Table 24 describes the properties that you must include in the inputObj argument of the

ServiceRegistry method when Siebel Open UI registers a custom business service. The local constants.js file defines each of these properties as a constant.

Table 24. Properties You Must Include to Register Custom Business Services

Properties Value

j DOUIREG_OBJ_NAME The name of a custom business service. For example:

LS Pharma Val i dat on Servi ce

DOUIREG_SRVC_NAME The name of the JavaScript class that the custom business service references. For example:

PharmaCal l val datorsvc

Table 25 describes the properties you must include in the inputObj argument of the ServiceRegistery method when Siebel Open UI registers a custom business service that references a predefined applet or a predefined business component.

Table 25. Required Input Properties for Custom Business Services That Reference Predefined

Applets or Business Components

Property Value

DOUIREG_OBJ_NAME Name of the applet or the business component that the custom business service method references. For example:

Pharma Cal l Entry Mobi l e

DOUIREG_OBJ_TYPE Specifies that this business service method references an applet or a business component. You must use one of the following values:

■ Use DOUIREG_OBJ_TYPEAPPLET for an applet.

■ Use DOUIREG_OBJ_TYPEBUSCOMP for a business component.

^! DOUIREG_OBJ_MTHD Name of the predefined business service method that you must

customize. For example, WriteRecord.

DOU I R EG_S R VC_ AM E The name of the JavaScript class that the Class property of the business service method references. For example:

pharmacal l svc

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Table 25. Required Input Properties for Custom Business Services That Reference Predefined

Applets or Business Components

Property Value

! DOUIREG_SRVC_ TDH Name of the business service method that you customized. For example,

Write Record.

DOUIREG_EXT_TYPE You can use one of the following values:

■ DOUIREG_EXT_TYPEPRE. Siebel Open UI runs the custom

business service method, and then runs the predefined business service method. You must configure Siebel Open UI to set the Invoked property to true after it processes DOUIREG_EXT_TYPEPRE so that it does not make any more calls to this method.

i ■ DOUIREG_EXT_TYPEPOST. Siebel Open UI runs the predefined

1

1 business service method, and then runs the custom business service i method.

Methods You Can Use in the Application Class

This topic describes methods that you can use that reside in the Application class. It includes the following information :

"ActiveBusObject Method" on page 413

"ActiveViewName Method" on page 414

"CurrencyCode Method" on page 414

"FindApplet Method" on page 414

"GetBusObject Method" on page 414

"GetLastErrCode Method for Applications" on page 415

"GetLastErrText Method for Applications" on page 415

"GetService Method" on page 415

"Loginld Method" on page 416

"LoginName Method" on page 416

"Name Method for Applications" on page 416

"NewPropertySet Method" on page 416

"Positionld Method" on page 417

■ "PositionName Method" on page 417

ActiveBusObject Method

The ActiveBusObject method returns the business object that the active view references. It uses the following syntax:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Application. Act veBusObjectC)

It includes no arguments.

For example:

SiebelApp. s_App. ActiveBusObjectO ;

ActiveViewName Method

The ActiveViewName method returns the name of the active view. It uses the following syntax:

Application. ActiveViewNameO

It includes no arguments.

For example:

S ebelApp.s_App. Act veViewNameO ;

CurrencyCode Method

The CurrencyCode method returns the currency code that Siebel CRM associates with the division of the user position. For example, USD for U.S. dollars, EUR for the euro, or JPY for the Japanese yen. It uses the following syntax:

Application. CurrencyCode O

It includes no arguments.

For example:

SiebelApp.S_App. CurrencyCodeQ ;

FindApplet Method

The FindApplet method returns the active applet. It uses the following syntax:

Appl i cati on . Fi ndAppl et (appl etName)

where:

■ appl etName is a string that contains the name of the active applet.

For example, if the Contact List Applet is the current applet, then the appletName variable in the following code returns the name of this applet as a string:

S ebelApp. S_App. Fi ndAppl et (appl etName) ;

GetBusObject Method

The GetBusObject method creates a new instance of a business object. It returns this new business object instance. It is not synchronous. It uses the following syntax:

Appl i cati on. GetBusObjectibusiness_object_name

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

where:

■ business_object_name is a string that identifies the name of a business object

For example, the following code creates a new instance of the Opportunity business object:

S ebel App . S_App . GetBusObject (Opportun ty) ;

GetLastErrCode Method for Applications

The GetLastErrCode method returns the error code for the most recent error that the disconnected client logged. It uses the following syntax:

/4/0/777C<3t7Ofl. GetLastErrCode O

For example:

TheAppl i cati onO . GetLastErrCodeO ;

This method includes no arguments.

The error code that this method returns is a short integer. An error code of 0 (zero) indicates no error occurred.

GetLastErrText Method for Applications

The GetLastErrText method returns a string that contains the text message for the most recent error that the disconnected client logged. It uses the following syntax:

App 7 i ca tion. Get Las tE r rText O

For example:

TheAppl i cati onO . GetLastErrTextO ;

This method includes no arguments.

GetService Method

The GetService method creates an instance of a business service object. It allows you to use the Invoke method to call this business service object. It uses the following syntax:

Si ebel App . s_App . GetServi ce (" busi ness_servi ce_name"~) ;

where:

■ business_service_name is a string that identifies the name of the business service that

GetService uses to create the business service object. You must use the same name that you use when you register this business service. For more information about registering a business service, and for an example that uses the GetService method, see "Using Custom Siebel Business Services" on page 367.

The following example creates a business service instance of the LS Pharma Validation Service business service:

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 415

var service = SiebelApp.S_App.GetService("LS Pharma validation Service");

Loginid Method

The Loginid method returns the login ID of the user who started the Siebel application. It uses the following syntax:

Application. Loginid ()

It includes no arguments.

For example:

SiebelApp.s_App. LoginldO;

LoginName Method

The LoginName method returns the login name of the user who started the Siebel application. This login name is the name that the user enters in the login dialog box. It uses the following syntax:

Application. LoginName ()

It includes no arguments.

For example:

SiebelApp.s_App. Logi nNameO ;

Name Method for Applications

The Name method returns the name of the Siebel application. It uses the following syntax:

Application. NameO

It includes no arguments.

For example:

SiebelApp.S_App. NamefJ;

NewPropertySet Method

The NewPropertySet method creates a new property set, and then returns this property set to the code that called this method. It uses the following syntax:

Application. NewPropertySet O

It includes no arguments.

For example:

SiebelApp.S_App. NewPropertySet () I

S¾?«eal Configuring Siebel Open UI Version 8.1/8.2, Rev. A

ate

Positionld Method

The Positionld method returns the position ID of the user position. This position ID is the ROW_ID from the S_POSTN table. Siebel CRM sets this value when the Siebel application starts, by default. It uses the following syntax:

Application. PositionldO

It includes no arguments.

For example:

SiebelApp.s_App. Posi tionldQ ;

PositionName Method

The PositionName method returns the name of the current user position. Siebel CRM sets this value when it starts the Siebel application, by default. It uses the following syntax:

Application. PositionNameO

It includes no arguments.

For example:

S ebelApp.s_App. Posit onNameO;

Methods You Can Use in the Model Class

This topic describes methods that you can use that reside in the Model class.

GetLoginId Method

The GetLoginId method returns the login Id of the offline user who is currently logged in to the Siebel Mobile disconnected client. It uses the following syntax:

var ^" loginid = siebelApp. S_App. Model .GetLoginldO ;

ReleaseBO Method

The ReleaseBO method releases the current business object instance. It returns an instance of the current applet or current business component. It uses the following syntax:

Si ebelApp.s_App. Model . ReleaseBO(objBO) ;

where:

■ objBO is a variable that identifies the business object instance that Siebel Open UI must release.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 417

Methods You Can Use in the Service Model Class

This topic describes the method that you can use that resides in the Service Model class.

GetContext Method

The GetContext method gets the context that exists when a JavaScript service or a Siebel business service calls a method. It returns the current applet or business component depending on this context. It uses the following syntax:

servi ceObj . GetContext O

You cannot configure Siebel Open UI to override this method.

Methods You Can Use in Offline Classes

This topic describes methods that you can use that reside in the offline classes. It includes the following information :

■ "setReturnValue Method" on page 418

■ "callback Method" on page 419

■ "eachAsyncOp Method" on page 419

■ "SetErrorMsg Method" on page 420

These methods reside in the OfflineAppMgr class, except for SetErrorMsg. It resides in the OfflineErrorObject class. setReturnValue Method

The setReturnValue method sets the return value that Siebel Open UI sends to the method that calls the setReturnValue method. It uses the following syntax:

$ . setReturnVal ue(.return_va 7ue

where:

■ return_value identifies an object that includes the following information :

■ Error status of the code that Siebel Open UI called

■ retVal contains the return value of the code that Siebel Open UI called

For example:

$ . setReturnva1 ue({err : errCode , retval : bRet})

where:

■ errCode contains the error code that Siebel Open UI returns to the caller. For more information, see "SetErrorMsg Method" on page 420.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

MSJbilelDisconnected Methods You Can Use to

.Customize Siebel Mobile Disconnected

If you do not use setReturnValue, then Siebel Open UI sends a retObj with err set to null and retVal set to empty, by default.

For examples that use the setReturnValue method, see "Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence" on page 359 and "SetErrorMsg Method" on page 420. callback Method

The callback method registers the done handler, it uses the following syntax:

$ . cal l back (scope, done_handler

where:

■ scope identifies the object that Siebel Open UI uses to call the asynchronous method. You typically use the following scope:

thi s

■ done_handler identifies the method that Siebel Open UI calls at the end of the asynchronous method that Siebel Open UI calls. The done_handler that Siebel Open UI registers with the callback method expects a return object. You use the setReturnValue method to return this object.

For example:

PharmaCal l Subm tsvc . prototype . Submi t = functi on O {

bc . ExecuteQueryO ;

$ . cal 1 back(thi s , f uncti on ( retob j ) {

err = retObj . err ;

For another example that uses this method, "Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence" on page 359. eachAsyncOp Method

The eachAsyncOp method iteratively calls an asynchronous method. It uses the following syntax:

$ . eachAsyncOp (scope , conf i gob j)

where:

■ confi gobj identifies the configuration object. A configuration object is a type of object that includes information that Siebel Open UI uses to send as input properties to a method.

For example:

$ . eachAsyncOp (t hi s , conf i gob j ) ;

The eachAsyncOp method handles the done handlers for each iteration. It requires a configuration object that includes the following properties as inputs:

■ executeScope. Scope of the asynchronous method that Siebel Open UI must call.

■ execute. Asynchronous method that Siebel Open UI must call.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A 419 Customizing Siebel Open UI for MogiletDis'cb'n'n'e-cte'dl■iam¾Tds¾ i!¾(«ifaTi

Customize Siebel Mobile.DJs¾0¾¾ Ee¾l

■ preExecute. Optional property that specifies the method that Siebel Open UI runs before it calls the asynchronous method. You can also use preExecute to send information that the asynchronous method requires. You must write this method so that it returns the following information :

a Arguments that Siebel Open UI must send to the asynchronous method

■ Returns these arguments in an array.

The preExecute property can use the iteration value as an input.

■ postExecute. Optional property that specifies the method that Siebel Open UI runs after the asynchronous call finishes.

■ iterations. Optional property that specifies the total number of iterations that eachAsyncOp runs. If you do not include this property, then Siebel Open UI runs the asynchronous method only one time.

SetErrorMsg Method

The SetErrorMsg method defines an error message for a business service that you customize. It returns nothing . It uses the following Syntax :

S ebelApp . s_App . Offl i neErrorOb ect . SetErrorMsg {"messageKey , errParamArray) ;

where:

■ messageKey contains the error message key. A message key is a text string that includes variable characters. %1 is an example of a variable character.

■ errParamArray is an optional array that contains error properties that SetErrorMsg includes in the error message. SetErrorMsg replaces each variable character that the messageKey contains with a value from errParamArray.

For an example that uses SetErrorMsg, see "Configuring Error Messages for Disconnected Clients" on page 369. For an example that uses SetErrorMsg in the context of a cal l to a custom business service, see "Registering Methods to Make Sure Siebel Open UI Runs Them in the Correct Sequence" on page 359.

Other Methods You Can Use with Siebel Mobile

Disconnected

This topic describes other methods that you can use with Siebel Mobile Disconnected. It includes the following topics :

■ "GetBusObj Method" on page 421

■ "GetLovNameVal Method" on page 421

■ "GetLovVal ame Method" on page 421

Configu ring Siebel Open UI Version 8. 1/8.2, Rev. A

GetBusObj Method

The GetBusObj method creates a new instance of a business object. It returns this new business object instance. It uses the following syntax:

Si ebel Ap . S_App . Model . GetBusOb tbusiness_object_name

where:

■ business_object_name identifies the name of the business object that GetBusObj uses to create the new business object instance.

For example, the following code creates a new instance of the Service Request business object: var pServ ceRequestBC = Si ebel App . S_App . odel . GetBusObj (" "Se rv ce Request" ") "

The GetBusObj method resides in the model.js file.

You cannot configure Siebel Open UI to override this method.

GetLovNameVal Method

The GetLovNameVal method gets the value that Siebel Open UI currently displays in the client for a list of values. It uses the following syntax:

Si ebelApp . S_App . Model . GetLovNameVal {LOV_name, LOV_ type

where:

■ LOV_name identifies the name of a list of values.

■ LOV_type identifies the type of list of values that LOV_name identifies.

For example, the following code gets the value that Siebel Open UI currently displays in the client for the Samples Request list of values:

S ebel App . S_App . Model . GetLovNameVal (" "Sampl es Request" " , " "TODO_TYPE" ") "

The GetLovNameVal method resides in the model.js file.

You cannot configure Siebel Open UI to override this method.

GetLovValName Method

The GetLovValName method gets the name of a value that resides in a list of values. It uses the following syntax:

Si ebel App . s_App . Model . GetLovval Name ( i/-? 7i/e_/7a 77e, LOV_ type

where:

■ value_name identifies the name of a value that resides in a list of values.

■ LOV_type identifies the type of list of values that contains the value that value_name contains.

For example, the following code gets the value that Siebel Open UI currently displays in the client for the Call value:

Configuring Siebel Open UI Version 8. 1/8.2, Rev. A 421

Si ebelApp . S_App . odel . GetLovValName ("Cal 1 " , "TODO_TYPE")

The GetLovValName method resides in the model.js file. You cannot configure Siebel Open UI to override this method.

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Reference Information

Screens and Views That Siebel Mobile Uses

This topic describes screens and views that Siebel Mobile uses. It includes the following information :

■ Screens and Views That Siebel Consumer Goods Uses on page 590

■ Screens and Views That Siebel Sales Uses on page 591

■ Screens and Views That Siebel Service Uses on page 593

■ Screens and Views That Siebel Pharma Uses on page 594

Screens and Views That Siebel Consumer Goods Uses

Table 46 lists the predefined screens and views that Siebel Mobile uses for Siebel Consumer Goods.

Table 46. Screens and Views That Siebel Consumer Goods Uses

Screen View Name in Client View Name in Siebel Tools

Accounts Addresses CG Account Addresses View - Mobile

Calls CG Account Calls Views - Mobile

Contacts CG Account Contacts View - Mobile

Accounts CG Account List View - Mobile

Notes CG Account Notes View - Mobile

Orders CG Account Orders View - Mobile

Retail Audits CG Account Product Audits View - Mobile

Product Distribution CG Account Products View - Mobile

Contacts Addresses CG Contact Addresses View - Mobile

Best Call Time CG Contact Best Call Times View - Mobile

Contacts CG Contact List View - Mobile

Routes Route Accounts CG Routes Accounts View - Mobile

Routes CG Routes List View - Mobile

Configu ring Siebel Open U I Version 8. 1/8.2, Rev. A

(¾3ffeP300®3 SOD(te ⁽ JD[DQGQ®CD @8@(¾@0 ®TjX3(jD 002 ¾¾s -That Siebel Mobile Uses

Table 46. Screens and Views That Siebel Consumer Goods Uses

Screen View Name in Client View Name in Siebel Tools

Calls Assessment CG Call Account Assessment View - Mobile

Notes CG Call Account Notes View - Mobile

Merchandising Audits CG Call Merchandising Audits View - Mobile

Orders CG Call Orders View - Mobile

Retail Audits CG Call Retail Audit List View - Mobile

Calls CG Outlet Visit Activities List View - Mobile

Call Items CG Visit Call Items List View - Mobile

, Orders Orders CG Order List View - Mobile

Returns Returns CG Return Order List View - Mobile

Screens and Views That Siebel Sales Uses

Table 47 lists the predefined screens and views that Siebel Mobile uses for Siebel Sales. Table 47. Screens and Views That Siebel Sales Uses

Screen View Name in Client View Name in Siebel Tools

Accounts Accounts SHCE Account List View - Mobile

Account Contacts SHCE Account Contacts View - Mobile

Account Opportunities SHCE Account Opportunity View - Mobile

Account Address SHCE Account Address View - Mobile

Account Activities SHCE Account Activities View - Mobile

Account Team SHCE Account Team View - Mobile

Contacts Contacts SHCE Sales Contact List View - Mobile

Contact Opportunities SHCE Sales Contact Opportunities View - Mobile

Contact Team SHCE Contact Team View - Mobile

Contact Addresses SHCE Contact Address View - Mobile

Leads Leads SHCE Sales Lead List View - Mobile

Lead Opportunities SHCE Sales Lead Opportunities View - Mobile

Configuring Siebel Open UI Version 8.1/8.2, Rev. A i

Table 47. Screens and Views That Siebei Sales Uses

Screen View Name in Client View Name in Siebei Tools

Opportunities Opportunities SHCE Opportunities List View - Mobile

Opportunity Contacts SHCE Sales Opportunities Contacts View - Mobile

Opportunity Products SHCE Sales Opportunities Products View - Mobile

Opportunity Quotes SHCE Sales Opportunities Quotes View - Mobile

Opportunity Activities SHCE Sales Opportunities Activities View - Mobile

Opportunity Team SHCE Sales Opportunities Opportunity Team View - Mobile

Quotes Quotes SHCE Quote List View - Mobile

Quote Items SHCE Quote Quoteltem View - Mobile

Quote Orders SHCE Quote Order View - Mobile

Quote Team SHCE Quote Team View - Mobile

Orders Orders SHCE Sales Orders List View - Mobile

Order Items SHCE Sales Order line Item View - Mobile

Activities Activities SHCE Activity List View - Mobile

Activity Contact SHCE Sales Activity Contact Form View - Mobile

Activity Employee SHCE Sales Activity Employee Form View - Mobile

Configuring Siebei Open UI Version 8.1/8.2, Rev. A ( fetKajooa Soiife pouOQGQQOD (fee (¾ ^" hat Siebel Mobile Uses

Screens and Views That Siebel Service Uses

Table 48 lists the predefined screens and views that Siebel Mobile uses for Siebel Service.

Table 48. Screens and Views That Siebel Service Uses

Screen View Name in Client View Name in Siebel Tools

Activities Service Activities SHCE Service Activity Home Page View - Mobile

Activity Contacts SHCE Service Activity Contact Form View - Mobile

Activity SHCE Service FS Activity Recommended Parts Tools -

Recommended Part Mobile

Activity Steps SHCE Service Activity FS Steps View - Mobile

Activity Instructions SHCE Service Activity FS Instructions List view - Mobile

Activity Part Tracker SHCE Service FS Activity Part Movements View - Mobile

Activity Time Tracker SHCE Service Activity Time View - Mobile

Activity Expense SHCE Service Activity FS Expense View - Mobile

Tracker

Activity Invoices SHCE Service FS Invoice - Auto Invoice View - Mobile

Service Service Requests SHCE Service Service Request View - Mobile

Requests

Service Request SHCE Service SR Orders View - Mobile

Orders

Service Request SHCE Service SR Activity View - Mobile

Activities

Service Request SHCE Service SR Invoices View - Mobile Invoices

Accounts Accounts SHCE Service Accounts View - Mobile

Account Contacts SHCE Service Account Contacts View - Mobile

Account Service SHCE Service Account SRs View - Mobile Requests

Account Assets SHCE Service Account Assets View - Mobile

Account Entitlements SHCE Service Account Entitlements View - Mobile

Browser Part Browser SHCE Service My Part Browser View - Mobile

Part Browser SHCE Service Part Browser Availability View - Mobile Availability

Part Browser SHCE Service Part Browser Substitute View - Mobile Substitutes

Configuring Siebel Open UI Version 8.1/8.2, Rev. A

Reference Informal.

Table 48. Screens and Views That Siebel Service Uses

Screen View Name in Client View Name in Siebel Tools

Orders Orders SHCE Service Orders List View - Mobile

Order Line Items SHCE Service Order line Item View - Mobile

Invoices Invoices SHCE Service Invoice List View - Mobile

Invoice Line Items SHCE Service Invoice line Item View - Mobile

Assets Assets SHCE Service Asset List View - Mobile

Asset Measurements SHCE Service Asset Measurement View - Mobile

Asset Warranty SHCE Service Asset Warranty View - Mobile

Asset Entitlements SHCE Service Asset Entitlements View - Mobile

Asset Readings SHCE Service Asset Reading View - Mobile

Screens and Views That Siebel Pharma Uses

Table 49 lists the predefined screens and views that Siebel Mobile uses for Siebel Pharma.

Table 49. Screens and Views That Siebel Pharma Uses

Screen View Name in Client View Name in Siebel Tools

Accounts Addresses Pharma Account Addresses View - Mobile

Affiliations Pharma Account Affiliations View - Mobile

Calls Pharma Account Calls View - Mobile

Contacts Pharma Account Contact View - Mobile

Accounts Pharma Account List View - Mobile

Relationships Pharma Account Relationships View - Mobile

Contacts Addresses Pharma Contact Address View - Mobile

Affiliations Pharma Contact Affiliations View - Mobile

Best Time Pharma Contact Best Contact Times View - Mobile

Calls Pharma Contact Call View - Mobile

Contacts Pharma Contact List View - Mobile

Relationships Pharma Contact Relationships View - Mobile

State Licenses Pharma Contact State Licenses View - Mobile

Configuring Siebel Open UI Version 8.1/8.2, Rev. A