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).


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.

The Benefits of Integrating a Google Search Appliance with an Oracle WebCenter or Liferay Portal

This month, the Fishbowl team presented two webinars on integrating a Google Search Appliance with a WebCenter or Liferay Portal. Our new product, the GSA Portal Search Suite, makes integration simple and also allows for customization to create a seamless, secure search experience. It brings a powerful, Google-like search experience directly to your portal.

The first webinar, “The Benefits of Google Search for your Oracle WebCenter or Liferay Portal”, focused on the Google Search Appliance and the positive experiences users have had with incorporating Google search in the enterprise.


The second webinar, “Integrating the Google Search Appliance with a WebCenter or Liferay Portal”, dove deeper into how the GSA Portal Search Suite and how it improves the integration process.


The following is a list of questions and answers from the webinar series. If you have any other questions, please feel free to reach out to the Fishbowl team!

Q. What version of SharePoint does this product work with?

A. This product is not designed to work with SharePoint. Google has a SharePoint connector that indexes content from SharePoint and pulls it into the GSA, and then the GSA Portal Search Suite would allow any of that content to be served up in your portal.

Fishbowl also has a product called SharePoint Connector that connects SharePoint with Oracle WebCenter Content.

Q. Is Fishbowl a reseller of the GSA? Where can I get a GSA?

A. Yes, we sell the GSA, as well as add-on products and consulting services for the GSA. Visit our website for more information about our GSA services.

Q. What is the difficulty level of customizing the XSLT front end? How long would it take to roll out?

A. This will depend on what you’re trying to customize. If it’s just colors, headers, etc., you could do it pretty quickly because the difficulty level is fairly low. If you’re looking at doing a full-scale customization and entirely changing the look and feel, that could take a lot longer – I would say upwards of a month. The real challenge is that there isn’t a lot of documentation from Google on how to do it, so you would have to do a lot of experimentation.

One of the reasons we created this product is because most customers haven’t been able to fully customize their GSA with a portal, partly because Google didn’t design it to be customizable in this way.

Q. What versions of Liferay does this product support?

A. It supports version 6.2. If you have another version you’d like to integrate with, you can follow up with our team and we can discuss the possibility of working with other versions.

Q. Do you have a connector for IBM WCM?

A. Fishbowl does not have a connector, but Google has a number of connectors that can integrate with many different types of software.

Q. Are you talking about WebCenter Portal or WCM?

A. This connector is designed for WebCenter Portal. If you’re talking about WCM as in SiteStudio or WebCenter Content, we have done a number of projects with those programs. This particular product wouldn’t apply to those situations, but we have other connectors that would work with programs such as WebCenter Content.

Q. Where is the portlet deployed? Is it on the same managed node?

A. The portlets are deployed on the portlet server in WebCenter Portal.

Q. Where can we get the documentation for this product?

A. While the documentation is not publically available, we do have a product page on the website that includes a lot of information on the Portal Search Suite. Contact your Fishbowl representative if you’d like to learn more about it.

Q. What are the server requirements?

A. WebCenter Portal 11g or Liferay 6.2 and Google Search Appliance 7.2.

Q. Does this product include the connector for indexing content?

A. No, this product does not include a connector. We do have a product called GSA Connector for WebCenter that indexes content and then allows you to integrate that content with a portal. Depending on how your portal is configured, you could also crawl the portal just like you would in a regular website. However, this product focuses exclusively on serving and not on indexing.

Q. How many portals will a GSA support? I have several WebCenter Content domains on the same server.

A. The GSA is licensed according to number of content items, not number of sources. You purchase a license for a certain number of content items and then it doesn’t matter how many domains the content is coming from.

Upcoming Webinar Series: Using Google Search with your Oracle WebCenter or Liferay Portal

GSA Portal Search LogoFishbowl will host a series of webinars this month about integrating the Google Search Appliance with an Oracle WebCenter or Liferay Portal. Our new product, the GSA Portal Search Suite, fully exposes Google features within portals while also maintaining the existing look and feel.

The first webinar, “The Benefits of Google Search for your Oracle WebCenter or Liferay Portal”, will be held on Wednesday, October 15 from 12:00-1:00 PM CST. This webinar will focus on the benefits of using the Google Search Appliance, which has the best-in-class relevancy and impressive search features, such as spell check and document preview, that Google users are used to.

Register now

The second webinar, “Integrating the Google Search Appliance and Oracle WebCenter or Liferay Portal”, further explains how Fishbowl’s GSA Portal Search Suite helps improve the process of setting up a GSA with a WebCenter or Liferay Portal. This product uses configurable portlets so users can choose which Google features to enable and provides single sign-on between the portal and the GSA. The webinar will be held on Wednesday, October 22 from 12:00-1:00 PM CST.

Register now

For more information on the GSA Portal Search Suite, read our previous blog post on the topic.

