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

Preview Your Application

Business Scenario

We're in the process of developing a cloud application based on a variety of SAP Technologies, from database services, to user interfaces, including SAP Cloud Application Programming Model (CAP), SAP Fiori, SAP Mobile Development (MDK), and others. The more complex the system becomes, the more urgent demand there will be 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:

  • Get familiar with the central entry and available choices to preview your application.
  • 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 – by using the instructions provided below, you can perform the steps in your SAP BTP account.
  2. Platform Simulation – follow the step-by-step instructions within the simulation.
Note
We strongly recommend to perform the steps in the live environment first.

The following simulation reproduces the full exercise execution:

ExerciseStart Exercise

Task 1: Check the preview Buttons

Steps

  1. Check the preview buttons.

    1. Go to the Home tab.

    2. On the right top corner of the Home tab, you'll find a group of buttons, including the Preview menu button.

    3. Choose the Preview menu button and the menu with a group of available choices will appear.

      At present, it supports the following operations:

      • Preview with any existing run-configuration, for example, "Run RiskManagement-1".
      • Manipulate run-configurations.
        • Create a new run-configuration.
        • Edit existing run-configurations in Run Panel.

Task 2: Perform a first Preview

Steps

  1. Perform a first preview.

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

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

    3. Later on, the debug console will be focused with the progressive running status, meanwhile, the preview menu button will automatically change into Stop preview.

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

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

  2. 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 form of a raw data content.
      • The result will be populated with the sample data you've created in previous exercises.
      • For A_Supplier entity, it is the same.

  3. 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 Preview 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 preview menu, choose Create Run Configuration.

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

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

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

  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 fill in the form as needed.

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

    8. The live data of A_Supplier 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.

Reference Links: Preview Applications

To read more about previewing applications, see: Previewing Applications

Save progress to your learning plan by logging in or creating an account

Login or Register