Skip to Content
Product Information
Author's profile photo Elizabeth Gutt

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

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Giovanni Degani
      Giovanni Degani

      It seems that the image links are from SAP Jam, they don’t work for me.

       

      Author's profile photo Elizabeth Gutt
      Elizabeth Gutt
      Blog Post Author

      Hi Giovanni,

      I've updated the images. I hope you can see them now.

      Thanks,

      Lisi

       

      Author's profile photo Mikhail Ponomarev
      Mikhail Ponomarev

      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.

      Author's profile photo Elizabeth Gutt
      Elizabeth Gutt
      Blog Post Author

      Hi Mikhail,

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

      Did you check the console for errors?

      Regards,

      Lisi

      Author's profile photo Paige Ola
      Paige Ola

      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?

      Author's profile photo Elizabeth Gutt
      Elizabeth Gutt
      Blog Post Author

      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

      Author's profile photo Paige Ola
      Paige Ola

      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

      Author's profile photo Elizabeth Gutt
      Elizabeth Gutt
      Blog Post Author

      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

      Author's profile photo Paige Ola
      Paige Ola

      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

      Author's profile photo Yuval Morad
      Yuval Morad

      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