Siebel Open UI: Format All the Lists - Part 1

In an attempt for a real-life scenario of customizing the appearance of all list applets in a Siebel Open UI enabled application, I would like to introduce you to a coding experiment for conditional formatting of list columns.

As usual, let's see what we want to achieve:

Click to enlarge.

As you can see from the above screenshot, the Opportunity List Applet has two columns - Revenue and Probability % - which are conditionally formatted depending on their value. End users are able to use CTRL+click on the column header to display a prompt where they can enter a target value to influence the background color of the cells.

This solution should be applicable to all list applets. In this and the following post, I will lay out the steps to achieve a generic solution for the requirement presented above. The example solution focuses on numeric columns but can be easily applied to other data types as well.

The following are the main ingredients:

• Applet User Properties
• Custom Presentation Model
• Custom Physical Renderer

Today, we'll focus on the first two points:

Using Custom Applet User Properties in Siebel Open UI

As a frequent reader of this blog, you are aware of the ClientPMUserProp applet user property introduced with Innovation Pack 2013. This user property is used by Oracle to define standard applet behavior such as drag and drop to and from list applets or collapsible/expandable headers.

We can also define our own custom user properties and - as they will be forwarded to the Open UI framework - can use them in the browser-side code to control the behavior of our customizations.

To implement the conditional formatting example, I chose to define two custom user properties:

• CF Field List: A comma separated list of business component fields which - should they be exposed as list columns - will be conditionally formatted.
• CF Threshold List: A comma separated list of numeric values which defines the default target values for the respective fields.

To add these user properties to an applet, we have to edit the applet in Siebel Tools and do the following:

1. Open the list of Applet User Properties for the applet.
2. Create three new user property records as follows:

Name	Value
ClientPMUserProp	CF Field List, CF Threshold List
CF Field List	Primary Revenue Amount,Primary Revenue Win Probability
CF Threshold List	500000,50

The above settings apply to any list applet using the Opportunity business component, for example the Opportunity List Applet.

Here is a screenshot documenting the work:

Click to enlarge.

We have to consider that when the ClientPMUserProp user property is already defined for an applet, we must add our new user properties to the list, using commas as the separator. Alternatively, the user property can be sequenced, so we can define multiple instances like ClientPMUserProp1, ClientPMUserProp2 and so forth.

With this technique we can define a list of fields which should be conditionally formatted and the default target value for any list applet. Of course the field names must match exactly those of fields available in the applet's BC.

Ah, and yes, don't forget to compile the applet(s).

Accessing Custom User Properties in a Presentation Model

Any user property defined in the ClientPMUserProp value will be propagated to the property set used to set up the presentation model of the UI object.

As Siebel Bookshelf states, we can currently do this with individual controls, applets or views. To be able to access the values of the custom user properties, we must extend the presentation model and override the Setup method of the custom PM. This is because the Setup method receives a reference to the current object's property set.

The following code shows the Setup method of a custom presentation model extension class, accessing the user properties we created above.

Click to enlarge. Example code for IP 2013 (8.1.1.11)

The screenshot shows the full code with the important lines highlighted.

As you can see, we use a reference to the Oracle-defined set of constants to retrieve the name of the property set containing the applet user properties (SWE_APPLET_PM_PS). This is a recommended practice to avoid issues should Oracle engineering decide to change the naming convention in a future release.

Then we can use the GetProperty method of the property set to retrieve the values of the two custom user properties we created in the first step in Siebel Tools and store them as "local" PM properties so that we can easily access them from the physical renderer.

The custom presentation model must be administered in the manifest as usual and associated with a test list applet (recommended) and later with the DEFAULT LIST APPLET entry (IP 2013 and later). For testing purposes it is recommended to use a single test applet and use SiebelJS.Log() to print the user property values to the browser's JavaScript console.

The Story so far

With the above configurations, we have set the foundation for writing a generic physical renderer extension for list applets which evaluates the user properties and formats the respective list columns accordingly.

Please stay tuned for the second part of this mini-series where we will discuss a possible approach for this solution.

have a nice day

@lex

Siebel Open UI Developer's Handbook - Announcement

It is not without some parental joy that we announce a new Siebel CRM book to be published this winter.

Together with three of the most distinguished Siebel Open UI experts, this humble writer is currently working on putting together useful information and case studies for the upcoming book:

Oracle Siebel Open UI Developer's Handbook

In this book, you will:

• Learn all about the Siebel Open UI Architecture
• Learn to create custom Presentation Models and Physical Renderers
• Learn advanced techniques for Open UI customization
• Understand how to apply custom styles and themes
• Customize and deploy Siebel Mobile Applications
• Integrate Siebel Open UI with external applications
• and more (see below)

