IBM Connect Session Summary - BP 407 Portal at the Speed of Light: Techniques for IBM Worklight Integration

I recently presented a session at Connect 2013 with Handly Cameron titled: Portal at the Speed of Light: Techniques for IBM Worklight Integration. This session focused on discussing various techniques for integrating IBM WebSphere Portal with IBM Worklight. IBM unveiled Portal 8.0.0.1 and a new feature pack for Web Experience Factory, which took mobile landscape to a different level. In Portal, we have responsive themes Out of the Box with CTC4 templates and in Web Experience Factory we have a Camera builder that integrates with Worklight. Our techniques discussed during the session were inline with these new developments in the Portal space.

Let us take a step back and look at what we discussed during the session. We started off with a quick introduction to Multichannel Applications and Worklight. We then discussed various questions that current IT decision makers have in mind before zeroing in on an approach. And then, we presented our five techniques namely:

• Standalone Portal – Responsive Web Design
• Standalone Worklight
• Using Portal to host application pages
• Personalized Content driven by WCM
• Integration with Backend Systems

Finally, we concluded with a Reference Architecture and list of things to keep in mind while selecting an approach.

The message that was conveyed through out the session was loud and clear. Portal could be used Standalone to cater to multichannel devices; Same applies to IBM Worklight. Each of them has their own place depending on the business requirements. The other three approaches talk about inter-play between Portal, WCM and other Backend systems with Worklight. We explained scenarios and presented code snippets where such integration would make sense. Most of the questions at the end were focused on this topic.

To summarize - If anyone is heavily invested in WebSphere Portal, then migrating to 8.0.0.1 and employing Responsive Design helps tremendously in targeting multi-channel devices seamlessly. Responsive Themes are available Out of the Box and personalized content could be created to target users more closely. In addition to that, IBM entitlement provides 2 additional licenses for Worklight if the application talks directly to Portal. This would be a nice way to use that entitlement to create mobile applications from Portal targeting multichannel devices. Alternatively, if WebSphere Portal is not in the mix, IBM Worklight could present a promising solution standalone delivering enterprise capabilities across devices.

To access our presentation from IBM Connect, please click here: Portal at the Speed of Light: Techniques for IBM Worklight Integration.

As an IBM Champion for IBM Collaboration Solutions, I was also interviewed on my work with Worklight, Portal and Mobile. To watch the interview, click here or below.


Find out more about Prolifics' week at IBM Connect here: Prolifics @ IBM Connect.
To learn more about Prolifics, please visit www.prolifics.com.

If you would like to talk about this presentation in depth, please connect with me in one of the following ways!
Twitter: @LaksSundar
LinkedIn: Laks Sundararajan
Email: Laks Sundararajan

Laks Sundararajan is a Solution Architect at Prolifics, an IBM Champion for Collaboration Solutions and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led implementations of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management and Tivoli. He holds a Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

Prolifics Mobile and Portal Demos at IBM Connect

Attending IBM Connect? Prolifics will be showcasing demos of IBM Worklight, IBM WebSphere Portal, IBM Web Content Manager, IBM Connections and more! Get a preview into these demos by visiting our YouTube page for IBM Connect.


Tweet
Interested in scheduling a one-on-one session with a Prolifics expert to walk through these demos? Email solutions@prolifics.com today to schedule a session at IBM Connect!

To learn more about Prolifics at IBM Connect, visit: www.prolifics.com/connect-2013.htm

Portal at the Speed of Light: Techniques for Worklight integration at IBM Connect

IBM Connect 2013 is now less than two weeks away! This is my eighth visit to the conference, but the first time as a full session speaker. Along with my colleague and fellow IBM Champion, Laks Sundararajan, I will be presenting on Wednesday morning about techniques for using IBM WebSphere Portal and IBM Worklight together to build mobile applications.

Here is our agenda:

IBM Worklight Portal
Servers Diagram

