 |
| Image source: Siebel Systems training material |
have a nice day
@lex
הצגת רשומות עם תוויות Siebel Mobile Applications. הצג את כל הרשומות
הצגת רשומות עם תוויות Siebel Mobile Applications. הצג את כל הרשומות
יום רביעי, 7 במאי 2014
Siebel Mobile Web Client Statement of Direction 2014
If you or your customers are using the Siebel Mobile Web Client along with Siebel Remote technology, you should log in to My Oracle Support as soon as your time allows and get the latest Statement of Direction (SOD) document which lays out Oracle's plans for this technology as well as the future roadmap for Siebel Mobile Disconnected Applications.
The document is numbered 1663459.1 and can be found here (My Oracle Support account required).
have a nice day
@lex
have a nice day
@lex
יום שני, 17 במרץ 2014
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.
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:
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.
have a nice day
@lex
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. |
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
יום חמישי, 6 במרץ 2014
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.
***
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
הירשם ל-
רשומות (Atom)