As a frequent reader of this blog, you know that the book authors are truly committed to sharing information:

• Duncan Ford
• Alexander Hansal
• Kirk Leibert
• Jan Peterson

We expect the book to be published in Winter 2014/2015 and plan to align it with Siebel CRM Innovation Pack 2014. We are happy to announce as well that you can participate in shaping the book's content and get notified when it is available by filling in a simple form.

Please feel encouraged to grab this opportunity and create a book designed by and for the Siebel developer community.

• Learn more about the book on the publisher's product page.
• View the official press release.
• Fill in the pre-order and feedback form.

have a nice day

@lex

Siebel Open UI: A Form Apart

Time for another Open UI adventure. In this article, I would like to show you the results of an experiment.

If you watch the Siebel Open UI space attentively, you are sure aware of the introduction of presentation models and physical renderers for views in monthly patch 8.1.1.11.3. And this is exactly what I tried.

What I had in mind was a way to select a record in a list applet of a parent list view (e.g. the "My Accounts" view) and to view details about the record in a form nearby. Of course there is a form applet at the bottom of the view, but what if the end user has clicked the Show More button in the list and needs the information on some other location on her or his screen.

Let's see a screenshot of my experimental solution:

Click to enlarge

 As you can see, the form applet is no longer bound to the bottom of the view. It (or to be more precise, its content) is now displayed in a jQueryUI dialog so the end user is free to move it around, resize it or close it.

What can not be seen on the above screenshot is that the dialog content is refreshed when the user selects a different record in the list.

Another benefit of this solution is that we reuse the existing form applet layout, so we can use Siebel Tools to design the form instead of having to create a form "on the fly". Thus, we save a lot of lines of code.

And here are the steps to implement this (remember, you must apply at least patchset 8.1.1.11.3 for this to work).

1. Create and register a custom view physical renderer extension

Physical renderers (PRs) for views are not really different from PRs for applets. Here is the template I created to get started quickly:

Click to enlarge

If you compare the above code with an applet PR, you'll find that it has the same methods apart from the SetRenderer method.

As fellow Open UI journeyman Jan has pointed out in a previous article, a view PR's Init and Setup method are invoked before the preload event. The SetRenderer method is called after preload but before postload. The EndLife method is called when the user leaves the view.

To register a view PR, you follow the same steps as for any custom file. But of course you choose a view instead of an applet in the manifest administration view. The screenshot below shows my two "victim" views, namely the Quote List View and the Account List View.

Click to enlarge

Both views are now associated with my custom physical renderer file.

2. Implementing the "form in a dialog"

The following code shows the SetRenderer method with my approach to display the form applet of a parent list view in a jQueryUI dialog.

Part 1. Click to enlarge

Part 2. Click to enlarge

The code does the following:

1. Get the applet map of the current view.
2. Loop through the applet map, store business component names and count list and form applets.
3. For the form applet, get the presentation model and the element id.
4. If the view has only one list and only one form applet which are based on the same BC, we have a parent list view and can start creating the dialog.
5. To get the form applet's content, I refer to the table.GridBack selector which represents the main content table of a form applet without the title and buttons.
6. The HTML of the main form is wrapped within a DIV element for easier identification.
7. Now we can use the jQueryUI dialog widget to create the dialog proper.
8. To ensure the dialog content is matching the current record, we attach to the ShowSelection method of the form applet PM.
9. When the ShowSelection method is executed, we can loop through the form applet's controls and populate their identical twins in the dialog with the formatted field values.
10. Finally we set the dialog fields to read-only and hide the original form applet.

Summary

Using a custom physical renderer for a view, we can release content displayed in that view and display it in various ways. The above example showed how to accomplish a "floating form applet" in a parent list view.

And because you were patient with me and imbibed the article until here, you can now download the full code example:

View PR Template
Floating Form PR

have a nice day

@lex

Siebel Open UI: Default Applet Override

One of the lesser known facts about Siebel Open UI - as of Innovation Pack 2013 which introduced database-stored manifest data - is that we can not only register JavaScript files (or web templates) with specific user interface objects but also create default entries for them, so the files will be loaded for each object of the same type. Something we could call a "global override".

Using a global override is superior to using the postload event handler which might soon become bloated with all the stuff you want to achieve on non-specific objects.

Recently, I had some time to investigate this feature a bit more closely. Some of my dear readers might remember the "See-Through Applets" which involves a double-click event handler. When a form applet is double-clicked, the labels are replaced with metadata from the business component layer. Another double click reveals the table and column names where the data is stored. The final solution I presented used a postload event handler.

