Skip to Content
Technical Articles

How to run the application in SAP Fiori Launchpad Environment using SAP Business Application Studio(BAS).

Hi All,

Whenever I try to execute the SAP application through run configuration, I generally face an issue due to the absence of a Fiori launchpad.

In this blog, I am going to explain how we can overcome the above-mentioned drawback and execute the SAP application in a Fiori Launchpad by using SAP BAS.

Step 1:

Here I have created a sample application with the name SampleApp by using the SAPUI5 Application template.

After the creation of the project, the structure will be as shown below.

Step 2:

Now I want to run this application (SampleApp) for which I need to add the run configuration.

Steps for adding Run Configuration:

Click on the Run button and click on the create configuration shown below.

 Select the project name which we would like to run.

After selecting the project, now we must select the index.html runnable file (As we don’t have any direct option to run the app with Fiori Sandbox).

Select the version from the available versions.

 Click on enter to add the run configuration shown below.

Click on the run module.

Now click on the open in new tab button to run our application in index.html as we have selected the index file during configuration time.

Now I want to run this application in Fiori launchpad.

Open run configuration file and right-click on the file and select the show in file option to open the launch.json file shown below.

In the args section in the launch.json file we need to make the below changes:

“args”:[

“—standalone”,

“/comsampleSampleApp/index.html”

Replace the above-mentioned arguments below.

“args”: [

“–flp”,

“–relative”

Now the updated code will be shown below.

Note: If the target run time is cloud foundry, the dependency is located in the root folder, at that time have to update the dependencies in package.json like below.

dependencies>@sap/html5-remo-mock to 1.6.x.

otherwise, we don’t need to update any dependencies in package.json.

Again, run the application through the run module to open the launchpad like below.

 

Now click on the sample app tile to open the app in Fiori Launchpad.

                So, in this way, we can easily run the sap application in the Fiori   Launch pad by using SAP BAS.

 

12 Comments
You must be Logged on to comment or reply to a post.
  • hi Spandana,

    I am getting below error, after modifying arg section.

    Error: Failed to load Fiori Launchpad Sandbox configuration from /appconfig/fioriSandboxConfig.json: status: error; error:

    and after tile click below error is coming(Failed to load UI5 component for navigation intent "#zt_BC_SAzt_BaseCont_singleApp-Show").From the console I can see error:

    component for navigation intent #zt_BC_SAzt_BaseCont_singleApp-Show - failed to load 'zt_BC_SA/zt_BaseCont_singleApp/Component.js' from /zt-BC_SAzt_BaseCont_singleApp_1.0.0/Component.js: script load error
    Error: failed to load 'zt_BC_SA/zt_BaseCont_singleApp/Component.js' from /zt-BC_SAzt_BaseCont_singleApp_1.0.0/Component.js: script load error

     

    Thanks,

    Chandra.

  • Hi Bollu Spandana ,

    Thanks a lot for such a valuable information. This is most likely missing in the documentations. I am able to run FLP with a new UI5 project created in BAS but I have two questions:

    1. the FLP is always using the latest UI5 version but I need to test my app with an older version. Do we have such possibility with this config?
    2. FLP opens up pretty nicely when I perform the above mentioned config changes in an app created directly in BAS but it doesn't spin up when I perform the said changes in an app migrated manually from WebIDE. Am I missing something in this case?

    BR, Ekansh

    • Hi Ekansh Saxena,

      for the UI5 version, you can set up in the ui5.yaml file:

       

       

      for your second point, did you run the command "Fiori: migrate WebIDE project for use in fiori tools" ? if yes, then what I do, it to mimic(copy & paste) the package.json, ui5.yaml and run manually in the terminal the node command "npm init"

      I hope it helps

      best regards

      /
  • Hey, i followed all the steps but, at the moment i want to execute the app in FLP sandbox(pressing the app tile) this error appears(see attached image)error%20when%20pressing%20tile

    error when pressing tile

    Can anyone help me indicating what could i've been doing wrong?

    /
    error%20when%20pressing%20tile