While working on Siebel Open UI - UX improvement projects numerous times we need to access data through PM and PR layer without showing data to user.
For such requirements you just wish if it was possible to have applet in view with all the required fields and methods you need, but just shouldn't show up on UI.
Well that is possible, there are two ways to handle this on the client side.
Showing posts with label Siebel Open UI. Show all posts
Showing posts with label Siebel Open UI. Show all posts
December 12, 2016
July 07, 2016
How to customize siebel error messages?
With IP14 Oracle has provided ErrorObjectRenderer.js to replace browser based dialogs with jQuery based dialogs. Problem with browser based dialogs is that users can accidently disable them. Thus it is not a good place to show error messages or important instructions to the user.
Standard alert() |
However jQuery based dialogs always shows up on the screen and user have to click ok always to get past them.
jQuery Dialog |
Lets see how we can achieve the same functionality in IP13.
Open UI framework uses browser alert() function to popup error messages. In Javascript it is possible to override any function including browser native functions like alert and change it according to the business needs.
Simplest way to override alert is to define a function alert() in your code, this will force your browser to call your custom function all the time whenever Siebel calls alert() instead of browser's native function. .
function alert(str){$("<div id='my_error'>" + str + "</div>").dialog({
modal: true,buttons: [{ id: "btn-accept",text: "Ok",click: function () { $(this).dialog("close"); }}]});}
Just add the above code in post load file and job done, after executing this code all the error messages will shown in jQuery dialog which will always pop-up. See it in action on codepen
Happy alerting !
Happy alerting !
This is trick is shared by avid reader TJ, please share your tips and tricks in comments below.
June 23, 2016
Just one Elastic applet?
Oracle introduced wonderful elastic list applets with IP16, this feature shrinks list applet size if there are no or less records needs to be displayed. However this doesn't always looks nice, specially in MVG applets and pick applets.
Default Elastic Applets in IP16 |
This feature can be turned off by setting "Enable Elastic Grid" system preference, but it is turned off for entire application. That makes me think is there any way we can make only one applet as elastic applet? Answer is yes :)
Neel on Siebel Unleashed published beautiful trick to back port elastic applets into IP15. Absolutely splendid! This trick can be extended to make only few applets Elastic.
To make all list applets Elastic add following in custom CSS file:
.ui-jqgrid-bdiv{max-height:340px !important; height:auto !important;}
To make only one applet Elastic (After turning of the system preference) add following CSS :
By preceding another div selector to the CSS rule we can instruct browser to apply CSS style only if applet name is : "Line Items List Applet". One can use this trick to change other UI attributes for specific applets and apply different styling.
div[title="Line Items List Applet"] div.ui-jqgrid-bdiv { height: auto !important}
By preceding another div selector to the CSS rule we can instruct browser to apply CSS style only if applet name is : "Line Items List Applet". One can use this trick to change other UI attributes for specific applets and apply different styling.
Happy Styling :)
June 16, 2016
How to hide disabled buttons in Siebel Open UI?
With IP 15 and 16 Open UI themes have inclined towards bigger controls and more blank space on page, which is not bad thing but too much of it is making UI cluttered specially on small screens.
To fix this issue one can hide all disabled controls and all the white space around it. this can be done by simply adding following CSS and Open UI framework takes care of the rest.
Further on to hide disabled menu items add :
Siebel adds these classes and attributes to all the buttons on all applets and menus including new/query/delete icons to show them as disabled. Thus this change effects the entire application.
This post is contributed by esteem reader from down under via siebel-developers slack community. Register today to read more discussion like this.
To fix this issue one can hide all disabled controls and all the white space around it. this can be done by simply adding following CSS and Open UI framework takes care of the rest.
button.appletButtonDis {
display: none;
}
Further on to hide disabled menu items add :
li[aria-disabled=true]{
display: none;
}
Siebel adds these classes and attributes to all the buttons on all applets and menus including new/query/delete icons to show them as disabled. Thus this change effects the entire application.
This post is contributed by esteem reader from down under via siebel-developers slack community. Register today to read more discussion like this.
February 18, 2016
Siebel Open UI Interview Questions plus bonus jQuery tips
Question 1 : What are different layers of JavaScript classes in Open UI ?
Answer: Siebel Open UI framework provider 4 different type of js files , proxy, presentation model(PM), physical renderer(PM), and plugin wrapper(PW). Out of these only PM, PR and PW are recommended to modify and extend. Proxy is an interface between Siebel server and browser, thus should never be changed.Siebel Open UI Architecture |
Read more
February 06, 2016
JavaScript Execution Sequence of Siebel Open UI
Hope everyone remembers Siebel event model explained by +Alexander Hansal
No doubt that is one the best post in Siebel blogosphere till date, in case you haven't read it, I would recommend you to go through it here. This model still holds true and has helped many businesses to model processes. However with introduction of Siebel Open UI there are few more events available for customization on browser side. In this post I will show you how Open UI invoke different events and methods on custom PM and PR JavaScript files.
For this proof of concept I have created and associated PM PR files with some logging for all the applets and views. I have also wrote some browser script in applet load event in tools. Following summarizes what I found.
Sequence of JavaScript Execution in Open UI |
What I found out that view PM layer is the first in sequence of execution, it is executed even before preload event. Thus all the data is available in preload to build the UI. Preload.js is not the event if someone is looking to execute at very start of view building.
Sequence of execution breakdown |
Additionally Applet load event are executed at last. Thus technically it is possible to override events available in "pre" Open UI era browser scripts in Open UI.
Points to be noted here that:
- Prelaod.js is not the first thing which gets executed during a view load.
- Open UI executed PM layer for view first and then applets, however for PR layer, applets were loaded first then view.
- Open UI also seems to execute list applet code first than form applet irrespective of hierarchy in tools!!
- After all the processing of PM PR layers(including view), Siebel at last executes applet load event of tools browser script.
Hope this will help developers to know the correct event they need to code and execution sequence in which Siebel will execute the code.
For this experiment I have created following PM / PR files .
- OpportunityFormAppletPM
- OpportunityFormAppletPR
- OpporunityContactListAppletPM
- OpportunityContactListAppletPR
- OpportunityDetailContactViewPM
- OpporuntiyDetailContactViewPR
- OpportunityListViewPM
- OpportunityListViewPR
- OpportunityListAppletPM
- OpportunityListAppletPR
All files I have used is available will be available for download soon.
Thanks to Duncan Ford for helping us in getting us code ready by creating the beautiful template generator.
Happy to discuss in detail on slack community or in comments below.
February 04, 2016
Chrome's hidden menu for Open UI
If you are working on css or js changes for Siebel Open UI, you would be struggling with browser caching. I have noticed some cache even when I am using incognito mode of chrome.
Out of frustration one might end up installing chrome app/plugin to forcefully clear cache. One of them is "Clear Cache"
Interestingly chrome has now created a very discreet "Empty Cache and Hard Reload" option for developers. To see this option open developer tools by pressing F12 and then press and hold reload button. I have been using this option from past one week and it worked every time as expected.
Please be mindful that this is an hidden menu and only shows up when chrome's developer tools are open.
Happy coding :)
Out of frustration one might end up installing chrome app/plugin to forcefully clear cache. One of them is "Clear Cache"
Interestingly chrome has now created a very discreet "Empty Cache and Hard Reload" option for developers. To see this option open developer tools by pressing F12 and then press and hold reload button. I have been using this option from past one week and it worked every time as expected.
Chrome Hard Reload for Open UI |
Please be mindful that this is an hidden menu and only shows up when chrome's developer tools are open.
Happy coding :)
September 18, 2015
Remove tiny X icon from MVG and Picklist fields in Internet Explorer
MVG and Picklist fields of Siebel IP2013 shows a tiny X icon on right end, on clicking this icon data in the field is cleared. Due to awkward positioning user end up clicking it unintentionally. This behaviour is only available for IE browser.
X in Account Field |
X in Currency Field |
This was added by oracle in hope to improve usability, but it has received lot angst from end users. Instead of improving user experience it risks of losing data in case of miss click.
Luckily there is simple css solution to remove this icon. Following line in your custom css can remove this unnecessary usability trick from entire application.
input:focus[type="text"]::-ms-clear{display:none;}
Input text fields with this css looks amazing just as in chrome and firefox.
CSS fix for Pick list fields |
Currency Field in Siebel Open UI |
Hope it helps.
August 29, 2015
Top 10 most annoying features of Open UI!
I am back with another installment of #ShameOnOracle series. I have been doing talking with lot of Siebel users recently, Strange enough I got almost the same reactions when I asked user what they don't like about Open UI.
From the reactions I have created this list of Top 10 most annoying features of Siebel Open UI:
Please be mindful that these list of issues faced by end user at my current customer only and does not represent all users of Siebel Open UI. Issues presented here might not look like an issue to you personally or your customer.
Did you receive same reactions anywhere? Please feel free to share your feedback or solutions in comments below.
#ShameOnOracle
From the reactions I have created this list of Top 10 most annoying features of Siebel Open UI:
- No vertical scroll in list applets.
- No hour glass for system processing.
- No popup multi-line text areas.
- MVG lost shuttle applet.
- Attachment drag and drop doesn't work.
- On the fly attachment update is not supported.
- Product configurator is slower than HI product configurator
- Screen real estate is not utilized properly in 8.1.1.9 to 8.1.1.14, lot of blank spaces left on UI.
- Keyboard shortcuts doesn't work properly.
- Document title is not static.
Please be mindful that these list of issues faced by end user at my current customer only and does not represent all users of Siebel Open UI. Issues presented here might not look like an issue to you personally or your customer.
Did you receive same reactions anywhere? Please feel free to share your feedback or solutions in comments below.
#ShameOnOracle
August 27, 2015
HTML Attributes doesnt work in Siebel Open UI
HTML Attribute Property of applet controls is a standard interactivity application's property which allows to set HTML attributes so that javascript can directly refer that element using document.GetElementById() or GetElementByName()
From Tools help:
"
HTML Attributes (O) - Specifies to add HTML tag attributes to the HTML tags that the Standard Interactivity client creates when it displays the control. For example, If you set the HTML Attributes property to size=30 for a text box, then the client creates the following tag: <input type = text size=30 . . .>
"
However this trick is not available in Open UI as Open UI is considered to be HI application. Enhancement request has been created by oracle to consider this in future releases.
To access control of applet use following in PR layer:
or following to access the applet's wrapper.
After getting access to the applet wrapper one can use jquery find method to extract controls of the applet.
Hope it helps.
From Tools help:
"
HTML Attributes (O) - Specifies to add HTML tag attributes to the HTML tags that the Standard Interactivity client creates when it displays the control. For example, If you set the HTML Attributes property to size=30 for a text box, then the client creates the following tag: <input type = text size=30 . . .>
"
However this trick is not available in Open UI as Open UI is considered to be HI application. Enhancement request has been created by oracle to consider this in future releases.
Solution:
In absense of this attribute property, developers have to scan through the elements using syntax like :To access control of applet use following in PR layer:
this.GetPM().GetControl ("First Name");
or following to access the applet's wrapper.
var appplet_wrapper = "#s_" + tihs.GetPM().Get("GetFullId") + "_div";
After getting access to the applet wrapper one can use jquery find method to extract controls of the applet.
Hope it helps.
August 26, 2015
Migrating Open UI Manifest data between environments
Siebel Open UI manifest records created in Administration - Application> Manifest Administration, and as per IP 2015 there is no way provided by siebel to migrate the data created to higher environments. Manifest BusComp are not available in ADM export out of the box.
This limits the siebel automated deployments and introduces manual intervention step.
Searching on support web reveals that Oracle has accepted the system limitaion and created a BUG for it in 2014 however no update has been provided till yet.
From Oracle
"
The manifest is now stored in Repository tables and therefore would be migrated with the rest of the Repository.
With the way Open UI Manifest migration is implemented, there does not appear to be a SIF export; yet, it migrated with the Siebel repository. Thus, it seems there is no way to generate a SIF for the manifest data. Siebel Tools Object Explorer Screen shot that lists the S_UI_* tables and shows project name: "Repository Table" that proves dev2prod will migrate these.
Customer requested an enhancement on being able to incrementally migrate Manifest information without doing a full repository migration, such as using a .SIF file.
"
Bug created : BUG 19469254 - OPEN UI MANIFEST MIGRATION BETWEEN ENVIRONMENTS IN .SIF FILES
To make it a bit easier to identify the custom records one search with : [Record Source] = 'Customer'
This will return only the custom created manifest records.
#AnotherBug
This limits the siebel automated deployments and introduces manual intervention step.
Searching on support web reveals that Oracle has accepted the system limitaion and created a BUG for it in 2014 however no update has been provided till yet.
From Oracle
"
The manifest is now stored in Repository tables and therefore would be migrated with the rest of the Repository.
With the way Open UI Manifest migration is implemented, there does not appear to be a SIF export; yet, it migrated with the Siebel repository. Thus, it seems there is no way to generate a SIF for the manifest data. Siebel Tools Object Explorer Screen shot that lists the S_UI_* tables and shows project name: "Repository Table" that proves dev2prod will migrate these.
Customer requested an enhancement on being able to incrementally migrate Manifest information without doing a full repository migration, such as using a .SIF file.
"
Bug created : BUG 19469254 - OPEN UI MANIFEST MIGRATION BETWEEN ENVIRONMENTS IN .SIF FILES
Solution :
The only way available now is to manually keep track of the manifest changes and import them through UI with every release.To make it a bit easier to identify the custom records one search with : [Record Source] = 'Customer'
This will return only the custom created manifest records.
#AnotherBug
August 25, 2015
Open UI just doesn't work!
I recently met a group of people who basically vented out their first reactions on Siebel Open UI. Group consisted of both technical staff and non technical end users, thus I was able to validate and confirm issues.
At the end of discussion I was left with long list of things that doesn't work in Open UI. On researching support web, picture became more appalling.
Following is the list of very basic things that just don't work in Open UI, and sad part is that Oracle is not acting on them at all.
Please share your views in the comments below.
Till the time if you any problem that was just rejected by oracle to fix and think that should get slot in top 10 the please share it in comments below.
#ShameOnOracle
At the end of discussion I was left with long list of things that doesn't work in Open UI. On researching support web, picture became more appalling.
Following is the list of very basic things that just don't work in Open UI, and sad part is that Oracle is not acting on them at all.
Please share your views in the comments below.
Scrolling through list applet does not work with keyboard shortcut.
When you get a list applet displayed in Open UI and before you click on any data row you navigate with the keys <CTRL>+<ARROW-DOWN> the focus will jump to the next record.But the previous record is still highlighted.
Oracle raised couple of bugs for it, but didn't provided any fix for IP2013Drag and Drop of attachment does not work in IE9 and IE11 in IP2013 however it works in other browsers.
Open UI Product Management recommends :
..."Drag and drop will not work in any IE version in Siebel 8.1.1.10 release and below. The biggest issue here is that IE8 and IE9 simply don’t support standards based drag and drop in HTML5. For IE10 there is a defect in a third party being used to provide this functionality. The third party has resolved the issue and it will be included in a future Siebel release. We would not encourage customers to upgrade the third party themselves, but rather they should wait for the next Siebel release when a fix will be made available"....
In one of the SR oracle has gone one step further and recommended to change the browser.Open UI doesn't show hour glass while running query.
This has been reported to oracle by many customers and since earliest open UI release, still oracle hasn't provided any fix yet.
Steps to replicate:
1) Log Into Open UI enabled siebel application
2) Navigate to Accounts > All Accounts View
3) Select the field to be searched using In Line Search(dropdown on top of list applet)
4) Query for a field which can take some time to return records
5) hourglass not shown and user doesn't know whether the system is querying or not!Vertical scroll is not present in open ui list applets.
Siebel HI List Applet
Text area fields in open UI does not pops up.
This is the second most annoying thing for an experienced HI user. Suddenly after upgrade Siebel losses it's popout text areas and no solution was provided till date. I have seen long time wasted to resolve this thing by many developers.
Till the time if you any problem that was just rejected by oracle to fix and think that should get slot in top 10 the please share it in comments below.
#ShameOnOracle
June 30, 2015
How to change color of screen tab in Open UI?
I think this configuration should available out of the box in Siebel. Never the less I am happy that it is possible to customize the View PR layer in Open UI to change the colors of view bar of specific views.
In this example we will see how can we change the view bar background conditionally using Open UI View level PR customization.
This is how grey tab theme looks out of the box for Manifest File view :
And this is how Manifest Administration view looks with Open UI PR Customization:
May be savvy developers would like to have pale yellow for read only views or red for administration screens???
Part 1 : Create CSS class
This customization requires extending the theme in theme.js and creating new class to add different color. New Class should look something like :
When this class is associated with any control, it will change the background of the element to transparent and change the background color to blue.
Part 2: Create View PR Customization
Now the task left is to find the view bar element in the DOM and assigning the class, this can be done with these two commands:
Additionally we need to handle the browser resize event and reassign the class on change of size of browser. Sadly resize event is not passed on the View level PR as described in bookshelf and it has to be done with help of jQuery bind function. Code handling resize event looks like :
At last we need to handle the cleaanup in the EndLife event of jQuery bind and the class allocation.
The final code of PR looks like:
Part3: Configure Manifest
Now when this PR script is associated to any view in Open UI Manifest, view bar color and screen tab color of that view will change to blue.
Hope it helps, if you like this article and would like to see more articles like this please leave a comment or +1
In this example we will see how can we change the view bar background conditionally using Open UI View level PR customization.
This is how grey tab theme looks out of the box for Manifest File view :
Open UI Manifest File View |
And this is how Manifest Administration view looks with Open UI PR Customization:
Open UI Manifest Administration View |
May be savvy developers would like to have pale yellow for read only views or red for administration screens???
Part 1 : Create CSS class
This customization requires extending the theme in theme.js and creating new class to add different color. New Class should look something like :
custom-theme.css |
Part 2: Create View PR Customization
Now the task left is to find the view bar element in the DOM and assigning the class, this can be done with these two commands:
$("#s_sctrl_tabView").addClass("custom_viewbar");
$("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
Additionally we need to handle the browser resize event and reassign the class on change of size of browser. Sadly resize event is not passed on the View level PR as described in bookshelf and it has to be done with help of jQuery bind function. Code handling resize event looks like :
$(window).bind("resize", OnPRResize);
At last we need to handle the cleaanup in the EndLife event of jQuery bind and the class allocation.
$(".custom_viewbar").removeClass("custom_viewbar");
$(window).unbind("resize", OnPRResize);
The final code of PR looks like:
if (typeof(SiebelAppFacade.testPR) === "undefined") {
SiebelJS.Namespace("SiebelAppFacade.testPR");
define("siebel/custom/testPR", ["siebel/viewpr"],function () {
SiebelAppFacade.testPR = (function () {
function testPR(pm) {
SiebelAppFacade.testPR.superclass.constructor.apply(this, arguments);
}
SiebelJS.Extend(testPR, SiebelAppFacade.ViewPR);
testPR.prototype.Init = function () {
$(window).bind("resize", OnPRResize);
SiebelAppFacade.testPR.superclass.Init.apply(this, arguments);
}
testPR.prototype.ShowUI = function () {
SiebelAppFacade.testPR.superclass.ShowUI.apply(this, arguments);
}
testPR.prototype.BindData = function (bRefresh) {
SiebelAppFacade.testPR.superclass.BindData.apply(this, arguments);
}
var OnPRResize = function OnResize(){
$("#s_sctrl_tabView").addClass("custom_viewbar");
$("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
};
testPR.prototype.BindEvents = function () {
SiebelAppFacade.testPR.superclass.BindEvents.apply(this, arguments);
}
testPR.prototype.EndLife = function () {
$(".custom_viewbar").removeClass("custom_viewbar");
$(window).unbind("resize", OnPRResize);
SiebelAppFacade.testPR.superclass.EndLife.apply(this, arguments);
}
testPR.prototype.Setup = function () {};
testPR.prototype.SetRenderer = function () {
$("#s_sctrl_tabView").addClass("custom_viewbar");
$("#s_sctrl_tabScreen").find("li.ui-tabs-active[role='tab']").find("a").addClass("custom_viewbar");
};
return testPR;
}()
);
return "SiebelAppFacade.testPR";
})
}
Part3: Configure Manifest
Now when this PR script is associated to any view in Open UI Manifest, view bar color and screen tab color of that view will change to blue.
Hope it helps, if you like this article and would like to see more articles like this please leave a comment or +1
June 28, 2015
How to make Open UI textarea fields flexible in IE?
As you would know that IE doesn't have flexible textarea even in version 11. When rest of all modern browser allow to open drag one corner of the text area to change its size, IE doesn't let user to change size of elements because of Trident layout engine???
Because of this limitation Siebel Open UI users suffer big time. All the multiline textarea fields in open UI are fixed size and there is no way to pop them up as in HI or expand them. read more.
There are many jquery based plugins available for this problem however all of them needs to maintained and lacks in one thing or the other, probably you will end up using one of those plugins at the end. However If someone looking for simple straightforward stop gap solution, then you can use jQueryUI Resizable function to make the textareas flexible just like chrome or firefox.
To implement in simply add following one line in postload.js file on the web server.
This will make all the textarea controls which are used for multiline field flexible and show tiny blue cue to expand or decrease the size of element and mimic chrome or firefox textarea elements.
Hope it helps.
Fixed size multiline fields in IE |
Flexible multiline fields in chrome |
To implement in simply add following one line in postload.js file on the web server.
$("textarea").resizable();
This will make all the textarea controls which are used for multiline field flexible and show tiny blue cue to expand or decrease the size of element and mimic chrome or firefox textarea elements.
Hope it helps.
June 14, 2015
Siebel Open UI Interview Questions
Read Latest Open UI Interview Questions here.
It is fully HTML 5 compliant user interface, which is based on jQuery and jQueryUI frameworks. It does not uses any active x component thus it can be accessed using any HTML 5 compliant browser like chrome, safari and Firefox along with latest Internet explorer.
Enable Open UI = true
HighInteractivity =true
Siebel Open UI exists parallel to existing Siebel clients. It references same srf and database and shares the same object definition with High Interactive application.
Presentation
model is second layer which maintains the data state in Client. All the
events and methods(such as delete record, write record or update
record) are managed by PM layer. It communicates with proxy layer to get
and set data on server.
Recommended Reading from Bookshelf:
Deploying Open UI
Configuring Open UI
What is Siebel Open UI?
Answer: Siebel Open UI is HTML 5 based Siebel High interactive client which is released by Oracle to replace older Active X based HI client. It is available in Siebel CRM from version 8.1.1.9 onwards. The name derived from Open source JavaScript libraries which it is based on.It is fully HTML 5 compliant user interface, which is based on jQuery and jQueryUI frameworks. It does not uses any active x component thus it can be accessed using any HTML 5 compliant browser like chrome, safari and Firefox along with latest Internet explorer.
Question : How to enable Open UI in Siebel?
Answer : To enable Open UI create new application object manager and set following parametersHighInteractivity =true
Siebel Open UI exists parallel to existing Siebel clients. It references same srf and database and shares the same object definition with High Interactive application.
Question: What are major customizable components of Siebel Open UI ?
Answer: Open UI can be customized extensively with help of jquery classes(known as presentation mode and physical renderer), which can override the default behviour of controls and can mash up with other HTML widgets.Question: What is the difference between presentation model and physical renderer?
Answer : Physical renderer is JavaScript layer in Open UI stack that is responsible for building the UI and showing the data. It communicates with presentation model to fetch data.Question: What is the difference between the PM of List applet and Form Applet?
Answer: Class of PM Layer is of list applet is different from Form applets and is extended as :
SiebelJS.Extend(CustomClassName, SiebelAppFacade.PresentationModel); for form applet
and List applet uses SiebelJS.Extend(CustomClassName, SiebelAppFacade.ListPresentationModel)
Question : How to access Applet's Client User properties in Presentation Model?
Answer: Client user properties specified in siebel tools can be retrieved in Siebel Presentation Model JS by accessing the constants in the Setup method. Example:CustomPM.prototype.Setup = function (propSet){
var consts = SiebelJS.Dependency("SiebelApp.Constants");
var apm = propSet.GetChildByType(consts.get("SWE_APPLET_PM_PS"));
var value = apm.GetProperty("User Property1");
Question: Does open UI support browser script events defined in tools?
Answer: Yes open UI supports browser scripts specified in tools. All the browser script events are supported. In addition to those events Open UI supports presentation model and physical renderer js class files to leverage HTML 5 capabilities.Recommended Reading from Bookshelf:
Deploying Open UI
Configuring Open UI
Read for More Open UI Interview Questions - New
February 15, 2015
Responsive UI Demo of Siebel Open UI IP2014
With IP2014 Siebel has adopted responsive UI design which adapts the UI in real time to the screen size and HTML5 capabilities available on the device. Following video is the best Siebel demo we have ever seen so far.
Please watch and Share!!
Demo showcases :
- Differences between desktop and tablet devices(ipad)
- HTML 5 Compatibility test
- Application menu adapts to screen size (hides context menu on iPad)
- Icons are larger on tablet device for easy navigation.
- Calendar changes the layout for easier navigation in iPad
- Fluid Grid adapts to the resolution of desktop application into a tablet mode and further to mobile resolutions
- Checkbox adapts to slider using plugin wrapper on iPAD
- MVG shows both shuttle applet and list applet.
- MVG on iPAD shows as pre IP2014 application.
- iPAD enables multi-select checkboxes.
- Scrolling in remains the same in desktop as in IP2013
- Infinite Scrolling is available in iPAD with progress bar!!! No need of IP2013 Solution
Please watch and Share!!
Demo showcases :
- Differences between desktop and tablet devices(ipad)
- HTML 5 Compatibility test
- Application menu adapts to screen size (hides context menu on iPad)
- Icons are larger on tablet device for easy navigation.
- Calendar changes the layout for easier navigation in iPad
- Fluid Grid adapts to the resolution of desktop application into a tablet mode and further to mobile resolutions
- Checkbox adapts to slider using plugin wrapper on iPAD
- MVG shows both shuttle applet and list applet.
- MVG on iPAD shows as pre IP2014 application.
- iPAD enables multi-select checkboxes.
- Scrolling in remains the same in desktop as in IP2013
- Infinite Scrolling is available in iPAD with progress bar!!! No need of IP2013 Solution
February 13, 2015
How to get current timestamp in JavaScript?
Following Javascript code returns current date and timestamp of client. This is quite handy for Open UI development, one can call following code from console.log() method to record the invocation sequence which is otherwise very difficult.
Siebel Open UI Example:
Hope it helps.
function displayTime(str2) {
var str = "";
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
var milliseconds = currentTime.getMilliseconds()
if (minutes < 10) {
minutes = "0" + minutes
}
if (seconds < 10) {
seconds = "0" + seconds
}
str += hours + ":" + minutes + ":" + seconds + ":" + milliseconds;
return str2 + ": " + str;
}
Siebel Open UI Example:
console.log("PR Invoked" + displayTime("@"));
Hope it helps.
February 10, 2015
How to traverse javascript object?
For in loop is one of my favourite commands of JavaScript and it just one step behind the modest alert() ;)
It is a very powerful command and helps you to loop through any JavaScript object without knowing what object is all about. You don't need to know the types that exists in the object or number of child objects that object has. You just need have the handle of the object and you can loop through all its properties.
It is quite handy if you cant get your head around Siebel Open UI and you want to know what else is available in that object and how the functions are implemented in an object.
Examples:
In this example I am trying to find what else is passed through the property set by Siebel to the Setup function of Presentation Model. and the following I am trying to all the methods that are available by theApplication() object.
MyPM.prototype.Setup = function (propSet) {
for(var x in propSet){console.log(x + "" + propSet[x]);
}
SiebelAppFacade.MyPM.superclass.Setup.call(this, propSet);
}
for(var x in theApplication()){
console.log(x + " " + theApplication[x]);
}
February 07, 2015
JQuery UI Controls for Siebel Open UI
Have been following Siebel blogs to find out latest innovations in Siebel Open UI? Wonder what else you could do with Open ui and jquery? Voice Recognition and Google Map Integration is not enough want to add more controls but don't know where to start? Well, answers is your local :)
Siebel has packaged all the Jquery UI examples into the client installation directory, all these examples comes with sample Jquery code, they gets copied along with Open UI installation. These codes are not Siebel formated code however can be directly placed into custom PM PR layers with minimum changes. Open UI is utilizes many of these controls thus you find that many of the js and css already initialised.
Example includes HTML5 Animations, Custom controls like sliders, Dialogs and draggable controls as well as JQuery based validations.
I highly recommend to have a look at all the examples before starting with any new design.
Some of my favourites are Dialog boxes with field level validations for email id and password:
Hope it helps. Feel free to share your experience in implementing these controls in Siebel.
Siebel has packaged all the Jquery UI examples into the client installation directory, all these examples comes with sample Jquery code, they gets copied along with Open UI installation. These codes are not Siebel formated code however can be directly placed into custom PM PR layers with minimum changes. Open UI is utilizes many of these controls thus you find that many of the js and css already initialised.
Example includes HTML5 Animations, Custom controls like sliders, Dialogs and draggable controls as well as JQuery based validations.
I highly recommend to have a look at all the examples before starting with any new design.
Some of my favourites are Dialog boxes with field level validations for email id and password:
Hope it helps. Feel free to share your experience in implementing these controls in Siebel.
February 02, 2015
Fixing title of Siebel Open UI
It is one of the well known problems of Siebel Open UI. Browser title of Open UI application is not static and is not set by AOM's "ApplicationTitle" parameter.
However this solution does not help in case of record navigation. Choose wisely. Hope it helps.
There are numerous other problems with it other than being static, like:
2. Dynamic title for every view, which does not contains application name.
3. Home Page View does not show the title correctly if user navigates back from any other screen tab.
1.Title shows "-the end-" if the application is refreshed by browser refresh button.
Title showing as -the end- in home screen |
Home page is showing Contact Home Title on navigating back. |
Solutions:
1. Update Title property for all the views in application with correct title or a static title.
This solution requires changing lot of objects in repository and does not fixes issues with home page views.
read more on bookshelf
read more on bookshelf
2. Update the document title using Open UI Postload event.
Although this will cause title to title to flicker from the original title to a static title, but it is the only solution which is as close as to the HI application title.
Change you postload.js or create new custom js and add following script to the application.
If(typeof (SiebelAppFacade.ChangeTitle) == "undefined") {
Namespace('SiebelAppFacade.ChangeTitle');
(function(){
SiebelApp.EventManager.addListner( "postload", OnPostload, this );
function OnPostload( ){
try{
document.title="Siebel Call Center";
}
catch(error)
{
SiebelJS.Log("Error caught in postload: "+error);
}
}
}());}
However this solution does not help in case of record navigation. Choose wisely. Hope it helps.
Subscribe to:
Posts
(
Atom
)