You can find a detailed description of the see-through applets here and here.

Siebel form applet in "see-through" mode ;-)

So let's see how I adjusted the see-through applet code to work with a global override. The goal was again to enable the functionality on every form applet with a minimum effort.

1. Create a physical renderer extension

The first thing I did was to create a physical renderer extension file. Just the "normal" thing

2. Register the custom file as a default entry

Next, I followed the usual steps to register the file in the Manifest Files view of the Administration - Application screen.

In the Manifest Administration view, the big difference was to query for the seeded DEFAULT FORM APPLET entries in the UI Objects list and copy the existing entry for the Physical Renderer usage type.

Then I proceeded to add an expression and my custom file (as usual). Here is the result:

Click to enlarge

The Open UI framework will read all entries and ensure that the as-delivered files and the custom overrides are loaded whenever a form applet needs to be renderered.

3. Implement the double-click handler

Now I was able to migrate the code which defines the double-click functionality from my custom postload event handler to the new default physical renderer extension's ShowUI method. In fact I could comment out some lines as it was no longer necessary to establish a "connection" to the form applet. Another benefit of staying inside the framework ;-)

The ShowUI method of the override physical renderer. Click to enlarge.

4. Test

I retired (i.e. commented out) the code in the postload event handler and reloaded the browser cache and voilá, the same as before but without extraneous code in the postload event handler.

Summary

"Global overrides" or default entries are a great alternative to clogging your postload event with JavaScript code. At the time of writing, there are various seeded default entries for form, list and tree applets which you should copy to create your custom default entry. Future versions might see other default entries such as for views.

have a nice day

@lex

Little Helpers: Clear Cache Browser Extension

Among the uncountable browser extensions for Google Chrome, there are many which prove useful for the weary Siebel Open UI developer.

One of these extensions should stand representative for them all, and I really use it a lot.

The extension is simply called "Clear Cache", and this is exactly what it does. What I particularly like are the options which allow total control over what part of the browser cache is wiped out and whether to reload the active tab right away.

I also configured a keyboard shortcut, so I can tell you, I am saving a lot of clicks while working on my Open UI scripts.

What is your favorite extension for Open UI related work? Drop it in the comments.

have a nice day

@lex

Google Chrome Developer Tool Goodness: Watch Expressions

The following post does not go without a hat-tip to fellow Siebelian Slava who found an easy way to introspect variables, call functions etc, while debugging a Siebel Open UI application in Google Chrome.

If you are familiar with the Chrome developer tools and Open UI, especially in Siebel version 8.1.1.11 or higher, you might deeply miss the ability to simply type some code into the console. This has been disabled - quite understandably so - for security reasons.

So I leave you with this screenshot and you will understand:

If you want to learn more about the Watch Expressions area and the Chrome developer tools in general, follow this link.

have a nice day

@lex

Siebel Open UI: Enabling Drag & Drop in Calendar Views

If you have applied the monthly patch set 8.1.1.11.4 or later, you would expect to be able to manage activities in the Calendar views by dragging and dropping them onto the calendar applet.

However, to achieve this state of bliss there are a view steps to take in the Siebel repository which is not modified by the patchset.

As the attentive Open UI geek you are, you should know that drag and drop functionality is driven by the presence of two applet user properties, namely

ClientPMUserProp = EnableDragAndDropInList
EnableDragAndDropInList = TRUE

Note that the ClientPMUserProp value could be a comma separated list, so we would have to add "EnableDragAndDropInList" at the end, but this is not the case for today's example.

Basically, all we have to do is to add the above two user properties to the list applets in our calendar views (e.g. the LS Pharma HI Activity Calendar View). If there are toggle applets registered for the base applet, we also must edit each toggle applet's user properties list.

In case of our example view, the base applet is the Pharma Calendar Activity List Applet and its toggle siblings Pharma Calendar Account List Applet, Pharma Calendar Affiliated Professionals List Applet and Pharma Calendar Professional List Applet

Using Siebel Tools (of course), we edit these applets and add the aforementioned user properties. After compiling the applets, we can test the functionality in the calendar view (see screenshot above).

Drag and drop an activity (or account/contact from the toggle applets) onto the calendar and (after watching the drag placeholder magically move back to the list) witness the appearance of a new calendar entry. This works in the daily, weekly and monthly calendar mode, as my tests have confirmed.

have a nice day

@lex

Statement of Direction for Siebel Open UI IP 2014