• The need for multi-channel applications
• A quick overview of Worklight
• When to use just use Portal or Worklight by themselves
• How to build hybrid apps using Portal and Worklight together
• Use WCM to let your business authors drive application content
• Leveraging Cast Iron and WebSphere MQ
• Best Practices Speed Round

Our goal is to help you understand options for designing a mobile application integrated with your existing web and back end systems. We will show you the system architecture, a few live demos, and provide some tips on how to implement the solution for yourself.

You can visit the IBM Connect conference site to connect with us and add the session to your schedule: http://www.socialbizonline.com

Session Details:
Title: BP407: Portal at the Speed of Light: Techniques for IBM Worklight Integration
Date & Time: Jan 30, 10:00am - 11:00am
Location: Dolphin S. Hem III
Abstract: In this session, you'll learn techniques for extending your IBM Websphere Portal to mobile applications across iOS and Android devices. Experts from our User Experience team will demonstrate how to easily build IBM Worklight applications that integrate with personalization and web content features provided by Portal. You'll see how to use tools such as IBM Web Experience Factory and IBM Web Content Manager and how to leverage capabilities such as Portlet Services and mobile themes to develop a mobile application running on IBM Worklight in both online and offline modes. At the end of this session, you will be ready to take advantage of the IBM Worklight entitlement provided by IBM to take your Portal to the mobile world!

Prolifics is a Bronze Sponsor at IBM Connect 2013 and will be showcasing our solutions and offerings at Booth #C18-19. To see what else Prolifics has planned for the conference, please visit: www.prolifics.com/connect-2013.htm.

If you would like to meet me at Connect or set up a one-on-one workshop session with a Prolifics subject matter expert, please reach out in one of the following ways:
Tweet @Handly
Tweet @Prolifics
Email solutions@prolifics.com

Handly Cameron is an IBM Champion and a Technology Manager leading Mobile and Social solutions at Prolifics. He has 20 years of experience in enterprise collaboration and application development and loves to help companies leverage social and collaboration technologies to drive business value. Handly is the leader of the Atlanta WebSphere Users Group, recently finished 5 years as the president of Agile Atlanta, and holds 25+ industry technical certifications. He blogs at http://handly.org and is on Twitter as @Handly.

BPM on the Go with IBM Worklight - Part 3

In the previous entry, we discussed how IBM Worklight addresses each of the 3 capabilities needed to achieve efficiencies for business process, namely:

• Send prompt notifications as a process waits for decision
• Connect to processes on the move
• Access the decision data in a secure disconnected mode for review and approval

In this third and final entry, I will showcase a real world example: a simple claims processing mobile application built using IBM Worklight. If you are just joining us, here are the links to Parts 1 and 2 of this series:

BPM on the Go with IBM Worklight: Part 1
BPM on the Go with IBM Worklight: Part 2

Claim Process:
An Insurance company initiates a claim process and one of its specialists receives notifications on the phone regarding pending claims. Once the claims are downloaded to the mobile device, a claims specialist could be work on them in an offline (disconnected) mode. All changes are saved locally in an encrypted cache and downloaded claims could be worked on seamlessly. Once connection is re-established, claims processed locally are synced back to the server.

The process flow for the Claims Process is illustrated below:

A Worklight Mobile Application that demonstrates the Claim process is shown below:

This concludes the 3-part blog series on BPM On the Go with IBM Worklight. We started with capabilities that are needed to achieve efficiencies in business processes, looked at an in-depth detail on how IBM Worklight provides these capabilities and demonstrated the same with a real world example.

Have a question? Interested in a more in-depth look? Feel free to reach out to me:
Email: Laks Sundararajan
Tweet: @LaksSundar
Connect on LinkedIn: Laks Sundararajan

Also, I will be attending IBM Connect 2013 in Orlando at the end of January. If you are attending and would like to meet, I will be happy to schedule a meeting. Or stop by Prolifics' booth #C18-19 in the Solution Showcase to meet me and the rest of the Prolifics team.

