MS Adaptive Cards & SAP integration with MS Teams

During 2020 we have seen the proliferation of Microsoft 365 and Microsoft Teams in many organisations.  Teams is becoming a de facto front-end for SharePoint file storage, providing the mechanism for business calls and ad hoc chat.

As the global pandemic has enforced home-working on a new scale, new norms have been created, and MS Teams will remain a huge part of essential business communication within organisations moving forwards.

As SAP process and UX experts, our job is to embrace this change and to see where new user touch-points can improve SAP process efficiency and usability.  We have been investigating how Microsoft Adaptive Cards can provide a powerful new way to reach business communities.

The idea is to integrate SAP processes through Microsoft Adaptive Cards, to reach the various supported channels.  Specifically we’ve started with MS Teams and email, and built a demonstration of MS Teams integration with a simple card.

The point is that not every user is logged into Fiori LaunchPad, and we need to meet the users in the apps they are already running.  As the MS Adaptive Cards technology improves the options for providing new UX for SAP processes are limitless.

Our Demo

We’ve built a multiple touch-point process using Varo for process management and Floe for the outbound message & card generation.

Integration with MS Adaptive Cards isn’t provided out-of-the-box (yet!) but it much easier as we’re using integration points to the platform rather than developing a DIY solution from scratch.

We already had an old vacation request process demonstration, built around 10 years ago.  (This was an HTML form, running on Varo.)  For ease we took this and changed the approval mechanism to use Teams instead of the Inbox.

We built the Card in the standard MS tool, and used Floe to store the card and send to Teams.

The full process looks like this:

Process flow

The process begins in the Varo Form Manager app, which is a SAPUI5 app launched from the Fiori LaunchPad or independently. The user selects the vacation request form and makes some date selections:

Step 1: User request

Don’t get excited about the e-form look and feel – it’s a 10-year old demo that pre-dates Fiori!  And don’t worry about the use-case; this is a technology demonstration to show how we can integrate any custom SAP process with an MS Teams channel.

After submission, the approver immediately receives the card through a channel in MS Teams:

Card for approver

The card includes all the key data from the request and replaces the workflow approval mechanism.  Once an action is selected the card dynamically changes, in this case a comments field and submission button are displayed.

After submission, the card changes again and the success message is generated from the SAP back-end system.

The result is an amazing user experience for the approver, which could be replicated in so many SAP processes.

The final step is that an email is generated to the requestor, including any comments from the approver:

See the whole video here:

We are considering building easy integration with MS Adaptive Cards as part of a future product support pack, once the technology stabilises and demand increases.

For now we can only offer this as an added-value service on top of our product suite.

But we think it’s pretty cool!