Earlier this month, Oracle has published a statement of direction (SOD) document for Siebel Open UI on the My Oracle Support portal. The document with the Id 1643468.1 lays out the features planned for release with Siebel CRM Innovation Pack 2014 which is intended to be shipped in late fall this year.

The document is especially important for customers and developers who are planning or already implementing features which are not yet available in the current IP 2013 version. 

For information on features like barcode scanning or iHelp and the planned roadmap, please refer the the Open UI Statement of Direction for IP 2014 (and beyond). 

Everyone involved in Siebel Open UI projects is strongly advised to access this document and visit the Open UI Information Center on My Oracle Support frequently in order to stay up to date.

have a nice day

@lex

New Oracle University Course: Siebel Open UI Advanced JavaScript API

Oracle University and this humble writer are proud to announce the availability of a new course which extends the existing Siebel Open UI Foundations offering (which is a prerequisite for the new course).

The new three day course is titled Siebel Open UI Advanced JavaScript API.

Siebel Open UI Advanced JavaScript API course description.

The course will be available as in-class training and live virtual class (LVC) formats and yours truly would be delighted to welcome you to class soon.

The course covers the following areas of Siebel Open UI scripting:

• The architecture and files used in customizations
• Administering customizations
• Writing code to use the Siebel Open UI JSAPI to implement common form and list applet customizations
• Debugging
• Implementing application-wide customizations
• Calling external libraries
• Using Siebel Tools in conjunction with Open UI
• Using the JSAPI with Mobile applications
• Migrating customizations.

See you in class soon ;-)

@lex

Siebel CRM News of the Day

While sifting through the latest alerts, SODs etc on My Oracle Support, I found some interesting news for Siebel folks. While I usually peruse twitter for quick messaging, I believe it is worthwhile to summarize my Sunday evening tweets so that more people get this important pieces of information.

First, all good things come to an end, and even more so for Siebel Management Server, its ADM functionality and the Siebel Management Agent.

Time to say goodbye to Siebel Management Server and Agent. My Oracle Support doc: https://t.co/v2FytD2A2g
— Alexander Hansal (@siebel_ess) April 6, 2014

Second, the good people at Oracle have composed a new Statement of Direction for planned Open UI related enhancements in Siebel CRM Innovation Pack 2014 which is expected for late fall this year.

Siebel Open UI - Statement of Direction - Siebel CRM Innovation Pack 2014: https://t.co/1lboDC9xq0
— Alexander Hansal (@siebel_ess) April 6, 2014

And third, there is a new monthly patchset for IP 2013 - rather early - for April available. But I posted this already.

Siebel IP 2013 April Patchset 8.1.1.11.6 / 8.2.2.4.6 is now available on My Oracle Support https://t.co/E5yDHQgBGl
— Alexander Hansal (@siebel_ess) April 6, 2014

Oh, I nearly forgot there is a new Siebel Open UI Advanced JavaScript API class available on Oracle University.

Coming to an Oracle classroom or your screen soon: Siebel Open UI Advanced JavaScript API. http://t.co/YS0U5fnKWQ
— Alexander Hansal (@siebel_ess) April 6, 2014

Stay tuned for more details.

have a nice day

@lex

Time to Learn the Languages of the Web (and Good Design)

My fellow instructors at Oracle University and I teach a lot of Siebel Open UI these days. And when I say a lot, I mean like two full classes (a full class is 16 students) per week, per instructor during peak demand.

Of course, Siebel developers of all couleur, be it associate, rookie, graduate or seasoned veteran, are eager to learn how to understand and customize the latest and greatest among Siebel UI technologies.

In the Open UI Foundations class (and a new advanced JavaScript API class, coming soon to a learning center near you), we talk a lot about the languages which form the modern web:

• HTML(5)
• JavaScript (and a fair amount of jQuery)
• CSS

But Oracle does not own these languages, so we have to resort to other resources to learn more about these web standards.

In the following, compiled with a little help from generous students, you will find a list of web resources which serve both the newbie and the experienced Siebel coder to get to grips with HTML, JavaScript and CSS. The list is in coincidental order.

Web Platform

As stated on the start page, "Web Platform is a project of the W3C and the Web Platform stewards — Adobe, Apple, Facebook, Google, HP, Intel, Microsoft, Mozilla, Nokia, and Opera. It’s a collaboration between those who make the specs, those who build the browsers, and developers from all over the world."

Also stated on the page is the fact that Web Platform is a work in progress. It uses the wiki concept, so everone can join and contribute.

At the time of this writing, the "Docs" on Web Platform provide references, APIs and beginner's guides for CSS, JavaScript, HTML as well as other related languages or standards.

