Perficient Portal Solutions Blog

Subscribe to RSS feed

Archives

Follow our Portals and Social Business board on Pinterest

Archive for the ‘Technical’ Category

IBM Digital Experience Conf: Developing Portlets Using JQuery

jQuery is one of the most pervasive scripting libraries in use today. The session “Developing Portlets Using Javascript and JQuery for Engaging Digital Experiences” by Stephan Hesmer, Web 2.0 Architect, IBM and  Jaspreet Singh, Rational Tools Architect, IBM provided good insight as to how to leverage jQuery in IBM WebSphere Portal.

First, a couple of key statistics to indicate why this is important and cannot be ignored:

  • 57.5% of websites use jQuery.
  • jQuery has a 93% marketshare.

WebSphere Portal still includes Dojo but it isn’t required for view mode.  It is required in edit mode however, especially for in place editing.    One key change in portal 8.5 however is when edit mode, the edit panel is now isolated from pages so it will not conflict with the page. Read the rest of this post »

IBM Digital Experience Conf: IBM Web Content Manager Patterns

Eric Morentin and Nick Baldwin spoke about WCM Patterns that should be used in content management development in IBM Digital Experience.  Patterns of course are a “canned” way or even best practice for implementing solutions.  There are four themes of patterns they talked about:

  1. Better content / component model
    • There are different types of content and Content Manager build a content page by pulling various types of content.  Types can include things like slide shows, lists, blocks, highlights, teasers, etc.
    • A good first pattern is the List Content Component. Use a WCM Component to build the list.  The end user only has to select what list to display and perhaps customize the query to define the list.  Within content manager, lists are composed of Navigators and Presentations.  The navigator component is the query tool to select items for the list and the presentation component is how you display the results.
    • In general, then a good content/component model will let you create special purpose components  and then combine them into business level tools that the content authors can easily incorporate onto a page. Special purpose components such as lists, blocks, carousel are higher-level components than what come out of the box with WCM, but are built-up using those out of the box components.
    • A slideshow content component would consist of the same List Content Component pattern, but adds a Javascript plugin component to control the display of the slide show.
  2. More reuse
    • Build a library of standard components that can be reused.  In IBM’s Content Template Catalog, they have many reusable components built on component elements like field design, fragments, inline editing controls, etc.
    • You could have reusable component headers, designs and footers that get referenced by the higher-level components like the Slideshow mentioned above.
    • As an example, in the header, you could have common tools like the inline edit code.  This same header can then be used on all your components so you can manage or change the inline edit code in one place.
    • There are also good patterns and tools available like SASS – Syntactically Awesome Style Sheets to help you with creating reusable CSS.
  3. Better site model
    • Sites connect pages and content.  Pages provide the navigation model in portal.
    • The Page Content Structure pattern shows how you structure a site.  The content site contains just content.  There is a content item created for each “component”.  Teasers live in their site.  All these sites can roll into a common site based on the page.
    • This results in a lot of site areas.
  4. Split content, design, navigation, configuration and code or separation of concerns.
    • The component model pattern helps with this concept.
    • You should split design libraries from content libraries.
    • They suggest a Design library, a Content Library and a Process Library.  The process library and design libraries can be referenced from the various sites.

Other best practices/patterns:

  • Workflows can also benefit from good patterns.  One pattern is to use custom workflow actions to perform dynamic tasks such as picking the appropriate approvers based on an author’s business unit.
  • For Access Control, don’t explicitly define all access rights; instead use inheritance whenever possible. In 8.5, reviewer and draft creator (replacing Approver) can be inherited. Explicit access control also impacts performance.
  • Don’t have content items with 40+ fields.  Look for the ability to use custom fields to merge

Common Pitfalls

  • In place edits in non-projects – consider using a plugin to hide in line editing if no project is selected.
  • Multi Language – enable this upfront rather than wait.  Even with just two languages, use the MLS plug-in

Eric and Nick used the IBM Content Template Catalog as examples of patterns that you can implement.  They made the point over and over again that CTC is set of examples, so there are probably more components in there than you may actually every need.  You should take the ideas in CTC and make your own components based on the patterns. You should not really expect to install and use CTC right out of the box.

 

Google: Reasons Why Nobody Uses Your App, Your Site, Your…

I came across the article Google: Reasons Why Nobody Uses Your App in my favorite iPhone app Zite.  The article is about a presentation given by Tomer Sharon, a user researcher at Google, at Google’s I/O Conference. I embedded the video here for you to view.

