SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software
ASP.NET, VB.NET, Microsoft .NET Framework, Microsoft Visual Studio, Windows Forms, Controls and more Tutorials and Articles for Programmers

Consume SAP OData Service from Visual Studio 2013 LightSwitch Project

This Visual Studio tutorial shows how to consume OData service created in SAP system ABAP SEGW transaction using Visual Studio 2013 LightSwitch project template. Visual Studio LightSwitch development tool provides a development platform for creating forms for data display, edit and add functions without coding at all.

As an ABAP developer I created a SAP OData service using SEGW transaction. I could successfully test the OData service using the ..."IMaint Service"... test tool and using a web browser. Now using my past Microsoft .NET development experience, I wanted to create an application that will consume OData service using Visual Studio. I have already Microsoft Visual Studio 2013 installed on my development computer. So I chosed to create a VS2013 project that consume OData built in SAP system for demo purpose.

One of the best project templates for consuming OData services is LightSwitch application project template. LightSwitch enables automatic page creation for OData entities and entity collections.


Open Microsoft Visual Studio LightSwitch project
On Solution Explorer window, drill down till Data Sources node is displayed under .Server project.
Right click on Data Sources node and choose "Add Data Source..." context menu option.

add OData service as data source in Visual Studio 2013 project

On next screen, choose OData Service as the data source type.
OData Service option enables .NET developer to connect to an OData service (in our case OData service published by an SAP system) and import entities to use in your application automatically.

Visual Studio OData service data source type

Click Next button to continue for Add Data Source wizard

Provide the OData service endpoint that you created at your SAP system.
ABAP developers can determine the service name by looking at the SAP NetWeaver Gateway Service Builder SEGW tcode using the related service project. ABAP programmer should expand Runtime Artifacts node. The related service is marked as Registered Service You can leave the checkbox "Attach to this data source as read-only" as marked if you do not plan to make changes.
For authentication type selection, if you choose "Other" option you can enter your SAP username and password.

add OData service from SAP in Visual Studio 2013 LightSwitch project

Click Next button

Choose from entities defined by the OData service and marked the entities you want to use in your Visual Studio 2013 LightSwitch project.
I selected both of the entities SalesOrder and SalesOrderItem defined by the OData service. To refer to those OData service entities I give a descriptive name like SalesOrderOData for the data source.

choose OData entities to use in Visual Studio project

Press Finish button

Within the Visual Studio project files with extention .isml will be created for each entity chosen from OData service data source.

files created in Visual Studio project for each entity in OData data source

Save all changes and Build the solution.
Before we run the project, we have to create screens and set one of them as home screen.
Otherwise we get following "No home screen has been defined." error.

No home screen has been defined

To create screens to the VS2013 project, right click on the .HTMLClient node.
Click on "Add Screen..." menu option

add screen for OData entities in Visual Studio LightSwitch project

When below Add New Screen wizard is displayed, choose one screen template among four screen templates, namely:
Common Screen Set
Browse Data Screen
View Details Screen
Add/Edit Details Screen

For the sample case in this tutorial, I preffered Common Screen Set.
Common Screen Set combines the Browse, View Details and Add/Edit screens in a way commonly used in business applications.

On the right part of the screen, select screen data from drop down.

add screen to display OData service entities

In .HTMLClient project source code files, corresponding .isml and .js files will be created for each screen.

Visual Studio HTMLClient screens for OData entities

Now we are ready to run our Visual Studio 2013 LightSwitch project with data published using OData services from an SAP system.
Build the solution and if everything is OK, no errors occurred, run it in Debug mode using Start button.

Here is the Visual Studio HTMLClient application screen created automatically for the Sales Order collection listing key values of all sales orders from SAP OData service

collection screen for HTMLClient application

When an item from the sales order collection is clicked on the web page, the user is navigated to sales order detail screen.

OData entity detail screen from HTMLClient application

As Visual Studio .NET programmers realized there is not coding except a proper definition of data entities within the OData service which is created in SAP system. A Microsoft Visual Studio LightSwitch project enables consuming OData service easily and serving data using screens for OData entities for users without coding at all. I hope ABAP developers and .NET programmers find this OData tutorial useful as a starting point for creating business applications built on OData and LightSwitch.

Visual Studio

Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.