I noticed that content from many other resource sites such as dev.opera.com has already been moved to Web Platform.

Mozilla Developer Network

Representative for similar sites from browser vendors such as Google or Microsoft, the Mozilla Developer Network provides beginner-level or advanced tutorials as well as well-structured references for web developers.

On the Google Developers site, I found this valuable tutorial on the Google Chrome Developer tools.

SitePoint

Good web design is something you can learn. The good people at SitePoint provide content by developers for developers with a knack for intuitive, modern web design.

HTML5 Rocks

If you want to go deeper into HTML5, the content available on HTML5 Rocks is as good as it gets. However, it is obviously aimed at advanced web developers rather than the ambitious rookie.

Web Pages That Suck

A little bit tongue in cheek and for more than 18 years (!), WPTS presents badly designed web pages (Caution: some of the content presented on WPTS cannot be unseen). But why not learn from the fallacies and mistakes of others?

In addition, the site also has a lot of pointers to resources with a focus on the good side of web design.

A List Apart

Started as a mailing list for web developers, A List Apart is a "magazine for people who make web pages". Well, this includes Siebel developers ;-).

This list could be much longer, as it should definitely include CSS Zen Garden and many other inspirational web sites that go unnamed here.

What is your favorite resource for learning the languages of the web and which web sites inspire you? Please share with us in the comments section.

My Web History (and Books)

My personal journey in professional computing started with a workshop on internet technology hosted by an internet provider in 1996. This was actually the day when I saw a modem bank for the first and last time so far.

During the workshop we hand-coded HTML and I was hooked. CSS and JavaScript were considered "secret sauce" and I soon started working as a free web developer. I wouldn't dare to even look at the code I produced back then but I must confess that I always strove for simple, usable web design.

One of the books I found very inspirational in my early years as a web developer was HTML Artistry. Apparently, it is still available (as a paper back, what does this tell us?). For a book that has been written in the year when Google was founded, I find that it's still relevant with regards to the design examples. Good design never grows old...

If you're looking for a more recent book on web design, Designing with Web Standards might be a good read.

have a nice day

@lex

Siebel Mobile Applications and jQuery Mobile ThemeRoller

One of the new features introduced with Siebel CRM Innovation Pack 2013 is the ability to use jQuery Mobile ThemeRoller to create custom style sheets for Siebel Mobile Applications (and only for mobile applications, at the time of this writing).

Ever in an experimental mood, I decided to give it a try. Actually the whole bit is documented in the Configuring Siebel Open UI guide in Siebel bookshelf, but as usual you will also find the steps I executed in this post.

Swatches

Before we start, let's talk about "swatches" (and I don't mean the swiss watch brand). A swatch in terms of style sheets is a collection of CSS rules regulating the colors, fonts and icons used in certain areas of web applications.

The following image is taken from the Configuring Siebel Open UI guide and explains the concept nicely.

Image Source: Siebel Bookshelf, Configuring Siebel Open UI guide.

Siebel Mobile Applications use six swatches (A to F) and as per the documentation they control the look and feel of the application as follows:

Swatch	Description
A	Application-level navigation bar
B	List applets
C	Popup applets
D	Grid items
E	Third-level view area
F	Second-level form applets

Using ThemeRoller to create custom swatches

Now that we know about swatches, let's open ThemeRoller and create six swatches...

1. Go to http://themeroller.jquerymobile.com.

2. Use the dropdown list in the version number field to select version 1.3.2. As of IP 2013, Siebel Mobile Applications use jQuery Mobile 1.3.0 and 1.3.2 is the closest currently available.

3. Create six swatches (A to F), using the ThemeRoller UI. This is quite straightforward. I found it useful to take care of the global settings first, then start with a single swatch (delete all others). Using the Duplicate feature, I then created five other swatches based on the first and modified them.

The following screenshot shows some very ostentatious example swatches.

4. Once you're finished, simply hit the Download button and provide a name for the theme to download.

5. Extract the downloaded .zip archive.

6. Open the themes folder which is created as part of the extraction process.

7. Copy the .css files from the themes folder to the PUBLIC/%LANGUAGE%/files/custom folder of the Siebel Developer Web Client and/or Siebel Web Server Extension installation directory.

8. Open the images subfolder in the extracted archive.

9. Copy all files from the images subfolder to the PUBLIC/%LANGUAGE%/images/custom folder of the Siebel instance. (Create the custom folder if necessary).

10. Navigate to the PUBLIC/%LANGUAGE%/files/custom folder and open the file with the .min.css extension using a suitable editor.