For more information about Prolifics, please visit www.prolifics.com.

Laks Sundararajan is a Solution Architect at Prolifics, an IBM Champion for Collaboration Solutions and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led implementations of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management and Tivoli. He holds a Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

BPM on the Go with IBM Worklight - Part 2

In this part, we will look into how IBM Worklight addresses each of the 3 capabilities needed to achieve efficiencies for business process namely:

• Send prompt notifications as a process waits for decision
• Connect to processes on the move
• Access the decision data in a secure disconnected mode for review and approval

Let’s look at one at a time:

1. Send prompt notifications as a process waits for decision:

Today’s Businesses require prompt notifications for processes and IBM Worklight accomplishes the same through Unified Push Notifications API. The key here is that Worklight acts as a cross platform push notification service and allows developers on the back to just be concerned with the messaging and polling of your enterprise systems. Currently Worklight’s Unified Push Notification API supports iOS and Android with support for Blackberry and Windows Mobile coming soon.

2. Connect to processes on the move:

Connecting to processes on the move refers to providing multi-channel access to existing applications. IBM Worklight accomplishes the same by extending existing applications to Mobile World. It follows well-known phenomenon ‘Write once run everywhere’ and the ‘80/20 principal’ by providing a Hybrid approach to building Mobile applications. Worklight can help develop device independent HTML5 code that could be wrapped on top of Apache Cordova framework and deployed across Mobile platforms providing connectivity on the go to existing business processes and accelerating go-to market times by increasing productivity.

3. Access the decision data in a secure disconnected mode for review and approval:

Executives are on the move and they would like to have uninterrupted access to information. While it is theoretically impossible to have access to all information on the go, providing access to critical information in a disconnected mode will go a long way in improving process efficiencies. Worklight addresses Offline access by providing access to secure encrypted cache for storing information locally.

The latest version of Worklight went a step further and added embedded mobile database for offline data with robust encryption and data management abilities that include synchronization.

To learn more about IBM Worklight, please visit: https://www.ibm.com/developerworks/mobile/worklight/getting-started/

To conclude, we now have a fair idea of how IBM Worklight handles each of the capabilities required for achieving efficiencies in business processes. In the next part, we will take a real world example developed using IBM Worklight and walk-through each of the capabilities in detail.

Prolifics will be a sponsor at the upcoming IBM Connect conference, held January 27-31 in Orlando, FL. During this conference, we will be showcasing our end-to-end mobile development solutions and sharing some recent success stories. Want to meet our team? Stop by booth C18-19 in the Solution Showcase or reach out to solutions@prolifics.com. For more information, please visit www.prolifics.com.

Laks Sundararajan is a Solution Architect at Prolifics, an IBM Champion for Collaboration Solutions and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led implementations of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management and Tivoli. He holds a Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

BPM on the Go with IBM Worklight - Part 1

Many enterprises have been making tremendous investments in the area of business process management. With human tasks forming a critical element of these business processes, providing required information in a timely and efficient manner is key to improving the overall process and making informed decisions.

However, in an increasingly mobile and geographically dispersed business world, people are constantly on the go. Extending your business processes to support mobile use helps to bridge this gap, providing seamless and efficient human interactions.

In this 3 part series, we will look at capabilities that are needed to achieve efficiencies in business processes, a mobile framework that addresses the capabilities and a real world example that illustrates the same.

The following capabilities are the key to achieve efficiencies in business processes:

• Send prompt notifications as a process waits for decision
• Connect to processes on the move
• Access the decision data in a secure disconnected mode for review and approval

Figure 1 - Efficient Business Process

Mobile has been growing exponentially over the past few years with Smartphones and Tablets overpowering Desktops for the first time ever in 2011. Given the projected growth rate , it is imperative that business processes are optimized for mobile devices and provide much needed capabilities like Notifications and Offline access in a seamless manner.