Meet Fishbowl’s WebCenter Experts at OpenWorld

Oracle OpenWorld will be held from September 28-October 2 in San Francisco.

Fishbowl Solutions will once again be at Oracle OpenWorld this year to connect with fellow WebCenter users! The event is now only a few days away, and our team is really looking forward to discussing how our value-add solutions can help your organization.

Our booth in the exhibition hall will be located at 2036 Moscone South, and will feature demos of Mobile ECM, the Google Search Appliance, Portal Solution Accelerator, SharePoint integration, and a free iPad giveway. We will also have many representatives on hand to answer your WebCenter content, portal, or imaging questions. All exhibition halls will be open from 10:00 a.m. – 6:00 p.m. on Monday and Tuesday, and from 9:30 a.m. – 3:30 p.m. on Wednesday.

Other activities at this year’s event include:

  • Sunday, September 28
    A Successful Oracle WebCenter Upgrade: What You Need to Know
    12:00 PM-12:45 PM, Moscone South 305This session’s speakers share facts and use cases that you will be able to apply to your Oracle WebCenter 11g upgrade. You will learn from tips and best practices from successful upgrades to Release 11g that you will be able to utilize as well. The session includes a fact-sharing discussion on upgrades; use case stories from Oracle WebCenter customers; and a roundtable forum during which attendees will be able to ask questions specific to their Oracle WebCenter Content, Oracle WebCenter Portal, or Oracle WebCenter Imaging upgrade.
  • Wednesday, October 1
    Automate Financial Processes for PeopleSoft and Oracle E-Business Suite
    12:45 PM-1:30 PM, Moscone West 3018This session’s speakers share facts and use cases that you will be able to apply to your Oracle WebCenter 11g upgrade. You will learn from tips and best practices from successful upgrades to Release 11g that you will be able to utilize as well. The session includes a fact-sharing discussion on upgrades; use case stories from Oracle WebCenter customers; and a roundtable forum during which attendees will be able to ask questions specific to their Oracle WebCenter Content, Oracle WebCenter Portal, or Oracle WebCenter Imaging upgrade.
  • Wednesday, October 1
    Oracle WebCenter for Education and Research
    2:00 PM-2:45 PM, Marriott Marquis Golden Gate C3Digital, social, and mobile technologies are creating new and transformational education experiences to engage students, faculty, parents, and administrators in their collective pursuit of student success. This session features case studies from higher education and K–12 that illustrate the power of Oracle WebCenter in enabling twenty-first-century learning.
  • Monday, September 29
    Oracle WebCenter and Oracle BPM Customer Appreciation Reception
    6:30 PM-8:30 PM, Old Mint, Old Mint PlazaRegister for the reception here.

If you’d like to meet with any of Fishbowl’s representatives at the event, feel free to email info@fishbowlsolutions.com. To learn more about what we’ll be doing at OpenWorld this year, download our Focus On guide. See you in San Francisco!

Collaborate 14: Taking the WebCenter Portal User Experience to the Next Level!

Come join me and Ted Zwieg at Collaborate14 on our presentation Taking UX and development to the next level.
Fri, Apr 11, 2014 (09:45 AM – 10:45 AM) : Level 3, San Polo 3501A. 

Here is our session overview –

Taking the WebCenter Portal User Experience to the Next Level!


Learn techniques to create unique, award winning portals that not only supports todays need for Mobile responsive and adaptive content but take the next steps towards innovative design – enhancing both the user journey and experience for creating todays modern portal and the way in which developers  can expand the reach and potential of the portal with these new modern techniques.
Attendees will not only learn about new approaches but will be shown live portals using these techniques today to create a modern experience.
Learn how to develop your portal for future and enable marketing/design teams to react and generate interactive content fast with no ADF knowledge.


Target Audience

Designed for users wanting to learn the art of the possible and discover what is achievable with WebCenter Portal and ADF – creating compelling user experiences and keeping up to date with modern techniques and design approaches that can be combined to create a faster more interactive ways of navigating through portlets and the Portal.


Executive Summary

This session will demonstrate a couple award winnings examples of live clients who have taken their ADF WebCenter Portal environment to the next level – showing how by combining HTML5 techniques, third party libraries and responsive/adaptive design with ADF; when used in the correct way can not only improve the performance but the way in which users and developers can interact with portal using modern web design techniques.


Learner will be able to:

  • Identify art of the possible with ADF. (everything is achievable…)
  • Discuss achievable concepts and methods to enhancing the ways in which users can interact with Portal.
  • Improved understanding of Responsive and Adaptive techniques – not only targeted for Mobile devices
  • Understand how to structure the portal for faster response times with new frontend techniques
  • Integrate with Non ADF third party components for a more dynamic experience
  • Developers will learn new methods to manage and maintain key core components