11. Replace all occurrences of “images/” with “../../images/custom/”.

12. Save the file.

13. Open the custom mobiletheme.js file which should already exist in the siebel/customscripts folder.

14. Add the following code to the file:

SiebelApp.ThemeManager.addResource(

    "SBL-MOBILE",

    {

        css : {

            custom : "files/custom/mystyle.min.css"

        }

    }

 );

The above code uses the addResource method of the ThemeManager class to add the mystyle.min.css file to the existing SBL-MOBILE theme. Note that the file name could be different, depending on the name you chose in step 4.

15. If not already done, register the custom/mobiletheme.js file in the Manifest Filesview of the Administration - Application screen and add the file to a custom PLATFORM DEPENDENT entry in the Manifest Administration view, providing a valid object expression such as “Mobile”.

16. Launch the mobile application.

17. Verify that the custom style sheet is loaded.

As an alternative to using the addResource method, we can also register a new custom theme.

And here is the result in all it's glory (sorry for the colors but I tried to show the different swatches rather than aim for an award-winning style).

Summary

Using the jQuery Mobile ThemeRoller is a simple approach to quickly create custom mobile themes. 

However, the style sheet produced by ThemeRoller does not cover all aspects of Siebel Mobile Applications such as icons and buttons. The appearance of these artifacts needs manual fine-tuning.

have a nice day

@lex

Siebel Mobile Applications: Create Activities for Outbound Phone Calls

The following is a guest post by Sandra Wamsley, Programmer Analyst at Laerdal Medical. In her article she describes how to use a custom Physical Renderer in Siebel Mobile Applications to capture the event when the user taps the phone icon to make a call as an activity record in the Siebel database. The code samples and manifest configuration described are for Siebel 8.1.1.10 / 8.2.2.3.

***

When we first began developing our Mobile application, an early request came in for the application to automatically create an Activity when an outbound phone call was made through it.

 This was accomplished by having a physical renderer call a business service from within Siebel, which would create the activity. We had to accomplish this on two different business components - Accounts and Contacts - using two different fields.

The physical renderer had to accomplish three things: It had to see that the phone icon had been pressed in the application, get the Id of the Contact or Account that the icon had been pressed on, and invoke the business service, passing it the Contact or Account Id.

We created two physical renderers for our environment, because there were two business components that the business service could be invoked from - Accounts and Contacts. On the Account BC, the PR looks for “MainPhoneNumber” and on the Contact BC it looks for “WorkPhoneNum.”

Below is the code for the physical renderer:

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

 SiebelJS.Namespace("SiebelAppFacade.MobileAccountFormAppletPR");
 SiebelApp.S_App.RegisterConstructorAgainstKey ("MobileAccountFormAppletPR",  "SiebelAppFacade.MobileAccountFormAppletPR");

 SiebelAppFacade.MobileAccountFormAppletPR = (function () {

  function MobileAccountFormAppletPR(pm){
         SiebelAppFacade.MobileAccountFormAppletPR.superclass.constructor.call(this,pm);
 this.GetPM().AddMethod("ShowSelection",recordChanged,{sequence:false,scope:this})
 }

SiebelJS.Extend(MobileAccountFormAppletPR, SiebelAppFacade.JQMFormRenderer);

function recordChanged() {
  var that=this;
  $("#"+this.GetPM().Get("GetControls")["MainPhoneNumber"].GetInputName()+"_tel").on('click',function(){

  SiebelJS.Log(that.GetPM().Get("GetBusComp").GetFieldValue("Id"));

  var svc = SiebelApp.S_App.GetService("Create Activity");
  var iPS = SiebelApp.S_App.NewPropertySet();
  iPS.SetProperty("Account Id",that.GetPM().Get("GetBusComp").GetFieldValue("Id"));
  iPS.SetProperty("Contact Id", "");
  outPS = svc.InvokeMethod("CreateActivity", iPS).childArray[0];
  debugger;
  })
 }
 return MobileAccountFormAppletPR;
 }());
}

This PR was used for Accounts. When the phone icon is clicked to make an outgoing call, the PR gets the Business Component in use to pull the record’s Id (Contact or Account), gets the Business Service (Create Activity), and gives it the Account Id. It also sends a blank string for Contact Id, which we used as an indicator of which PR had been called, but there are many other ways to accomplish this.

The Contact PR was identical, except that it used “WorkPhoneNum” instead of “MainPhoneNumber”, and it sent the Contact Id and a blank string for Account Id.

