Recently, a news caught our eyes about SAP and Microsoft's expanded strategic partnership with in-depth product integration.
"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.
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 rqin 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.sap. 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.
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.
With SAP Workflow Service, you can easily design a workflow with a graphical designer in SAP Business Application Studio, which could
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.
To get started with building your first teams app, please follow
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 us assume 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.
SMB Eats Kitchen as a Team Tab in custom Ms Teams App
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 in a loosely-couple approach, the linkage is the url to your web application associating with a Tab in MS Teams custom app. 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, html/css/javascript etc...) to my Teams App(a container) with less than 5 lines of custom code as long as your web app is allowed to be embedded. Of course, there are more things you should looking into Microsoft's official document about MS Teams app development.
Practically, instead of having another react app(generated by MS Teams plugin of Visual Studio Code) to handle the integration with MS Teams via its SDK, and loading your existing web app, you could have just updated your existing web app using MS Teams SDK to initialise and integrate with Teams at minimal effort, as a result, your web app can be run from browser and having native integration with MSTeams when it is launched from MS Teams. Here you have the document about how to use Microsoft Teams Javascript SDK
SMB Eats-Delivery as a Personal Tab (Zero Code)
Actually, if you just want to embed an existing web app to MS teams with a Personal tab instead of Team tab, no code is needed at all. Just configure the content url of the personal tab to your target web app url as long as the target web app allows being embedded.
For example, I have configured the Delivery as a personal tab pointing to the existing web app url-https://smb-eats.cfapps.eu10.hana.ondemand.com/delivery
As a result, no code is required at all. And the Delivery tab looks like this in My Teams App.
Now, as you can see, it is very straightforward to plug your existing web applications in MS Teams with minimal efforts.
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.
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): workflow-msteams-approvals(source code)
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 an 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
As a result, a workflow 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 to post the asset assignment in back-end ERP with script task and service task
Script Task#1 - Prepare Asset Assignment Payload with javascript
Service Task#1 - Post Asset Assignment
Please refer to online help of Configure Service Task for detail.
4.Prepare the email and notify the requestor about the result of the approval and workflow.
Script Task#2: Prepare Result Email
Mail Task#1: Email Notification Result
Please refer to this online help about Configure the Workflow Service Mail Destination
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
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 communication/collaboration platform, achieving business process agility and intuitive collaboration in business context.
- SAP and Microsoft: How We Simplify Business Collaboration
(source from SAP News on Feb 8 2021 ). - SAP and Microsoft expand partnership and integrate Microsoft Teams across solutions (source from Microsoft News on Jan 21 2021).
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 rqin 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.sap. 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
- Tutorial to Get Started with SAP Workflow Service
- This blog post by my colleague ralph about Exploring BTP Workflow Service APIs with a sample application
To learn more about development with SAP Workflow Service, please check these materials.
- Workflow API for Cloud Foundry
- Online help about SAP Workflow Service in the Cloud Foundry Environment
Microsoft Teams:
To get started with building your first teams app, please follow
- Tutorial to build your first teams app
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 us assume 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.
SMB Eats Kitchen as a Team Tab in custom Ms Teams App
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 in a loosely-couple approach, the linkage is the url to your web application associating with a Tab in MS Teams custom app. 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, html/css/javascript etc...) to my Teams App(a container) with less than 5 lines of custom code as long as your web app is allowed to be embedded. Of course, there are more things you should looking into Microsoft's official document about MS Teams app development.
Practically, instead of having another react app(generated by MS Teams plugin of Visual Studio Code) to handle the integration with MS Teams via its SDK, and loading your existing web app, you could have just updated your existing web app using MS Teams SDK to initialise and integrate with Teams at minimal effort, as a result, your web app can be run from browser and having native integration with MSTeams when it is launched from MS Teams. Here you have the document about how to use Microsoft Teams Javascript SDK
//TabConfig.js(generated by default).
//It is a Team Tab here, which can be added to a channel or chat, and customisable configuration.
//You just need to configure the contentUrl of the Team Tab to your existing app with microsoftTeams SDK.
microsoftTeams.settings.setSettings({
"contentUrl": "https://smb-eats.cfapps.eu10.hana.ondemand.com/kitchen",
"suggestedDisplayName": "SMB Eats Kitchen"
});SMB Eats-Delivery as a Personal Tab (Zero Code)
Actually, if you just want to embed an existing web app to MS teams with a Personal tab instead of Team tab, no code is needed at all. Just configure the content url of the personal tab to your target web app url as long as the target web app allows being embedded.
For example, I have configured the Delivery as a personal tab pointing to the existing web app url-https://smb-eats.cfapps.eu10.hana.ondemand.com/delivery
As a result, no code is required at all. And the Delivery tab looks like this in My Teams App.
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): workflow-msteams-approvals(source code)
- Front-End Web User Interface (HTML+ CSS + Vanila JavasScript)
- Back-End API service interacting with SAP Workflow API and SAP ByD OData API.
End-to-End Process Flow:
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 an 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 have ms teams as user interface and reuse 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 workflow 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 to post the asset assignment in back-end ERP with script task and service task
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.
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,'
+'\nSAP Workflow Service';
$.context.resultEmail = resultEmail;Mail Task#1: Email Notification Result
Please refer to this online help about Configure the Workflow Service Mail Destination
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 communication/collaboration platform, achieving business process agility and intuitive collaboration in business context.
- SAP Managed Tags:
