Open UI IP 2014 is finally here! - First look is here - Is it truly responsive?

As most of you aware, IP 2014 is now available on eDelivery!

I was very eager to see the responsive web design part of it! So went ahead and downloaded and setup my sample. The first look – impressive layout. Though, in my case, it is opening only on firefox and IE11 (haven’t tried other IE versions). In Chrome it keeps spinning. You need to set
EnableFQDN               = FALSE in your cfg for it to work!

Important Update:(From Alex on siebel-essentials) Please be aware that Patchset 1 for Innovation Pack 2014 will be mandatory for production use. Patchset 1 will be made available on My Oracle Support in due time (official GA). In the meantime, you can benefit from using the installers for evaluation and upgrade preparations and of course peruse the new documentation to learn about new features.

See the general navigation below.


<iframe width="640" height="360" src="https://www.youtube.com/embed/IrX30dTm_hU?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

MVGs back to how they were in HI!


<iframe width="640" height="360" src="https://www.youtube.com/embed/WRnOStq_Ttc?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Editing attachments inline – users are eagerly waiting for it! See it here.




<iframe width="640" height="360" src="https://www.youtube.com/embed/O6urWtnHyfc?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Note: inline editing worked only on Firefox and not on chrome for me.

I am disappointed by the responsiveness. See here,

<iframe width="640" height="360" src="https://www.youtube.com/embed/J_qZIoCuUqQ?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Above, you can see the list and form applets are pretty static. Only Logo, Menu, toolbar etc are dynamically changing. I was hoping much more as part of IP2014 on this. I was imagining List Applets to reduce in height and users will be able to scroll on list applet with their fingers on smaller devices. I was hoping Form Applets will adjust the layout based on the device size. It’s time for more explorations and custom PRs to make that happen!

More to come, hold on till then!

Cheers,
Sandy

Read More

Siebel Open UI: How to integrate LinkedIn in Siebel ??

One of my blog’s reader asked me, How to integrate Facebook into Siebel ?? I thought what kind of requirement it could be, then I came up with a scenario where we can innovate, and dazzle our Siebel Clients….
But I have never implemented any Social integration using EAI concepts, but with the help of Siebel Open UI we gonna implement LinkedIN in Siebel…looking forward we will have fun ..
Scenario:
We all know that we have list of contacts inside Contact List View in Siebel App. Now, as per the requirement Client wants a button called LinkedIN Profile. And this button will popup a new window where we can see that contact’s LinkedIn profile.
Just think, to implement this what steps do we need to follow??

• Customize UI to add button
• Need a connection with LinkedIn
• Search on LinkedIn for my contact
• Customize UI to show relevant data from LinkedIn for that contact

Now with some basic research, we came to know that all Social Networks provide some API’s to integrate with and get yours relevant data. So, what about LinkedIn ??
Yes, LinkedIn needs to authorize your connection and then you can search your contacts using its API. To make it simple, let’s break into pieces….

Create your first APP on LinkedIn

Authorize your connection using APP

Search on LinkedIn using API

Customize UI to add button and show LinkedIn data in Siebel

Will try to explain each points one by one..

Read More

Open UI: Build Process

Introduction

Siebel projects that are crossing over to Open UI, will soon realise the immediate need to implement standards around the development and deployment of the external resources in Open UI. Unlike traditional Siebel development, where source code is checked into a database and compiled into a SRF with a proprietary IDE, Open UI is based on text files that can be edited using Notepad.

Managing external files is not new to Siebel development, but it has never been mainstream, and the processes for managing these resources are not as mature. This article is aimed at Siebel development managers looking to incorporate best practice from file based development environments, and integrating them with Open UI.

Traditional Vs Modern Siebel Development

A traditional Siebel development cycle involves the developer checking out and locking a project/object, the developer performs the modification, and checks it back in. The Siebel repository stores the source code, and allows projects manage a single code base.

Parallel development can be achieved by establishing a second repository, and managing the code promotion through a separate environment path.

Merging the code bases can be performed through exporting and importing SIFs. Siebel provides a decent merge tool for configuration changes, but merging code is always a risky affair, due to the inability to perform a line by line merge.

Open UI development is very much like web development, files can be edited freely in your code editor of choice, your application can be easily debugged from any browser, and you have the flexibility to pick and choose your add-on web technologies. There is no longer a dependency on the Siebel way to build your application.

Building your Application

