Saved SAP Systems in VS Code using SAP Fiori tools

IanQuigley · ‎2022 May 11

Since the initial launch of the SAP Fiori generator, we have been continually improving and enhancing its features to make life easier for our users who create SAP Fiori applications. One area that we have always wanted to improve was supporting saved SAP systems in Visual Studio Code (VS Code). In this blog post I will detail the updates we have made in SAP Fiori tools over the past year to allow you more easily work with saved SAP Systems in VS Code.

Saving your systems in VS Code ensures you can successfully connect to ABAP on-premise and ABAP systems in SAP Business Technology Platform (BTP), and will then be able to preview your generated application locally and deploy to that system. It also means it’s easy for you to create a new SAP Fiori application using the existing saved system, without having to re-authenticate each time.

When the SAP Fiori generator was initially launched, the only way to save a system in VS Code was to launch the generator and create a new SAP System as part of app generation. Once the Fiori project was successfully created, the new SAP system was saved into the secure storage of your operating system (Keychain on MacOS, Credential Manager on Windows). Whilst this worked, there were some limitations:

What happens if the authentication details for a saved system changed? You could not update an existing saved system; the only solution available to you was to launch the generator again and create another SAP Fiori application with a new Saved System during generation.

Similarly, deleting an existing saved system was not supported. Users would have to manually delete the saved system from their operating system secure storage, which was less than ideal.

Over the past year, we have introduced a new section into the SAP Fiori panel in VS Code called “SAP Systems”. Initially, this section only allowed you to view any saved systems that you had already created. We have since added the ability to create, edit and delete your systems (all the CRUD operations 😊).

The new SAP SYSTEMS panel in VS Code allows you manage your SAP system connections

Users can add SAP Systems for ABAP on-premise or ABAP environments in SAP BTP by providing the associated service key. For more information on how to create a service key, please see Create Service Keys Using the Cockpit.

As soon as the systems are added, they are available to be used in the SAP Fiori generator. You can, of course, still use the SAP Fiori generator to create a new system if needed.

Adding a new SAP System in VS Code

Existing systems can be updated with new credentials or service keys if needed, so you can be sure that as the ABAP system connection changes, or the authentication details expire, you can easily update these in VS Code and continue to preview your SAP Fiori applications in your development environment.

Finally, we’ve added the ability for you to test any existing connection and ensure that it validates and returns catalog services as expected. In addition to informing you that the connection worked, we also detail if OData V2 and/or OData V4 services were available on that system.

An example connection test where only OData V2 services were found using the saved SAP System

Conclusion

Hopefully this blog post has given you an insight into how you can use and maintain your saved SAP systems in VS Code. With the recent updates allowing you to create and test your saved system connections, you no longer need to rely on the SAP Fiori generator as the only way of adding new saved SAP Systems. You can find more information on saved SAP Systems here in our Help Portal page.

What’s Next?

Your feedback is important. Please reach out to us if you have any issues using the SAP Fiori generator with your SAP Systems.

You can create incidents with SAP Fiori tools using component “CA-UX-IDE”

Feel free to contact myself quiggs1000 or sushant.priyadarshi (send us an email)

If you haven’t already signed up, I would also like to invite you to participate in the SAP Fiori elements and SAP Fiori tools Roundtable, where you can share your experiences with the development team and other SAP Fiori development experts.

Have new ideas for SAP saved system?

As you now can use the SAP saved systems in VSCode as explained above, I am pretty sure you will have new ideas to enhance it and we are listening.

An SAP Mentor suggested that Service Manager should utilize the saved SAP Systems. We are already on it.

Do you want to generate an SAP Fiori application from saved SAP systems directly? Do you want to know more service details?

Please feel free to provide your feedback/ideas in the comments below.

sascha_weidlich2 · ‎2022 May 12

Hi quiggs1000 ,

nice to see that this Area is actively maintained. Personally im missing the opportunity to store more User/Password Combinations for the same combination of URL+Client.

It happens that sometimes in the Development Process I need to see the App with different authorizations from the backend. For this Im using a Testuser, thus it would be awesome to store those credentials as well.

Best regards,

Sascha

IanQuigley · ‎2022 May 12

Hi sascha.wiegmann

Thanks for the feedback. You are quite correct, the URL and client are used as the key for the saved system, and you are not currently permitted to have 2 separate authorisations saved for the one system.

As well as generation, we would have to consider preview and deployment of the application, and which authorisation record to use for the system in this case, which may complicate matters. But it's very valid feedback, let me take it to the team for consideration.

Best regards,

Ian

termanico · ‎2022 May 27

Excellent - thx! - this is very helpful! 👏🏼👏🏼👏🏼

Would be great to have an overview of all available OData-Services (like in BAS) 🤩

Florian · ‎2022 Jun 08

Nice one. Because you have asked for 😉

What I'm missing is that I can use those saved connections when performing an update to my metadata-files.

There I have always to put my user and password manually. So all information is there.

The system, user, password... do i don't see the option to use those information or is it a gap... if so, please do the effort to reuse it in this specific situation..

