Skip to Content

SAP Fiori My Inbox and Outlook -- Working with Workflows in Outlook / Office 365

With SAP Fiori My Inbox we have a beautiful SAP Fiori application that allows you to approve your SAP workflows from any device. You can access SAP Fiori in a browser from your desktop, your tablet and your mobile device. We even have the SAP Fiori client running on mobile devices which brings additional functionality.

Thanks to the abstraction done by SAP Gateway we can also get the very same workflows and services in other clients. The most obvious/asked for is Microsoft Outlook, but we have also seen customers wanting an overview of SAP workflows in Excel or having the SAP workflows in Microsoft SharePoint. That is all quite easily possible and the best thing is that you only have to do the work once on your SAP system and then it is only a matter of building the UI.

During SAP TechEd Las Vegas and Barcelona we already showcased this integration. Based on an early template we ran a SAP Code Jam Mini Edition where participants were able configure a workflow template in Visual Studio and get SAP workflows in Outlook.

My colleague Prathiba already created a great blog that outlines the concepts and first steps of the Outlook integration: SAP Workflow Apps for Office Application using SAP Gateway for Microsoft

In this blog I want to go one step further and outline all the steps that are required to get this working from start to finish. For this I performed all the steps on a fresh virtual machine -- only Windows 10 was installed. The interesting thing here is that everything that you need to get this working is available as a trial or in some other form. Obviously you can also do this with your licensed software (which will simplify some steps).

So lets get started. As mentioned by my colleague Prathiba what we want to achieve is getting SAP Workflows which are currently available in SAP Fiori My Inbox:

in Outlook

I agree that the UI shown in this screen is not the most beautiful one, but it works and it is only supposed to be the starting point for whatever UX enhancements you want to create.

In the following scenario we will not use Single Sign On. SSO can easily be achieved by using tools like SAP Gateway for Microsoft, but since the SAP Gateway for Microsoft Azure component is not yet available as a free trial we will stick to basic authentication.

