SAP Cloud Application Programming Model Data Inspector Plugin for Node.js
About this Project
@cap-js/data-inspector is a plugin to view data of CAP Node.js applications. It comes with an SAPUI5 app consumable out of the box.
Quick Start
Installation
Install the plugin in your CAP Node.js project:
npm install @cap-js/data-inspector
[!NOTE] As long as the package is not published, install a preview like so
npm install https://github.com/cap-js/data-inspector/releases/download/v0.0.1-test/cap-js-data-inspector-0.0.1.tgz
Run
Run it with
The UI is served at http://localhost:4004/data-inspector-ui/.
When asked for a user, use alice without password.
Features
- Exclude specific entities and elements from being exposed by the plugin. See Excluding Entities and Elements.
- Automatically log access to sensitive personal data using
@cap-js/audit-logging. See Audit Logging. - Provide
xsuaascope for access control. See Authorization.
The UI at a Glance
- The landing page:
- Finding an entity:
- Use the
Data Sourcedrop down menu.Databaseis raw data that exists in the database.Serviceis data that is served by the CDS services. - Use the
Entity Namesearch field.
- Use the
- Selecting elements of an entity for inspection:
- Select the entity to show the elements. They appear as a second column on the screen.
- Use the checkboxes to select your desired elements.
- Choose
Show Datato display the data content.
-
Viewing the data content of the selected elements:
After choosing
Show Data, the third column appears and automatically expands into fullscreen, showing the data of the selected elements. ChooseMoreto load the next page of the data. ChooseAdvanced Filterto bring up the filter dialog.
-
Adding filter conditions in the Advanced Filter dialog:
Add your filter conditions in the filter dialog and choose
Apply.
-
Viewing filtered data:
The filtered data is displayed.
Recommendation:
Select only the required columns and add filters to limit the data that is displayed.
Excluding Entities and Elements
To hide entities or elements from the Data Inspector, annotate them with @HideFromDataInspector in your CDS definitions.
Example
Using @HideFromDataInspector annotation in the CDS entity definitions:
entity Foo { id : String; name : String @HideFromDataInspector; }
The name element of the Foo entity is not revealed by @cap-js/data-inspector.
@HideFromDataInspector entity Bar { id : String; name : String; }
The Bar entity is not revealed by @cap-js/data-inspector.
Setup for BTP
Prerequisites
- Ensure your project uses
@sap/cdsversion 9. - Set up the
xsuaaSAP BTP service for authorization. - Optionally, add
@cap-js/audit-loggingand theauditlogSAP BTP service for audit logging.
Setup with cds add data-inspector
Run cds add data-inspector to automatically add @cap-js/data-inspector configuration to your project.
Note: Running
cds add data-inspectoris optional. To add the required configuration manually, refer to the relevant sections in this document.
The following changes are applied by cds add data-inspector:
- XSUAA (when a
xs-security.jsonfile exists): Adds thexsuaascopecapDataInspectorReadonlyto yourxs-security.json. Make sure to use this scope in appropriate role collections. See Authorization. - MTA (when a
mta.yamlfile exists): Adds the data-inspector HTML5 module and artifact to yourmta.yaml. See MTA Deployment.- Adds
html5modulecapjsdatainspectorapppointing to the SAPUI5 app ingen/cap-js-data-inspector-ui. - Adds the
capjsdatainspectorappartifact to the HTML5 content module (thecom.sap.application.contentmodule that targets yourhtml5-apps-repoapp-hostresource).
- Adds
- Cloud Portal Service (when detected in a
mta.yamlfile and aportal-site/CommonDataModel.jsonfile exists): Addscatalogandgroupconfiguration for the data-inspector tile to yourCommonDataModel.jsonfile, and creates an i18n properties file for translatable titles. See Cloud Portal Service Configuration.
Authorization
Define and use the xsuaa scope capDataInspectorReadonly in your xs-security.json file to grant read access to the plugin's SAPUI5 app and the underlying OData service. For local development and testing, the scope capDataInspectorReadonly is added automatically to the default alice mock user. For setting up other mock users, refer to the Capire documentation.
Note: Running
cds add data-inspectoradds the scopecapDataInspectorReadonlyin yourxs-security.jsonautomatically. Make sure to use this in your preferedrolesandrole-collections.
Note:
@cap-js/data-inspectorreads data only through the available CDS services, exposing data based onxsuaascopes granted to the entities and the user. It doesn't implement own access control. It doesn't perform any direct SQL queries.
Audit Logging
If your SAP Cloud Application Programming Model Node.js application uses the @cap-js/audit-logging plugin, @cap-js/data-inspector automatically emits audit logs for read access to sensitive data elements annotated with @PersonalData.IsPotentiallySensitive. For audit logging in SAP Cloud Application Programming Model, refer to the Capire documentation.
UI Configuration for SAP BTP
CDS Build Plugin
@cap-js/data-inspector ships a CDS build plugin that runs during your cds build. The plugin:
- Copies the SAPUI5 app source from the plugin package into your project's
gen/cap-js-data-inspector-uidirectory. - Patches the SAPUI5 app's
xs-app.jsonfile with your Node.js OData server destination name when a value is available fromcds.envor auto-detected from an existing SAPUI5 app in your project. For more information, see Custom Destination Name. - Patches the SAPUI5 app's
manifest.jsonfile withsap.cloud.servicewhen a value is available fromcds.envor auto-detected from an existing SAPUI5 app in your project. For more information, see sap.cloud.service Configuration.
The resulting gen/cap-js-data-inspector-ui folder is the single source of truth for deployment, whether you use MTA-based deployment or @sap/html5-app-deployer.
Custom Destination Name
The default OData route destination is srv-api. If your project uses a different destination name, the build plugin resolves it automatically in this order:
-
Explicit configuration — Set
cds.data-inspector.destinationin your.cdsrc.jsonfile orpackage.jsonfile:{ "cds": { "data-inspector": { "destination": "my-custom-srv-api" } } } -
Auto-detection — The plugin scans your existing
app/*/xs-app.jsonfile for an OData route and uses its destination value. -
Default — This falls back to
srv-api.
sap.cloud.service Configuration
The sap.cloud.service property in the SAPUI5 app's manifest.json file is required for SAP Build Work Zone. The cds build plugin patches this value automatically when available:
-
Explicit configuration — Set
cds.data-inspector.cloudServicein your.cdsrc.jsonfile orpackage.jsonfile:{ "cds": { "data-inspector": { "cloudService": "my.cloud.service" } } } -
Auto-detection — The plugin scans your existing
app/*/webapp/manifest.jsonfile for an existingsap.cloud.servicevalue and uses it. -
Skipped — If neither source provides a value,
sap.cloud.serviceis not added in the SAPUI5 app'smanifest.jsonfile.
MTA Deployment
Note: Running
cds add data-inspectoradds the following required configurations in yourmta.yamlfile automatically. Make sure to review the produced changes before committing.
The data-inspector plugin's SAPUI5 app produced by cds build in your project's gen/cap-js-data-inspector-ui directory must be referenced by an html5 module in your mta.yaml file and included in the HTML5 content module for deployment to the HTML5 Application Repository service.
- Add an
html5module as follows:
- name: capjsdatainspectorapp type: html5 path: gen/cap-js-data-inspector-ui build-parameters: build-result: dist builder: custom commands: - npm install - npm run build:cf supported-platforms: []
- Include the
html5module in your HTML5 content module — thecom.sap.application.contentmodule that targets yourhtml5-apps-repoapp-hostresource. For example:
- name: <your app content module name> type: com.sap.application.content path: <your app content module path> requires: - name: <your html5-apps-repo app-host resource name> parameters: content-target: true build-parameters: build-result: <your module build output path> requires: - name: capjsdatainspectorapp artifacts: - datainspectorapp.zip target-path: <your html5 app artifact build output path>
@sap/html5-app-deployer
For deployment with @sap/html5-app-deployer, use the source of the SAPUI5 app produced by cds build in your gen/cap-js-data-inspector-ui directory to include when creating your html5-app-deployer image.
- Run
cds buildto produce the patched data-inspector plugin's SAPUI5 app in your project'sgen/cap-js-data-inspector-uidirectory. - Build the SAPUI5 app for production:
cd gen/cap-js-data-inspector-ui && npm install && npm run build:cf. - Include the resulting
dist/contents (specificallydatainspectorapp.zip) in yourhtml5-app-deployerimage alongside your other SAPUI5 apps.
The exact steps depend on your deployment pipeline. For details, refer to Deploy Content Using HTML5 Application Deployer.
Cloud Portal Service Configuration
Note: Running
cds add data-inspectoradds the following required configurations in yourportal-site/CommonDataModel.jsonautomatically if Cloud Portal service is detected in yourmta.yamlfile (service: portal,service-plan: standard). Make sure to review the produced changes before committing.
Perform the following steps to configure the data-inspector tile:
- Add a catalog and a group entry for the data-inspector plugin's SAPUI5 application tile to your
portal-site/CommonDataModel.jsonfile.
In an existing catalog (payload.catalogs[*].payload.viz):
{
"appId": "sap.cap.datainspector.datainspectorui",
"vizId": "datainspectorui-display"
}In an existing group (payload.groups[*].payload.viz):
{
"id": "sap.cap.datainspector.datainspectorui",
"appId": "sap.cap.datainspector.datainspectorui",
"vizId": "datainspectorui-display"
}You can also create a new catalog and group for the data-inspector tile. cds add data-inspector does this. For example:
{
"payload": {
"catalogs": [
{
"_version": "3.0.0",
"identification": {
"id": "capDataInspectorCatalogId",
"title": "Data Inspector",
"entityType": "catalog",
"i18n": "your_i18n_file_path"
},
"payload": {
"viz": [
{
"appId": "sap.cap.datainspector.datainspectorui",
"vizId": "datainspectorui-display"
}
]
}
}
],
"groups": [
{
"_version": "3.0.0",
"identification": {
"id": "capDataInspectorGroupId",
"title": "Data Inspector",
"entityType": "group",
"i18n": "your_i18n_file_path"
},
"payload": {
"viz": [
{
"id": "sap.cap.datainspector.datainspectorui",
"appId": "sap.cap.datainspector.datainspectorui",
"vizId": "datainspectorui-display"
}
]
}
}
]
}
}- Create an i18n properties file with translatable titles for the catalog and group entries.
cds add data-inspectordoes this automatically. - Append the
capDataInspectorGroupIdgroup ID to your preferred site'sgroupsOrderso that the tile is visible by default in SAP Fiori launchpad.cds add data-inspectordoes this automatically only if exactly onesiteentity is found. If you have multiple sites, manually add the group ID togroupsOrderin your preferred site after runningcds add data-inspector.
SAP Build Work Zone Configuration
If you use SAP Build Work Zone, you must add the data-inspector plugin's SAPUI5 app manually to the SAP Build Work Zone CDM configuration file (cdm.json). The sap.cloud.service value in the manifest.json file of the plugin's SAPUI5 app should already be patched by the cds build plugin to work with SAP Build Work Zone.
Depending on your Workzone content model, you may need to:
- Add the app to a catalog entity for discoverability.
- Reference the catalog in a role entity to control access.
- Include the group in a space or workpage for navigation.
Ensure the following values for appId and vizId are set for the plugin's SAPUI5 app in your cdm.json file.
"viz": { "appId": "sap.cap.datainspector.datainspectorui", "vizId": "datainspectorui-display" }
For details on the CDM content structure, refer to the SAP Build Work Zone documentation.
(Optional) flpSandbox.html Configuration for Data Inspector Plugin's SAPUI5 App Tile for Local Testing
If you are using an flpSandbox.html to test locally, add the data-inspector plugin's SAPUI5 app tile in the sandbox SAP Fiori launchpad.
In ClientSideTargetResolution.adapter.config.inbounds:
CAPDataInspectorDisplay: { semanticObject: "datainspectorui", action: "display", signature: { parameters: {}, additionalParameters: "ignored" }, resolutionResult: { additionalInformation: "sap.cap.datainspector.datainspectorui", applicationType: "URL", url: "/data-inspector-ui" } }
In LaunchPage.adapter.config.groups:
{ id: "Supportability", title: "Support Tools", isPreset: true, isVisible: true, isGroupLocked: false, tiles: [ { id: "CAPDataInspector", tileType: "sap.ushell.ui.tile.StaticTile", properties: { title: "Data Inspector", targetURL: "#datainspectorui-display", icon: "sap-icon://database" } } ] }
Support, Feedback, and Contribution
This project is open to feature requests, suggestions, and bug reports through GitHub issues. We encourage and welcome contribution and feedback. For more information about how to contribute, the project structure, and additional contribution information, see the Contribution Guidelines.
Development Setup
To quickly test and experience the plugin directly without a dependent project in your local machine, use the NPM test workspace included in this repository.
-
Clone the repository:
git clone https://github.com/cap-js/data-inspector.git -
Install the dependencies:
npm i -
Generate core data services (CDS) model types by saving any
.cdsfile from VS Code. For more details, refer to CDS Typer. -
Create the test sqlite db:
cd testcds deploy -2 sqlite:db/testservice.dbcd ..
-
Run the test server:
npm run devThe SAPUI5 app is launched in a web browser.
-
Use the following credentials:
Username:
alicePassword: keep empty
Security / Disclosure
If you find a bug that might be a security problem, follow the instructions in our security policy to report it. Don't create GitHub issues for security-related questions or problems.
Code of Conduct
Members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone. By participating in this project, you agree to abide by its Code of Conduct at all times.
Licensing
Copyright 2025-2026 SAP SE or an SAP affiliate company and data-inspector contributors. Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available through the REUSE tool





