Summary:
I liked this open source oData Query builder ( see a demo here ) so I embedded this utility into a BSP application to enable simple exploration/testing of SAP Gateway oData Services ( only GET/Query part). Additional changes are made in ABAP BSP application to fetch all the active oData Gateway services with corresponding URLs from the SAP system and populate the endpoint drop-down. Rest of the functionality is pretty much as provided by the oData Query Builder library.Purpose:
It should enable simple exploration of query/GET part of Netweaver oData Gateway Services - Entity Details and Navigation to related entity or entity-sets. etc. SAP or non-SAP Consultants/Developers can use it to explore some of the existing services available on the system. It can also be used for testing during prototype stage.Technical Details:
- Download the code/library from oData open-source publication in a local directory on your PC and extract the zip file. You will need to import the JavaScript files/libraries and CSS to your BSP/MIMES later.
- If you open the above index.html in a browser, it should work straight-away for the service with endpoint-name oData.
- If you see the source code of index.html file - Names/URLs for two service-endpoints, hosted at oData website, are hard-coded. What we need to do is to just replace the hard-coded JSON string for Endpoint Name/URL with a variable string (e.g. gv_json). Further, populate this variable with SAP Service endpoint names/URLs (as JSON string ) in the Create event of BSP application.
- So in ABAP Workbench, create a new BSP Application (e.g. Z_GATEWAY_EXPL -Page oDataQueryBuilder.htm ) as below and import the required JavaScript and other files in MIMEs folder. Files that are required to be imported are mainly JavaScripts: odata-query-builder.js , datajs-1.1.1.min.js , CSS: odata-query-builder.css and an Image: msls-loader-light.gif - you can find these in respective folders within local oDataQueryBuilder folder.
- Code from original index.html is adapted and copy/pasted in oDataQueryBuilder.htm layout as below. There are minor changes to correct the JavaScript/CSS path and obviously, hard-coded endpoints are replaced using variable gv_json.
<%@page language="abap"%> <%@extension name="htmlb" prefix="htmlb"%> <!-- Copyright (c) Microsoft Corporation All rights reserved. Licensed under the Apache License, Version 2.0 (the ""License""); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. --> <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=10" /> <title>OData Query Builder</title> <style type="text/css"> body { font-family: "Segoe UI", Helvetica, Verdana; padding: 20px; } #results { white-space: pre; } </style> <link type="text/css" href="./odata-query-builder.css" rel="stylesheet" /> <!-- Third party scripts or code, linked to or referenced from this web site, are licensed to you by the third parties that own such code, not by Microsoft. --> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="./datajs-1.1.1.min.js"></script> <script type="text/javascript" src="./odata-query-builder.js"></script> <script type="text/javascript"> // Document ready event handler. $(document).ready(function () { var createdQueryBuilder = new OData.explorer.DataExplorer( { // An array containing the different endpoints. endpoints: <%= gv_json . %> }); }); </script> </head> <body> <h1>OData Query Builder for SAP Gateway</h1> <div id="queryBuilderContainer"> </div> </body> </html>
- ABAP Code, written under BSP Create event, to fetch the SAP Gateway Services/URLs as JSON is as below:
* this handler is called once the page is first created (stateful mode) * it performs a once-off data initialization or object creation *---------------------------------------------------------------------------------* * 24.12.2013 PragmatiQa(Ram) Get all active Gateway Services (Names/URLs) as JSON *---------------------------------------------------------------------------------* DATA : ls_SEARCH_PARAMS type /IWFND/CL_MED_EXPLORATION=>TY_S_MED_SRG_SEARCH, lt_search_result type /IWFND/CL_MED_EXPLORATION=>TY_T_MED_SRG_SEARCH_RESULT. FIELD-SYMBOLS : <fs_result> like line of lt_search_result. DATA : lo_service_properties type ref to /IWFND/CL_DST_PROPERTIES. DATA : lv_xml_url type string. DATA : lv_metadata_url type string. DATA : lt_service_details type TABLE OF ty_service_details. DATA : wa_service_details like line of lt_service_details. DATA : lo_json TYPE REF TO cl_trex_json_serializer. * Serach and get results of all Gateway Services and then fetch URLL details ls_search_params-srv_identifier = '*'. CALL METHOD /IWFND/CL_MED_EXPLORATION=>FIND_SERVICE_GROUPS EXPORTING IS_SEARCH_PARAMS = ls_SEARCH_PARAMS IMPORTING ET_SEARCH_RESULT = lt_search_result. lo_service_properties = /IWFND/CL_DST_PROPERTIES=>get_instance( ). LOOP AT lt_search_result ASSIGNING. CALL METHOD LO_SERVICE_PROPERTIES->GET_URL_FOR_SERVICE EXPORTING IV_EXTERNAL_NAME = <fs_result>-service_name IV_NAMESPACE = <fs_result>-namespace IMPORTING EV_XML_URL = lv_xml_url EV_METADATA_URL = lv_metadata_url. wa_service_details-url = lv_metadata_url. * REPLACE '$metadata' INTO wa_service_details-url with '/'. "not required - client app seems to take care of this * REPLACE 'idea-PC' INTO wa_service_details-url with 'localhost'. "will help with CORS for local server - not required now wa_service_details-name = <fs_result>-service_name. APPEND wa_service_details to lt_service_details. ENDLOOP. * Convert internal table to JSON format. CREATE OBJECT lo_json EXPORTING data = lt_service_details. lo_json->serialize( ). gv_json = lo_json->get_data( ). - Page-Attribute gv_json and type definition for internal table, are as below ( to be declared at in respective tabs of BSP editor ) :
* Page Attributes gv_json TYPE string * Type Definitions TYPES : BEGIN OF ty_service_details, name TYPE /iwfnd/med_mdl_service_grp_id, url type string, END OF ty_service_details.
Results:
You should be able to select and explore registered & active oData Gateway Service endpoints as below :
Prerequisite:
- oData Gateway Services should be already configured/registered - if it's not accessible then you'll get a time-out error ( {"message":"Request timed out"}).
- FQDN settings for the SAP system is done - that's a normal prerequisite for running BSP applications. I played with this a bit on my trial version - You can access a BSP page using localhost:8000..for local installations (trial version) and run a BSP application without FQDN. But oData service calls will fail due to CORS requirement. So you need to setup the FQDN in RZ10 profile. Since my trial version Netweaver is running on my laptop (Windows), I also made the full host-name entry in /etc/host file.
Further Enhancements:
TBD
Update on 09-Apr-2014 : Please see new post How to Visualize & Explore SAP NW Gateway OData Services online? : XOData Connect - Beta . XOData is an online OData Visualizer and Explorer.
Posts
Wow. Really like your use of BSP. I have been a follower for several years and wish you the best in your new "life"!!!
ReplyDeleteThanks Steve :)
DeleteHi Ram, that's a great example on how to create a simple ABAP BSP application. It's simple enough to learn from but still covers all the aspects. Thanks...
ReplyDeleteFQDN setup can be bypassed by adding period behind the server name. Nice post!!!
ReplyDelete