In addition to the Physical Renderer, we needed to update our Custom Manifest and Manifest Extensions files. In the Custom Manifest XML file, the following two sections were added to the <PLATFORM Name=”Mobile”> section. “MobileAccountFormAppletPR” and “MobileContactFormAppletPR” were the names of the Physical Renderers created earlier.

<KEY Name="MobileAccountFormAppletPR">
<FILE_NAME> 3rdParty/jqmobile/mobiscroll-2.0.full.min.js      </FILE_NAME>
<FILE_NAME> 3rdParty/jqmobile/jquery.mobile.simpledialog.min.js  </FILE_NAME>
<FILE_NAME> siebel/jqmformrenderer.js                            </FILE_NAME>
<FILE_NAME> siebel/custom/MobileAccountFormAppletPR.js           </FILE_NAME>
</KEY>

<KEY Name="MobileContactFormAppletPR">
<FILE_NAME> 3rdParty/jqmobile/mobiscroll-2.0.full.min.js         </FILE_NAME>
<FILE_NAME> 3rdParty/jqmobile/jquery.mobile.simpledialog.min.js  </FILE_NAME>
<FILE_NAME> siebel/jqmformrenderer.js                            </FILE_NAME>
<FILE_NAME> siebel/custom/MobileContactFormAppletPR.js           </FILE_NAME>
</KEY>

In the Manifest Extensions file, we needed to specify which applets should load these PRs. We ended up with five applets that had the option of triggering a phone call, and set the correct PRs from there.

SHCE Account Entry Applet - Mobile = MobileAccountFormAppletPR
SHCE Account Entry Applet ReadOnly - Mobile = MobileAccountFormAppletPR
SHCE Sales Contact Form Applet - Mobile = MobileContactFormAppletPR
SHCE Sales Contact Form Applet ReadOnly - Mobile = MobileContactFormAppletPR
SHCE Contact Form Applet Mobile = MobileContactFormAppletPR

From the JavaScript side of things, that was everything that had to be done. We built a business service to actually create the activity, and once we got them communicating with each other, it worked as intended. Now the user can click the icon to make a phone call, and an activity will be automatically created for them.

***

Many thanks to Sandra for sharing

have a nice day

@lex

Siebel Open UI: Collapsible Applets - Another Revisit

By Jan Peterson

During a presentation to the technical team of a customer who is in the progress of updating to Open UI, I showed how easy it is to make all applets collapsible by just adding some code to a postload event handler.

We have looked at the general concepts in an earlier post:

postload.js

I quickly received a follow up question if it is possible to collapse applets automatically in case the applet doesn't have any records. As often in the new world of Open UI, the solution is very easy.

Replacing

oAppletPModel.SetProperty("defaultAppletDisplayMode", collapsed");

with

oAppletPModel.SetProperty("defaultAppletDisplayMode",
oAppletPModel.Get("GetNumRows") > 0) ? "expanded" : "collapsed");

does the job :-).

A few notes:

• In the example I updated postload.js. For a production environment it is recommended to have a custom file that subscribes to the postload event..
•  The postload event is only triggered if a user navigates to a new view or reloads the current view. If a child applet has no records and the user selects a different parent record which has some records in the child applet, the applet doesn't get automatically expanded. This can be achieved as well but requires some additional logic.
• Not all applets support the "Default Applet Display Mode" user property. An example are most applets on the vanilla home views.

In summary, IP2013 makes it easy to make all applets collapsible and allows to add some additional logic around it.

Siebel Open UI: Alternating Row Colours

With a huge hat tip to fellow Siebelite Duncan Ford, here is a quick solution to show rows in list applets with alternating colours. Like this:

Duncan has provided the following CSS rules which, when added to a custom style sheet, do the trick. Totally without any JavaScript coding.

.ui-jqgrid .ui-widget-content:nth-child(odd) {
    background: #e4bf66;
}
.ui-jqgrid .ui-widget-content:nth-child(even) {
    background: #f9e6b7;
}
tr.ui-state-highlight {
    background:rgba(0, 0, 0, 0.2) !important;
}
.ui-jqgrid .ui-state-highlight, .ui-jqgrid .ui-widget-content .ui-state-highlight, .ui-jqgrid .ui-widget-header .ui-state-highlight {
    background:initial;
}

As you can see, CSS can distinguish odd and even children of a selection. I have seen quite a lot of jQuery code which accomplishes the same (and of course allows for a more dynamic colouring). But you can't deny the purity and simplicity of CSS.

Many thanks to Duncan for sharing this.

have a nice day

@lex

Siebel Open UI: Contact Tiles and Images