Tomer identifies reasons why nobody uses your app.  I want to extend this to your web site, your portal, or whatever because these six reasons apply beyond an app.

I’ll summarize the reasons below, but there were two reasons that really caught my attention because they are spot on with my experience consulting with many, many companies over the past 18 years.

The first reason that caught my eye was “You didn’t test your riskiest assumption.”  Many times clients look to companies like Perficient to reduce risks in their projects.  We have deep expertise in a product they want to implement or build upon.  But we don’t always have expertise in the exact problem that is the riskiest.  When we don’t have that expertise, our value can be in how we approach the problem and how we draw on experience in similar areas.  However too often, clients don’t want to test their riskiest assumptions first, but instead, want to dive headlong into a large project.  Part of the reason is because they they can only get funding one time – so lets ask for the most we can get and then start moving.  Another reason for this is that spending on these kinds of projects – experimentations, proof of concepts (POC), etc – are viewed as wasting money.  But getting a solution to the trickiest part of your project early on is absolutely critical to overall success.

The second reason that caught my attention was “You listened to users instead of watching them.”  Companies have spent boat loads of money gathering requirements by asking users what they want in a system.  Users are more than willing to talk about what they would do with a new system.  But too often what a user says they will do doesn’t match what they really will do.  In the video, Tomar talks about a UK Research Project where the researchers asked people whether they washed their hands after using the restroom.  99% said of course they did.  When the researchers put equipment into the restroom to monitor hand washing, surprise, surprise, less than 80% actually washed their hands.  So when building systems, it is important to get something built quickly – a prototype or POC – and observe how people actually use the system.

Here are the reasons why people don’t use your app, your web site, or whatever. I encourage you to watch the video to get all the details.

  1. You didn’t understand the problem your were solving
  2. You asked your friends (or co-workers) what they thought
  3. You listened to users instead of watching them
  4. You didn’t test your riskiest assumption(s)
  5. You had a “Bob the Builder” mentality

Let me know what you think or if you have other advice.

 

Upcoming Webinar: Going Mobile with Your Liferay Portal

Next week, on June 12 at 1 pm CDT, I will be presenting a free webinar on Going Mobile with Liferay Portal.  Below is a description of the webinar and a link to register.  If you have Liferay Portal or are considering it, you will want to see what are your options for making sure that your mobile experience is a pleasant one.

Going Mobile with Your Liferay Portal

Mobile technology is expanding, and many marketing and IT organizations are working to catch up with their customers’ mobile demands. Customers expect to download your app, login, submit their order, deposit a check or even schedule their yoga sessions — all while picking their kids up after school or relaxing in the evenings.

The consumer-driven nature of mobile leaves many companies struggling to develop, enhance and provide the functionality needed to compete in today’s environment. Liferay Portal is one of the most aggressive open source portals available.

In this webinar, we will:

  • Review top mobile developments
  • Demonstrate why Liferay is a good open source option for portal development
  • Identify the options available to bring your Liferay portal to life on mobile devices
  • Review best practices for creating, supporting and deploying a full-mobile strategy

Click this link to register: Going Mobile with Your Liferay Portal

 

WebSphere Portal v8.5 First Look: Install

IBM announced the release of IBM Digital Experience Suite 8.5 on earlier this month. Today, I had the chance to download the software images from and I am writing this as I install WebSphere Portal v8.5 Extend edition on Windows 7 OS. I went ahead with the Extend edition because I wanted to get a hold of all the features that WP has to offer. 

WebSphere Portal v8.5 First Look: InstallDownloading the Installables
IBM made it easy for me to search for WebSphere Portal v8.5 installables and find all relevant e-Assemblies. The only thing that I find slightly irritating is that the relevant WebSphere Portal v8.5 e-Assembly was right at the bottom of the page. No worries – a quick browser text search for got me to the right e-Assembly.
Expanding the eAssembly – you can immediately see that IBM has change the packaging a little bit. The e-Assembly only has WebSphere Portal images.In the past, you would have to wade down through a whole list of other supporting software components (TDS, DB2, etc.). This has confused users (both new and old) in the past. No longer the case this time.  The right step towards a simpler “Digital Experience” perhaps? Excellent!

 

Note:
  1. You will have to download the image for WebSphere SDK JAVA edition v7.0.6.1. I don’t think I have downloadedthis in the past but this time around I had to download it (even though it says “optional” during the installation).
  2. No support for 32-bit Windows architecture (I found this out the hard way)
  3. The remote search server is truly optional (and is not required especially for a local install)
