Tag: css

WebSphere Portal v8.x Theme Profiles and Modules

On By krisbarryIn TechnicalLeave a comment

A lot of work has been done to the theme architecture in the latest versions of WebSphere Portal. One of the nice things built into the theme architecture is being able to change the profile for each Portal page, the profile being made of web resources, such as HTML, CSS and JavaScript files and libraries. This allows you to load only the necessary resources on a page-by-page basis. The profile is made up of one to many modules, the modules containing the various web-based resources (i.e. HTML, CSS, JavaScript). An example of a module would be jQuery, meaning, if the jQuery module is added to a profile, any page that uses a profile containing the jQuery module would pre-load the jQuery resources that make up that module, in turn, allowing any portlets on that page to use the jQuery resource (i.e. libraries) as well. Another example of a module would be the Content Template Catalog (CTC) module, which loads all of the web resources libraries required by CTC.

In a prior blog post (here), I discussed a way to show / hide the Edit Mode link contained within the theme. In v8.5, the Edit Mode link is replaced by the new Site Toolbar (click here to read more about the Site Toolbar). The Site Toolbar is another example of a module that is placed in all of the v8.5 profiles, so to remove the Site Toolbar, it would be as easy as removing the Site Toolbar module from any of the profiles associated with Portal pages in which you don’t want the Site Toolbar to be displayed.

Click here to learn more about Developing Themes for WebSphere Portal v8.5.

Who Says You Can’t Do Client-side Development using IBM Web Content Manager?

On By krisbarryIn TechnicalLeave a comment

I had the opportunity to develop a Proof of Concept using WebSphere Portal and IBM Web Content Manager for a customer recently in which I’ve been looking to incorporate more client-side capabilities into a WCM-based PoC. Working with the customer and understanding their requirements, I figured there was no better opportunity. In building out the PoC, the only server side requests required are to switch between pages (i.e. WCM site areas) and to create, edit or delete content (using the WCM in-context editing capabilities).

Let me give some brief details on how this was done. The core components that make up the PoC are mostly WCM HTML components used to markup the various sections of the page. Beyond that, it’s basically a single navigator component (for navigating between site areas or pages) and a single (hidden) menu component for getting all of the required content for the selected page or site area. Because of the nature of the application containing mainly client side functionality, the menu component was built to return a JSON object (versus HTML markup) representing all of the content on the page. This JSON object could then be manipulated and used throughout the various capabilities and/or HTML components provided within the application. I’ll also give a shoutout to jQuery, as this opportunity gave me a chance to further dig into the JavaScript library. I was thoroughly impressed by the ease, flexibility and native features it provides, such as drag-and-drop and type-ahead, as well as the number of JavaScript-based libraries the jQuery community has built. I was able to easily incorporate a couple of the jQuery libraries I found in the accompanying demo (i.e. content tiling, customized scrollbars) to provide a better user experience in meeting the customer requirements.

I’ll be posting a demo of the work done during this PoC shorty…

WebSphere Portal Feedback Form using Forms Experience Builder

On By krisbarryIn TechnicalLeave a comment

I created a demo asset of a feedback widget that is embedded in the out-of-the-box WebSphere Portal v8.x theme and presented on every Portal page. This widget can easily be embedded in any theme, for sharing purposes, I created it using the out-of-the-box theme, though the code can very easily be copied and pasted into any theme’s file. For simplicity, I was not concerned about placing any JavaScript or CSS in associated file rather I used all inline JS, CSS and HTML. If this were to be done in an actual WebSphere Portal application, a better thought would be to create a dynamic content spot with the widget code. Anyway, feek free to reach out for the asset I developed for this, it simply consists of a theme_en.html file and associated form .nitro_s file if you wish to install it. Here are a couple of screen shots as well:

Introduction to Responsive Web Design in WebSphere Portal

On By krisbarryIn TechnicalLeave a comment

As a Technical Sales Specialist focusing on IBM’s Digital Experience portfolio, I often do WebSphere Portal and WCM demos.  With all the interest in mobility, mobile capabilities are one of the key features I love to demo!  Until recently, I would typically demo the Mobile Experience or mobile theme capabilities while showing a portlet or two, perhaps containing WCM content tailored for mobile device viewing. The introduction of responsive theme support in the latest version(s) of WebSphere Portal has made the mobile capabilities that much easier to demo while it also tends to get the audience engaged in the demo (at least in my experiences).  That’s not to say I no longer demo the Mobile Experience, but I now like the ability to demo both the Mobile Experience as well as the responsive design to show the breadth of capabilities (and the latest announcement of Worklight integration capabilties will only make this story that much better). When it was initially released for Portal v7, I used a demo based on the fictitious “Lotus Company” Portal, but the responsive theme could not be applied to just any Portal instance. Since the release of Portal v8, there is a beta release release of the (CTC) responsive theme that is said to be a part of the next release of the Content Template Catalog (v4). The flexibility of this (beta) release of the responsive design theme has been great in that it can be applied to the latest release of the CTC and then customized as I typically do for Portal and WCM demos. The customization that I usually do for a demo involves creating a new “style” (a single CSS file I use to override the standard Portal style classes) for the theme, add that style to the styles.json file in theme, and then apply that “style”. I’ve also had to make changes to one of the standard responsive theme CSS files (theme.css) in order for the media queries (the basis of how responsive design works) to be triggered on an orientation change of the iPad, which I typically use to demo mobile capabilities. I’ve also played around with some of CSS classes in the theme.css so that some of the page and column layouts display a little a bit better.  Feel free to reach out with questions around the details of any of the changes I’ve had to make.  In the meantime, here’s a quick look at a Portal instance with the beta responsive design theme and a couple of different styles I created for recent demos…

Landscape Orientation Portrait Orientation
(Notice the change to the navigation and page layout)