Northwind Freestyle app with Business Application Studio's new “SAP Fiori application” template option

[jeffrey_towell2]

Introduction

When creating an app from template in Business Application Studio (BAS) the old "SAP Fiori Freestyle Project" template functionality has been moved to the new "SAP Fiori application" template. This template combines freestyle and Fiori elements into one. For details see Ashley Tung's blog:

Simplifying application generation for SAPUI5 freestyle and SAP Fiori elements apps

In this blog I will simply demonstrate the new way to create a freestyle app in BAS using the Northwind odata service. Previously you pointed to a Northwind destination in your system during creation but now you reference the odata service directly with an URL. There is also a difference in the run configuration that we will cover.

Template Wizard

Start a new template:

Select the new template option "SAP Fiori application" and hit "Start":

Select application type "SAPUI5 freestyle" and select an application template. We will use "SAP Fiori Master-Detail Application":

Hit "Next". Here is where we use the service URL "https://services.odata.org/V2/Northwind/Northwind.svc/".

The last "/" is critical.

Hit "Next" and for demonstration purposes select any combination of fields that will work. I selected the following:

Hit "Next" and enter the project attributes you desire:

On "Finish" the project will be created and become visible in your Explorer panel.

 

Run Configuration

Go to the Run Configurations view. At this point a working run configuration for your new project may exist. If not, then select the plus sign to create a new run configuration:

The Wizard prompts are straight forward except for the prompt "Select destination type". For this select the option:

Skip Use config from ui5.yaml

 

Output

The app can now be run and displays as follows:

For instruction on how the code we have created at this point can be further used to learn Fiori see the blog

Create Fiori App in Business Application Studio using Northwind odata (Part 1)

 

Deployment

For deploying the code we have created please see Marius Obert's response to the following question:

Using odata service in freestyle app in Business Application Studio

 

Conclusion

While BAS's new "SAP Fiori application" template no longer references a Northwind destination during creation we can still use Northwind within BAS by following the process described above.

[DebashishDas]

Hi Jeffrey,

Have you deployed the Application in Cloud Foundry and configure it in Launchpad?

[jeffrey_towell2]

Not yet Debashish.

Please blog your steps if you are successful. 🙂

[former_member98324]

Hi Jefrey

 

I am doing the step by step and When I Go to the Run Configurations view appear the following  messages

There are no runnable resources

 

 

Regards

 

[protarchos]

Hi Wilman,

Have you opened the new project you created after it has been created?

Best,

Wolfgang

[satya-dev]

Hi jeffrey.towell2,

 

I have created a destination for consuming northwind services, but falling to load metadata after running the app locally. and i have configured xs-app.json like below.

{

    "source": "^/northwindapi/(.*)$",

    "target": "/$1",

    "destination": "northwindapi"

    }

Destination in BTP

#

#Wed Sep 29 17:33:22 UTC 2021

Description=north wind

Type=HTTP

Authentication=NoAuthentication

WebIDEUsage=odata_gen

Name=northwindapi

WebIDEEnabled=true

ProxyType=Internet

URL=https\://services.odata.org

WebIDESystem=northwindapi

 

metadata

[jlong]

You defined your xs-app.json target as "/$1", I would update this to "$1".

You can refer to this example https://github.com/SAP-samples/fiori-tools-samples/blob/main/neo-migration/fioriapp/xs-app.json