There are various solutions available for developing smartphone applications ranging from Native Development to Hybrid Apps to HTML 5 Sites. IBM’s answer to address the smartphone conundrum is IBM Worklight. Before we get into any details, let us take a quick look at IBM’s Enterprise Mobile Strategy.

IBM’s Enterprise Mobile Strategy to address today’s challenges is plain and simple:

IBM Worklight accomplishes each of the above strategies’ by providing a platform that seamlessly integrates with existing suite of products and opens new avenues to businesses.

To conclude, we understood the challenges facing current BPM landscape, capabilities needed to achieve efficiencies in business processes and IBM’s Mobile Strategy. In next part of this series, we will take a deep dive into IBM Worklight and understand how it addresses each of the required capabilities in detail.

Prolifics will be a sponsor at the upcoming IBM Connect conference, held January 27-31 in Orlando, FL. During this conference, we will be showcasing our end-to-end mobile development solutions and sharing some recent success stories. Want to meet our team? Stop by booth C18-19 in the Solution Showcase or reach out to solutions@prolifics.com. For more information, please visit www.prolifics.com.

Laks Sundararajan is a Solution Architect at Prolifics, an IBM Champion for Collaboration Solutions and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led implementations of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management and Tivoli. He holds a Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

IBM Worklight – Part 3: Best Practices

So far, we have looked into folder structure, logging device information, splash screen, Offline Mode, State Manager and Navigation. In this final part, we will look into callbacks, source control and finally put together all our learnings and come up with an InitPage.js that implements all Best practices discussed so far.

1) Callbacks:
Callbacks form an essential part of JavaScript and it is always a good practice to keep callbacks clean and simple. There is not much material on the Web about DOJO callbacks other than dojo.deferred. Here is a simple callback function in DOJO that can be used as an example:

The following function will initiate a callback i.e. call getCurrentLocation – wait for it to execute and then call drawMap with obtained value rather than proceeding asynchronously.

2) Source Control:
worklightServerRootURL in application-descriptor.xml needs to have a process in place to customize Worklight URL for each environment ${local.IPAddress} is pretty generic and may not work when environment is clustered.

iPhone and Android folders have nativeResources folder which is a great place to have all icons for the app. When checking in the project into Source Control, it is a best practice to check-in common folder (source code) and just nativeResources folder in iPhone, android and other devices if any (windows, blackberry). It is always a good practice to have native code generated every time on developer workstations and through build scripts from common code. If assets under js folder are modified there is an option to check them in as well but if an App is running the same codebase, the folders in blue are the ones that must be checked into Source Control.

application tag has an id field which should match mainFile name in application-descriptor.xml i.e. if the id says ‘hello’ mainFile should be hello.html Altering the id field means changing the main file name as well. If they are not in sync, the App might have issues running on various platforms as native code is generated based on this assumption.

If dojo is employed, make sure the app.id in build-dojo.properties is the same as id in application tag 

Putting it All Together: After implementing the best practices we talked about in the 3 part series, an InitPage.js looks like the following:

The above snippet would be the skeletal structure of main JavaScript for a Worklight Starter application. However, the actual implementation would have more controllers, variables and utility methods. This structure makes the Application versatile and easy to adapt to changes.

Conclusion:

I hope you have enjoyed this 3-part blog series on Worklight best practices. If you have any questions or would like more information, please email solutions@prolifics.com. For more information about Prolifics, please visit www.prolifics.com.

If you would like to connect with me, please add me on LinkedIn and follow me on Twitter! I would love to hear your thoughts on this series and your experiences with IBM Worklight.

Laks Sundararajan is a Solution Architect with Prolifics and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led the implementation of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management, Tivoli and Mashup’s. He holds Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

IBM Worklight – Part 2: Best Practices

In the initial part of the series, we focused on the folder structure, logging device information and splash screen. In this part, we dive deeper into core Worklight features and focus on Offline Mode, State Manager and Navigation. Let us get right to the subject.

