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.

Broadcasting Messages to Siebel Application Visitors

About: This post will take us through some tips and tricks to broadcast administrative or informational message on Siebel Application. We will see how We can call Javascript functions on Siebel Web Templates and load messages and display it on the Login Page from a file without caching it so that the user is not forced to clear cache every time he returns to the Siebel Page.

Sometime back I was asked to Broadcast a message to all the Siebel users on Production Server that the Siebel Application will be down for maintenance during the Weekend. Many of us might be aware that Siebel provides a Vanilla Screen for Broadcasting a Message to the users where We just have to enter a Broadcast message and We are all set. The client went a step ahead and asked us if We can display a similar message on the Login Page and since it was Production Server We were not allowed to bounce it before the maintenance schedule. At that time the only idea We had was to display the text on the Login Web Template or via Splash Text on CFG but that change won't take effect unless the Siebel & Web Servers are bounced (I believe there might be ways of doing it from Siebel Server Parameters on Client as well do let us know in comments if any of you has any idea or knows some other way). So to address this problem We came up with a solution in the further releases. The solution involved maintaining the Broadcast/Welcome Message on a text file which We read from a javascript and We called the JavaScript function from the Login Page.

I will detail the solution in steps for a better understanding:

1. We will create a folder in Siebel Custom Scripts where We will maintain a Plain Text file BroadCastMsg.txt and a javascript file BroadCastMsg.js.

Public Folder Path

• The Plain Text file will contain the Broadcast Message in HTML format. We may keep it in a simple text, the reason I chose to keep it in HTML format was that it will give me the flexibility to define the styling of the text without any other change. Contents of the File are as below: 

<Marquee><p style='background-color:black'><font color='yellow'>Dear User, The Website will be down for maintenance on Sunday from 6 p.m. to 10 p.m. - Siebel Administrator</font></p></Marquee>

Dear User, The Website will be down for maintenance on Sunday from 6 p.m. to 10 p.m. - Siebel Administrator

https://drive.google.com/file/d/1GHimWoXqoiD_4tmEaXoQg4L6xlk_ETQp/view?usp=sharing

Note: Marquee is used to produce a ticker effect. Marquee is a deprecated HTML tag, we can use JS and CSS customizations to display the same effects. We have used it here to avoid coding and since it is still recognized by almost all browsers hence it will work. 

• The Javascript File contains a small function to read the contents of the file. The function uses ajax call to read the file without caching the contents so that everytime the user returns to the login screen they see the latest Broadcast message without clearing the Browser cache. Snippets Below:

function initBM(){

try

{

$.ajax({

url:'23044/scripts/siebel/custom/BroadCastMsg/BroadCastMsg.txt',

cache: false,

success: function (data){

$("#broadMsg").html(data);

}

  });

}

catch(e)

{

console.log(e);

}

}

https://drive.google.com/file/d/1quS0saDc64T7M1o-F3CCsCnRXG1VT8t5/view?usp=sharing

2. After We have all these resources We need a space in Login Web Page where We will display the Broadcast Content. For this, We will create an empty <div> in our Login Page and add some lines in the header of Login Template to include the Javascript file, jquery libraries and Text file we created in first step so that it loads with the Login Page. We have to include the jquery libraries as our javascript has Jquery methods which won't work without including the library.

Add the below lines to the header : 

<!-- Files for Broadcast message - Hitesh Dhanwani -->

<link href="siebel/custom/BroadCastMsg/BroadCastMsg.txt" rel="text/plain">

<link href="files/custom/BroadCastMsg.css" rel="stylesheet">  

<swe:include-script file="3rdParty/jquery.js"/>

<swe:include-script file="siebel/custom/BroadCastMsg/BroadCastMsg.js"/>

<!-- END Files for Broadcast message-->

Add the below Div to the body:

<!--Div Container for BroadCast Msg - Hitesh Dhanwani -->

  <div id="broadMsg"> 

</div>

<!--END Div Container for BroadCast Msg-->

SWELogin.swt:

https://drive.google.com/file/d/1iD1QxIUx-10uxWxdABa-uhTttzGPOktu/view?usp=sharing

3. Replace the Files on Server, bounce the Web Server and Siebel Server and We are done.

Now We have a file Where Administrators can enter any message and will display to the users on the Login Screen. On one window I have the BroadCastMsg.txt file opened and on the other, the Login Page and We will be able to see the same message on the Login page The Video demonstrates how.

Do comment below if this post helps you in any way or if you know or have implemented a similar functionality in a different way.