This example shows how to integrate data from an on-premises SAP system into SharePoint Online (Office 365) using ECS Core. The following tools are also used: Napa Office 365 Development Tools and the Azure Portal.
ECS Core enables integration with SAP, both read and write. This example shows how to transfer SAP data to SharePoint Online.
Before you start
This example requires the following prerequisites:
- An Office 365 Developer Site in an Office 365 domain and the rights to develop a Napa App.
- An Azure Relay instance in the Azure Management Portal.
- an ECS core installation and configuration, in particular:
Note: Other middleware tools, in particular SAP Gateway or SAP Gateway for Microsoft, are not required for this scenario.
Step 1: Creating a NAPA App
With Napa, you can develop a SharePoint add-in inside the browser instead of Visual Studio. At any time you can download the project and continue working with Visual Studio for advanced scenarios.
You need a SharePoint Online Subscription to develop a Napa application. If this is not the case, you can create a developer site in the Administration UI of your subscription and then install Napa.
To install Napa, open your Developer Site and select Site Contents > add an add-in > SharePoint Store. Search the store for Napa and install it. (If you have an Office 365 Developer site, Napa may already be installed. You would find this under Site Contents.)
Create a SharePoint Add-in project
Open the Napa Add-in on your Office 365 or SharePoint Online page.
Select Add New Project and then Add-in for SharePoint.
Enter a name, such as SAPMaterials, and click Create. The Code Editor opens and displays the default Web page with an example code.
Step 2: Edit the Home Page (Default.aspx)
On the left, under the Pages folder, select the Default.aspx page.
In the example we are using version 4.10.2.
Important: Please always use the latest version of tEcs, which contains the latest changes and improvements. See: https://cdn-files.theobald-software.com/static/theobald.ecs.micro/5.7.0/index.html
In the section PlaceHolderMain insert the HTML code below.
The HTML code defines the following controls:
- An input field (for example, SAP material number) in the web page of the SharePoint add-in.
- A button to trigger the read process of the SAP data.
- A div-control for the result.
In the first step we define under the function $(document).ready() that the following function should be called when clicking on the button GetSAPData(): Reads SAP data from table MAKT.
Remark: Red, wavy underscores may appear as an indication of errors, but will disappear later.
Now insert the code for the GetSAPData() function after the $(document).ready() function.
Let’s take a closer look at the code we use to access the on-premises SAP system via Azure Relay and ECS Core:
- connection.ecs.coreApiKey is the API key from your ECS Core installation.
- instance: is the name of the maintained SAP connection in ECS Core.
- connection.ecs.url is the Azure Relay Name for ECS Core. The ‘data’ field contains the SAP expression (in XtractQL) to read the German and English material description from the SAP table MAKT.
The result is displayed using a table.
Step 4: Execute
On the left side click on the button run. The project will now be installed on your Office 365 Developer Site.
After the installation the SharePoint Add-In starts. If the add-in does not start automatically, e.g. because a pop-up blocker is activated, click on the add-in link to start the add-in.
Now enter a material number and click on the button.
The result is retrieved from SAP and displayed.