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

August 27, 2020
Created by
February 5, 2020
Create an SAP Fiori application in SAP Business Application Studio and deploy it to your SAP Cloud Platform, Cloud Foundry environment.

You will learn

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

Prerequisites

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 Factory accounts is different than for trial accounts.


Step 1: Create new SAP Fiori project
  1. Create a new SAP Fiori project from a template.

    Open Dev Space

    If the Welcome Page does not appear, in the menu bar, select View | Find Command to open the command palette and select the command SAP Business Application Studio: Welcome Page.

    Welcome Page from command palette

    The easiest way to develop an SAP Fiori 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 reset button to reset the wizard at the top-right of the wizard screen, click the Back button to go back to the previous step, or click the specific wizard step to go back to that step.
    For convenience, click the Explorer view button to close the Explorer view.

  2. Make sure that the target folder is /home/user/projects, select the SAP Fiori Freestyle - Project Generator template, and click Next.

    Fiori project template
  3. For Target Running Environment, select the following, and click Next.

    Step Parameter Value
    A Select the target running environment Cloud Foundry
    B Select the template you want to use SAPUI5 Application
    fiori project template
  4. For Project Name, enter FioriDemo, and click Next.

    Fiori project template - project name
  5. For HTML5 Applications, select Standalone Approuter, and click Next.

    Standalone Approuter

    The application router is the single point-of-entry for an application running in the Cloud Foundry environment on SAP Cloud Platform. 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.
    To simplify the tutorial the Standalone Approuter option is used .

  6. For Basic Attributes, select the following, and click Next.

    Step Parameter Value
    A Enter an HTML5 module name BusinessPartners
    B Do you want to add authentication No
    C Enter a namespace ns
    Fiori project template - basic attributes
  7. For View Name, select the following, and click Next.

    Step Parameter Value
    A Enter a view name Suppliers
    B Do you want to add a data service Yes
    Fiori project template - view name
  8. For Consume Services, select the following, and click Next.

    Step Parameter Value
    A Select a system My SAP systems
    B Select a source ES5 [Catalog]
    C Select a service GWSAMPLE_BASIC
    Fiori project template - consume services

    A notification that the project has been generated appears at the bottom right of the screen.

    Fiori project template - project generated
  9. Click Open in New Workspace in the notification or File > Open Workspace, and choose FioriDemo.

    AppStudio open workspace

    The Explorer view opens and you can see the FioriDemo project, its folder structure, and files. If not, you can click the Explorer view button at the top left of the screen.

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

This tutorial shows how to use a template to start SAP Fiori app development. What other option is available in SAP Business Application Studio to create an SAP Fiori app?
×
Step 2: Open the layout editor

Open the layout editor in SAP Business Application Studio to easily make a few changes. In this case, you will make changes so that data from the backend service is displayed when the app is running.

  1. Choose FioriDemo > BusinessPartners > webapp > view and right-click the Suppliers.view.xml file that you created with the template in a previous step.

  2. 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.

    The Suppliers view is opened in the Layout Editor.

    Layout Editor Opened
  3. You can optionally choose to open it with the code editor and see how modifications in the Layout Editor are manifested in the code editor.

    Open code editor

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

    Code editor opened
  4. 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.

    Editor dropped
Log on to answer question
Step 3: Make changes to the UI

Make some changes using the layout editor, with no need to do any coding.

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

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

    Drag and drop
  3. Select the Standard List Item control 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.

  4. 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 bind operation is reflected in both the Layout Editor and the code editor.

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

    open Title bind window

    The Data Binding view is displayed.

  6. 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
  7. Repeat the last two steps for the Description property in the Properties pane. Choose BusinessPartnerID.

    Bind Description
Will changes in the layout editor be reflected in the code editor?
×
Step 4: Test run the application

Run your new application to test it.

  1. Open the Run Configurations view.

    Open Run Configurations
  2. Click + and select BusinessPartners.

    Create new run configuration
  3. For the next steps of the wizard, select the following:

    Step Parameter Value
    A What would you like to run BusinessPartners
    B Select a runnable file index.html
    C Select a UI5 version latest
    D Enter a name Run BusinessPartners (ES5)

    A new run configuration is generated for the FioriDemo project.

  4. Expand the run configuration to display the services that can be bound.

    Bindable objects

    SAP Business Application Studio allows you to test your app with resources.

  5. To bind to the destination, click the Bind icon to the right of the destination resource to get a list of available destinations.

    Bind to Destination
  6. Select the ES5 destination from the list.

    Select Destination

    Once the destination has been bound, the Bind icon turns green.

    To unbind the destination, click the Unbind icon.

    Destination is bound
  7. Hover over the run configuration and click the Run Module icon.

    Running the app locally
  8. Wait for the A service is listening to port 6004 notification and then click the button to open the app.

    The left side view changes to the debug view and the status bar color changes to orange to indicate that the app is running in debug mode.

    If you are running the app for the first time, the button in the notification will say Expose and Open. Otherwise it will say Open in New Tab.

    App is running locally

    Some of the notifications appear on the screen for a short period of time.

    You may optionally add a port description.

    You may need to authenticate yourself to access the backend. Use your ES5 username and password.

    The app is opened in a new tab and a list of suppliers is displayed.

    SAP Fiori app is running
Where does the app run?
×
Step 5: Stop the running application
  1. Return to the SAP Business Application Studio tab.

  2. In the Debug view click the Stop icon.

    Stop running app

    The status bar background color changes from orange to blue.

    You can re-run the app clicking the Start Debugging icon in the Debug view or clicking the Run Module icon in the Run Configurations view.

Log on to answer question

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, and more.

Next Steps

Back to top