ASAPIO Data Studio

Overview

ASAPIO Data Studio is a web-based application that allows configuration of the ASAPIO Integration Addon. It allows interface deployment for standard payloads delivered by ASAPIO and can also be used to view and change existing configuration of the addon. It is designed to connect to various backend systems and display data through a unified user interface. It supports integration with multiple SAP systems via destinations, and is built using standard SAP UI5 technologies.

User documentation

General navigation and System selection

Once the application has successfully loaded, select the desired SAP system from the dropdown list of connected systems, then click OK button to proceed.

 

If the incorrect SAP system was selected, it is possible to switch to a different one at any time using the dropdown menu in the top right corner. Use the menu button on the left side of the screen to expand or collapse the sidebar menu. From the sidebar, you can navigate to other pages within the application, the default landing page is the Data Catalog.

Available Pages in Version 1.0.0

The following pages are available in version 1.0.0 of the application:

Page	Functionality
Data Catalog	List of available data objects (standard or custom) with ability to navigate to the detailed information, deploy standard events or update the deployed ones and retrieve the Async API schema.
Interfaces	List of existing interfaces with ability to view detailed interface information, create new interfaces, transport interface configurations, and access the Async API schema.
Events	List of predefined events with options to add, update, or delete individual entries.
Connections	List of configured connections than can be edited using SAP GUI for HTML.
Monitoring	Monitoring of the system activity for a specified time period with options to download trace information for both requests and responses.
Help	Helpful links to documentation and user guidelines.

Pages

Data Catalog

List of Data Objects

 

The Data Catalog page includes a filter bar at the top and a list of interactive tiles representing individual Data Objects.

• Filter Bar
  Located at the top of the page, the filter bar contains a search field for keyword-based filtering and a toggle switch to display either standard or custom Data Objects.
• Data Object Tiles
  Each tile provides a short summary of a Data Object, including the Title, Data View name, Version, Payload, and current Status (active or inactive). Active elements of the tile include:
  • Data View name – name of the root table or CDS view in the Payload Design.
  • Payload – opens the corresponding object in the Payload Designer in SAP GUI for HTML, where it can be viewed or edited.

Details Page

After pressing on any tile, the details screen is shown:

 

Details screen consists of the following sections:

• Breadcrumb Navigation
  Located at the top of the page, breadcrumbs enable easy navigation back to previously visited pages.
• Data Object Tile
  Displays a short summary of the selected Data Object, including key attributes.
• AsyncAPI Section
  Provides functionality to load the AsyncAPI specification for a selected Interface ID. The specification can be copied to the clipboard or downloaded in the available file formats.
• Available Standard Events Table
  Lists detailed information about predefined events. Each row includes a Deploy button for initiating deployment of the respective event.
• Active Instances Table
  Displays information about active deployments. This section also supports navigation to the instances from the table and provides the functionality to update the deployed instance.
• Payload Details Table
  Shows the full payload structure associated with the Data Object, supporting in-depth review.

Deployment page is accessible both using Deploy button in Available Standard Events table or after navigation to the entry of Active Instances table.

Deployment Page

 

The Deployment page includes a set of input fields and configuration options used to create or update a deployment:

• Interface Name
  Automatically created based on the properties of the selected Data Object.
• Connection
  Dropdown list of available connections. After selection, the Header Fields table is automatically populated with relevant entries.
• Header Fields Table
  Allows adding, editing, and deleting header field entries. All mandatory fields must be filled before proceeding.
• Load Type
  Dropdown list containing the available load types.
• Activation Flag
  A checkbox used to indicate whether the deployment should be activated immediately.

Once all required fields are completed, the Deploy button (located in the top right corner) can be pressed to initiate a new deployment or update an existing one. If any input is invalid or incomplete, the affected fields will be highlighted. In case if an error occurs, a corresponding error message will be displayed.

Interfaces

List of Interfaces

 

The Interfaces page consists of a filter bar at the top and a table listing available interfaces. Two action buttons (Create Interface and Transport Interface Configuration) are positioned above the table.

• Filter Bar
  Includes the following controls:
  • A search field for keyword-based filtering
  • A Connection ID dropdown for filtering interfaces by connection
  • A Display Mode dropdown that allows switching between table view and grid view with tiles
