Using Angular in Siebel Open UI Framework - Angular Todo App in Siebel

About: This post is about using Angular Libraries with Siebel Open UI Framework. The obvious advantages of bringing in Angular with Siebel are :

1. It Provides a good MVC structure as compared to using only Jquery.
2. It is intuitive, comprehensive and timesaving.
3. Provides a better control of data as the data binding is easier.
4. It will open up the possibilities of having small Angular Apps integrated with Siebel Application. For example Todo List on HomeScreen, Weather Updates, Interactive Dashboards etc..

As part of this post, We will discuss how to develop a Todo List on Siebel HomePage using Angular. In this post, We will only discuss Angular 1 as I am new on Angular and still experimenting with this framework.

The Idea of using Angular with Siebel came to me while I was working on the development of Siebel IPAD application and I had to write more than 20,000 lines of PR code to implement some UI/UX and functional requirements. I discussed this with our UI/UX designer if We can bring in some 3rd Party library with Siebel Open UI and We realized that it was possible. I was able to find some awesome tutorials by Duncan Ford to include 3rd Party libraries or Jquery Plugins with our PM/PR but unfortunately just doing this will not work in case of Angular. You can Check out the below video to get an idea:



While implementing angular using this technique I was unable to bind the angular app with the library. However, I observed one strange thing that my Angular structure was working fine if I include Angular URL from Google CDN. But if I include the locally hosted Angular.js file the App was not behaving as expected. It took me some time and some help from Angular experts (my Sister :p ) to realize that there was more to it. We will discuss this implementation with the help of two examples. First We will develop a small sample Angular Dom and make it work with Siebel, and then We will discuss how to develop a Todo List using Angular JS.

Using Angular in Siebel:

The first thing that We need to start with it is to get the Angular Library downloaded to our Siebel Public folder for local hosting. We can definitely use the CDN libraries hosted by Google or Microsoft but these won't work on intranet network especially where users don't have access to the public internet.

Resources Needed:

• Angular 1.6.9 library or any Angular 1 library
• https://code.angularjs.org/ - Download the Zip and extract in PUBLIC\enu\23044\scripts\siebel\custom\
• PR to load on some Applet
• https://drive.google.com/file/d/191bjJbLl-gECLmtvhoZEUmCwV60c4MOv/view?usp=sharing
• This PR was written by me for Contact Form Applet
• Angular DOM structure
• I have taken this DOM example from W3 schools https://www.w3schools.com/angular/tryit.asp?filename=try_ng_default
• This DOM is already included in the PR above
• Angular Controller logic
• https://drive.google.com/file/d/1ipuH22mN1NiTZuuGfD00t-7B7resONB9/view?usp=sharing

Note: After you download the PR and controller do check the comments in the code. As it will give you an idea how this whole thing is working.

Steps:

1. We will build a small Angular Dom or HTML content like below:

<div ng-app="">

<p>Input something in the input box:</p>

<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>

<h1>Hello {{name}}</h1>

</div>
Refer W3School Tutorial link provided above

2. We need a Physical Renderer on an Applet (angularDemoPR.js already provided) where We will use his DOM to append or replace it with the Applet DOM. The code to do that will be written after the ShowUI event of PR. The PR given in the link is for Contact Form Applet.

3. Once We are ready with this We will have to write a controller (ngDemoController.js already provided in the above links) which is to be loaded with the Angular DOM to be attached with our Siebel Page. This is an important part as it binds the Angular DOM with the library and without this, the Application won't work if Angular is hosted locally. 

4. Register the PR on Manifest Administration Screen.

5. Log out of the application and Logn in, Navigate to the applet which is associated with the PR. Start typing in the input box and the content will appear below it in real time.

Sample Angular Application - Todo List on Siebel Home Page:

Now since We know how to use Angular in Siebel. We will develop a small app to manage Todo List on Siebel Home Screen. This is an Angular Application to show, add, delete today's Tasks of Logged In User on Homepage as ToDo List Reminder. The Application queries, add and deletes today's Activities using Siebel Business Service and Workflows.