One of the many new features in Innovation Pack 2013 for Siebel Open UI are different visual display modes for list applets.

Using tiles makes sense on mobile devices as they are easier to select by tapping. But also in desktop applications, tiles can make dull lists more visually appealing. The Contact List Applet for example comes with two new buttons which allow us to toggle between "Grid" (i.e. classic list) and "Tile" mode.

Below is a screenshot of the Contact List Applet in tile mode taken using the Siebel Sample Database.

Apart from the as-delivered fields such as full name, address, email address or phone number, the ability to store and display an image along with the contact data stands out. Alas, the sample database does not provide sample images...

In addition, it is not too obvious how to add an image (or a reference/link) to a contact record at first glance. After a bit of investigation and with a little help from my friend and fellow author Jan, here is a solution.

The initial problem seems to be that the new BC field named Image Source Path is not exposed by default in the Edit List template of the Contact List Applet in the vanilla Siebel Repository.

So let's go to Siebel Tools and ensure that the field is exposed as a list column in the Edit List template (note that it has to be the Edit List template, not the Edit Tile template).

The properties for the list column should be set as follows:

Field: Image Source Path
HTML Type: Image Control
Show In List: TRUE

After compiling the applet, we can launch the application and test. We can now use the new list column to add a URL to an image file to a contact record.

For example, you could pick a contact image URL from LinkedIn, like this one:
http://m.c.lnkd.licdn.com/mpr/mpr/shrink_100_100/p/1/000/025/1a0/0c62faf.jpg

After leaving the column, the image immediately displays, which distorts the list. But let's ignore this and switch to tile mode. Lo and behold, images are displayed just nicely.

User Preferences

With the new tile display, there are also some new user preferences which you will find in the Behavior view.

The Visualization preference allows you to select your preferred default visualization (Grid, Tile or Map) and the Default Scroll Speed preference controls the velocity of the tiles when you use the scroll icons.

Summary

With some small tweaks, we can bring the images on the new contact tiles to life.

have a nice day

@lex

Siebel Open UI Manifest Expressions and System Preferences

Introduced in IP 2013, Manifest Expressions can be used to evaluate conditions whether a certain set of JavaScript files or a certain web template file should be loaded for a given user interface object.

Oracle ships some interesting standard expressions:

Some Siebel standard Manifest Expressions in 8.1.1.11

We can inspect those standard expressions by navigating to the Administration - Application screen, Manifest Expressions view.

Most of the standard expressions use either the GetProfileAttr() method or the new GetObjectAttr() methods to match the value of either a profile attribute or an attribute of an applet with a string.

My first impression was that obviously we can use Siebel Query Language to construct complex expressions. So I started experimenting...

One of my first experiments was built on the idea that it could be worthwhile having a central "switch" for enabling or disabling Open UI customizations. Here is the cookbook I came up with:

1. Create a System Preference

First, I navigated to Administration - Application - System Preferences and created a new system preference as follows:

System Preference Name	AHA Show Customizations
System Preference Value	TRUE

When set to "TRUE", the system preference should "tell" the Open UI framework to load customizations such as a custom physical renderer for an applet. When set to "FALSE", no custom files should be loaded.

2. Create a Manifest Expression

In the Manifest Expressions list, I created a new record as follows:

Name	AHA Show Customizations
Expression	SystemPreference("AHA Show Customizations") = 'TRUE'

As you can see, I resorted to the SystemPreference() method of the Siebel Query Language to get the value of my new system preference. The new expression would evaluate to "true" when the system preference has a value of "TRUE" and vice versa.

3. Use the expression

Finally, I have to employ the new expression with a user interface object. For my experiment, I associated the new expression with the Opportunity form applet which has been my victim for a while now.

Click to enlarge

As can be seen in the screenshot, I added a custom physical renderer to the Opportunity Form Applet - Child. I used my new expression and associated it with the custom JavaScript file.

As a result, the custom physical renderer should only be loaded when the system preference is set to "TRUE". A quick test proved that it worked as expected.

Here is the applet with the system preference set to TRUE:

Note the highlighted customizations (progress bar, slider and clickable account label).

And here is the same applet after setting the system preference to FALSE (and restarting the application):

As you can (or cannot) see, the customizations have disappeared; the applet is displayed in "vanilla" mode.

Summary

Open UI manifest expressions can be put to good use to evaluate almost any condition using Siebel Query Language.

Caveat

During my experiments, I found that not all Siebel Query Language "tricks" worked. For instance, I couldn't get InvokeServiceMethod() to work. If anyone wants to shed some light on this, please find the comments.

have a nice day

@lex