Skip to Content
Previous

Add a UI to Your Business Application

By Cecilia Huergo

Create the UI for your business application using SAP Web IDE Full-Stack and the Annotation Modeler.

Details

You will learn

  • How to use SAP Web IDE Full-Stack HTML5 templates and the Annotation Modeler to create a UI for your business application.

Step 1: Add an HTML5 template
  1. Right-click the bookshop folder and choose New | HTML5 Module
  2. Choose List Report Application.Choose the HTML5 template
  3. Complete the following fields:

    Field Name Value
    Module Name app
    Title Books
  4. Choose Current Project from the list of sources and then CatalogService.

    Choose CatalogService
  5. Leave the Annotation Selection tab with the default values and choose Next.

  6. In the Template Customization tab, choose Books in the OData Collection drop-down menu.

    Leave the OData Navigation field blank.

    Template Customization tab

This binds the application UI to the Books entity set.

Please log in to access this content.
Step 2: Test-run the UI
  1. Right-click the app module and choose Run | Run As | Web Application.
  2. Choose flpSandbox.html.

    If you have previously selected flpSandbox.html as your run configuration for web applications, you will not see a dialog box. Web IDE will use flpSandbox.html as the default.

  3. In the Destination Creation dialog box, complete the following fields:

    Field Name Description
    Neo Environment User ID The ID of your subaccount that contains your Neo environment
    Neo Environment Password The password of your subaccount that contains your Neo environment
  4. Choose Create.
    The SAP Fiori launchpad opens.

    It might take a few seconds for the SAP Fiori launchpad to open.

Please log in to access this content.
Step 3: Open your app
  1. Select your app to see a preview of the UI application.
    This might take a few seconds, but once it opens, you will see a table without columns, because UI annotations have not been defined.
  2. Choose Settings to add the columns you want to see and choose OK.Choose Settings
  3. Choose Go.

    You may see an error, because we have not added any data yet. In this case, choose Cancel and continue with the next step.

The empty columns are displayed.

Please log in to access this content.
Step 4: Edit the run configurations
  1. Right-click the app module and choose Run | Run Configurations.
  2. Choose Run flpSandbox.html and check the Run with mock data option.Edit the run configurations
  3. Choose Save and Run.

Please log in to access this content.
Step 5: Re-open your app
  1. Open the app from the SAP Fiori Launchpad and choose Settings to add the columns you want to see.
  2. Choose OK.
  3. Choose Go.

The columns are displayed with mock data.

Please log in to access this content.
Step 6: Add an annotation file
  1. Go to app/webapp, right-click the localService folder and choose New Annotation File
  2. Leave the default values and follow the wizard.
Please log in to access this content.
Step 7: Add UI annotations
  1. Go to app/webapp/localService, right-click on the file you just created and choose Open Annotation Modeler.
  2. Expand the Books entity.

    If you don’t see any entities listed, use the Select Targets button to search for and select the Books entity type.

    The Local Annotations entry includes the annotation file you have just created.

  3. Go to the Actions column and choose Add subnodes.Add subnodes
  4. From the Add to Local Annotations dialog box, choose LineItem and then OK.

    Add LineItem

    A new entry is created: UI.LineItem.

  5. For UI.LineItem, choose Add subnodes.
  6. From the Add to UI.LineItem dialog box, choose DataField and then OK.
    A new entry is created: Value.
  7. Go to the Value column and choose Title from the Property drop-down menu.Add Value
  8. Choose Save and then Run.

  9. Choose Go

The application now shows data according to the added annotations.

Which column is displayed by default?
×

Updated 09/25/2018

Time to Complete

10 Min.

Intermediate

Prerequisites

Next
Back to top