Do you use XSLTs, Client side business services, custom images/JS/CSS, customized web templates? Then you need a build process. A build process allows projects to automate the production of artifacts for deployment with the following advantages

* Resources are deployed in a consistent manner
* Automated quality checks, and enforcement
* Files are optimised for Production
* Automatic documentation
* Integration with Source Control
* Automated unit testing

To achieve the above tasks, we’ll need to establish the build process, procure the required toolset, and develop the necessary automation.

Establishing a Process

Projects need a formal strategy to manage the migration of files from source to deployment. Fundamentally this process should address how files are tracked, changed, merged and deployed, across multiple parallel development streams. This shouldn’t be new territory, so projects don’t have to go shopping for a new process, unless it is broken. Existing HI file deployment processes can be carried over, and augmented to incorporate the some of the best practices from modern web development.

* Integrated Source control
* Continuous Integration
* Automated test cases

SCM (Source Control)

The concept of building an application requires that we have a source. For traditional Siebel development, this source is the Siebel repository, in Open UI, the source should also be in a repository, but it is more likely to be a file repository rather than a database repository.

There are many solutions in the market that offer Software Configuration Management (SCM), but it is up to each project to choose the appropriate solution for their needs. The most obvious place to look is within your own organization to discover what SCM software is available, and used by other IT sections. This allows you to take advantage of the licensing agreements, and leverage the existing support arrangements that are already in place. Open source/free SCM sounds great, but it is risky to introduce it into an Enterprise, unless you have the expertise to maintain/support it yourself, otherwise prepare to negotiate for the support arrangements.

Build Automation

Automation tools allow projects to enforce, a standard build process to a set of source files, package and prepare it for deployment into its destination. This destination could be a developers local machine, or a server environment, but the build process should be consistent and reliable.

Many projects schedule the automatic compilation of the SRF, generating browser scripts, and deployment of the SRF into development environments. The same process should also be extended to deploy Open UI resources into the same environment, providing Continuous Integration for the entire build process.

Here are some examples of automation that can be applied to Open UI resources before deployment

* Add standard headers such as revision, organization details, release information, disclaimers to all files
* Strip comments from files
* Compress JS/CSS files through minification
* QA JS files with JSHint/JSLint
* Consolidate common JS Files to reduce HTTP requests
* Extract metadata from JS files, and produce documentation

Are you using a build process for HI? The same principles can be used in HI for other external resources.

Here are some ideas

* Automatically turn of XSLT indenting
* Generating XSLT documentation
* Extracting eScript from the repository and validating it
* Run interface test cases

Code Editors

While Notepad and other standalone editors are sufficient, it is recommended that you choose an editor that has the capability to detect JS language errors, integrate with your SCM, and automation tools.

Siebel Tools has this capability built in to an extent, but in Open UI, if you miss a closing bracket, and it is loaded via a common file, your application could fail silently, and pin pointing it to its exact source might not be fun. Code editors can perform the role of QA, by ensuring that your code is free from syntax errors before it is run against more stringent QA checks by programs like JSHint/JSLint

Automated Test Cases

Automated test cases are used as part of Continuous Integration to ensure that changes from multiple developers, work coherently and doesn’t break the application. The challenge is that developing automated test cases for the UI isn’t easy, at least not for traditional HI UIs. Open UI promises to be open, and exposes a new set of APIs for browser automation tools to interact with.

Until Oracle provides an Open UI automation client (for developers), conceptually, a project could achieve Open UI automation testing using a combination of the following tools

* Selenium
* Watir
* Ruby
* Custom JS OUI automation API

Selenium provides the browser automation, Watir is a ruby library that provides a nice abstraction onto of Selenium, and a custom JS interface provides the API bridge between Ruby, and the Open UI client.

Toolchain

Your build process will be dependent on the tools that’s supported by your organisation. The best tools for the job, are dependent on a variety of factors, like cost, availability, familiarity, features, and support. There isn’t a standard set of tools for everyone, however the main tools in your arsenal should be the IDE, SCM, and Automation tools

* List of source code editors
* List of build automation software
* List of SCM software

Other tools to investigate

* JS minification
* JS/CSS consolidation
* JSHint/JSLint
* JS Documentation

Conclusion

Establishing a build process isn’t something that is restricted to large teams, it just important to have this process in place for a single developer working offline. Having source code control becomes critical for working in Open UI, so gone are the days where it is acceptable to modify files directly on the web server, or on the Siebel dedicated client for the same reason.

