WebCenter Portal & SPA (Single Page Application) – Enhancing ADF UI Design and UX Functionality

First of all, you may be wondering: what is SPA and how can it improve Oracle WebCenter Portal?
It’s the future, trust me, especially when it comes to providing the best possible UX and flexible UI to your users and enhancing the power of ADF Taskflows with a radical UI overhaul. ADF is great for creating rich applications fast, but to be honest, it is limited in its capability to provide that rich flexible HTML5 UX  through the ADF UI components and to create that truly interactive design that we all seek in today’s modern web based apps and portals. If we are honest, the developer (or more importantly, the designers) are constrained with the out-of-the-box ADF components/taskflows and their lack of design flexibility, unless they want to create their own and extend the render kit capabilities (but extending the render kit will be for another post – today lets cover SPA with Portal).

SPA fits in perfectly – overhaul the ADF UI using today’s modern techniques and design agency with the skills to build responsive components using the latest frameworks and libraries, such as knockout, backbone, requirejs, socket.io with reactive templating using mustache, handlebars to compliment ADF and WebCenters services via its REST API.

But before taking the next step and thinking SPA is right for you, read these warnings!

  • The taskflow interface is developed using the latest framework and libraries – not all partners and web design agencies are forward thinking and may not be able to develop and achieve SPA components for WebCenter Portal.
  • The cost can be greater, as the interface is usually designed from the ground up and requires browser and device testing. But if it’s done well, it will outmatch anything that the ADF UI layer can provide your users.
  • Experience goes a long way, especially with matching your design agency with ADF-experienced developers to provide responsive web services and inline datasets.

So what is SPA?

A single-page application (SPA) is a web application or website that fits on a single web page with the goal of providing a more fluid user experience. In an SPA, either all necessary code – HTML, JavaScript and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page (similar to ADFs PPR) as and when necessary, reducing the page load and speeding up page load times.

With our use of SPA within portal, the SPA is made modular and wrapped within a taskflow container, providing the rich capability to have multiple components that can be easily dropped into a page while providing rich interaction between components that are context aware by simply adding them from the resource catalog from within the WebCenter Composer view.

Workspace manager

Here is an example Photoshop design that we can easily convert into a pixel perfect functioning SPA taskflows we have developed that enables logged in users to manage their own list of Application and Spaces. All server side interaction is handled via ADFm (model) layer, which enables the ADF life cycle to be aware of REST calls and prevent memory leaks or other possible session issues. While the UI layer is all custom with reactive dynamic templating that is far superior and faster than the current ADF, PPR calls, as all the interaction and updating of the template is handled client side. Another great thing is that this template can easily transform and support modern responsive design techniques and can be consumed by mobile devices, and could also be deployed to other app environments like Liferay, SharePoint, and WebCenter Content, as the UI layer does not rely on ADF calls and service requests can be proxied or CORS enabled if the calls are handled by AJAX and are not WebSocket requests.

Click here for hi-resolution

Here you can see another example of a SPA Taskflow in action displaying the JIVE Forums (above), compared against the out of the box ADF Forum Taskflow (below).

Conclusion

If you are looking to create applications fast that are functional, use the out of the box taskflows or develop your own ADF components entirely in ADF with your development team and customize the ADF skin to improve on the ADF look.

However, if you are looking to take the experience to the next level and want to invest more to create visually interactive modern and rich dynamic experiences to your users, bring in a good UX/UI team that can help transform your interface layer while enabling components to have the potential to be deployed across multiple platforms while maintaining the power of the ADF back end.

Side Note

I’m currently co-authoring a white paper on modular SPA for ADF taskflows providing examples and different development techniques that can be used to enrich the UI. I hope to get this out to you and on OTN in the next 6 months so keep a look out for it.

Hackathon Provides Opportunity for Collaboration and Innovation

Fishbowl team members competed in our third annual Hackathon over the weekend. Our consultants split up into four groups to create an innovative solution, and were given just over 24 hours to complete the task. The goal was to create usable software that could be used in the future when working with clients; some of our most creative products and services originally derived from Hackathon events.

