Skip to Content

Create an SAP Fiori App Using SAP Business Application Studio

test
0 %
Create an SAP Fiori App Using SAP Business Application Studio
Details

Create an SAP Fiori App Using SAP Business Application Studio

October 4, 2021
Created by
February 5, 2020
Develop a simple SAPUI5 freestyle application, adhering to SAP Fiori design guidelines, that will present a list of suppliers from an on-premise backend.

You will learn

  • How to create an SAPUI5 application for SAP BTP, Cloud Foundry environment
  • How to test-run the app locally in the dev space
QR code

Prerequisites

You’ll build an application that presents a list of suppliers from an on-premise backend. The suppliers’ data will be retrieved from the BusinessPartnerSet collection in the ZGWSAMPLE_BASIC OData service that is available from SAP’s ES5 demo Gateway system.

The flow consists of the following parts:

  1. Running a wizard that creates a multi-target application (MTA) project that is configured to use Managed Application Router. An MTA is required in order to create the deployment artifact for SAP BTP, Cloud Foundry environment. If you are not familiar with the MTA concepts, read this guide. A Managed Application Router is SAP’s best practice for applications that run on SAP BTP as well as required in order to include the app in SAP launchpad. To learn more on Managed Application Router refer to this guide.

  2. Running a wizard that generates the app based on SAPUI5 Application template. The app is generated as an HTML5 module within the MTA.

  3. Enhancing the application by creating the UI and presenting data fetched from an SAP backend.

Important

After a period of idle time the dev space is automatically stopped. In order to re-start the dev space open the dev space manager, click the Play icon, and click the dev space.

The period for idle time for Enterprise accounts is different than for trial accounts.


Step 1: Create new Multitarget Application project
  1. In the menu bar, select View | Find Command to open the command palette.

    open command palette
  2. The command palette is opened at the top-center of the SAP Business Application Studio window.

    command palette opened
  3. Enter the Fiori: Open CF Application Router Generator command in the command palette. Type fiori: open in the command palette text field to filter the commands.

    Filter the list of commands in the command palette by typing part of the command in the command palette text field.

    cf mta and approuter wizard
  4. The Application Router Generator Wizard tab is opened. For Application Router Configuration, select the following, and click Finish.

    Step Parameter Value
    A Application router project path /home/user/projects (default)
    B MTA ID FioriDemo
    C MTA Description Can be left empty (default)
    D MTA version 0.0.1 (default)
    E Add route module Managed Approuter
    Fill-in cf mta and approuter wizard

    When end-users access an app in the Cloud Foundry environment, they actually access the Application Router first. The application router is used to serve static content, authenticate users, rewrite URLs, and forward or proxy requests to other micro services while propagating user information.

    The recommendation is to use Managed Application Router that provides many benefits, when compared to Standalone Application Router, such as save resources, lower maintenance efforts, etc. Standalone Application Router should only be used in advanced cases, for example when application router extensibility is required. More information is available in Developing HTML5 Applications in the Cloud Foundry Environment

  5. Wait until the creation of project is completed. A notification that “The files has been generated” appears at the bottom right of the screen.

    project creation completed
Log on to answer question
Step 2: Open the project's workspace

Your workspace is an entity containing your project’s settings, debug configurations, and task configurations. In SAP Business Application Studio, a workspace is created for you as part of the Project Creation wizard. You can choose to create a new workspace or for each project, or you can set up a multi-root environment. You can find out more about Workspaces in the SAP Business Application Studio documentation.

  1. In the menu bar, select File | Open Workspace… to open the Open Workspace dialog.

    open workspace dialog
  2. The Open Workspace dialog is opened at the center of the SAP Business Application Studio window. Select the FioriDemo project within the projects folder, and click Open.

    open workspace dialog
  3. SAP Business Application Studio reloads with the FioriDemo project open in its workspace. In the Explorer view you can see the FioriDemo project, its folder structure, and files.

    The status bar color changes to blue, indicating that a workspace is open.

    open workspace dialog
Log on to answer question
Step 3: Generate an app based on SAPUI5 Application template
  1. In the Welcome tab click Start from template.

    launch generate app

    If the Welcome Page does not appear, in the menu bar, select View | Find Command to open the command palette and select the command Welcome. The command palette is opened at the top-center of the SAP Business Application Studio window.

    Welcome Page from help menu

    The easiest way to develop an SAPUI5 freestyle app from scratch is to create it from a template. To continue developing an existing application, the best practice is to use git source code management and clone the repository.

    Using the UI wizard you can at any point click the Back button to go back to the previous step, or click the specific wizard step to go back to that step.

    You can also create a project from the terminal using Yeoman (@sap/fiori generator).

  2. Select the SAP Fiori Application tile, and click Start.

    fiori template group
  3. For Floorplan Selection, select the following, and click Next.

    Step Parameter Value
    A Application type SAPUI5 freestyle
    B Which floorplan do you want to use? SAPUI5 Application tile
    Floorplan Selection
  4. For Data Source and Service Selection, select the following, and click Next.

    Step Parameter Value
    A Data source Connect to a system
    B System ES5
    C Service ZGWSAMPLE_BASIC (1) - OData V2
    Data Source and Service Selection
  5. For Entity Selection > View name, enter Suppliers, and click Next.

    Entity Selection > View name
  6. For Project Attributes, select the following, and click Next.

    Step Parameter Value
    A Module name businesspartners
    B Application title Suppliers
    C Application namespace ns
    D Description An SAPUI5 freestyle app to view a list of suppliers (demo)
    E Project folder path /home/user/projects/FioriDemo
    F Add deployment configuration Yes (default after setting the project folder path)
    G Add FLP configuration Yes
    H Configure advanced options No (default)
    Project Attributes
  7. For Deployment Configuration, select the following, and click Next.

    Step Parameter Value
    A Please choose the target Cloud Foundry (default)
    B Destination name ES5 - https: //sapes5.sapdevcenter.com (default)
    deployment configuration
  8. For Fiori Launchpad Configuration, select the following, and click Finish.

    Step Parameter Value
    A Semantic Object Object
    B Action display
    B Title {{appTitle}}
    B Subtitle (optional) {{appSubTitle}}
    launchpad configuration
  9. Wait until the installation of project dependencies is completed. A notification that “The project has been generated” appears at the bottom right of the screen and the files and project structure in the Explorer view are updated.

    application generated