• Action Buttons
  • Create Interface: Opens the interface creation screen
  • Transport Interface Configuration: Opens a dialog containing a list of Workbench and Customizing transports assigned to the user. This dialog is used to select transports to transport the interface configuration.

Note: To use the Transport Interface Configuration function, at least one interface must be selected. This action is only available in Table View mode.

Interface Creation Screen

 

After clicking the Create Interface button, the application navigates to the interface creation screen. This screen includes the following input fields and configuration sections:

• Interface Name
  A free-text input field for specifying the name of the new interface.
• Connection
  A dropdown menu used to select the appropriate connection.
• Header Fields Table
  Automatically populated based on the selected Connection and Load Type. Entries can be added, modified, or deleted. All mandatory fields must be completed to proceed.
• Load Type
  A dropdown list for selecting the desired load type.
• Extraction Type
  A dropdown list for specifying the extraction method.

Once all required fields are populated, the Create button in the top right corner can be pressed to initiate the interface creation process.

Transport Interface Configuration Dialog

 

After clicking the Transport Interface Configuration button, a dialog window is displayed, allowing selection of both Workbench and Customizing transport requests from the list of transports assigned to the user. If no transports of the required type are available, it is necessary to create and assign new transports in the SAP system before proceeding.

After selecting the appropriate transports, click the OK button to continue adding the interface configuration to the selected transports.

Details Screen

 

Details screen is accessible after pressing the table row or the tile (depending on the selected display mode) and consists of the following sections:

• Breadcrumb Navigation
  Located at the top of the page, breadcrumbs enable easy navigation back to previously visited pages.
• Interface Tile
  Displays a short summary of the selected Interface, including key attributes.
• AsyncAPI Section
  Provides functionality to load the AsyncAPI schema for a selected Interface ID. The schema can be copied to the clipboard or downloaded in the available file formats.
• Active Instances Table
  Displays information about active deployments. This section also supports navigation to the instances from the table and provides the functionality to update the deployed instance.

Deployment Page

The Deployment page, accessible after clicking on the row of the Active Instances table, includes a set of input fields and configuration options used to update a deployment:

• Interface Name
  Automatically pre-filled based on the properties of the selected entry.
• Connection
  Dropdown list of available connections, automatically pre-filled based on the properties of the selected entry.
• Header Fields Table
  Header Fields that already exist for selected entry. Functionality allows adding, editing, and deleting header field entries. All mandatory fields must be filled before proceeding.
• Load Type
  Dropdown list containing the available load types, automatically pre-filled based on the properties of the selected entry.
• Activation Flag
  A checkbox used to indicate whether the deployment is active or inactive.

Once all required fields are completed, the Deploy button (located in the top right corner) can be pressed to update the existing instance. If any input is invalid or incomplete, the affected fields will be highlighted. In case if an error occurs, a corresponding error message will be displayed.

Events

List of Predefined Events

The Events page displays a table containing detailed information about predefined events.

• Two action buttons (Create and Delete) are displayed above the table.
  • Create opens the dialog that allows the addition of a new event.
  • Delete triggers the removal of selected existing event.

It is also possible to navigate to a details screen, where event information can be viewed or updated as needed, by pressing the corresponding table row.

Add Event Dialog

Some events are shipped with the Data Studio but you can also add event definitions for other events that exist in your system or link standard events to your custom data catalog objects.

 

After clicking the Create button, a dialog window is displayed. Fill in all required fields, then click OK to complete the event creation process.

Details screen

 

Details screen is accessible after clicking on a row of Predefined Events table and consists of the following sections:

• Breadcrumb Navigation
  Located at the top of the page, breadcrumbs enable easy navigation back to previously visited pages.
• Main section
  Contains detailed information about the selected Event.
• Edit button
  Activates edit mode, allowing modifications to the selected event.

 

Clicking the Edit button switches the interface to edit mode, enabling modifications to the event fields. Once changes are made, use the Save button to apply the updates or the Cancel button to discard them.

Connections

 

Connections page displays a table containing detailed information about all available connections. Edit button is used for the navigation to SAP GUI for HTML, where they can be viewed or edited.

Monitoring

 

The Monitoring page is used for monitoring of the system activity based on the selected time range and consists of:

• Filter Bar
  Contains From and To timestamp fields used to define the monitoring period, along with a Go button that triggers the data refresh.