1. Offline Mode/ Processing:
Even though Mobiles are supposed to have 24*7 connectivity; reality is different. Given that every Application should implement Offline Mode. To enable Offline Mode, modify body tag of InitPage.html as follows:

Now, implement doConnectionFailure() method inside InitPage.js

Additionally, have a global busy indicator that could be used across pages to show processing cycles. This will ensure in uniformity across applications.

Applications can then show/hide busy indicator as follows:

2) State Manager:
Mobile Applications need to manage state on client side. This could be achieved through a State Manager that intercepts each View and stores relevant information globally. A code sample that illustrates the same is shown below:

The following snippet is present in InitPage.html to define the view name.

3) Navigation:
Navigation is key part of Mobile Applications. Implementing a versatile framework is essential for a quality application. Content fragments should be isolated so that they can be sourced from external systems if needed. It is also a best practice to keep UI in small pieces as opposed to a single large HTML serving up the entire application.

A sample snippet that implements recommended navigation framework in InitPage.html containing to 2 pages: demo1View.html and demo2View.html is shown below:

Now, demoView.html contains the following snippet to take the user back to InitPage.html. Note that mainView corresponds to view name in InitPage.html. For more details on views, refer to StateManager.

If the snippets are present in same page moveTo should be employed in both places. The above example is for navigating between fragments.

Laks Sundararajan is a Solution Architect with Prolifics and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led the implementation of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management, Tivoli and Mashup’s. He holds Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

IBM Worklight Series – Part 1: Best Practices

IBM Worklight provides an open, comprehensive and advanced mobile application platform for smartphones and tablets, helping organizations of all sizes to efficiently develop, connect, run and manage HTML5, hybrid and native applications.

Worklight Supports the following frameworks for developing HTML5 and Mobile Applications

• DOJO
• Sencha Touch
• JQuery

Out of the above frameworks DOJO is widely used by IBM in their Portal and BPM suite of products and signifies IBM’s choice when it comes to RIA Frameworks.

In this 3 part series, we talk about Best Practices for developing Worklight based HTML5 and Mobile Applications in general. Note that some of them specific to DOJO Framework. However, parallels can be drawn and similar practices could be employed for Sencha and JQuery frameworks as well.

In the initial part, we focus on the folder structure, logging device information and splash screen.

1) Folder Structure:
Following is the recommended folder structure for Worklight Application (common folder)

Creating controllers and widgets folder under js folder helps in better organization of JavaScript assets as opposed to a single folder. Having a folder for html assets provides a clean structure and avoids them residing directly at root level.

When a Worklight built HTML5 Website or Mobile Application loads, InitPage.html or rather defined under application-descriptor.xml is invoked. A JavaScript file with same name InitPage.js contains necessary scripting information for the framework. Interactions between various components are shown below for better understanding. We will be discussing more on Web Framework in next couple of installments.

For the purposes of this discussion we call the as InitPage.html and main JavaScript file as InitPage.js. Normally, these are named as per Application created i.e. An Application with name ‘HelloWorldApp’ would have HelloWorldApp.html and HelloWorldApp.js as main HTML and JavaScript files.

2) Logging Device Information:
It is always a good practice to log device specific information for troubleshooting/ audits given the vast number of platforms and devices available today. This could be accomplished by calling the simple function below from a dojo listener in InitPage.js

3) Splash Screen/Text:
Mobile Applications have an initial splash screen that is displayed when an Application is launched. Following that, the initial page (in this case InitPage.html) is loaded. While the page is loaded, it might take a few seconds for framework libraries and CSS to load and user may experience a noticeable blip. To prevent this from happening, it is always a best practice to show some text/image when InitPage.html gets called for first loaded (call it as secondary splash screen/text). This is accomplished as follows:

Add the following snippet to InitPage.html

Add the following snippet to InitPage.js and call the function from dojo listener after page is loaded

In the second part of the series, we will be looking at some core features like Offline Mode, State Manager and Navigation.

