An introduction to CDS Graphical Modeler for Visual Studio Code

SAP core data services (CDS) Graphical modeler is graphical tool for developers to perform CDS modeling for SAP CAP (Cloud Application Programming) based cloud application development. In this blog post, we’ll introduce the new CDS Graphical Modeler for Visual Studio Code.

In addition to the CDS Graphical Modeler for SAP Business Application Studio as introduced by the previous blog post https://blogs.sap.com/2021/04/23/an-introduction-to-cds-graphical-modeler-for-sap-business-application-studio/, the CDS Graphical Modeler is now available on Visual Studio Code (VSCODE) Marketplace as well. Please check https://marketplace.visualstudio.com/items?itemName=SAPSE.vscode-wing-cds-editor-vsc for more details:

Click the “Install” button and VSCODE is launched you will see the CDS Graphical Modeler for VSCODE extension page:

You can then proceed and click the “Install” button to finish installation for the modeler in VSCODE.

Before you use the CDS Graphical Modeler for VSCODE, you would need to install @sap/cds-dk first in your local desktop. You can install @sap/cds-dk by executing command line “npm i -g @sap/cds-dk”.

After finishing the installation of @sap/cds-dk, you can check the installation of cds and cds-dk by executing “cds -v” and ensure that the cds-dk installation is successful.

Now open a terminal in your local desktop or via VSCODE, and create a sample CDS project by executing “cds init test –add samples”:

PS C:\modeler> cds init test –add samples
[init] – creating new project in .\test
[init] – adding feature ‘nodejs’…
[init] – adding feature ‘samples’…
[init] – done.
[init] –
[init] – Continue with ‘cd test’
[init] – Find samples on https://github.com/SAP-samples/cloud-cap-samples
[init] – Learn about next steps at https://cap.cloud.sap

This will create a sample CDS project for you.

Open the sample folder using VSCODE via “File”–>”Open Folder…” menu item:

Select data-model.cds file in the db folder of your project in the VSCODE explorer, right click the file and click “Open With…” context menu:

And in the VSCODE command popup dialog, choose “Open with CDS Graphical Modeler”:

You will see CDS file data-model.cds is opened by the CDS Graphical Modeler successfully:

You can do the same for srv/cat-service.cds which contains a projection for entity “Books”:

In this blog post, we introduce the new CDS Graphical Modeler for Visual Studio Code, and provide a guide for developers how to install the CDS Graphical Modeler extension, the necessary @sap/cds-dk, as well as how to use the modeler to open CDS files.