As from past installations of WP, I unzipped the downloaded zip files – taking care to ensure that I unzip all the files into a single folder. Total size of the downloaded zip files and the unzipped images together is about 19GB. Simple enough so far.

Read the rest of this post »

SharePoint migrations may cause consternation

When migrating to SharePoint 2013 older assets may need serious modification to gain from the benefits of the new, lightweight, fast, and fluid user interface. These benefits come from new CSS styles, themes, and master pages.

Thus, you must re-create your custom branding by using the new styles, themes, or master pages available in SharePoint 2013, and then apply the newly re-created design to the upgraded site collection.

SharePoint2013You can read more about the details from a Microsoft support article which outlines the approach for migrating custom UI artifacts to SP2013.

Some of the common approaches suggest creating an evaluation site collection and then, making specific modifications depending on the artifact:

  • Custom CSS – use that site as the environment where you can identify the new SharePoint 2013 styles that you need to override. Create a new CSS file for these styles, and then apply that CSS to your upgraded site.
  • Custom theme – re-create the theme by using the new theming features in SharePoint 2013.
  • Master pages – re-create the master page in the SharePoint 2013 site. After you verify that the new master page works as expected, move the master page to the new site collection and apply it to the site.
  • Custom content placeholders on a custom master page – create an evaluation site collection that is also a publishing site, and then set the master page to the out-of-the-box SharePoint 2013 master page. If the site still renders, you don’t have this issue.

Microsoft recommends that you do not add custom content placeholders to your custom master page or page layouts.

In conclusion, I hope this helps with your planning when considering either new initiatives on older releases of SharePoint (i.e. SP 2010), or when migrating to SP 2013.

Multifaceted Search using IBM Web Content Manager

Maria Rauba from Asponte presented how she implemented a multifaceted search using IBM Web Content Manager in Portal.  Faceted search is an often requested feature and is not something that comes out of the box in WCM.  Components used:

  • Custom JSPMultifaceted Search Using IBM Web Content Manager
  • Custom Search Seedlist
  • WCM Search component
  • Custom Javascript

The HTML Form contains the custom JSP used to render the checkboxes for the faceted search.  The search component is placed on the HTML form to show the results of the search.  When the search is submitted, custom javascript executes the search against the seedlist.

JSP component was used instead of Taxonomy fields because the taxonomy field is sortable only one way – alphbetical.

Search Component & Search Collection.  They used one search component for each language.  In the search component you can specify the sort order.  Out of the box you can select sort by relevance, date and none.  The search collection was scheduled to run every night, but you can schedule the crawler as often as you want.

Custom Seedlist was necessary to support the many levels in the taxonomy. Out of the box seedlist only looks at the last level for the search and does not include the full taxonomy hierarchy.  Also many times category names are repeated under different taxonomies, so you have to use a unique identifier (UUID) to make sure the search finds the right categories.

Some issues that were faced:

  • Dojo performance for sorting wasn’t as good as it could be, so they reduced the number of items in the list.  In the end, the sort time was unacceptable, so they went back to the default sort provided by WCM instead of using the custom sort.
  • Caching was an issue when the advanced cache was turned on.  They ended up turning cache off for this feature.
  • When there were a lot of check boxes, the ran into url length issues.

As a summary, Maria’s solution was

  • Dynamic
  • Fully multifaceted
  • Used only WCM
  • Provided a custom sort
  • Allowed content authors to manage the content and feed the search appropriately

Overall Maria’s solution was a good way to use out of the box features with some simple customizations.

Optimizing Experiences Using IBM TeaLeaf

IBM Tealeaf is a tool that can help you optimize customer experiences with your website.  Here are a couple of examples of where Tealeaf can be used:

  • A customer has an issue with the website and calls your service center for help.  Rather than have the customer relive the poor experience, Tealeaf allows the CSR to see what happened and take corrective action.
  • Customers are not responding to your marketing offers.  They get part-way through the desired interaction, but don’t finish.  Use Tealeaf to see what users are doing on the site and maybe discover an error popping up.

Tealeaf screen shot

With Tealeaf you can passively capture all actions, all interactions, and all customer experience obstacles.  Since Tealeaf is passive, you don’t have to alter your code to start working with it.

Here are some results that Forrester found with Tealeaf:

  • 3.5% increase in conversion rates
  • 1% improvement in customer retention rates
  • 80% reduction in investigative time
  • 249% ROI
  • 7.3 months payback

Tealeaf also includes built-in analytics, including a Struggle Score.  Here you can tweak the analytics to alert you when Tealeaf perceives a customer is struggling.  Using the analytics, you can drill down into the data and find out who succeeded vs failed in attempting an interaction.

