Skip to Content
Product Information
Author's profile photo Xiao-fei Song

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.

Introduction to SAP 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.

Usage of CDS Graphical Modeler for 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”:

Conclusion

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.

References

Creating entity relationship through CDS Graphical Modeler for VSCODE

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vladimirs Semikins
      Vladimirs Semikins

      Thanks for sharing! I've tried that plugin and seems to be working only with simple data models. For e.g. I've tried it with an amazing Star Wars data model from Thomas Jung by cloning the repo https://github.com/SAP-samples/cloud-cap-hana-swapi and failed to open it in Graphical Modeler - see screenshot below. Also, the log is empty.

       

      @sap/cds: 5.9.3
      @sap/cds-compiler: 2.13.8
      @sap/cds-dk: 4.9.3
      @sap/cds-dk (global): 4.9.3
      @sap/cds-foss: 3.1.1
      @sap/cds-mtx: -- missing --
      @sap/cds-odata-v2-adapter-proxy: 1.8.16
      Node.js: v16.14.2
      cap-hana-swapi: 1.0.8
      Author's profile photo Thomas Jung
      Thomas Jung

      Interesting, that project opens fine for me:

       cds version
      @sap/cds: 5.9.2
      @sap/cds-compiler: 2.13.8
      @sap/cds-dk: 4.9.2
      @sap/cds-dk (global): 4.9.2
      @sap/cds-foss: 3.1.1
      @sap/cds-mtx: -- missing --
      @sap/eslint-plugin-cds: 2.3.5
      Node.js: v16.14.1

      The only difference seems to be me being one minor release behind on the cds modules.

      Author's profile photo Thomas Jung
      Thomas Jung

      I just tried it again after updating to 5.9.3 version of CDS and it still works.  So that doesn't seem to be a factor here.

      Author's profile photo Vladimirs Semikins
      Vladimirs Semikins

      Hmm, not sure why I had that glitch, issue is gone after the vscode restart.

      DID YOU RESTART IT??? PROBLEM SOLVED. - Confession Kid | Make a Meme