• Results Table
  Displays relevant monitoring entries for the specified time range. After selecting an entry, the Traces section appears at the bottom of the page, displaying the corresponding request and response data. This data can be downloaded for further analysis using the corresponding download buttons ().

Help

 

This page contains helpful links to documentation and user guidelines.

Deployment Guide

Introduction

This documentation provides a step-by-step guide for setting up and deploying the Data Studio application using SAP Business Application Studio (BAS) on SAP Business Technology Platform (SAP BTP).

Data Studio is a web-based application designed to connect to various backend systems and display data through a unified user interface. It supports integration with multiple SAP systems via destinations, and is built using standard SAP UI5 technologies.

Whether you’re a developer preparing the app for deployment, or an administrator setting up the required infrastructure, this guide walks you through all necessary tasks — from environment preparation and configuration to deployment in SAP BTP and optional registration in the SAP Fiori Launchpad.

By following the instructions in this document, you will:

• Import and configure the Data Studio project in SAP Business Application Studio
• Set up system connectivity and backend destinations
• Run and test the app locally
• Deploy the app to SAP BTP (Cloud Foundry) or an ABAP system
• Optionally, expose the app as a tile in the Fiori Launchpad

💡 This guide assumes you already have access to a configured SAP BTP subaccount and basic familiarity with the SAP ecosystem. If you’re new to BAS or BTP, please check the SAP Help Portal or reach out to your system administrator for access.

Prerequisites

Before you start with importing, configuring, or deploying the application in SAP Business Application Studio (BAS), make sure the following system-wide setup is completed.

These prerequisites are needed for further steps in this documentation.

System Connectivity

• ASAPIO Integration Addon is installed on the backed system
  At least version 9.32504 (SP11) is needed for the Data Studio. Please check the download page for the Data Studio for more details.
• Cloud Connector is configured (if using on-premise systems)
  If your application connects to on-premise systems (e.g., S/4HANA backend), you must configure access via the SAP Cloud Connector.
  see SAP Help: SAP Cloud Connector – Configuration
• All required system connections are available
  Ensure that your SAP BTP subaccount has access to all backend systems the app connects to — whether cloud-based or on-premise — via the defined Destinations.
  see SAP Help: Managing Destinations on SAP BTP

Identity & Access

• Principal Propagation is configured
  The application uses Principal Propagation for secure user authentication across systems. Therefore, the following must be configured:
  • Trust setup between Cloud Connector and BTP subaccount
  • Identity mapping in the Cloud Connector
  • Destination authentication method set to PrincipalPropagation

SAP BTP Subaccount Setup

• Business Application Studio is subscribed
  In the Service Marketplace, locate SAP Business Application Studio and subscribe to it.
  👉 Subscribe to SAP Business Application Studio
• User roles are assigned
  Users who will be working in BAS or deploying the application need the appropriate role collections:
  • Business_Application_Studio_Developer (for developers)
  • Business_Application_Studio_Administrator (for admins)
    👉 Manage Role Collections

Business Application Studio Setup

• Dev Space is created
  In BAS, create a Dev Space with the required extensions such as MTA Tools or SAP Fiori, depending on your application type.
  👉 Create a Dev Space
• Application archive is available
  Ensure that the datastudio.tar archive is available for import into your BAS Dev Space.
• (Optional) Cloud Foundry CLI is installed
  If you prefer to deploy from the terminal, install and configure the Cloud Foundry CLI locally.
  👉 Install Cloud Foundry CLI

Business Application Studio

Start Dev Space and Import Project

1. Open SAP Business Application Studio via the SAP BTP Cockpit.
2. Launch or create a Dev Space.
3. Go to File → Import Project, select datastudio.tar, and import it.

 

Install Dependencies

1. Right-click on the datastudio project folder.
2. Select Open in Integrated Terminal.
3. Run the following command: npm install
4. Wait until the node_modules folder appears in your project.

The terminal output after successful npm install should look like this:

 

Adjust Configuration Files

Update ui5.yaml (Local Preview)

1. Open the ui5.yaml file.
2. Scroll to the backend: sections.
3. Use the following format to define each backend connection:

backend:
    - path: /erd
      pathReplace: /
      destination: ERD_PP
    - path: /s4d
      pathReplace: /
      destination: S4D_PP

💡For each additional system, use the same format:

- path: /<system-alias>
  pathReplace: /
  destination: <Destination-Name-in-BTP>

Update xs-app.json (Deployed App Routing)

1. 1. Open the xs-app.json file.
   2. Locate the "routes" array.
   3. Use the following format to define each backend connection:

{
  "source": "^/erd/(.*)$",
  "target": "/$1",
  "authenticationType": "xsuaa",
  "destination": "ERD_PP"
},
{
  "source": "^/s4d/(.*)$",
  "target": "/$1",
  "authenticationType": "xsuaa",
  "destination": "S4D_PP"
}

💡For each additional system, use the same format:

{
  "source": "^/<system-alias>/(.*)$",
  "target": "/$1",
  "authenticationType": "xsuaa",
  "destination": "<Destination-Name-in-BTP>"
}

Update App.controller.js for the Frontend Dropdown Menus

1. Open webapp/controller/App.controller.js.
2. Locate the aAvailableConnections array (around line 13).
3. Use the following format to define each backend connection:

var aAvailableConnections = [
      {
        key: "erd",
        text: "ERD100",
        url: "http://asapioerd.asapio.lokal:8000"
      },
      {
        key: "s4d",
        text: "S4D100",
        url: "https://s4hana01.asapio.lokal:44300"
      }
    ];

💡For each additional system, use the same format:

{
      key: "<system-alias>",
      text: "<Display Name>",
      url: "<Destination URL>"
    }

Run the Application Locally

1. Right-click the datastudio project folder.
2. Select Preview Application.
3. In the popup, choose start-noflp.
4. A new browser tab opens – your app should load successfully.

Deployment

There are 2 deployment options:

1. Deploy to SAP Business Technology Platform
2. Deploy to ABAP Server

Deploy to SAP Business Technology Platform

Option 1: Via Business Application Studio UI

1. Right-click the mta.yaml file and click Build MTA Project.
2. When successfully created, a new folder mta_archivesis visible in the project folder
3. After the .mtar file is created (under /mta_archives), right-click on it → Deploy MTA Archive
4. Select your target Enter Cloud Foundry Endpoint with credentials and sign in
5. Select Cloud Foundry Organization and Space, then click “Apply”
6. The Terminal is started. Once the deployment is completed sucessfully, the application is shown on the BTP in the HTML5 Applications section. It can be opened by clicking the blue link of the application

Option 2: Via Terminal

To open the terminal in SAP Business Application Studio:

1. Right-click on the root folder of your project (e.g., datastudio).
2. Select “Open in Terminal” from the context menu.​

This action will open an integrated terminal at the bottom of the BAS interface, allowing you to execute commands directly within your project context.

Once the terminal is open, follow these steps:

1. Log in to Cloud Foundry:​cf login
2. Target your desired organization and space:​cf target -o <your-org> -s <your-space>
3. Deploy the Multi-Target Application (MTA) archive:​cf deploy mta_archives/datastudio_1.0.0.mtar

Replace <your-org> and <your-space> with your actual Cloud Foundry organization and space names.​

💡 Note: Ensure that the datastudio_1.0.0.mtar file exists in the mta_archives directory. If not, you may need to build the MTA project first using the BAS interface or appropriate CLI commands.

If successful, the output will look like this:

Your app is now deployed and running on SAP BTP!

Deploy to ABAP Server (Alternative)

Via Business Application Studio (UI-based deployment)

To deploy the application to an ABAP repository directly from SAP Business Application Studio:

1. Open the integrated terminal
   In SAP Business Application Studio, right-click your project folder and select Open in Terminal.
2. Generate the deployment configuration
   Run the following command:

Run the following command:

You will be prompted to enter the following settings:

• Target
  Choose the deployment target: ABAP or Cloud Foundry. (For ABAP repository deployment, select ABAP.)
• Destination
  Enter the destination name corresponding to your connected ABAP backend system (e.g., SAP_ABAP_REPO).
• SAPUI5 ABAP Repository Name
  Define the repository name for the SAPUI5 application in the ABAP system. (A new repository object will be created.)
• Deployment Description
  Provide a short text to describe the deployment package (e.g., “Data Studio Initial Deployment”).
• Target Package
  Enter the ABAP package name where the app should be stored (e.g., Z_UI5_APPS).
  (Use $TMP for local packages if no transport is required.)
