Product Information
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
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.
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.
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.
Hmm, not sure why I had that glitch, issue is gone after the vscode restart.
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.
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.
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.
Do you have any hint what else I could try?
Thank you very much,
Appreciated! 🙂
Oliver
And a colleague tried as well on our project, getting another error message (he is using Windows):
Hi,
You would need to install @sap/cds-dk in your local system.
Regards,
Xiao-fei
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
Hi Oliver,
Did you manage to resolve the issue? What is your npm version in the system?
Regards,
Xiao-fei
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?