To help visualize an OData feed, it is useful to install a formatting extension in your browser. There are a few options available to select – the one used in this tutorial is “**JSONView**” and is available for Chrome, Firefox and Safari browsers. The process for installing an extension is similar across browsers, the Chrome steps are shown below.
In Google Chrome, click the menu button and then select Settings.
Click on Extensions and then at the bottom of the page, click on Get more extensions.
In the chrome web store, type
JSONView in the search box, hit enter and scroll to the Extensions part of the results to find
JSONView. Click the Add to Chrome button.
In the dialog box, click Add extension.
JSONView is now installed and enabled.
The format of an OData URL is shown below.
For the Northwind service you have been using the URI (from host to
This URL points to a Service Document, which for OData, exposes two key things:
- The entity sets, functions and singletons that can be retrieved
- A metadata document (which shows the packaging format of the data)
To view the entity sets, open the link above in a new browser tab.
Note: if you would like to access an SAP Gateway server, see the Optional section at the end of this tutorial for the free Gateway trial sign up link and OData service URL.
As you scroll through the page, you will see all of the entity sets (or collections) listed. You have been using the
The metadata document will show the individual fields, formats and navigation properties of all the collections. To view the metadata for any OData service, append
$metadata at the end of the URL in your browser:
With the metadata displayed, scroll down to
<EntityType Name=”Product”> which is the collection you are using. You may notice that there is a slight change in the naming. The collection
href (or the external name) in step 7 is
Products, and in the metadata the same collection’s name is
Product. The mapping of an
EntityType to a collection name is defined in the
EntityContainer elements. You will learn more about the OData model structure in the OData model tutorial.
In your app, you have used the fields displayed including the
NavigationProperty entry that points to
In “OData parlance”, a
NavigationProperty is a link from an Entry to one or more related Entries. In your app, Web IDE used the link from
Suppliers to display some supplier information in the information tab. Specifically, the Supplier
If you want to add other supplier fields to the Supplier tab – you would just need to enter the the appropriate
Text elements to the
Viewing the metadata is a quick way to see what data is available, but it is also useful to view the data itself. To see a set of data from a collection, simply enter the URL to the service document followed by the collection of interest. For the
Products collection, it is:
Products to the URL here, you are specifying the
ResourcePath portion of the URL (refer to step 6 above). The first set of data (20 records) is displayed in XML format.
Scroll to the bottom of the page and look for the
<link rel=”next” entry. The Northwind service enforces server-side paging and will only pass 20 records at a time. The paging size (20) can be seen in the
$skiptoken=20 query option at the end of the “next” URL. A Web IDE generated app will automatically issue the “next” URL when you scroll to the bottom of the master list in your app. You can run your app and try this now. Look for the spinning “busy” UI element to appear briefly as the new request is sent and set loaded in.
The XML format of the OData response includes a lot of extra characters that makes the output difficult to read. You can add a query option to the URL to change the format to JSON, and with JSONView installed, some formatting and color-coding makes it more “human-readable”.
After the resource path, multiple query options can be added. Following standard HTTP query string formats, the first option will be pre-pended with a
?, and any successive ones will be pre-pended with a
&. To request the response in JSON, use the query option:
$format=json pre-pended with a
You can see how there is less text shown, along with the color-coding and formatting of JSONView improves the readability.
Some OData services do not enforce server-side paging, and will send a large amount of data for each request. To limit the set of data sent, include the
$top=x query option, where x is any integer.
$top=1 will request only the first record,
$top=5 requests the first five.
$top=1 to view the first record only (be sure to pre-pend it with a
& since it is the second query option).
To see the 6th and 7th records, add the
$skiptoken=5 query option and change
$top to 2. The
$skiptoken will make the service skip over the
skiptoken many records before it sends data. Changing
2 will return two records, rather than just one.
A shorthand way of referring to individual records is to put the record number in parenthesis after the Collection name. To view the 22nd record in
Products, use the URL below:
In the metadata, the
ProductID is set as the key for the collection. This means that any data returned will be sorted by
ProductID, as evidenced in the screenshots above (
ProductID of 1, 6, 7, 22 etc.).
You can specify that the results should be returned sorted on a different field by using the
$orderby=<FieldName> query option. It is easier for a person to find a desired product if the list was sorted alphanumerically by
ProductName. To see this in action, use the URL below that includes the
$orderby=ProductName query option.
You can see that the records are returned in alphanumerical order (
ProductIDs 17 and 3 respectively).
By default, the
$orderby option sorts in ascending order. To sort by descending order, append “
desc” (with the space) after the
orderby field. The browser will encode the space as
%20 and the results are returned in descending alphanumerical order.
A very useful query option to highlight is the filter expression (
filter expression can be simple logical operators (
less than, etc.) include basic math (
delete) and functions (
type functions), and combinations of all.
A simple example of filtering would be to see which products in the Northwind service are discontinued (the link below will show eight results). The query option string is:
$filter=Discontinued eq true
To exclude those from an app, you would simply change the
eq (equal) to
ne (not equal).
To get a list of products with a
UnitPrice greater than 100 and not discontinued, the query option string would be:
$filter=Discontinued eq false and UnitPrice gt 100. Here,
gt stands for “greater than”.
For a full list of filter options with examples, please see the URI conventions link shown in the last step of this tutorial.
$select query option specifies a subset of the full collection properties to return which is useful is you want to minimize the amount of data sent or received to the app. For example, to return only the
Supplier use this URL:
Supplier is a
NavigationProperty, it is returned as a URI. You can use the
$expand query option to have the server include those properties in the response (as opposed to just the URI):
Building on the last example, in this final query you will combine a few of the query options together:
As you have seen, there is quite a bit of capability exposed in an OData service. The advantage to the developer is the application logic that you would otherwise have to create and maintain in code can be delivered by the OData service. You will learn how to do this in the next tutorial.
There are many OData resources available on the web. A few are listed below:
To use the OData viewer, select Metadata URL under Choose Access Option and enter
Here is a short summary of the various URLs and query options covered in this tutorial:
If you would like to build an app similar to what you have done in this tutorial series but with “SAP-like” data, you can register for a free SAP Gateway trial.
To build an app like what you have now, but with data from SAP Gateway you simply need to: