Accessing SAP through OData services published by SAP NetWeaver Gateway from Windows 8

Just a couple of days are left until the InnoJam starts! We (Kirstin, Denis, Hans, Oliver and Tobias from Microsoft) would like to make use of the remaining time and show you how to access SAP through OData services published by SAP NetWeaver Gateway from Windows 8. In this fourth blog post we will concretely create an app that allows to navigate through the sales orders and items of different business partners – whereby the data is provided via OData services.

The services are located at https://gw.esworkplace.sap.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV (User: GW@ESW, Password: ESW4GW) and provide the following data:

There are two options to access the services:

Option 1: Access the services conveniently via generated proxy classes. For this option you need to install the OData Client Tool for Windows Store Apps first. Then you can add a service reference to your solution

1. Navigate to PROJECT > Add Service Reference …
2. Insert the address and credentials given above. You will have to insert the credentials three times until the service can be loaded:

Option 2: Access the service manually via the class System.Net.Http.HttpClient. This option allows full control over the service and will be followed within our example app. Create a class instance, set the credentials and request the desired data. To get specific data values for each business partner you have to navigate to the corresponding node in the provided xml data. The code to get all business partners looks as follows:

//set up http client
var handler = new HttpClientHandler();
handler.Credentials = new NetworkCredential("GW@ESW", "ESW4GW");
client = new HttpClient(handler);
//request all business partners
var respBPs = await client.GetAsync("https://gw.esworkplace.sap.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/BusinessPartners");
XDocument docBPs = XDocument.Parse(await respBPs.Content.ReadAsStringAsync());
String id, name, webAddress, city, postalCode, street, building, email;
foreach (XElement bp in docBPs.Root.Elements("{http://www.w3.org/2005/Atom}" + "entry"))
{
          var child = bp.Element("{http://www.w3.org/2005/Atom}" + "content").Element("http://schemas.microsoft.com/ado/2007/08/dataservices/metadata}" + "properties");              
          id = child.Element(nsD + "BusinessPartnerID").Value;
          email = child.Element(nsD + "EmailAddress").Value;
          name = child.Element(nsD + "CompanyName").Value;
          webAddress = child.Element(nsD + "WebAddress").Value;
} 

For our example we used the SplitApp Template and populated it with the business partners as groups and the sales orders as items. Additionally we added a ComboBox control to allow choosing a specific sales order item. Below the ComboBox specific information for the selected item is displayed. The corresponding XAML code looks as follows:

<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Height="30" Orientation="Horizontal" VerticalAlignment="Center">
          <TextBlock Text="Choose sales order item: " VerticalAlignment="Center" Style="{StaticResource BodyTextStyle}"/>
          <ComboBox x:Name="salesItems" Width="500" Margin="10,0,0,0" ItemsSource="{Binding Source={StaticResource salesItemsViewSource}, Mode=TwoWay}"/>
</StackPanel> 
<Grid Margin="0,10,0,0"  Grid.Row="3" Grid.ColumnSpan="2" DataContext="{Binding SelectedItem, ElementName=salesItems, Mode=TwoWay}">
          <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="250"/>
                    <ColumnDefinition Width="140"/>
                    <ColumnDefinition/>
          </Grid.ColumnDefinitions>
          <Image x:Name="productImage" Source="{Binding ProductImage}" VerticalAlignment="Top"/>
          <StackPanel Orientation="Vertical" Grid.Column="1" Margin="15,0,0,0" VerticalAlignment="Top">
                    <TextBlock Text="Product ID:" Style="{StaticResource BodyTextStyle}"/>
                    <TextBlock Text="Product name:" Style="{StaticResource BodyTextStyle}"/>
          </StackPanel>
          <StackPanel Orientation="Vertical" Grid.Column="2" VerticalAlignment="Top">
                    <TextBlock Text="{Binding ProductId}" Style="{StaticResource BodyTextStyle}"/>
                    <TextBlock Text="{Binding ProductName}" Style="{StaticResource BodyTextStyle}"/>
          </StackPanel>
</Grid>

In this code example you can see that it is possible to use a binding to a property that refers to the data context of the parent element which can be quite handy.

The complete example app can be downloaded from here (SalesOrderService.zip). The detail page for a specific business partner e.g. looks as follows:

Just try out the services, play around with the different functions and ways to display the provided data. If you have questions do not hesitate to ask them – we will be pleased to help you and to discuss with you.

See you on the InnoJam