Laks Sundararajan is a Solution Architect with Prolifics and a key member of highly specialized team working on IBM WebSphere Portal, Content Management and Collaboration technologies. He has led the implementation of many global projects using IBM WebSphere Portal and has extensive background in design and development of enterprise portals. He specializes in providing Enterprise SOA solutions leveraging WebSphere Portal, Content Management, Tivoli and Mashup’s. He holds Masters in Information Technology from Carnegie Mellon University and a Graduate Degree in Engineering from BITS, Pilani.

The Importance of a Focused Mobile Strategy

For the past few years I have been speaking in several conferences about social and mobile solutions for organization for different industry verticals and I am surprised that I still get asked this question. “Does our organization need a dedicated and focused mobile strategy?” I have 2 words. Yes, Yes and Yes. Oh wait that’s 3!

Here is a sampling of stats:
1 billion of the world’s 4+ billion mobiles phones are now Smart Phones
Over 85% of new handsets will have Web access

Usage - What are mobile users doing:
95% send or receive text messages
65% access the internet on their mobile device
48% have accessed a social networking site on their phone
20% have purchased something or charitable donation their mobile phones

Social Impact
Over 1/3 of Facebook’s 600million + user base uses Facebook Mobile
Twitter has 165million users and 50% of them us Twitter Mobile
A whopping 200million + Youtube views occur on mobile devices per day
Not my research!! Women aged 35 - 54 are the most active group in mobile socialization

Traditionally we are used to accessing information via desktop and mobile web browser (more like WAP)

Then came the wonder of Apps. The app revolution got developers to build native apps using C# or objective C or vendor approved programming language.

But the tide is really riding on the app revolution where the next generation of apps are a combination of apps called Hybrid apps. Which is a combination of native code and open html framework.

The different kinds of apps presented great opportunity to exploit the ways developers can present their data. But it also presented a significant challenge. The need for a common toolset, which can provide a platform to develop these mobile apps and an overall strategy. Q1 2012 IBM acquired Worklight to enhance their mobile arsenal. Worklight, offers an open platform that helps speed the delivery of existing and new mobile applications to multiple devices. Essentially it gives a great platform to develop all service level mobile applications.

I wont go in details of the product but here is a quick overview of IBM Worklight

Worklight and iPad
While working for our customers on the mobile app development using the Worklight, a colleague of mine (@VishSinha) had to create to have Split view layout for tablets specifically iPad. There are several ways to achieve it but the need was to create a unified User Experience that is seamless if accessed via non-tablet devices. So he decided to use jquery mobile Split view plugin for IBM Worklight, to achieve the split view look and feel for iPad version of app. Here is a quick approach to it.

Two Panel Split View Layout
To build a two-panel layout, called menu (left navigational links) and main (contents) panels for iPad, there are two divs inside the body tag of the main App.html page. Menu div panel is mainly responsible for handling all the navigation links on the left hand side and main div panel is mainly for rendering/loading the contents on the right side of the screen once user clicks on the left side navigational links.

Here is a preview of the Prolifics homepage of the iPad Split View:

The HTML code for the menu div panel looks like this:

The point being, everyone knows mobility is very important but it is almost imperative to use a platform for development of mobile devices that can scalable and can support multiple formats of mobile applications.

Sources:
http://www.thefonestuff.com/news/10/Mobile-Phone-Facts-2011.html http://www.pewinternet.org/Reports/2010/Mobile-Access-2010/Summary-of-Findings.aspx
http://www.worklight.com

Niral Jhaveri is the VP of User Experience at Prolifics and has extensive expertise in the IBM Lotus, WebSphere and Rational family of products. He has played a key role at several strategic clients by providing technical leadership. Niral has an extensive background in the design and development of IBM WebSphere Portal, SOA and Web 2.0 applications with a proven track record of consulting and architecting solutions for several industry verticals like Finance, Retail, Insurance and Technology.