13689_10152683472083053_3545144700959488753_n  10410948_10152683472493053_2066307430651186573_n

10592750_10152683472058053_6810123916371611080_n  11043146_10152683472098053_5907236575559895437_n

 

Here’s a summary of what the teams came up with this year:

Team 1: Integrated Fishbowl’s Control Center with Oracle WebCenter Portal

Team 2: Integrated the Google Search Appliance with Oracle’s Document Cloud Service

Team 3: Worked to connect WebCenter Portal with Oracle’s new Document Cloud Service

Team 4: Got Fishbowl’s ControlCenter to run in the cloud with Google Compute Engine

At the end of the Hackathon, all participants voted on the best solution. The winning team was #2 (GSA-Doc Cloud Service integration), made up of Kim Negaard, Andy Weaver, and Mike Hill. Although there could only be one winner, overall consensus was that each team came up with something extremely useful that could help solve common problems we’ve run into while working with WebCenter and the GSA. If you’re interested in learning more about any of the team’s programs, feel free to contact us at info@fishbowlsolutions.com.

“Innovation in Managing the Chaos of Everyday Project Management” is now on YouTube

If you missed Fishbowl’s recent webinar on our new Enterprise Information Portal for Project Management, you can now view a recording of it on YouTube.

 

Innovation in Managing the Chaos of Everyday Project Management discusses our strategy for leveraging the content management and collaboration features of Oracle WebCenter to enable project-centric organizations to build and deploy a project management portal. This solution was designed especially for groups like E & C firms and oil and gas companies, who need applications to be combined into one portal for simple access.

If you’d like to learn more about the Enterprise Information Portal for Project Management, visit our website or email our sales team at sales@fishbowlsolutions.com.

Reminder: Fishbowl Solutions Webinar Tomorrow at 1 PM CST

Cole OrndorffThere’s still time to register for the webinar that Fishbowl Solutions and Oracle will be holding tomorrow from 1 PM-2 PM CST! Innovation in Managing the Chaos of Everyday Project Management will feature Fishbowl’s AEC Practice Director Cole Orndorff. Orndorff, who has a great deal of experience with enterprise information portals, said the following about the webinar:

“According to Psychology Today, the average employee can lose up to 40% of their productivity switching from task to task. The number of tasks executed across a disparate set of systems over the lifecycle of a complex project is overwhelming, and in most cases, 20% of each solution is utilized 80% of the time.

I am thrilled to have the opportunity to present on how improving workforce effectiveness can enhance your margins. This can be accomplished by providing a consistent, intuitive user experience across the diverse systems project teams use and by reusing the intellectual assets that already exist in your organization.”

To register for the webinar, visit Oracle’s website. To learn more about Fishbowl’s new Enterprise Information Portal for Project Management, visit our website.

Upcoming Webinar: Innovation in Managing the Chaos of Everyday Project Management

On Thursday, December 4th from 1 PM-2 PM CST, Fishbowl Solutions will hold a webinar in conjunction with Oracle about our new solution for enterprise project management. This solution transforms how project-based tools, like Oracle Primavera, and project assets, such as documents and diagrams, are accessed and shared.

With this solution:

  • Project teams will have access to the most accurate and up to date project assets based on their role within a specific project
  • Through a single dashboard, project managers will gain new real-time insight to the overall status of even the most complex projects
  • The new mobile workforce will now have direct access to the same insight and project assets through an intuitive mobile application

With real-time insight and enhanced information sharing and access, this solution can help project teams increase the ability to deliver on time and on budget. To learn more about our Enterprise Information Portal for Project Management, visit Fishbowl’s website.

Fishbowl’s Cole Orndorff, who has 10+ years in the engineering and construction industry, will keynote and share how a mobile-ready portal can integrate project information from Oracle Primavera and other sources to serve information up to users in a personalized, intuitive user experience.

Register here