Resources:

• PR on Activity List Applet on Home Page.
• https://drive.google.com/file/d/1LUKIageOIDoUGYSV0bmzrDQEnbzv6orc/view?usp=sharing
• Angular HTML Template
• https://drive.google.com/file/d/1sFnyEIUyoT1aS1LugSyj86TVBOl-KRu1/view?usp=sharing
• Controller JS
• https://drive.google.com/file/d/1IPjJNxM50aOxoSBXGWuMw6S7AVhvftBP/view?usp=sharing
• Business Service or Workflow to fetch, Add, Delete data from Action BC and pass it to the controller.
• We can define our own logic to do these operations.

Now once We have all the resources We have to place these files in public Folder Structure and register it in Siebel Manifest Screens to allow it to load with the Applet. Check the Snapshots below to get an idea.

Once We are done with the setup We have to log out and re Login to view the changes. The snapshot below shows how the Todo list will appear on Siebel HomePage. 

The video below will show you the navigation journey and usage of this small Angular App with Siebel on an Android Device. Enjoy the video and do let me know if you have implemented or have ideas to develop such Angular apps for your Siebel Application.

Thanks for reading the post. If this post helps you in any way Do comment below and let me know how it helped you.

The Postload/Preload Event and Getting Siebel User's Device/Browser Info to Load Mobile UI

About: This write-up will focus on the different ways We can exploit the Postload and Preload event of Siebel to do some amazing stuff. As an example, This blog will focus on how to identify the Clients Browsing Platform and load UI contents accordingly.

Many Times We fall into situations where We want to modify our Web contents on the basis of Clients Browsing Platform and We may have a similar requirement for a Siebel Application. And If that's what you are looking for this post is just for you.

There are certain vanilla JavaScript events which are just called before and after a Siebel Page loads. The events are OnPostLoad(refer postload.js) and OnPreLoad(refer preload.js). We can extend these events as per our needs and requirements. For example, We want to identify the Browser and the device being used by the user and if its a Desktop We'll just let them browse the application but if its a mobile device We may want to load the mobile version of Siebel. Here I am working on custom mobile views and HTML is still in development so We will just inform the user that it's under development in an interactive way.

Let's do this in steps :

1. Navigate to Siebel Client Public Folder to the Postload.js File

Snapshot of Public Folder

Extra Gyan : 23044 is a release number. This number is used by the Siebel Community to version control JavaScripts for Siebel Product and as We know ENU is the Language Code for Siebel.

2. In the Postload File, We will add the code to Detect Browser and Device Information. There are certain Browser Commands We can use to get device information. Some of the commands We will be using here are navigator.userAgent, navigator.platform, navigator.appVersion, navigator.vendor .To test this We can just type these commands on our browser console and see what values We get. We can just type 'Navigator' and see the details We can get about a device. 

3. We will add our logic to handle different scenarios. Refer snippet :

    function OnPostload( ){

    try{

var deviceInfo = navigator.userAgent;

var mobCheck = theApplication().GetProfileAttr("mobcheck");

if((deviceInfo.includes("Android") || deviceInfo.includes("Ipad") || deviceInfo.includes("Iphone")) && mobCheck != "Y")

{

theApplication().SetProfileAttr("mobCheck","Y");

alert("Mobile Platform Detected /n The mobile version of the Website will load");

//our logic

}

    }

    catch(error)

    {

        console.log("Error Occurred while loading Mobile Website");

    }

    }

}

4. Save The Changes Clear Cache and replace the file on the server or on a local client.

The Below Video gives a glimpse of one of the ways We can use this JS to customize our application.

You can get the code for this in the link below :) .
https://drive.google.com/file/d/16qAGMQ5lu6l_lMavMZEF8yaI-UN0P9a1/view?usp=sharing

The code for HTML game has been taken  from SoloLearn.

Thanks for going through the post. Like, Comment and Share if you liked the content. Do let me know the way you will be or have exploited this JS to customize your Siebel App.