How to connect SAP Gateway OData source with Angular

[phreis1]

TL;DR

Learn how to build an basic Angular 4+ app from scratch and easily connect it with your most loved SAP Gateway OData Sources.

While SAP UI5 is SAP’s recommended client side framework for developing business applications, Gateway OData Services can be consumed by any HTML5/JavaScript based framework. In this tutorial we’ll develop a small OData consuming Angular app. We’ll solely use open source based components.

Prerequisites

If you haven’t installed yet, there are some handy dev tools which help to proceed:

• VS Code A source code editor, I am very satisfied with.


• Node.js (it’s the big green button to install) Node.js is a JavaScript runtime on your local machine. Basically we need it to run our development environment. Node comes along with npm - a package manager for javascript.
  Check the installation entering in you Terminal:
  

  node -v

  
  It should tell you some Version 6.9.0 or higher.
  Tip: VS Code embeds a Terminal window, which is quite comfortable to use.


• angular-cli is a great way to start an Angular project. This command line tool helps a lot to start from scratch. Please install using npm:
  

  npm install -g @angular/cli​

  
   


• OData Service Provider: In this tutorial we are going to access to the Gateway Demo System (ES4) So you might  create an account on the Gateway Demo system and keep your username & password for later.

 

Step 1: Create an Angular project

Create a new, empty folder in you file system. Within this folder create the new project:

ng new say-hello-to-gateway

The cli creates the basic folder structure for our app. Besides that, it installs a bunch of packages for tooling such as the actual angular framework components. (Everything here is installed within this folder)



 

 

Step 2: Install ngx-o-table

ngx-o-table is an Angular 4+ table module displaying OData entities.

It lets us easily create metadata driven tables showing our data.

To install ngx-o-table, npm is our best friend again. From the root folder say:

npm install ngx-o-table --save

Step 3: Import the ngx-o-table module

In order to actually use the previous installed module, we need to import it in our app first.

Open the main module  ./src/app/app.module.ts in the code editor of your choice and make the following additions:

./src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { OtableModule } from 'ngx-o-table'; //<-- 1. add this line



@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    OtableModule //<-- 2. add this line

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

Step 4: Adding some HTML

Change the file app.component.html to the following:

  <ngx-o-table

    [entitySetName]="'BusinessPartnerSet'" 

    [serviceUrl]="'/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/'" >

  </ngx-o-table>

 

Step 5: Test the app – but wait!

Our app runs locally and makes calls to the cross domain origin https://sapes4.sapdevcenter.com

Here we would run into conflicts concerning the browsers Same-origin policy.

Fortunately, Ng CLI has a nifty feature to solve this issue:

In the projects root folder create the following the file:

./proxy.conf.json:

{

  "/sap/*": {

    "target": "https://sapes4.sapdevcenter.com/",

    "secure": false

  }

}

 

With this proxy configuration, start the ng dev server:

ng serve --proxy-config proxy.conf.json

 

Step 6: Say hello to Gateway!

 

Open your browser, head to localhost:4200/ , enter password & username from above and enjoy the result:



 

You are not satisfied with the layout, row captures or the weird date format?

Fortunately, ngx-o-table has already some experimental re-formatting features on board  – more in a subsequent blog post, if you like.

This tutorial is indented to give you an idea how an SAP Gateway OData <-> Angular interaction could work. You are very welcome to share your thoughts or even contribute to the project on GitHub.

 

Regards,

Philipp