• Transport Request
  Provide the transport request number (e.g., SIDK900001).
  (Leave empty if using local package $TMP.)
• Edit the generated configuration (optional)
  A ui5-deploy.yaml file will be generated in your project folder. You can review and adjust the settings manually if necessary.
• Deploy the application
  Once configuration is complete, deploy the application by running:
  npm run deploy

  If all settings are correct, the application will be uploaded successfully to the SAPUI5 ABAP Repository.

💡 Tip: Ensure that your BTP destination to the ABAP backend system is configured for Principal Propagation if authentication is required.

Configure as Fiori Launchpad Tile (Optional)

After deploying the Data Studio application to your ABAP system, you can make it accessible via the SAP Fiori Launchpad by following these steps:

Option 1: Using Fiori Launchpad Designer

1. Access the Fiori Launchpad Designer

• Open transaction /UI2/FLPD_CUST in SAP GUI to access the Fiori Launchpad Designer in client-specific customization mode.
• Alternatively, open the URL directly (replace placeholders):
  https://<your-host>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html?sap-client=<client>&scope=CUST

2. Create a Semantic Object

• Open transaction /UI2/SEMOBJ in SAP GUI.
• Create a new Semantic Object, e.g., ZDATASTUDIO.
• Enter a unique name and description, then save.

3. Create a Catalog

• In the Launchpad Designer, go to Catalogs.
• Click “+” to create a new catalog.
• Provide:
  • Title: e.g., Data Studio Catalog
  • ID: e.g., ZCAT_DATASTUDIO
• Save the catalog.

4. Create a Target Mapping

• Inside the catalog, navigate to Target Mappings → Create Target Mapping.
• Fill in the fields:
  • Semantic Object: ZDATASTUDIO
  • Action: display
  • Application Type: SAPUI5 Fiori App
  • Title: Data Studio
  • URL: /sap/bc/ui5_ui5/sap/zdatastudio
  • ID: zdatastudio
  • System Alias: (enter your backend alias)
• Save the target mapping.

5. Create a Tile

• Still within the catalog, navigate to Tiles → “+” → App Launcher – Static.
• Configure the tile:
  • Title: Data Studio
  • Subtitle: (optional)
  • Information: (optional)
  • Icon: sap-icon://business-objects-experience
  • Semantic Object: ZDATASTUDIO
  • Action: display
• Save the tile.

6. Create a Group and Assign the Tile

• Go to Groups in the Launchpad Designer.
• Click “+” to create a new group.
• Enter:
  • Title: Data Studio Group
  • ID: ZGRP_DATASTUDIO
• Save the group.
• Add the newly created tile from your catalog to this group.

7. Assign Catalog and Group to a Role

• Open transaction PFCG in SAP GUI.
• Create or edit a role (e.g., ZROLE_DATASTUDIO).
• In the Menu tab:
  • Add the catalog via Insert Node → SAP Fiori Tile Catalog.
  • Add the group via Insert Node → SAP Fiori Tile Group.
• In the User tab:
  • Assign the role to the relevant users.

💡 Note:
Make sure all custom objects (semantic object, catalog, group, role) follow your organization’s namespace conventions (usually starting with Z or Y).

Option 2: Using Fiori Launchpad Content Manager

1. Access the Content Manager:
   • Use transaction code /UI2/FLPCM_CUST in the SAP GUI.​
2. Create or Modify Catalogs:
   • Navigate to the Catalogs tab.
   • Create a new catalog or copy an existing one.
   • Add or modify tiles and target mappings as needed.​
3. Create or Modify Groups:
   • Navigate to the Groups tab.
   • Create a new group or modify an existing one.
   • Add tiles from catalogs to the group.​
4. Assign Catalogs and Groups to Roles:
   • Use transaction code PFCG to create or edit roles.
   • Assign the desired catalogs and groups to the role.
   • Assign the role to users.​

By following these steps, you can successfully configure your SAPUI5 application as a tile in the SAP Fiori Launchpad, providing users with easy access to the application.​

For step-by-step instructions, screenshots, and examples, refer to the SAP Help Portal

Summary

You’ve successfully:

• Imported and configured the datastudio app
• Installed dependencies
• Connected backend systems
• Tested the App locally
• Deployed to Cloud Foundry (and optionally ABAP)