Technical Articles
On-boarding made easy: Create a Destination from within SAP Web IDE
We at SAP Web IDE know that developing SAP Fiori applications can be a bit overwhelming at first.
There’s so much to learn!
The move from SAPGUI to SAP Web IDE, from ABAP to SAPUI5… You have to learn Git, Qunit, OPA… and one of the most challenging tasks is connecting your on-premise system to SAP Web IDE in order to consume services from and deploy applications to it.
In SAP Web IDE, we provide many tools to lower the entry barrier: a rich repository of application templates, sample apps, code-completion, code-validations, wizards for creating automated tests, Storyboard and Layout Editor tools for high productivity, and more.
We also provide help through several channels, such as documentation, tutorials, videos in our YouTube channel, blogs, etc.
However, still we get feedback from newcomers that connecting the on-prem system is complicated. So, it’s time to tackle this challenge as well… and starting from our latest release (181108), it’s possible to create a data source (destination) from within SAP Web IDE, in a way that we think is less confusing.
Let me describe it, as always, in a flow:
1. Create an SAP Fiori App in SAP Web IDE
Let’s say I’m a person who wants to create a very simple demo/PoC of a Fiori app.
Obviously, I will choose SAP Web IDE because I don’t like installing anything, and I need an outcome fast.
1.1 Create a Trial account on SAP Cloud Platform
If not done already, I will first create a Trial account for myself, and open SAP Web IDE.
1.2 Create a new app from a template
The fastest way to create a new application is to use one of the templates provided in SAP Web IDE.
- Click File > New > Project from Template.
- Select the SAP Fiori Master-Detail Application template.
- Enter a Name, Title, and a Namespace, and click Next.
- Reach the Data Connection step.
1.3 Easily connect my app to a service
Now I want to consume a service and show real data in my app.
Since I’m creating a demo app, the simplest option is to connect to the ES5 Gateway Demo System (to which I created a user in advance).
For this I need a destination in the cockpit, BUT I can now do it now directly from this step!
- Click on create a new data source.
- Fill out the details (optionally, you can provide your credentials for ES5).
Notice the Proxy Type is Internet because ES5 is open to the internet.
If you are connecting your on-premise system, a Cloud Connector configuration is needed and then the Proxy Type should be OnPremise. - Click Create.
Now the ES5 system is available from the dropdown list. I can select it and choose a service.
Let’s do another example, but this time let’s consume the Northwind OData V4 service.
- Go back to the Template Selection step and select the SAP Fiori Worklist Application OData V4 template.
- Enter a Name, Title, and a Namespace again, and click Next.
- Now you can create a new data source from the Service URL option on the left.
- Click create a new data source.
- Fill out the details. Note that the WebIDEUsage property was automatically selected because we selected the Service URL option.
- Click Create.
- Enter / as the Relative URL and click Test.
- After binding some fields to OData properties and finishing the wizard, the app is ready in my workspace.
2. Visualize my app using the Storyboard
To help me understand what was created for me, I open my project in the Storyboard:
- Enable the Storyboard extension from the User Preferences.
- Select the project and open the Storyboard.
A visual representation of the Worklist application is displayed: its views, navigations, and entity-sets.
This helps me understand the flow of my app.
- From the Storyboard I can run my app and view it.
- I can also perform more actions from the Storyboard such as add a new view and configure navigations. See more details in my dedicated Storyboard blog.
Summary
What did we do?
We created a simplified flow for newcomers to SAP Fiori development.
You can sign up to a new account and use SAP Web IDE to develop SAP Fiori applications that consume data from a remote data source. You can complete all the data source setup from within your development environment, getting all the help you need to maintain destinations that are consumable by SAP Web IDE.
Setting up destinations is not an easy task and it often requires reading documentation and blogs, but now it should be easier.
Hi Michal,
This is just unbelievable! Definitely a Huge Step Forward.
Regards
Smriti
Hi Michal,
I tried creating it but getting error 'Internal Server Error'. Also in the field WebIdeUsage , I do not have Option odata_gen rather odata_abap( Gateway). I tried with both Es5 and Northwind. Could you pls suggest?
Thanks
Smriti
Check if your credentials are correct? Can you add screenshot and network trace?
Thanks Yuval. It worked. Problem was the neo user id.
Regards
smriti
Hi Smriti,
Thanks for trying it out already 🙂
Can you please verify your browser does not auto-fill the authentication fields?
We identified at least one internal SAP employee that his Chrome filled the user and password for him (probably with wrong credentials) and then it didn't work.
Thanks,
Michal.
Thanks Michal. Problem was with the neo user id. Its working now. Awesome feature webide Team has introduced!
This is a nice feature, especially for newbies who don't know their way around the cockpit. It's great that you don't need to break out of your 'new project from template' flow.
I wonder if there isn't a way we could make this even better...Looks like they need to enter the URL manually. Often the developer won't know the virtual host that's been set up for their back-end system. Indeed, the sub-account can have multiple cloud connectors linked, each with multiple back-end systems. Why can't we show those virtual hosts in the dialog and let the user pick one? The same applies to the cockpit destination screen too. We even know the type of back-end system, so a few of the fields could be defaulted.
Might be good to show an example of adding an on-prem gateway hub system exposed through cloud connector too, as that is what many newbies will be trying to connect to.
Hi Mike,
Nice idea. We will check whether the cockpit exposes these URLs in an API for us to use.
Regarding your suggestion for the cockpit, I suggest to provide this feedback directly from the option in the cockpit.
Regards,
Michal.
Hi Mike,
So I was told that this capability will not be planned currently.
I suggest to create this idea in our Customer Influence site and if it gets a lot of votes it will help to raise it in the priority 🙂
https://influence.sap.com/SAPWebIDE
Regards,
Michal.
The new feature is cool. But the Personal Edition (v1.53.5) doesn't have it.
Will add this feature in the next Personal Edition?
Hi,
No.
But anyway this feature creates an HTTP destination in the SCP cockpit, and the personal edition is not working against the cockpit... So I don't really understand the need here 🙂
Regards,
Michal.
Hi,Thank you for your reply.
I mean, the destinations file of WEBIDE personal edition no "create new data soure". (path: XXXX\1.53.5\eclipse\config_master\service.destinations\destinations)
It is difficult for beginners to configure destinations file for WEBIDE persion edition.
Thanks again for your reply.
Well the answer is still no. In the current architecture the personal edition cannot access its users' file system.
Also no major additions are planned to the personal edition in the near future.
I hope at least the documentation is satisfying..
Regards,
Michal.
Hi Michal,
The new feature seems to be really good. If this can come to the personal edition it will be of more help.
Rgds
Sanket
Thanks Sanket, I understand, but it's not planned.
Hi Michal,
why would I like to store mm private credentials (especially password) for the ABAP back-end in the Cloud Platform.
What is best practice recommended by SAP?
Thanks,
Stephan
Hi Stephan,
It's really your call, you don't have to do that.
You can create a destination with "NoAuthentication" and then the browser will raise a popup for credentials when this system is selected in the UI of Web IDE.
Some prefer to configure the credentials in the destination instead of getting this popup. I think that usually some technical user is used and not a specific employee's credentials.
In addition a user can be configured in the service in the backend but I'm not sure it's the recommended approach.
Hope this answered your question.
Michal.