Hello!

This is the eighth part of the Multi-part Tutorial series about SAP Graph – the new API for connecting to your business data.

We are going to show you, a SAPUI5/Fiori developer, how to use the business data graph created in Part 7: Key Mapping with SAP Graph to build a Fiori Elements app using the SAP Business Application Studio and the Fiori template List Report Object Page. You will see how easy it is to enable an SAP Graph endpoint and use it as your unique data access point to show a list of Products and its details.

As a prerequisite, you will need your SAP Graph instance in a BTP subaccount as shown in the previous parts of the tutorial. Additionally, your SAP Cloud Foundry and the SAP Business Application Studio subscription should be set up in the same BTP subaccount as your SAP Graph instance. There are several tutorials and blog posts available to help you with these tasks, for example SAP BTP Developer Onboarding | Hands-on Video Tutorials.

Create the Destination to Your Business Data Graph

An SAP Graph instance serves data via an OData end point. As such, we could use directly the end point for the service when creating the Fiori Elements from the template and we would need basic authentication credentials to access the service. In this case, we want to use single sign-on from our BTP subaccount to the backend systems through the SAP Graph instance. And so we need a destination where we can specify a different authentication method.

1. You will first need to retrieve some information from your SAP Graph instance, which can be found in the corresponding service binding credentials. You can check how this is done in Step 3 of Part 5: Use SAP Graph with your own data.
   Copy the following attributes: 
   • Client ID
   • Client Secret
   • URL
   • URI
2. Now let’s create the destination. Navigate to Destinations in the Connectivity section of the navigation menu, and select New Destination.
   1. Give your destination a name, select Type HTTP. Optionally, you can provide a description.
   2. For Proxy Type select Internet and for Authentication method select  OAuth2JWTBearer.
   3. In the URL field, enter the URI address retrieved from the service binding credentials and append the Business Data Graph ID, in our case “my-bdg”, followed by “/sap.graph“. Your URL should look as follows:
      

      https://<my_uri>/<business_data_graph_id>/sap.graph

   4. Paste the Client ID and Client Secret into the corresponding fields.
   5. Paste the URL retrieved from the service binding credentials and append /oauth/token
   6. To have the destination available in the Business Application Studio, add the following Additional Properties by clicking New Property
      • HTML5.DynamicDestination: true
      • WebIDEAdditionalData: full_url
      • WebIDEEnabled: true
      • WebIDEUsage: odata_gen
   7. Save and check your destination. The connection will succeed even though you will get a “401: Unauthorized” response. This is because at this moment there is no token being sent with the check request.

A note on authentication:  The authentication method OAuth2JWTBearer will work only if the SAP Graph instance and the application are in the same subaccount. The authentication settings depend on your specific scenario, so they must be adapted accordingly.

Use Your SAP Graph Destination in a Fiori App

Now that we have the destination to the SAP Graph instance, we can use it as a data source in a Fiori app.

After accessing the Dev Space in SAP Business Application Studio, select Start from template in the Welcome page.

Then select SAP Fiori application and click Start.

Application Type SAP Fiori Elements should be selected by default. Choose List Report Object Page and click Next.

On Data Source select Connect to a System which will load the suitable destinations available on your subaccount. Select the SAP Graph destination you have created. If everything is Ok, Service will be loaded from the selected destination, and the URL specified in the destination is displayed. Select Next.

Note: SAP Graph uses the OData v4 protocol which means that you will be able to use only Floorplans supporting OData v4. In the next steps of the wizard, the service will be accessed to select the entity and if you select a floorplan that does not support OData v4, you will not be able to proceed.

The list of unified entities provided by SAP Graph is displayed and we can select the main entity we want our Fiori app to work with. In this example, we’re choosing Product.

And we keep the default setting Yes in Automatically add table columns to the list page and a section to the object page if none already exists?.

We now enter the project’s details.
If  you want to deploy the app to your Cloud Foundry and to use it in the Fiori Launchpad, make sure to choose Add deployment configuration and Add FLP configuration, so these configurations are automatically added. In this example, we will just run the app locally, so we choose No and we’re done with the wizard.

When the process is finished, your new project will be visible in the Project Explorer section and the Application Info page will be displayed.

You can select Preview Application and chose the npm script start fiori run in the actions menu.

This will open a new browser tab where the Fiori Elements app will be executed.

And here’s the Fiori Elements app running!

You can press Go to fetch the list of Products.

And by clicking on any entry in the table, you navigate to the Details of that product.

Like any other Fiori Elements app, you can add further features and enhancements using the available tools.

Summary

As you can see, it’s pretty easy to use SAP Graph in your Fiori app and take advantage of the benefits SAP Graph provides. You don’t need to worry if, for example, the Product’s Base Unit is stored in SAP S/4HANA or SAP Sales Cloud. And you also don’t have to care about the technical details necessary to connect to each individual system. SAP Graph takes care of all that for you!

Pedro Rodrigues, Developer (Runtime) – SAP Graph

Learn more about SAP Graph, or contact us at sap.graph@sap.com