A build process can ensure that your application remains stable throughout the iterative development process, or alternatively without one, your project can become a cowboy arena, where developers go in, make adhoc changes, send off different file revisions for deployment via emails, and break at every deploy. The choice is pretty clear.

Further reading

* Why use source control
* Setting up a JS Build Process
* Siebel Continuous Integration Setup
* Branching, Merging concepts with Git

Some customers will have more mature processes than others, so what build tools are you using in your project?

To kick this off, here’s what works for me

* ANT (Build automation)
* ClearCase (SCM)
* Eclipse (IDE) + ClearCase Plugin
* Eclipse JSHint integration via RhinoJS
* YUI Compressor (JS minification)
* + Selenium & Ruby for some UI automation fun

Read More

Open UI: Grunt with Livereload

With Siebel Open UI development we naturally spend the majority of our time working on the browser. Part of that requires clearing the browser cache, and hitting F5 to reload the browser.

Sometimes we reload the browser, and think afterwards, did I really clear the cache that time? Maybe not... so we the clear cache, and reload the browser again. Seconds later, we spot a typo in our code and the endless cycle continues. Wouldn't it be good if we can focus on writing the code, and let something else clear the cache and reload the browser? 

This is where tools like Grunt can help.

1. Download No Cache

"No Cache" is a Chrome extension that I wrote to automatically clear your browsers cache. It is available for free on the chrome store. There are 1 click solutions out there, but I prefer to have an automatic background process take care of this.

https://chrome.google.com/webstore/detail/no-cache/ogbfmfambmmhfdpfokohebghmcdbodbh?hl=en

1. Right click on the No Cache icon, and choose "Options"
2. On the "Cache" tab select "Enable for filtered requests"
3. On the "Filters" tab select the input box, type in "start.swe" and click the + icon

This tells No Cache to clear the cache for every request Siebel makes, this should work on the local or thin client. If you use another browser and have your own favorite clear cache plug in, then that will work as well.

2. Install Grunt

Grunt is a JavaScript task runner that we can configure to reload our browser, but first we need to download and install Node.js from this website

http://nodejs.org/download/

Its not necessary to know what Node.js does, just know that it provides us with the environment to run Grunt. Once you've installed Node.js open a command prompt and type the following line to install the grunt command line globally.

npm install -g grunt-cli

Next we need to decide where to put our Grunt configuration. I like to put it under the Siebel/Client folder because I backup the PUBLIC folder, and don't want copies of Grunt and its modules copied along with this backup.

Open a command prompt, cd to your Client folder, and follow the next set of instructions to install and configure grunt on your local machine.

mkdir grunt

cd grunt

Create a new file in the same folder called package.json, with the following contents

{
  "name": "SiebelGrunt",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}

back at the command prompt, type the following command to download the required dependencies defined in the file above

npm install

Next create a new file called Gruntfile.js, with the following contents

module.exports = function(grunt) {
     var sJSPath = '../PUBLIC/enu/*/SCRIPTS/**/*.js';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
          watch: {
               scripts: {
                    files: [sJSPath],
                    options: {
                         livereload: true
                    },
               }
          }
    });
    grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.registerTask('default', ['watch']);
};

This file is important, so lets run through it line by line

>     var sJSPath = '../PUBLIC/enu/*/SCRIPTS/siebel/custom/**/*.js';

This path specifies the folder and file pattern that Grunt will watch for changes. Essentially we want to watch for any changes to JS files in the Siebel script folders

> watch: {

This line defines a "watch" task, there are other tasks that can be run. Eg code lint/minification/, but I've kept it simple for this example.

> files: [sJSPath],

configure the files to watch using the path statement above

> livereload: true

This option will spawn a background process that will cause your browser it refresh automatically. To Integrate our browser with this background process, there are 3 options as described here

http://feedback.livereload.com/knowledgebase/articles/87979-how-do-i-choose-the-best-integration-method-

The browser extension is the most suitable method for development, so go ahead and download it with these instructions.

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

To start it all up, go back to the command prompt and simply type

grunt

To test it out, goto SCRIPTS, open up any JS file like "postload.js", modify it as below, and watch your browser reload magically.

I've presented the bare minimum required to get up and running with Grunt, but once you have that setup, you no doubt want to look into what other things Grunt can do for you.

A good place to start is..

http://gruntjs.com/

Or another tutorial like this one

http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/

Read More