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

      12 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

       

      Author's profile photo Luca Toldo
      Luca Toldo

      Hi Thomas Jung

      whenI load the schema.cds of your  above mentioned repo I get the following error message in VisualCode with the CDS Graphical Modeler

      In definition of element 'ID' in type 'star.wars.Film', with annotation term 'com.sap.vocabularies.Common.v1.Text', the CSN JSON annotation value {"=":"title","@UI":{"TextArrangement":{"#":"TextOnly"}}} is not compatible with type 'string'.

      Thanks for your support and guidance.

      Author's profile photo Thomas Jung
      Thomas Jung

      I do believe that annotation formatting was valid.  The text editor was able to validate and code complete on it.  I think the Graphical editor was maybe just being overly sensitive.  But I've found an alternative formatting for that same annotation set that the graphical editor likes better.  I've updated the code in GitHub. If you pull the project again, it should now open in the Graphical editor once again.

      Author's profile photo Oliver Meier
      Oliver Meier

      Hi colleagues,

      I am trying to use the vscode extension on our project, but I ran into the issue below (running it on MacOS).

      Installing via npm install @sap/cds-dk did not fix it, nor did a vscode restart.

      "@sap/cds": "5.3.1",
      "@sap/cds-compiler": "1.49.2"

       

      Do you have any hint what else I could try?

      Thank you very much,

      Appreciated! 🙂

      Oliver

      Author's profile photo Oliver Meier
      Oliver Meier

      And a colleague tried as well on our project, getting another error message (he is using Windows):

      Author's profile photo Xiao-fei Song
      Xiao-fei Song
      Blog Post Author

      Hi,

      You would need to install @sap/cds-dk in your local system.

      Regards,

      Xiao-fei

      Author's profile photo Xiao-fei Song
      Xiao-fei Song
      Blog Post Author

      Hi Oliver,

      Sorry for the late reply. Did you managed to resolve this issue? If not can you provide more details about the issue itself?

      Regards,

      Xiao-fei

      Author's profile photo Xiao-fei Song
      Xiao-fei Song
      Blog Post Author

      Hi Oliver,

      Did you manage to resolve the issue? What is your npm version in the system?

      Regards,

      Xiao-fei

      Author's profile photo Ronny Zschitzschmann
      Ronny Zschitzschmann

      Hi!

      I can't start the plugin due to some company restrictions. CDS command and BATCH files are also not working. So good, I can work with that. Starting VSCODE with admin rights solves normally these problems. This plugin is also starting without any errors in admin mode, but the CDS editor view is empty. How can I fix this in admin mode?