You can also set up “known obstacles” so you can track specific problem areas.  Say you have a known issue with a recent update, but its not bad enough to fix it right away.  These known problems can then be separated from “unknown obstacles” so you can identify new, unknown issues.

Oh, and all this works with mobile web clients too. You can track zooms, swipes, pinches and more. If you have mobile apps, you can use a Tealeaf SDK to integrate Tealeaf capabilities into the app itself.

Data entered by the user is stored in a secure way by Tealeaf and sensitive information can be obfuscated for specific roles of people who need to access the user data.

Finally, you can use the analytics provided by Tealeaf to assess the impact to your business.  This can help prioritize issues, or help sell the need to address problems.

Tealeaf really provides a lot of insight into your website that traditional web analytics tools can’t match.

What’s coming in WebSphere Portal and WCM

Rob Will, Chief Architect at IBM, presented the future vision for Portal and WCM today.   He started out talking about how the concept of customer experience has been evolving over the past few years.  A core shift has been to enable non-technical users to do more and more with less reliance on IT.

What's Coming in WebSphere Portal and WCMA slight change with profound implications has been the change from a Web experience to a Digital experience, which implies support many more devices and output streams.   Portal and WCM has always been about web sites, not mobile applications.  Portal is now in the mobile web site business to enable multi-channel web site business.  Portal is still the integrating platform for content, applications, etc.  Everything done in Portal and WCM is now done with mobile in mind.

IBM Worklight is the hybrid application platform that integrates with Portal and WCM.   Worklight enables access to all the mobile device features through portlets.  Its easy to create a Worklight adapter to grab content from WCM to display in a native application.  WCM’s personalization engine can also be leveraged from Worklight so you see the same promotions on the web as you see in the mobile app.

Mobile Directions

  • Improving integration to support device classes
  • Fine tuning seamlessness of the theme integration
  • Co-deploy Worklight on Portal

Content and Rich Media

  • More and more convergence between portal and content management
  • Projects and Templates (in Portal 8) are heavily relied on in future releases
  • Content Template Catalog 4.1.2 came out last week – uses latest CKEditor for inline editing
  • Vanity URLs- in beta now.  You can completely control the URL.  URLs are stored in WCM to support Syndication.  This feature will deprecate URL Mappings in Portal.
  • WCM Content Security is more seamless with Portal.
  • Attribute based security means you can control access to content based on Attributes.
  • Project templates make it easier to set up projects, including predefined workflow
  • Now everyone is entitled to EditLive! Enterprise version
  • Customers on 8.0.0.1 have entitlement to WebRadar which is content reporting and analytics
  • Cross Version syndication is supported to ease content migration.  You can syndicate from WCM 7.0.0.2 CF26 or higher to WCM 8.0.0.1 CF09 or higher
  • Syndication – improvements in error messaging, error handling, more retry capabilities.  Also in the Authoring UI, you can see a status of each object’s syndication.
  • Rich Media Edition seamlessly integrates with MediaBeacon.
  • Deliver and Stream HD Videos – this includes integration with BrightCove

Personalization and Targeting

  • In 8.0 IBM added in-context rules editing.  New minor enhancements are coming here.
  • Marketing Management is more of a focus for a richer experience, including Unica Marketing Center and IBM Interact.
  • New Portlet allows user to enter a few details about the spot and the portlets does all the work to bring in offers from Interact.  This reduces the rules that you have to write in portal.

WCM and Commerce

  • This is available now.
  • You can link content from WCM directly into a commerce site.  This also includes preview capability

Social

  • Social rendering in 8.0.0.1 takes content from connections and delivers them inside portal mixed with other content and applications. WCM presentation templates are used to make the social content look like other content on the page.
  • In the next version, IBM provides a bunch of enhancements.  Discussion threads hosted on IBM Connections, but linked to WCM content.   Here the visual experience of the discussion is controlled by WCM.
  • Now you can Like, create posts, comment, etc right in line.
  • Dynamic filters for social lists – these lists cooperate with other page components to filter content and drilling down in lists.
  • This is all available in mobile web too.

For a sample of how well Portal, WCM and Connections are integrated together, take a look at the Connect 2014 Site:

  • News and updates are blogs in Connections
  • Events are in WCM.
  • Session info is in WCM,
  • Speaker profile is in Connections.
  • Downloads are in Connections Files.
  • Session add is a DB2 application

Digital Data Connector (DDC) – this is a new concept and we’ll more information on this shortly.

  • Extends social rendering and WCM to any type of data source.
  • Can take most data source and bring into Portal through social rendering

