"Configure destinations to facilitate fast development with SAP Business Application Studio project templates. Create the MTA project with Fiori application and Application Frontend deployment configuration. Preview Fiori application without deploying it. Build and deploy MTA project. Find the link to deployed Fiori application and run it. Re-deploy UI static resources with CLI."

"What do I need before I start?"

" SAP Business Technology Platform subaccount Cloud Foundry environment enabled in subaccount Subscription to Application Frontend service Subscription to SAP Business Application Studio "

Deploy MTA based application to Application Frontend

Learn how to create and deploy your Application Frontend applications as part of MTA based project using SAP Business Application Studio.

🎓intermediate ⏱20 min HTML5 Intermediate SAP Business Technology Platform User Interface 0/7

Overview

🎓 intermediate ⏱ 20 min. HTML5IntermediateSAP Business Technology PlatformUser Interface

You will learn

✔Configure destinations to facilitate fast development with SAP Business Application Studio project templates.
✔Create the MTA project with Fiori application and Application Frontend deployment configuration.
✔Preview Fiori application without deploying it.
✔Build and deploy MTA project.
✔Find the link to deployed Fiori application and run it.
✔Re-deploy UI static resources with CLI.

V Vadim Tomnikov October 23, 2025

Created by October 23, 2025

Contributors

Prerequisites

SAP Business Technology Platform subaccount
- Cloud Foundry environment enabled in subaccount
- Subscription to Application Frontend service
- Subscription to SAP Business Application Studio

Steps

Open all Close all

Step 1 Configure Destination

—

Navigate to BTP Cockpit subaccount.

Navigate to Destinations.

UI5

Click Create.

Select From Scratch.

Fill the Destination Details form:

Nameui5TypeHTTPProxy TypeInternetURLhttps://ui5.sap.comAuthenticationNoAuthentication

<li>Click <strong>Create</strong>.</li>
<p><strong>Northwind</strong></p>
<li>Click <strong>Create</strong>.</li>
<li>Select <strong>From Scratch</strong>.</li>
<li>Fill the <strong>Destination Details</strong> form:</li>
<table></table>
    <tbody></tbody>
        <tr><th>Name</th><td><strong><code>northwind</code></strong></td></tr>
        <tr><th>Type</th><td><strong><code>HTTP</code></strong></td></tr>
        <tr><th>Proxy Type</th><td><strong><code>Internet</code></strong></td></tr>
        <tr><th>URL</th><td><strong><code>https<span>://</span>services.odata.org/northwind/northwind.svc/</code></strong></td></tr>
        <tr><th>Authentication</th><td><strong><code>NoAuthentication</code></strong></td></tr>
    

<li>Use <strong>Add Property</strong> button to configure additional destination properties:</li>
<table></table>
    <tbody></tbody>
        <tr><th>WebIDEEnabled</th><td><strong><code>true</code></strong></td></tr>
        <tr><th>WebIDEUsage</th><td><strong><code>odata_gen</code></strong></td></tr>
        <tr><th>WebIDEAdditionalData</th><td><strong><code>full_url</code></strong></td></tr>
        <tr><th>HTML5.DynamicDestination</th><td><strong><code>true</code></strong></td></tr>
    

<blockquote><p>The additional destination properties above are only required to enable relevant SAP Business Application Studio capabilities. Add them to destinations used in development, but not in production.</p></blockquote>
<li>Click <strong>Create</strong>.</li>

Step 2 Create SAP Business Appication Studio Dev Space

Step 3 Create Fiori Application From Template

Open the dev space created at the previous step.

Click on New Project from Template button of Get Started page. Alternatively, in the menu select:

☰ > File > New Project from Template

Select SAP Fiori generator card and click Start.

Select List Report Page card and click Next.

At Data Source and Service Selection step enter the following and click Next:

Data SourceConnect to a SystemSystemnorthwindServicehttps://services.odata.org/northwind/northwind.svc/

At Entity Selection step enter the following and click Next:

Main EntityProductsNavigation EntityNoneTable TypeResponsive

At Project Attributes step enter select:

Add Deployment ConfigurationYes

<p>Leave the rest of the fields without modification. Click <strong>Next</strong>.</p>

At Deployment Configuration step enter the following and click Finish:

Please choose the targetCloud FoundryDestination Namenorthwind - https://services.odata.org/northwind/northwind.svc/Add Router ModuleAdd Application to Application Frontend Service

Click Open folder.

Step 4 Preview Application

Step 5 Build & Deploy MTA

Step 6 Run Application

Step 7 Re-deploy Application with CLI

This step of tutorial is optional. It shows how you can shorten the UI development cycle by skipping the build and re-deploy of the whole MTA. The technic below allows to re-deploy only static resources of UI application.

Navigate to BTP Cockpit subaccount.

Navigate to Services > Instances and Subscriptions.

In the Subscriptions table click on Appication Frontend Service link.

Copy the URL from Application Frontend CLI section of opened welcome page.

Navigate to <string>SAP Business Application Studio (same Dev Space that you worked with during previous steps).

Open webapp/index.html and change the title of the page:

Open integrated Terminal in the root of the project.

Build UI:

Shell

npm run build

Shell

afctl login --sso -a '<URL>'

Re-deploy build results of the UI:

Shell

afctl push dist

Click on the link in CLI command output or refresh the browser page with UI application to which you navigated from BTP Cockpit.

See the title of application (browser tab label) changed.

Resources

Next Steps

Discussion

Share feedback on this tutorial or join the conversation in SAP Community.

Submit detailed feedback

Discuss in Community

Steps

1. Configure Destination

2. Create SAP Business Appication Studio Dev Space

3. Create Fiori Application From Template

4. Preview Application

5. Build & Deploy MTA

6. Run Application

7. Re-deploy Application with CLI

Deploy MTA based application to Application Frontend

Overview

You will learn

Prerequisites

Prerequisites

Steps

Resources

Next Steps

Related Tutorials

Discussion

Joule

AI Notice