SAP Learning Journey

Previewing Your Application

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Preview your application

Reference Links: Preview Applications

To read more about previewing applications, see: Testing Applications

Preview Your Application

Business Scenario

We are in the process of developing a cloud application based on various SAP Technologies. The used technologies start with database services, we use user interfaces, including the SAP Cloud Application Programming Model (CAP), SAP Fiori, SAP Mobile Development (MDK), and others. The more complex the system becomes, the more urgent demand is there to preview and test it. To conduct an entire deployment might be a choice, but it can be time-consuming and prerequisites-demanding. Therefore, a fast, efficient, and convincing approach is required to carry out previewing.

In this exercise, you will perform the following tasks:

  • To preview your application, get familiar with the central entry and available choices.
  • Choose to preview with the default configuration to verify the behavior of your app during runtime with sample data for external services.
  • Create a new configuration, which enables live data for external services, and choose to preview this new configuration to experience the hybrid data sources of your app, without deploying your app onto the cloud.

Prerequisites

You have successfully completed the exercise: Create a responsive application user interface.

The exercise Add sample data is optional but recommended to be accomplished, since it's a prerequisite if you want to observe the differences between sample data source and real data source.

Note

Note that some of the services that this learning journey links to, can incur costs.

If you are concerned about charges, you can opt to skip the corresponding exercises and watch the simulation instead.

Exercise Options

You can perform this exercise in two ways:

  1. Live Environment / Practice System: you can perform the steps provided below, either in your SAP BTP account or you use the "Practice System Access" provided below.
  2. Simulation: follow the step-by-step instructions within the simulation.
Note

You can try out this exercise in the practice system below. Open the system by clicking on the bottom on the end of this page.

Please note that the practice system access only covers access to the SAP Business Application Studio. When deploying to an SAP BTP runtime or consuming other SAP BTP services, you have to use an SAP BTP Trial Account, Free-Tier, or an Enterprise Account.

Note
We recommend performing the steps in the live environment first.

The following simulation reproduces the full exercise execution:

ExerciseStart Exercise

Task 1: Check the Run and Debug Button

Steps

  1. Check the Run and Debug Button.

    1. Select the Run and Debug button from the right top corner of the Home tab. Here you find a group of buttons, including the Run and Debug button.

    2. In the preview menu, choose the Run RiskManagement-1 choice, which was created along the project.

      In this configuration, by default, all the data sources will be locally mocked with Sample Data.

    3. A terminal at the bottom will appear, with a dynamic output, which indicates the task execution details.

    4. Later on, the debug console will be focused with the progressive running status, meanwhile, a menu with several buttons including a button to stop the preview will appear in the middle of the upper part of SAP Business Application Studio.

    5. Once the background process finishes, the console will display the target link to preview the app, as shown in the green rectangle.

    6. By moving your mouse cursor above the link, you will see the suggestion to open the link by Ctrl + Click or Cmd + Click, depending on your operating system.

      The same page will also be opened automatically, if not blocked by your browser. If the page does not open, check the pop-up blocker of your browser.

Task 2: Perform a First Preview

Steps

  1. Check the buttons of the service entities.

    1. In the newly opened preview page, choose the buttons of the service entities on the right side.

      • For example, by choosing the syntax icon in the orange rectangle right to the risks service entity, you can preview the data for risks in the form of a raw data content.
      • The result will be populated with the sample data you've created in previous exercises.
      • For the A_BusinessPartner entity, it is the same.

  2. Check the tile of Web Application.

    1. In this preview page, choose the tile of Web Application on the left side. (As shown in orange rectangles)

    2. The result will be populated with the sample data you created in previous exercises.

    3. Once complete, you can stop the current round of preview, by choosing the Stop button.

      Note that after choosing the Stop Preview button, it is restored into its former Preview menu button status.

Task 3: Check With the Live Data Choice

Steps

  1. Create a Run configuration.

    1. In the menu on the left side of SAP Business Application Studio, select Run Configurations

    2. Select the + icon in the upper right part of the Run Configurations menu to create a new configuration.

    3. From the What would you like to run? menu select the entry matching your project (as shown in the screenshot below).

    4. You can modify the configuration name according to your preference. Here, we plan to conduct the live data previewing, so we can call it Run RiskManagement with Live Data.

    5. In the Data Type section, Live Data should be selected. Automatically, a new field to configure the destination of BusinessPartnerA2X service will be shown. Verify its content was pre-filled with the apihub_sandbox choice. Choose Create.

    6. Now a new configuration called Run RiskManagement with Live Data is created, and it will adopt the live data for external service "BusinessPartnerA2X" according to the configuration.

    7. To run it click on the green triangle right beside the name of your new configuration, which now appears in the Run Configurations menu on the left side.

  2. Check the tile of the Web Application.

    1. In the preview menu, choose Run RiskManagement with Live Data choice.

    2. Similarly to the previous preview, the procedure starts with a terminal in the bottom, then a debug console, and finally ends up with the preview page.

    3. In this preview page, choose the tile of the Web Application on the left side to operate in the Fiori Elements App, built previously.

    4. Choose Go to conduct filtering to show the list of items.

    5. At present, entries of Risks will be retrieved depending on our data. Choose create to create a new entry.

    6. A form of this entry displays. We need to enter data in the form as needed.

    7. Choose the icon button right to the supplier_BusinessPartner field.

    8. The live data of A_BusinessPartner will be shown. This is retrieved from the live data source behind the destination, which we have configured before this round of preview. We can select any row of entry.

    9. The real entry from live data will be filled. Choose the Create button at the bottom.

    10. The new entry of Risks was created.

    11. Return to the list view and now, we can see our newly created entry with the association to another entry from the real data source.

Practice System

Log in to track your progress & complete quizzes