Creating Engaging Experiences for SAP Software

Live blogging from SAPPHIRE 2008 in Orlando. Andre Salazar from Adobe is giving a session on creating engaging experiences for SAP using Adobe technology.

Main themes are Adobe has an entire group for managing the SAP partnership. Technologies highlighted include Flash, Flex, Air, PDF, and LiveCycle.

Partnership started in 2002 to replace SAP SmartForms with PDF Forms. Today, the partnership includes other technologies including Enterprise Learning (Acrobat Connect) and user experiences (Flash/Flex dashboards for SAP Analytics, RIA's within SAP).

SAP has licensed Flex for Visual Composer as well as several new areas, launching later this year.

Right now Andre is concentrating on Air. SAP is interested in Air for desktop/off-line capabilities. I'm not completely sure the way he's explaining it is connecting with the SAP audience. He's bouncing back and forth between Flex and Air, and I think that's further confusing people. They do seem to be respoding positively to the UI's that are being shown.

He's showing an example now of a company that put a Flex front end on top of SAP CRM. It's a (very) simple dashboard with charts and graphs. SAP is shipping an app later this year called Spend Analytics that's built in Flex and exposes cost and spend analysis. It's available in both Flex and Air.

Flex Islands inside of WebDynPro, also available later this year lets you embed Flex components inside the WebDynPro environment.

Excelsius (Business Objects) makes heavy use of Flex to generate rich dashboards from Excel data.

At Adobe, they use Flex and SAP for MDM Management internally.

He's now showing some more demos. The first one is the Adobe Customer Response Tool, built in Air. It's lined with SAP CRM for customer trouble ticket resolution. I see Christine Lawson's name on the demo screen ;-)

Next demo is the Adobe Directory, also built in Air. It's a little search widget that ties in with their LDAP as well as SAP's HCM system and MS Exchange. If someone in the search is available, you can pull up a map of the office and see where they sit. The latest version has voice chat too. Pretty slick.

Adobe has interactive forms internally for Travel Authorization. When you download the form, it's already pre-filled for lots of the information. It links to the travel policy via javascript (from intranet). Form has cost calculations and can be routed to managers for approval. The form is also available both online and offline.

He's now showing Acrobat Connect. It's amazing how much better Acrobat Connect is than WebEx and LiveMeeting.

Well, that's about it. Time to move on to my next session.

Rethinking ColdFusion 8's New UI Controls

I've been working up a few demos lately that make use of the new layout tags in ColdFusion 8, and while I think they really do make Ajax based layouts much easier than using the Ext js and YUI libraries on their own, there are a couple of issues I've bumped into that have me thinking that their potential may be limited. Let me explain.

Today I was working on a dashboard mock-up to show to some of my colleagues. I wanted to show them how simple it is to do a dashboard in ColdFusion, and I wanted to do it using the new cfwindow, cflayout, and cflayoutarea tags. Things were moving along well until I wanted to add an accordion pane on the left-hand side of the layout. Try as I might, I couldn't find the attribute or value in any of the new tags to make it happen. That's when I realized that accordion panes are only available as part of the Flash based cfform controls. Doh! I don't want to use any Flash in my dashboard demo (I'll leave that to a Flex based demo), just straight HTML/Ajax. There are several options for adding an accordion panel outside of ColdFusion (Spry, Ext js, etc.), but I wasn't expecting that the control wasn't going to be included as part of ColdFusion 8.