This tutorial shows how to use a UI wizard to start SAP Fiori app development. What other option is available in SAP Business Application Studio to create an SAP Fiori app?
×
Step 4: Run the App Locally in the Dev Space
  1. Click the Run Configurations view button to open the Run Configurations view. A set of run configuration that were created as part of the app generation are presented.

    local run
  2. Click the Play icon of the Start businesspartners run configuration to run the app locally in the dev space.

    local run

    You may be prompted to allow pop-ups.

    The Debug view opens, and the status bar color changes to orange, indicating that a debug session is in progress.

    A new tab opens in SAP Business Application Studio where you can see the log of the running app.

    You may be prompted to open the app in a new tab.

    local run
  3. A new browser tab opens showing the app. In this stage of the development, the app only shows a title.

    If the browser tab does not open, or a notification “You have exceeded the number of ports you can expose” appears at the bottom-right of the page, you may need to un-expose ports. Select the Ports: Unexpose option in the command palette (View | Find Command) to un-expose a port that is in an [Active] state. Repeat this procedure until no more than two ports are in [Active] state, and try again.

    app running locally
Log on to answer question
Step 5: Open the layout editor and the code editor

The layout editor allows users to easily make changes in the app using a visual editor. In this tutorial, you will make changes so that data from the backend service is displayed when the app is running.

  1. Click Toggle Bottom Panel to free screen space for the editors pane.

    toggle bottom pane
  2. Click the Explorer view button to open the Explorer view.

    open explorer view
  3. Choose FioriDemo > businesspartners > webapp > view and right-click the Suppliers.view.xml file that you created with the template in a previous step.

  4. Choose Open With > Layout Editor.

    Open with Layout Editor

    To have the Layout Editor option available after opening the workspace, you may need to wait a bit for the Layout Editor extension to be loaded.

  5. The Suppliers view is opened in the Layout Editor.

    open layout editor
  6. Open the Suppliers.view.xml file with the code editor and see how modifications in the Layout Editor are manifested in the code editor. It is not mandatory to open both editors for development. You can do the development work using either of the editors or both. In this tutorial you’ll have both editors open for demo purposes.

    Open code editor
  7. The Suppliers view is opened in the code editor in a tab next to the Layout Editor.

    open code editor
  8. For convenience, place the code editor below the Layout Editor. Use the drag & drop functionality.

    drag-drop editor

    The Layout Editor and code editor are stacked so you can see how making changes to one will be reflected on the other.

    drag-drop editor
Log on to answer question
Step 6: Make changes to the UI
  1. Edit your app using the layout editor, with no need to do any coding.

    Tip 1: Since auto save is enabled by default, every change to a file triggers the live reload of the app. If you place the browser where the app is running and the browser where SAP Business Application Studio is running side by side, you’ll be able to see how code changes trigger the app’s live reload.

    Tip 2: To trigger live reload only when you save a file, in the menu bar, select File | Auto Save to toggle auto save from enable (default) to disable. A ‘V’ next to auto save indicates that auto save is enabled.

  2. In the Controls pane, enter List to filter the controls list in the search box.

    Filter List control

    In order to get more screen real-estate, click the Explorer view button to close the Explorer view, and adjust the ratio between the Layout Editor and the code editor.

  3. Drag the List control and drop it on the View control in the canvas.

    Drag and drop

    Adding the list control to the view is reflected in both the Layout Editor and the code editor.

    Link text e.g., Destination screen
  4. Select the Standard List Item control by clicking the List control you just added (the breadcrumb indicates which control is selected) and, in the Entity Set property in the Properties pane, click the Bind icon.

    Open entity set bind window

    The Select Entity Set view is displayed.

  5. Select the Define entity set and set the selected control as template option, and in the Entity Set dropdown list, choose the BusinessPartnerSet entity set. Click Bind to complete the operation.

    entity set bind window

    The space of the Select Entity Set view may be too narrow to show all options. In case you do not see the Define entity set and set the selected control as template option, scroll down in the Select Entity Set view to make it available.

    The bind operation is reflected in both the Layout Editor and the code editor.

    entity set bind window
  6. In the Properties pane, in the Title property, click the Bind icon.

    open Title bind window

    The Data Binding view is displayed.

  7. Click the Clear expression (eraser) icon to clear the default text, and in the data fields double click CompanyName. Click Bind to complete the operation.

    Title bound
  8. Repeat the last two steps for the Description property in the Properties pane. Choose WebAddress.

    Bind Description
  9. Wait for the live reload of the app to complete. A list of suppliers is displayed.

    Bind Description
Will changes in the layout editor be reflected in the code editor?
×

Congratulations!

With this, you have successfully completed the development of an SAP Fiori app using SAP Business Application Studio, including test-running the app locally in the dev space. In this tutorial, you learned about high productivity tools that are available out-of-the-box in SAP Business Applications Studio, such as: templates and wizards, command palette, Layout Editor, local run (Preview Application), and more.

Next Steps

Back to top