So on the SAP side we need a SAP Gateway system on which the “Taskprocessing Service” ( https://help.sap.com/saphelp_gateway20sp11/helpdata/en/29/801ec804854ee58c805f50b80480cf/content.htm) is configured. In our setup we will use the SAP Developer Center ES4 on which you can configure some workflows.

This Taskprocessing service can now be consumed in Outlook. Since I don’t know if and what version of Outlook you have, we will use Outlook on the web for Office 365. A nice side-effect is, that if you have Outlook 2013 / 2016 as a rich-client on your desktop you will be able the leverage the very same workflow add-in your Outlook 2013 / 2016!



Prerequisites


Access to the SAP System

As outlined above we need a SAP user and a Microsoft user. In order to get the SAP user, please follow the steps outlined http://scn.sap.com/docs/DOC-40986 and sign-up for the SAP Gateway demo system.


Access to the Microsoft System

For the Microsoft user we want to get access to the Office 365 E3 Trial. Please sign-in and register to Office 365 E3 via

Office 365 Enterprise E3 | Office365

Just select "Free trial" and register.



All the steps outlined can also be seen in the video below. The whole end-to-end download, installation and configuration took less than 1h. Most of the time was actually waiting. So I compressed / accelerated the video during the installation of Visual Studio, the Office Developer Tools installation and the SAP Gateway for Microsoft install to make it easier to watch in about 15 min. All the links that I used are copy & pasted from this document (that's why you see the mouse moving out and back in from the screen from time to time) and I performed the procedure twice -- so I really hope everything will also work for you!



Validation

I would recommend that you both check some relevant services after your registration. For starters, please try to log on to the SAP system via:

https://sapes4.sapdevcenter.com/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=800

You should be prompted for Username and password. Please enter your P-Id and the password. As a result you will probably see a blank Fiori Launchpad – which is fine for now.


When you do this the first time, you need to assign the SAP Fiori My Inbox tile to your user. For this click on the Edit button on the bottom right corner, then click on "+" and add the My Inbox tile.

The next thing that you will notice is that there are no workflows in your inbox. So we need to create one. For this demo, you can access the Workflow Test transaction SWUS via the SAP WebGUI. Open URL

http://sapes4.sapdevcenter.com/sap/bc/gui/sap/its/webgui?sap-client=800&sap-language=EN&~transaction=SWUS

and enter the workflow number WS80000242. When you click on "Test" a dummy workflow will be triggered and show up in your My Inbox.

Similarly, please log in to Microsoft Outlook once, via https://outlook.office365.com/owa/#path=/mail

The first time you do that you might need to do some configurations, but then you should end up in the Inbox.



Download Software

Now it is time to download the required software. We will develop the scenario in Visual Studio. In addition to that we need to install the SAP Gateway for Microsoft (Trial) version and finally we have to download the actual Visual Studio project from GitHub.

- Downloading Visual Studio

At the time of writing this blog we still have some issues with Visual Studio 2015 Community Edition. So please download the Visual Studio Community 2013 edition, https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx

In addition to that it is useful to download the Visual Studio Office Development Tools as well, http://aka.ms/OfficeDevToolsForVS2013

-- Download SAP Gateway for Microsoft

You can download the installer for SAP Gateway for Microsoft Visual Studio add-in via the SAP Store, http://bitly.com/GWMTrial Please make sure that you sign in with your SCN user (http://scn.sap.com/docs/DOC-46021). When you try to extract the installation files you might get an error message. The reason is that the file is unfortunately not a .ZIP file, but a .RAR file. So if required please also download WinRar from www.Win-RAR.com

-- Some additional files for SAP Gateway for Microsoft

The latest Service Pack of SAP Gateway for Microsoft Visual Studio needs some additional DLLs to run (http://help.sap.com/saphelp_nwgwpam_1/helpdata/en/80/572a006e15425799df17b5c83eb24f/content.htm?frameset=/en/53/8be0db450541e493d7b4c2e5685ecf/frameset.htm&current_toc=/en/d8/c9a9c590ed44829bc09f043969cd71/plain.htm&node_id=31). The required files can be downloaded from https://www.nuget.org

Just download the files, rename / add the extension .ZIP and extract the DLLs from the folder lib (for the Json.NET take the ones from the .NET4.50 folder):



-- Workflow Template on GitHub

The last step is to download out SAP Workflow template from GitHub. Head over to SAP/SAP_GWM_Apps_for_Office · GitHub  and download the file.

https://github.com/SAP/SAP-GWM-Apps-for-Office

Installation

That was a lot of preparation -- but now we are ready to get started. First install Visual Studio Community edition, [vs_community.exe].

Once Visual Studio is installed, start it once and make sure that everything is working.

After that install the Visual Studio Office Development Tools [OfficeToolsForVS2013Update1.exe]

As next step we need to add the DLLs that we had previously downloaded in the GAC folder.

Open Visual Studio Tools on the Start menu, right-click on Developer Command Prompt for VS2013 and choose Run as Administrator, choose Yes if Windows displays a security prompt.

In Developer Command Prompt, run the commandgacutil -if <file path of DLL>

and press Enter. Repeat this step till all the required DLL files are added successfully.

Now you can install SAP Gateway for Microsoft in Visual Studio.

As a last step just extract the Workflow project from GitHub and start it in Visual Studio.



Configuration

  1. We are almost done :-) When you open the project in Visual Studio there are only a few settings that you need to change. The first thing is we need to configure our SAP Gateway system on which the TaskProcessing service is running.

This is the service that is also used by the SAP Fiori My Inbox scenario. So remember when you accessed the SAP Fiori Launchpad before, https://sapes4.sapdevcenter.com/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=800

As mentioned before you should hopefully see the My Inbox tile with a few pending workflows.

With that we can go to the next step:

In Visual Studio we need to configure this workflow. So open the file Web.config from the Solution Explorer:


The URL that we are looking for is this one (make sure you have the “/” at the end)


https://sapes4.sapdevcenter.com/sap/opu/odata/IWPGW/TASKPROCESSING;v=2/

(Obviously if you are connecting to another SAP Gateway system, you might need to change the server name)

The next property is the HasMultipleSapOrigin property. In our demo system there is only one SAP Origin system -- so we can set this parameter to false.

Next we need to specify the SAP Client (which is 800 in our case).

The next step is a little more complicated. We need to find out the value of the TaskDefinitionID. For this we want to check the actual TaskCollection Service that will be used later on. Just open the URL

https://sapes4.sapdevcenter.com/sap/opu/odata/IWPGW/TASKPROCESSING;v=2/TaskCollection


and search for the property TaskDefinitionID

You should see something like TS00008267_WS80000242_0000000004 – that’s the value that we will use for the property RequestTypeDefinition.

Again since we are not going to use SAP Gateway for Microsoft the SSO, we need to hardcode the username and password to authenticate.

Open the Constant.cs file from Utilities

and enter your P-User credentials. This does not really make sense in a productive environment (since all the workflows you will now see in Outlook are the ones for this specific user), but the idea of this blog is to get you started.

Now we just need to add two NuGet packages to resolve some references in the DataGetter.cs class:

Just right-click on the Solution "SAP.AppsforOffice.WorkflowAppIn" and select "Manage NuGet Packages". At first you can just install the Json.NET framework which should already be installed:

Next you can search for HtmlAgilityPack which you should also be able to install

There is only one thing left before we can run this project. Usually we would like to retrieve some custom attributes like the start and end date for an approval workflow. Our dummy workflow on ES4 is not yet configured to use custom properties. So we have to remove the logic behind the retrieval of these properties. For this open the DefaultForGateway.aspx.cs file from Pages -> GatewayPages -> DefaultForGateway.aspx

and change the parsing of the startDate and endDate:

string startDate = "2015-12-29"; // string.Format("{2}-{1}-{0}", ...

...

string endDate = "2015-12-31"; //  string.Format("{2}-{1}-{0}" ...

Now you can just run the Project. Since by default we are using the Outlook Web Client you will get prompted for your Office 365 credentials.

Log in and you should see the Inbox of your Outlook. Currently there is no Email Workflow notification in your Inbox (since the SAP Gateway system is not configured for your Exchange server / email address). So we will just pretend this step and send a manual notification email.

To get the workflow ID open the https://sapes4.sapdevcenter.com/sap/opu/odata/IWPGW/TASKPROCESSING;v=2/TaskCollection and look for the <title > property. It should contain the number we are looking for:

Just put this workflow number in the Subject line and send an email to your Office 365 user, e.g.

Subject: Workflow #00001109649

Body:

Dear user,

a new workflow is waiting in your Inbox. Please click here to start the SAP Fiori My Inbox, https://sapes4.sapdevcenter.com/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=800

When you send this Email to your Office 365 User, you could obviously just click on the link and a new browser window will open up from where you can approve this workflow. However, you should also see a new App just above your email.

When you click on this app, the underlying code will call the OData service, retrieve all the relevant information and allow you to work on this SAP workflow from within your Outlook.

That's it! I hope you are able to approve the workflow

Let me know how it works and feel free to post your enhanced UIs here!

Tags:
Former Member

No comments