IanQuigley · ‎2022 Jun 09

Thanks for the feedback Florian.

I'm assuming you mean updating your metadata by refreshing using the Fiori Service Manager? In that case, yes it is not ideal that you have to re-authenticate when you already have the system saved.

But stay tuned, we are making changes and improvements to the Service Manager in upcoming releases :).

Best regards,

Ian

P281512 · ‎2023 May 16

Hi Ian

You write "Over the past year, we have introduced a new section into the SAP Fiori panel in VS Code called “SAP Systems”. Initially, this section only allowed you to view any saved systems that you had already created. We have since added the ability to create, edit and delete your systems"

Cant see any Delete Option in Ctrl+Shift+P

I deleted 2 entries in windows credential manager
Realized that URL is the unique key used

But the 2 entities remained i VSCODE apart for blamked user and password
I had 5 and still have 5

Also the name of the system seems case sensitive
Thius "cen" and "CEN" are 2 different systems
So in VSCODE system name is unique key not URL

Regards
Jayanta

IanQuigley · ‎2023 May 17

Hi Jayanta,

Many thanks for the feedback, it's always appreciated. In order to delete an existing SAP saved system, you need to hover over the saved system in the SAP Saved Systems panel, and a trashcan icon should appear. From there, you can click on the icon to delete it. But I take your point, it's probably a little difficult to find and we could do better here. I'll take that feedback.

By deleting the associated entries in the windows credential manager, you were just deleting the authentication details for a saved system, and not the saved system itself. The recommended way would be to use the trashcan icon as mentioned.

In terms of the key for the saved system, it should be the url + client (for an ABAP onprem system) that determines the unique key. I've tried to replicate what you mention regarding "cen" and "CEN", and they are both detected as the same system, you shouldn't be able to save them independently. Is it possible that you could provide some sample screenshots of the issue?

Best regards,

Ian

P281512 · ‎2023 May 18

Thanks!!

I hovered a lot but saw no trashcan anywhere

As you can see cen and CEN are both there

Kindly consider a icon in each row for easy delete spotting

___________________________________________________________

Some debugging led me to C:\Users\%USERNAME%\.fioritools\systems.json

Getting rid of cen & CEN and keeeping CENTOS was a breeze

OdataV4 was my misadventure - But a learning opportunity
Please see
https://blogs.sap.com/2020/10/12/odata-v4-service-catalog/comment-page-1/#comment-673433

Andre Fisher's very kind and prompt reply was very helpful

Regards & Thanks
Jayanta

ravishgarg · ‎2023 Oct 06

Hi quiggs1000

Has something changed in how the system credentials are managed via the extensions in VSC?

The XML annotation server now fails to connect to the server

I have deleted and re-added the System under the SAP Systems, and the test connection works successfully. However upon saving the Username and Password are blanked out and I can't see a corresponding entry in Windows credential manager either.

All extensions are up to date as of 6th oct and running VSC 1.83.0 on Windows 10 machine.

Any help would be appreciated.

Regards

Ravish

IanQuigley · ‎2023 Oct 06

Hi Ravish,