I had to leave this session early, so I will follow up with another post on the rest of the new features coming in the future.

A beta version of Portal is now available if you want to try out some of these features.

 

 

 

IBM Connect: Going Deeper Into The Activity Stream

Mikkel Heisterberg presented on a deeper dive into Connections Activity Stream.  The Activity Stream in social represents a tool with high potential to make interaction easier and to get into what is most important to you.  This session focused on what it is and how to interact with it.  It was a pretty technical session but eye opening in terms of what you can do in the stream and how you can get external events into your social network.

What is the activity stream in Connections / SmartCloud for Social

  • a River of news that flows by you
  • Notifications about stuff happening in other systems. Otherwise known as entries
  • Entries may be saved for future reference and may be actionable
  • Typically you decide what goes into your stream
  • A replacement for email notifications………although you don’t have to
  • Standards based – meaning IBM took the standard and added IBM Connections to it. (OpenSocial for example)

What is isn’t

  • a new inbox. It’s not email
  • The master of the data. It’s just a feed

Interaction With It

The Activity Stream is available via a RESTful API.  It’s your typical sets a request via a method like GET, POST, PUT, DELET and get a response via  return code like 200/ok, 301/moved, and 404/not found.

You will mainly use the POST and PUT methods to send JSON data.  It’s not meant to be consumed in a web browser even though it’s really an http request.

REST

 

 

 

 

 

 

 

 

 

 

 

 

Best Practice: Don’t consider it as one single stream.  Think of it as each user having their own stream.  That extends to communities and even public streams.  There can be a lot of streams with which you can interact.  This makes it nice if you want to post to a stream on a prod server. By sending to one stream, you haven’t made a huge mistake.

URL Component: URL looks like:

https://<host?/connections/opensocial/<auth>/rest/activitystreams/<userid>/<application id>/<activity ID>

  • auth is authorization
  • user id is obvious
  • group id is the group of entried you are addressing
  • application id is the app in connections (blog, update, activity, community, etc.)
  • activity id is where you want to put it. It could be all for the public stream or a specific one for a specific user.
    • query – give me all the events that are actionable
    • query – give me all the latest blog event
    • Result: “The current user posted a note to IBM Connections and you should act on it’
      • current user is the actor. It could be @me
      • action: here it’s posted. It’s a verb
      • What happened: the object.  it could be a note, tweet, meeting, sales order from external system, etc.
      • Where: it was posted to IBM connections.   Could be posted somewhere else
      • other attributes like actionable.

IMG_20140127_132302

 

 

 

 

 

 

 

 

 

 

 

 

The presenter used the CocoaRestClient to create that query rather than handcode it. Here’s what that looks like:

Cocoa2

 

 

 

 

 

 

 

 

 

 

 

 

How do you delete from a stream.

Answer: you can’t! It’s forbidden.  However, “We are howevrer, adding propogateDelete at the moment which deletes all events related to a given object on receipt of a given event. This will be protected by a Trusted Role”

Cool stuff: You can make something actionable which goes into one of the facets of your stream filter.  This isn’t a POST but a PUT.  Context is exactly the same. Mark and unmark items as actionable.

Saved: You can save an item for later.   UI save is easy.  Simple PUT lets you update saved to false

Rolling it up: You can post to the same “thing” or part of the conversation.  (like a reply to someone’s comments or a comment on a file.)  You would specific rollup id for this.   It’s a POST because it’s a new comment for example.  But then you specify a rollup id.

Rollup id vs object id: similar but it’s not the same.  Rollup tells the stream of different posts with different object ids.  The rollup just tells the system about the relationship. So every comment on a file has an object id but is related to the parent object via the rollup id.

Templates: You can create multiple templates.  For example you might have multiple versions of a business card.  It’s useful for multiple language and support.  Context: when identifying title, don’t hardcode but instead point to template.

Embedded experiences lets you send along an event and identify the gadget in the activity stream to use when acting on in within the stream.  It’s also useful to render something nicely. (file preview gadget for example)

Posting to other users streams: Yeah, that’s spam. You aren’t allowed to do it unless you have a trusted role.  Use the id of the poster to post it.  The application will post on someone elses behalf.

Generator: want to add a pretty icon for all external posts then user generator tag and give it an image for example.  Generators should be registered. If it’s registered then you can filter the stream by the “generator” For example, all workflow items from the CRM system.

Cool use: Mikkel created a cool script that queried twitter for any references to himself, grabbed it and then posted it to his stream with the API’s he walked us through.