This led me to more carefully consider the new UI controls in ColdFusion 8. For many layout tasks, they may be sufficient. However, what really has me concerned is situations like this. I still want an accordion control, and in order to get it, I'll have to mix and match the ColdFusion UI controls with another solution. What I'm strongly considering right now is abandoning the new UI controls all together in favor of a custom tag based approach. It turns out that there are two ColdFusion custom tag libraries that each wrap the Ext js library: cfExt by Dan Vega and ColdExt by Justin Carter. I like the custom tag based approach for a number of reasons:

  • Utilizes the latest EXTjs library: 2.x. ColdFusion 8 currently uses EXT 1.x, and it doesn't look like they will be upgrading to 2.x anytime soon.
  • Custom tags allow for new feature adds faster than new ColdFusion releases.
  • Custom tags allow for community contribution.
  • Custom tags give you total freedom to customize should you need features not implemented by the original author.
  • Custom tags provide a form of insurance against Adobe stopping future development of the new UI tags. While they have always done a good job of maintaining backward compatibility, there are numerous examples of situations where a particular technology was phased out and new features/functionality halted (cfgraph/cfchart, Flash forms, cfform java applets to name a few)

I hope I don't come off as bashing the new UI tags in ColdFusion 8. I really do like how easy they are to use and will be very beneficial to a lot of developers. If, however, you require more flexibility, you may want to consider implementing UI controls natively in JavaScript, or looking into one of the Custom Tag Libraries mentioned previously.

I'd love to hear what others have to say about this topic.

CFUNITED: CFAjax with Steve Rittler

I'm sitting in Steve Rittler's CFAjax session right now. Steve's giving some background on Ajax as well as showing the process flow. Basically, "how it works". (x)HTML uses JavaScript to talk to an Ajax object. Ajax object makes an http request to a back end system, in this case ColdFusion. ColdFusion returns xml to the ajax object, which again uses JavaScript to deal with the returned data on the client.

Besides CFAJax, there's also ajaxCFC (by Rob Gonda). It uses a slightly different approach. There are also several non-CF specific Ajax frameworks which can be used.

CFAjax works with CF 6.0 and above. Requires JavaScript. The client must also support the XMLHttp object. CFAjax can return Structs, Query's and Arrays in addition to XML.

Steve's moving into some simple examples now. It's a speaker search where you start typing a last name in a form field and Ajax is used to send the info as you type, updating the form field with possible matches. This is basically the way Google Suggest works.

Cross browser support in Ajax can be really difficult. One of the big issues Steve faced is the way most Ajax libraries require you to embed all sorts of HTML within your JavaScript. It's verbose at best. It requires DOM manipulation, which is also a huge pain for cross browser support. His solution is to use "templates". He cautions this isn't for everyone, but in their case, it works well and has a lot of real world deployments.

Pros of the templating system include returning HTML - there's no hard coded DOM work. It's also, in Steve's words "very, very, very easy". The cons are that it feels a bit dirty, and may rub purists the wrong way. Again, there's a cost benefits analysis to be done. He shows the simple example again, this time using the templating system.

Steve's mentioning upcoming Ajax trends include Ajax/Flex integration (they actually complement each other) as well as mobile Ajax.

Lots and lots of "how do I do..." questions coming from the audience. There's obviously a lot of interest in this topic. Steve's doing a good job of answering them. This presentation could definitely span multiple sessions.

Steve looks to be wrapping up with an example of how to integrate CFAjax within the Mach-II framework. It's very similar in ModelGlue as well. He's showing the demonstration from within an application his company created called RecruitWeb. It's a pretty slick application for use by athletic recruiting departments. The application is completely written in ColdFusion using Mach-II as the framework and AjaxCFC. If you are interested in the mechanics of the integration, I believe Steve is making the techniques available on his company's website, I'm sure he'd be glad to give a fuller explanation.

User Interface Design Patterns from Yahoo Developer Network

I saw this one over on the Playfool blog. Apparently, Yahoo has a new Design Pattern Library over on their Developer Network website. JavaScript Source code and examples are available for several common UI design patterns including the following:

Autocomplete
Breadcrumbs
Drag and Drop Modules
Module Tabs
Navigation Tabs
Object Pagination
Search Pagination
Rating an Object
Writing a Review

Some of these are really cool. I especially like the drag and drop module as this is something I've been looking to do in a portal application we have. It will be interesting to see how the library develops as more people start contributing.