EDUCAÇÃO E TECNOLOGIA

Put collaboration in business context with SAP Workflow Service and MS Teams

Recently, a news caught our eyes about SAP and Microsoft’s expanded strategic partnership with in-depth product integration.

Putting the collaboration in personal context

“Rarely a day passes where I am not in contact with customers, partners, or colleagues from around the globe. Whether it’s a brief exchange of ideas, a virtual meeting, or a quick phone call, efficient communication drives work to success.” Quote by Christian Klein, SAP CEO.

Okay, let me try it as an Solution Architect.

This morning, I started my day with a cup of coffee in hands, checking and replying messages from my peers in MS Teams about our prototype series of SAP Workflow Service. I shared my new ideas of my prototype about custom approval process with SAP Workflow and MS Teams, and my progress with my team.

In the afternoon, I have two Teams meetings with partners.

In the evening, I have received a Teams message from my manager  “Yatsea, write the blog, write the blog, write the blog…”, which literally triggers me here. Have to admit that I barely can work without MS Teams these days, which has become a popular communication and collaboration platform.

In these COVID days, I guess it a similar story for you in workplace, school etc, where become more remote and more virtual. All our activities work around communication tools such as Microsoft Teams etc.

Putting the collaboration into business context

SAP is already integrating MS Teams in its solutions – S4, Sales Cloud, ByD, SAC etc. Here you have a glance at the SAP Business ByDesign for MS Teams(Beta) as of version 2102 by our colleague Richard Qin from solution management team.

As a partner, you may say “Hooray! That is very cool. Can I integrate my solutions into MS teams? Just  the same as standard SAP solutions do.”

The answer of course is “Yes, of course!”.

Microsoft has provided API of MS Teams for 3rd party integration leveraging the collaboration platform. Whilst, SAP Workflow is SAP’s product for business collaboration and process orchestration in enterprise context. Here you have an overview introduction video about SAP Workflow by DJ Adams. Logically, SAP Workflow and MS teams can team up well to put the collaboration in business context.

As part of our sample initiative for boost partner solution development with SAP Workflow, in this bog post, I am going to share with you how to integrate your solution with SAP Workflow and Microsoft Teams for seamless business collaboration with two examples.

Get started development with SAP Workflow Service and Microsoft Teams

Before jumping into the details about the samples, let’s lay the foundation about some basis of development with SAP Workflow Service and Microsoft Teams.

SAP Workflow Service:

With SAP Workflow Service, you can easily design a workflow with a graphical designer in SAP Business Application Studio, which could

  • Involve a human agent with user task for collaboration, such as approval decision, data entry of transaction after performing a task in real-world etc.
  • Notify the human agent with mail task.
  • Automate the integration with 3rd-party system with script task and service task

To get started design a workflow with SAP Workflow Service, please follow

To learn more about development with SAP Workflow Service, please check these materials.

Microsoft Teams:

To get started with building your first teams app, please follow

Sample 1 – Putting the existing SMB Eats powered by SAP Workflow into Microsoft Teams

Some weeks ago, my team have created an prototype “SMB Eats” for Pizza Restaurant, where you can order pizza by conversation with a chatbot powered by SAP Conversation AI and messaging apps(Messenger), while the restaurant agent, kitchen, delivery are collaborating to accept the order, prepare and cook the pizza, and have it delivered, collect customer feedback with Quatrics under the orchestration of a workflow empowered by SAP Workflow Service. Here you have the blog post about its details. And the SMB Eats  is a full-stacked solution with web interface, integrating with ERPs in an agnostic fashion for SAP ByD Design and S4 HANA Cloud. And the user interface for the kitchen team on web look like this.

Well, I think it a good idea for adding some humanoid elements about communication and collaboration, let say the pizza restaurant internally also use MS Teams for daily work. How about integrate SMB Eats into MS Teams as a Teams App? It looks like this.

Pretty much the same look&feel, actually works the same, now the restaurant staff can chat and collaborate on the app with MS teams.

To achieve so, it is quite simple, thanks to the MS Teams supports web application extension. Actually, the MS Teams App(client) itself is written Electron(source), which can be complied to web app or native app. In other words, I can just create a MS Teams App by following this helloworld tutorial, then embedding my existing web applications regardless of web technologies(sapui5, react, angular, vue, pure html/css/javascript etc…) to my Teams App(a container) with <iframe> tag with less than 10 lines of custom code. Of there are more things you should looking into Microsoft’s official document about MS Teams app development.

