Skip to Content
Product Information

Fiori UI run on Cloud Foundry during development in SAP Web IDE

SAP Web IDE have recently released the Run on CF feature which allows you to preview the UI of your application on Cloud Foundry during development.

In addition, this new feature allows you to test your UI changes against your Cloud Foundry OData Service without the need of configuring destinations and trust between Neo and Cloud Foundry and therefore reduces complexity and setup time.

Follow the steps in this blog to try it out.

Prerequisites

Open SAP Web IDE and make sure your Cloud Foundry space is configured in the Preferences.

 

Create a Project

  • Create a Multi-Target Application (MTA)
  • Click File > New > Project from Template
  • Select the Multi-Target Application template
  • Provide a name
  • Check the Use HTML5 Application Repository checkbox
  • Click Finish

 

More information on the HTML5 Application Repository can be found here

 

Add UI module to your application

  • Right-click the MTA and choose New > HTML5 Module
  • Select a template (for my simple example I selected the List Report template)
  • Provide a name and a title
  • Choose a service.
  • Configure the data binding
  • Click Finish

Select a Data Service

Different types of services you can choose from:

  1. Local service from your workspace or file system
  2. External to SAP Cloud Platform like Service Catalog and Service Url. You will have to configure a destination from Cloud Foundry for these services
  3. SAP Cloud Platform services. You will not need to create a destination to these services

 

Run the App

Select your HTML5 module and click on the green play button in the upper toolbar to run the app.

 

Note that by default, the target environment in your run configuration is Cloud Foundry

 

The first run of your app deploys an Approuter module to your Cloud Foundry space. This can take 1-2 minutes the first time. 

When finished, a new browser tab opens, and the app is being launched and is using the Approuter in your space.

A separated user specific application will be created for you on your Cloud Foundry space

After changing your application’s UI, Re-run takes only a few seconds!

Check out your console while running the app

 You can also configure the run configuration of your app and choose to run it with mock data

10 Comments
You must be Logged on to comment or reply to a post.
  • It’s not working for me. Just nothing happens when I press run application with the “Target Environment” -> “Run on Cloud Foundry”. No error, no logs, just nothing.

    • Hi Mikhail,

      Did you check the HTML5 application repository in your MTA application?

      Did you check the console for errors?

      Regards,

      Lisi

  • Can you explain how the deployment to the html5 application repository works?

    It seems to me, that it only deploys the first time you create the mta, but then it uses always the old view version.

    Can you do it manually from the webide or should it deploy there everytime you deploy to cf?

  • HI Ola,

    When you deploy your application to CF, the HTML5 related artifacts are deployed to the HTML5 application repository. you don’t have to do it manually.

    Why do you think that the content in the HTML5 application repository does not change after the first deployment? can you explain what you did?

    Regards,

    Lisi

    • Hi Elizabeth,

      thank you for your quick answer.

      It seems to me, that it’s only updated, when i delete the approuter and maybe app-host and app-runtime, too. Same behavior, when i execute just the single module in webide. It presents an old version of the html5 then. I don’t know how this is happening.

      Regards,

      Paige

      • Hi Ola,

        The view should be updated without deleting the approuter or anything else.

        Did you save the changes in your view before running it?

        Regards,

        Lisi

        • Hi Lisi,

          yes I did. I tried several things, but this is the only way to update the repo files.

          Somethings else: do you know a simple tutorial, where the functionality of destinations and the approuter is explained? Just a html5 and a nodejs module i.e. and the destination between those modules in combination with an approuter.

          Regards,

          Paige

          • Hi

            destination are needed in case you access external SCP data source.

            In case you UI and backend are both in CF you do not need destinations