--- title: How to Develop an SAP Fiori App on SAP Business Application Studio description: See how to create an SAP Fiori application using the new SAP Business Application Studio, following step-by-step instructions and screenshots. image: https://blog.sap-press.com/hubfs/Developing%20SAP%20Fiori%20Apps%20on%20SAP%20Business%20Application%20Studio.png --- [![rheinwerk-sappress-logo-header-1](https://blog.sap-press.com/hubfs/rheinwerk-sappress-logo-header-1.svg)](https://blog.sap-press.com/) [Blog](https://blog.sap-press.com) - Books - Get an overview of our books and courses on every relevant SAP topic. - [Programming](https://sap-press.com/programming/) - [Administration](https://sap-press.com/administration/) - [BI](https://sap-press.com/business-intelligence/) - [Finance](https://sap-press.com/finance-controlling/) - [Logistics](https://sap-press.com/logistics/) - [HR](https://sap-press.com/human-resources/) - [CRM & Sales](https://sap-press.com/marketing-sales/) - [HANA](https://sap-press.com/hana/) - [Introductions](https://sap-press.com/introductions/) - [E-Bites](https://sap-press.com/e-bites/) - [Certification Guides](https://www.sap-press.com/certification-guides/) - [Rheinwerk Courses](https://www.sap-press.com/online-courses/) - Book Subscription - Get unlimited access to all SAP PRESS books! - [SAP PRESS Subscription](https://sap-press.com/subscriptions/) [Programming](https://blog.sap-press.com/tag/programming) # How to Develop an SAP Fiori App on SAP Business Application Studio ![SAP PRESS](https://blog.sap-press.com/hubfs/Twitter_profile_pic.svg) by [SAP PRESS](https://blog.sap-press.com/author/sap-press) In this blog post, we’ll explain the steps of creating projects, adding source code to a project, testing an application, and finally how to deploy an application using SAP Business Application Studio.   ## Creating a Project The very first step of creating an [SAP Fiori](https://learning.sap-press.com/sap-fiori) application using [SAP Business Application Studio](https://blog.sap-press.com/what-is-sap-business-application-studio) is to create a project. (A project is kind of a folder to organize your source code.) By default, projects are stored in the */home/user/projects* folder.   You can create a project in two ways:  - Using a wizard - From the terminal  Creating a project using a wizard is simple and can be initiated by using the menu path **File >** **New Project from Template** and then selecting the appropriate one from the list of templates. However, for this chapter, we plan to create a project using the terminal. The terminal view can be opened using the menu **Terminal >** **New Terminal**, and you should see a new view open that looks like this.   ![Terminal View](https://blog.sap-press.com/hs-fs/hubfs/2204_07_007.png?width=656&height=418&name=2204_07_007.png)   Type “yo” in the command line, then select **@sap/fiori**, as shown below, and press (Enter).   ![Initiating Project Creation Using Terminal Commands](https://blog.sap-press.com/hs-fs/hubfs/2204_07_008.png?width=679&height=296&name=2204_07_008.png)  Select **[SAPUI5](https://learning.sap-press.com/sapui5) freestyle** and **SAPUI5 Application** as the next steps. Also select **None** as the data source. The whole set of options to be selected is shown here.   ![Various Choices for Creating Projects via Terminal](https://blog.sap-press.com/hs-fs/hubfs/2204_07_009.png?width=677&height=303&name=2204_07_009.png)   Once you select all the options and press (Enter), the system will start creating the project. You can track the progress through the terminal view, as highlighted in the figure below, and your application will be generated successfully. ![Application Generated Successfully](https://blog.sap-press.com/hs-fs/hubfs/2204_07_010.png?width=927&height=413&name=2204_07_010.png) **7** You can now open your project by accessing the **File > Open** menu and then selecting your newly created project, as shown below, and clicking **Open**.   ![Project Folder Hierarchy](https://blog.sap-press.com/hs-fs/hubfs/2204_07_011.png?width=652&height=528&name=2204_07_011.png)   Your newly created project with the created folders and files should now be available on the left side of the SAP Business Application Studio window, as shown in the previous figure. Now it’s time to add some code to the project. ## Adding Source Code As a part of the project, a basic folder structure has been created and some files are automatically created with empty or shell content. In this section, we’ll explore various options to add source codes. But before going there, let’s explore various important views available in SAP Business Application Studio and how you can use them throughout your development process:  - The project explorer is the view available on the left side of the editor, as shown in earlier. This is where you can organize your source code. - The terminal can be accessed at any time via the **Terminal >** **New Terminal** menu option. You’ll see the importance of the terminal view for SAP Fiori development activities later. - The command palette provides various shortcuts and options to perform most common operations, such as creating a specific type of project, connecting to a Cloud Foundry space, and so on. The command pallet can be accessed either using the **View > Find Command** menu or by pressing (Ctrl)+(Shift)+(P). - The outline view displays a tree of the currently active editor. This view is useful for understanding the structure of a file or for navigating to a specific element in a file. You can click an element in the outline view to open that element in the **Editor** To open the outline view in SAP Business Application Studio, select **View >** **Outline** from the menu bar. The outline view opens on the right side of the IDE. - The problems view displays different coding errors and warnings and is primarily useful for troubleshooting.  That covers the different views you’ll be using to support your development activities. Now, let’s put some code into your empty project. One of the key features of SAP Business Application Studio is that you can add frontend code using a layout editor. If you’ve previously worked with the SAP Web IDE layout editor, this should be familiar to you, with some added options. For this section, we’ll be using layout editor to add some source code for the frontend. When the project was created, the system created a view with the name you provided. Select **Layout Editor** from the context menu of that view, as shown here.   ![Opening Layout Editor](https://blog.sap-press.com/hs-fs/hubfs/2204_07_012.png?width=557&height=496&name=2204_07_012.png)  The layout editor will open in the middle of the screen, as shown below, and you can now add your screen elements.   ![Layout Editor](https://blog.sap-press.com/hs-fs/hubfs/2204_07_013.png?width=927&height=416&name=2204_07_013.png)   As shown, the layout editor contains three primary sections: control, design, and properties. The control section provides various SAPUI5 controls for your screen layout. You can drag one or more controls to the design section and can edit their properties or events in the properties section. We’ll show you simple options for creating a basic frontend application, so we’ll add only a couple of items: a checkbox and a date picker. Note that the editor will autosave your work. Also, you can navigate to the **Outline** tab to edit your screen, as shown in below For example, you can add a fragment, copy and paste to create new elements, and so on. ![Outline View of Layout Editor](https://blog.sap-press.com/hs-fs/hubfs/2204_07_014.png?width=590&height=472&name=2204_07_014.png)   You can always check your source code in the code editor, as shown in the next figure. The editor can be opened by double-clicking the view name or from the context menu, like opening the layout editor.   ![Code Editor](https://blog.sap-press.com/hs-fs/hubfs/2204_07_015.png?width=744&height=558&name=2204_07_015.png)   So, now you have a basic understanding of how to add source code using the layout editor. Note that you can always add code manually using the source code editor, such as for adding controller logic, complex elements not available in the layout editor, and so on. Let’s assume that the code is complete and move on to testing it. ## Testing the Application Once you complete your coding, you need to run and test your code. Before you can test your application, you need to create the run configuration. The following steps should be executed in sequence:  1. From the left-hand menu, select **Run Configuration** (a triangle-like icon).  1. Select **Create Configuration**.  1. Select the desired project, as shown here. ![Select Project for Run Configuration ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_016.png?width=929&height=152&name=2204_07_016.png) 1. Select the desired SAPUI5 version or select the latest one.  1. Select the destination if your app needs to be connected to a backend service. For this example, you don’t need a backend service, so you can select **Skip**, as shown below.  ![Skip Backend Connection ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_017.png?width=748&height=192&name=2204_07_017.png) 1. Your run configuration will now show up on the left side of the screen, as shown in the next figure. Click the **Run Module** button to the far right of the configuration name, as shown here.  ![Run Configuration and Run Module ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_018.png?width=607&height=191&name=2204_07_018.png) 1. Your app should now open in a separate browser tab, as shown below. You’re now ready to perform testing. ![App Running in SAP Business Application Studio for Testing](https://blog.sap-press.com/hs-fs/hubfs/2204_07_019.png?width=724&height=536&name=2204_07_019.png)   You should now have a basic understanding of testing the application. With the simple app now ready, let’s deploy it. You may think, “Where do I deploy it to?” This is a very valid question, one that we’ll answer now.   ## Deployment Options SAP provides two deployment options for your SAP Fiori application:  - Deployment to an [ABAP](https://learning.sap-press.com/abap)system, such as [SAP S/4HANA](https://learning.sap-press.com/sap-s4hana). - Deployment to the Cloud Foundry environment. This is how we’ll now deploy the app.  Deploy your app to the Cloud Foundry environment using the following steps:  1. Navigate to the terminal view and make sure you’re in your app folder, as shown below.  ![Current Folder in Terminal ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_020.png?width=926&height=130&name=2204_07_020.png) 1. Execute the command npx fiori add deploy-config and select **Cloud Foundry** as your destination, as shown in this figure.  ![Adding Deployment Configuration ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_021.png?width=925&height=166&name=2204_07_021.png) 1. Select the destination **None** for now as there is no backend connection yet.  1. Select **Yes** to add the application to the managed application router.  1. This should create a deployment configuration as an mta.yaml file available in the explorer view, as shown below.**7** ![Newly Created mta.yaml File ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_022.png?width=619&height=495&name=2204_07_022.png) 1. Now login to the Cloud Foundry environment by using the **View >** **Find Command** menu option and then selecting **CF: Login to Cloud Foundry**. This should allow you to enter your desired Cloud Foundry subaccount and space using your login credentials.  1. Open the terminal view and navigate to the root folder of the project, where the mta.yaml file has been created. This is generally the project folder—here, **TESTBAS**, as shown earlier.  1. Enter the command npm run build to trigger the build process, as shown in the figure below. Confirm that you get a success message for the build process. At the end of the build process, the system should create an MTAR archive file for deployment under the new mta\_archives folder. If you don’t find the MTAR file created, you can rightclick **mta.yaml** and select **Build MTA Project** to create the MTAR file.  ![Creating MTA Archive (MTAR) File ](https://blog.sap-press.com/hs-fs/hubfs/2204_07_023.png?width=1011&height=411&name=2204_07_023.png) 1. Now deploy the application using the command npm run deploy. This should trigger the deployment process to the Cloud Foundry environment.  1. Once deployment is successful, you can navigate to your Cloud Foundry subaccount for checking the deployed application.  1. The deployed application can only be viewed if you’ve activated one of the following services, so be sure to create an instance of at least one of these services before you try to view your deployed application:  - - SAP Launchpad service - SAP Portal - SAP Work Zone - SAP Work Zone for HR  1. Your application should now be available in your Cloud Foundry subaccount and available under **[HTML5](https://learning.rheinwerk-computing.com/html-and-css#html)Applications**, as shown in this figure.  ![Application Available in SAP BTP, Cloud Foundry Environment](https://blog.sap-press.com/hs-fs/hubfs/2204_07_024.png?width=928&height=392&name=2204_07_024.png)   Congratulations! You’ve now successfully created your simple SAPUI5 application using SAP Business Application Studio and deployed the same in the Cloud Foundry environment. As you’ve seen, some of the features of SAP Business Application Studio are similar to those in SAP Web IDE.   Although the SAP BTP trial no longer provides SAP Web IDE, many people still use SAP Web IDE productively. Eventually, however, all SAP users must migrate to SAP Business Application Studio as SAP Web IDE has been made obsolete by SAP. [Learn how to take a project in SAP Web IDE to SAP Business Application Studio in this post](https://blog.sap-press.com/how-to-migrate-an-sap-web-ide-project-to-sap-business-application-studio).   [Dive into SAP Fiori with this learning journey.](https://learning.sap-press.com/learning-journey/sap-fiori) *Editor’s note*: This post has been adapted from a section of the book *[SAP Fiori: Implementation and Development](https://www.sap-press.com/sap-fiori-implementation-and-development_5449/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2204_chapter7&utm_content=2204)* by Souvik Roy, Aleksandar Debelic, and Gairik Acharya. ## Recommendation [![SAP Fiori: Implementation and Development](https://blog.sap-press.com/hs-fs/hubfs/social-suggested-images/2204-Mar-17-2023-12-38-37-6737-PM-1-1-1.jpg?width=170&name=2204-Mar-17-2023-12-38-37-6737-PM-1-1-1.jpg)](https://www.sap-press.com/sap-fiori-implementation-and-development_5449/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2204_chapter7&utm_content=2204) **SAP Fiori: Implementation and Development** Take your UI to the next level with this all-in-one resource to implementing and developing SAP Fiori apps! Start by configuring the SAP Fiori components and setting up the necessary security measures. Then it’s time to dive into applications: enabling them, developing them with SAP Business Application Studio and SAP Fiori elements, extending them for SAP S/4HANA, and more. With step-by-step instructions and screenshots throughout, this guide is your one-stop shop! [Learn More](https://www.sap-press.com/sap-fiori-implementation-and-development_5449/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2204_chapter7&utm_content=2204) ![SAP PRESS](https://blog.sap-press.com/hubfs/Twitter_profile_pic.svg) **by [SAP PRESS](https://blog.sap-press.com/author/sap-press)** SAP PRESS is the world's leading SAP publisher, with books on ABAP, SAP S/4HANA, SAP IBP, intelligent technologies, SAP Business Technology Platform, and more! [Programming](https://blog.sap-press.com/tag/programming) [![Share on facebook](https://7528309.fs1.hubspotusercontent-na1.net/hub/7528309/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/facebook-color.png?width=24&name=facebook-color.png)](https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-develop-an-sap-fiori-app-on-sap-business-application-studio%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [![Share on linkedin](https://7528302.fs1.hubspotusercontent-na1.net/hub/7528302/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/linkedin-color.png?width=24&name=linkedin-color.png)](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-develop-an-sap-fiori-app-on-sap-business-application-studio%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin) [![Share on twitter](https://7528304.fs1.hubspotusercontent-na1.net/hub/7528304/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/twitter-color.png?width=24&name=twitter-color.png)](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-develop-an-sap-fiori-app-on-sap-business-application-studio%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-develop-an-sap-fiori-app-on-sap-business-application-studio%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=) [![Share on email](https://7528311.fs1.hubspotusercontent-na1.net/hub/7528311/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/email-color.png?width=24&name=email-color.png)](mailto:?subject=Check+out+https%3A%2F%2Fblog.sap-press.com%2Fhow-to-develop-an-sap-fiori-app-on-sap-business-application-studio%3Futm_medium%3Dsocial%26utm_source%3Demail&body=Check+out+https%3A%2F%2Fblog.sap-press.com%2Fhow-to-develop-an-sap-fiori-app-on-sap-business-application-studio%3Futm_medium%3Dsocial%26utm_source%3Demail) ### Comments ### Latest Blog Posts [![How to Build an SAP Cloud Application Programming Model Application](https://blog.sap-press.com/hs-fs/hubfs/How%20to%20Build%20an%20SAP%20Cloud%20Application%20Programming%20Model%20Application.png?height=600&name=How%20to%20Build%20an%20SAP%20Cloud%20Application%20Programming%20Model%20Application.png)](https://blog.sap-press.com/how-to-build-an-sap-cloud-application-programming-model-application) [Programming](https://blog.sap-press.com/tag/programming) ## [How to Build an SAP Cloud Application Programming Model Application](https://blog.sap-press.com/how-to-build-an-sap-cloud-application-programming-model-application) [Read More](https://blog.sap-press.com/how-to-build-an-sap-cloud-application-programming-model-application) [![How to Migrate an SAP Web IDE Project to SAP Business Application Studio](https://blog.sap-press.com/hs-fs/hubfs/How%20to%20Migrate%20an%20SAP%20Web%20IDE%20Project%20to%20SAP%20Business%20Application%20Studio%20(2).png?height=600&name=How%20to%20Migrate%20an%20SAP%20Web%20IDE%20Project%20to%20SAP%20Business%20Application%20Studio%20(2).png)](https://blog.sap-press.com/how-to-migrate-an-sap-web-ide-project-to-sap-business-application-studio) [Programming](https://blog.sap-press.com/tag/programming) ## [How to Migrate an SAP Web IDE Project to SAP Business Application Studio](https://blog.sap-press.com/how-to-migrate-an-sap-web-ide-project-to-sap-business-application-studio) [Read More](https://blog.sap-press.com/how-to-migrate-an-sap-web-ide-project-to-sap-business-application-studio) **Subscribe to our blog!**Get notified about future blog updates. - - - - - ### The official SAP PRESS Blog As the world’s leading SAP publisher, SAP PRESS’ goal is to create resources that will help you accelerate your SAP journey. The SAP PRESS Blog is designed to provide helpful, actionable information on a variety of SAP topics, from SAP ERP to SAP S/4HANA. Explore ABAP, FICO, SAP HANA, and more! ### SAP Blog Topics - [All Topics](https://blog.sap-press.com) - [Logistics](https://blog.sap-press.com/tag/logistics) - [Programming](https://blog.sap-press.com/tag/programming) - [FICO](https://blog.sap-press.com/tag/fico) - [Administration](https://blog.sap-press.com/tag/administration) - [Business Intelligence](https://blog.sap-press.com/tag/business-intelligence) - [What Is?](https://blog.sap-press.com/tag/what-is) - [Featured](https://blog.sap-press.com/tag/featured) - [CRM & Sales](https://blog.sap-press.com/tag/crm-sales) - [Video](https://blog.sap-press.com/tag/video) - [Human Resources](https://blog.sap-press.com/tag/human-resources) ### Blog curated by [![Rheinwerk Publishing & SAP PRESS Logo](https://blog.sap-press.com/hubfs/rheinwerk-sappress-logo-header-1.svg)](https://sap-press.com) [Visit the SAP PRESS Store](https://sap-press.com) ### About - [Home](https://sap-press.com/) - [About Us](https://sap-press.com/the-publisher/) - [Contact](mailto:info@rheinwerk-publishing.com) - [Legal Notes](https://sap-press.com/legal-notes/) - [Privacy Policy](https://sap-press.com/privacy/) - [Terms of Use](https://sap-press.com/terms/) - [Guest Posting](https://blog.sap-press.com/guest-posting) © 2026 Rheinwerk Publishing, Inc. | Change Privacy Options ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "SAP PRESS", "url" : "https://blog.sap-press.com/author/sap-press" }, "dateModified" : "2026-08-24T18:14:41.367Z", "datePublished" : "2023-05-24T13:00:00.000Z", "headline" : "How to Develop an SAP Fiori App on SAP Business Application Studio", "image" : [ "https://blog.sap-press.com/hubfs/Developing%20SAP%20Fiori%20Apps%20on%20SAP%20Business%20Application%20Studio.png" ], "mainEntityOfPage" : { "@id" : "https://blog.sap-press.com/how-to-develop-an-sap-fiori-app-on-sap-business-application-studio", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.sap-press.com/hubfs/Logo-1.jpg" }, "name" : "Rheinwerk Publishing, Inc." } } ```