//Tab.js(generated by default).I have renamed to KitchenTab.js. //It is Team Tab here, which can be added to a channel or chat, and customisable configuration.
render() { //Embed an exisiting web app with iframe in the react component for the Tab return ( <div className="container-wrapper"> <iframe id="iframeContainer" class="iframe-container" src="https://smb-eats.cfapps.eu10.hana.ondemand.com/kitchen" target="_top"></iframe> </div> ); }
/*Here is the CSS used by react component above*/
.container-wrapper { width: 100%; height: 100%; display: flex;
}
.iframe-container
{ width: 100%; min-height: 900px; border: none;
}

Now,  as you can see, it is very straightforward to plug your existing web applications in MS Teams with minimal efforts.

Sample 2: Custom an Approval Process for Asset Assignment with  SAP Workflow Service integrate with MS Teams

In this sample, we’ll custom an approval process of temporarily requesting a shared asset(car, tool set, etc.) by employee to perform some task. For example, the service technician needs a car and some toolkit for an on-site service task. The asset is requested from MS Teams with a custom Teams app including cost center manager info, requested date range and reasons etc, kicking off the workflow process in SAP Workflow, upon the approval, an asset organization assignment will be created in SAP Business ByDesign for management accounting, where the expense (depreciation etc) of the asset is allocated to the requestor’s cost center. an email will be sent out to the requestor when request is approved or rejected and approver’s remarks.

Architecture

Custom Microsoft Teams App: Request Approval

This is a container app in MS teams, which will load and render the web user interface from our partner app which can be running anywhere with customized URL.

Sample Partner Application(full-stack nodejs application): sapwf-msteams-approvals

  • Front-End Web App (Pure HTML+ CSS + Vanila JavasScript)
  • Back-End API service interacting with SAP Workflow API and SAP ByD OData API.

End-to-End Process Flow:

Let us have a look at the details step by step.

Here is how the request approval teams app looks like.

The technician ‘yatseali@sapsmb.onmicrosoft.com’ logins his Microsfot Teams tenant(sapsmb.onmicrosoft.com), and go to the teams app Request Approval deployed in tenant. With MS Teams API, upon the login, we can retrieve the teams context including user etc. The user can see all his request by status.

Workflow

Here is the workflow design of asset request.

1.Employee to submit a asset request within MS Teams

The service technician(yatseali@sapsmb.onmicrosoft.com) from Service & Support Heating Department just receive a service request from customer Green Hill in Green Town 50 km away, have scheduled an on-site service to repair the customer’s broken solar panel. To visit the customer, he need a service car and required toolkit,  therefore he submit an asset request through MS Teams App for a car(3-0 Mercedes Viano, a fixed asset in my SAP ByD demo system) with cost center owner (yatsea**@sap.com). As a result, a workflow instance is created with workflow REST api, and the workflow process is triggered.

Actually, SAP Workflow Service also allows you to design a start form to trigger the workflow with no code, every user with proper SAP Workflow Service Role has their own Fiori App, such as Inbox etc. However, in this case, we custom a start form with a teams app. The reasons why not just simply embed the SAP workflow inbox here in MS Teams

  • We would like to teams authentication to access the app.
  • The default SAP Workflow Inbox fiori app etc is not allowed to be embedded in an iframe.

As a result, a work instance is created with context as below:

2.Request is sent to approver’s inbox for approval

Once the workflow is triggered, now a request is sent to approver’s inbox for approval which I have define a approval form for the approver to review the request, and make a decision to approve or reject.

Design time of the approval form:

Fields to be showed in the approval form

Decision actions to be displayed on the approval form.

Run-time

The approver to login SAP Workflow, and open My Inbox

Then review the request, and optionally enter some remarks, approve or reject the request.

After reviewing the request, the approver decide to approve it. Now, the workflow move to conditional process.

3.Approved routine Request is sent to approver’s inbox for approval

Script Task#1 – Prepare Asset Assignment Payload with javascript

//Update the custom attribute approvaStatus
$.context.assetRequest.approvalStatus = "Approved"; //Prepare the Odata payload for ByD
var startDate = +(new Date($.context.assetRequest.startDate)); startDate = "/Date(" + startDate + ")/";
var assetAssignmentRequest = { request: { "ParentObjectID": $.context.assetRequest.assetID, "CostCentreUUID": $.context.assetRequest.costCenterID, "StartDate": startDate }
}; $.context.assetAssignmentRequest = assetAssignmentRequest;

Service Task#1 – Post Asset Assignment

Please refer to online help of Configure Service Task for detail.

As a result, the asset assignment is created for in SAP ByD

4.Prepare the email and notify the requestor about the result of the approval and workflow.

Script Task#2: Prepare Result  Email

var approveTask = $.usertasks.usertask1.last;
var resultEmail = {}; var decision = 'Approved'; if(approveTask.decision === 'reject')
{ decision = 'Rejected';
} $.context.assetRequest.approvalStatus = decision; resultEmail.subject = 'Request ' + decision + ' for asset assignment ' + $.context.assetRequest.assetName + ' to Cost Center ' + $.context.assetRequest.costCenterName; resultEmail.body = 'Dear '+ $.context.assetRequest.requestBy + ',\n\nYour request for asset assignment has been '+ decision + ' by ' + $.context.approveBy
+'\n\nAsset Name: '+$.context.assetRequest.assetName +'\nCost Center: ' + $.context.assetRequest.costCenterName +'\nRequested On: ' + $.context.assetRequest.requestDate
+'\nStart Date: ' + $.context.assetRequest.startDate
+'\nEnd Date: ' + $.context.assetRequest.startDate
+"\nApprover's remarks: " + $.context.assetRequest.approvalRemarks
+'\n\nThis is a auto-generated email notification by SAP Worflow Service. Please DO NOT reply.'
+'\n\nKind Regards,'
+'\n\nSAP Workflow Service'; $.context.resultEmail = resultEmail;

Mail Task#1: Email Notification Result

As a result, the employee received an email about the result.

Execution Log of Workflow instance

Now, let’s have a completed view of the execution log in SAP Workflow

Summary

As you can see, with SAP Workflow Service and Microsoft Teams, we can orchestrate a business process involving human agent, system and things with combination of both best-breed products for  workflow management and collaboration, achieving highly customizable agility and intuitive collaboration in business context.