Skip to Content

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.

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.

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. Smriti Gupta

    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

    (0) 
    1. Michal Keidar
      Post author

      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.

      (1) 
  2. Mike Doyle

    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.

     

     

     

     

    (0) 
    1. Michal Keidar
      Post author

      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.

      (0) 
    1. Michal Keidar
      Post author

      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.

      (0) 

Leave a Reply