Unfortunately the latest version of VSCode that was released this week, 1.83, removes the library used to access the secure storage of the operating system. This means that the credentials for a saved system can no longer be retrieved and used with Fiori tools :(. We are looking at this as a priority from our side.

In the meantime, would you be able to down-grade your VSCode version to 1.82? In that case, you should have access to your stored credentials.

Sorry for the inconvienience,

Ian

termanico · ‎2023 Oct 06

Hi Ian,

I have exactely the same problem as Ravish 😞

Is there a bug fix coming with the next Fiori Tools release?

br

Thorsten

IanQuigley · ‎2023 Oct 06

Hi Thorsten,

We're working on the bug fix at the moment and will release it as soon as we can. The current workaround would be to downgrade VSCode to 1.82.

Best regards,

Ian

termanico · ‎2023 Oct 06

Thanks Ian! I downgraded my VSC zu 1.82.3 (https://code.visualstudio.com/updates/v1_82) in the meantime - works fine again 🙂

IanQuigley · ‎2023 Oct 06

Great to hear, thanks for letting us know Thorsten. And again, apologies for this inconvenience. Please be assured we are working in the background to resolve this. 🙂

P.S. You may have to switch off auto-update in VSCode to ensure you don't get 1.83

Regards,

Ian

ravishgarg · ‎2023 Oct 09

Thanks for the update Ian. Awaiting the latest versions of the extensions.

Cheers

Ravish

former_member863855 · ‎2023 Nov 23

Dear Expert

thank you for your sharing.

I have a problem that when run [Test Connection] it is OK,

but Template Wizard shows :

Service Unavailable

　　　Authentication incorrect! Error: Request failed with status code 401

retrieve odata list is forbidden when use exist linked sap system(but when connect new one, this phenomenon does not exist), could you please guide me to fix it?

refer to

https://answers.sap.com/questions/13320090/unable-to-retrieve-odata-services-from-sap-system.html

IanQuigley · ‎2023 Nov 23

Hi there,

Can you please confirm the version of SAP Fiori tools that you have installed in VSCode. Do you have the latest? (1.11.4).

Thanks,

Ian

former_member863855 · ‎2023 Nov 23

yes , it is 1.11.4

due to the disorder phenomenon mentioned above, I can only deploy the fiori once,

error happened in the second time.

it seems that the connection between fiori tool and sap server has some problems。

IanQuigley · ‎2023 Nov 23

Hi there,

Thanks for checking that. There is one more check I need you to perform. It seems like you are using the latest version of Fiori tools which is great. We also need to confirm the version of the Fiori generator that you are using. Can you please launch the Fiori generator, and if you hover over the "i" icon alongside the "SAP Fiori Application" title, it should tell you the version of the generator. You should see something like '@sap/generator-fiori@1.11.4'.

Can you please confirm that you have the latest version? If not, please do the following:

Click on the "Explore and Install Generators" link on the top right of the Fiori generator

In the "Search Shortcuts" dropdown, please select "SAP Fiori Elements"

You should then see the option to update to the latest version of the Fiori generator. Please update and try again.

hahajing0411_28 · ‎2023 Nov 24

confirmed，it is '@sap/generator-fiori@1.11.4' as I hovered over the "i" icon alongside the "SAP Fiori Application" title

cmorrin · ‎2023 Nov 24

Hi,

Thank you for checking. Since Visual Studio Code version 1.83, the library used to access the secure storage of the operating system was removed, resulting in issues with the Fiori tools accessing the saved SAP system credentials.

This should be resolved in our recent Fiori generator releases (currently 1.11.5).

The generator should stay up to date automatically, but here are some steps to update it manually:

- From the command line/terminal you can run the follow commands to uninstall and install the generator

npm -g uninstall @sap/generator-fiori

npm -g install @sap/generator-fiori

then restart VSCode and check the version again in the generator/app wizard.

- If the version is still not updated correctly, it is possible the old version might be installed alongside the current version and the old one is being picked up incorrectly as the version to use. If so please run this command in the terminal:

DEBUG=* yo

This will show all generators that are installed and the path they are installed to. If you see a generator found matching @sap/generator-fiori with a lower than expected version (1.11.5) you can remove/delete this from the path shown.

Please try these steps to update the generator and then re-run the scenarios with errors to see if they are now working as expected.

Thanks

Cian

hahajing0411_28 · ‎2023 Nov 24

Dear cmorrin

thank you for your reply. I updated the Fiori generator to 1.11.5 as you said above,

but the error remains as before.

my intuition tells me that maybe some connection configuration Access Mechanism does not work normally.

because generator can retrieve Odata list at the first time that connect to SAP server(generator does not use any history of configuration), but it cannot retrieve Odata list after that (generator does use history of connection configuration stored at the first time).

by the way, this issue happened after I force restart the VS code tool.

additionally：

①after this time update. the error message changed from "Authentication incorrect! Error: Request failed with status code 401" to "Authentication incorrect! AxiosError: Request failed with status code 401"

②if I want to see context message log use the link [https://<saphost:port>/sap/opu/odata/iwbep/message_text;o=LOCAL/], the explorer keeps ask me to input user name and password again and again. no matter how many times I input username and password. so weird.

cmorrin · ‎2023 Nov 24

Hi,

Thank you for the updates and sorry you are still encountering issues.

At this point I think it would be best if you could please create a Support Ticket, so that we can investigate the issue further? Please create the ticket on the CA-UX-IDE component.

Thanks,

Cian

hahajing0411_28 · ‎2023 Nov 24

Dear cmorrin

never did that before, is there any procedure document about [create a Support Ticket] I can refer to

cmorrin · ‎2023 Nov 24

Please refer to https://support.sap.com/en/my-support/product-support.html?anchorId=section and open a case.

Thank you

Cian

age0110_ · ‎2023 Nov 28

I was getting the same error even after upgrading to the latest version with the latest version. Do we have any updates on this?

Jan-WillemK · ‎2025 Feb 04

I do see a similar Axios authentication error with the BAS, and solved in OSS Note 3543420: https://me.sap.com/notes/0003543420

ChrisSWFL · ‎2025 Feb 26

Hello quiggs1000,
great instructions for configuration! I have the problem that when I click on test connection I get the following error:
This SAP system failed to return any services
Check the output tab for more details. You may need to increase the log level to Debug to see more details.

The following error appears in the debug console:

[error] The V2 request failed with error: Error parsing service list.

[error] The V4 request failed with error: Request failed with status code 403.

Have you encountered an error like this before?

Bennobear · ‎2025 Mar 11

Hey, is there any way to use SSO to connect to a SAP Service via VSCode?

Best regards

Ben

Saved SAP Systems in VS Code using SAP Fiori tools

Get Your SAP HANA Idea Incubator Badge Today!

SCN Mission - SAP HANA Quiz Challenge is now retired

Share your #HANAStory and Win