Skip to Content

Add a UI to Your Business Application

test
0 %
Add a UI to Your Business Application
Details
// Explore More Tutorials

Add a UI to Your Business Application

Create the UI for your business application using SAP Web IDE Full-Stack, the SAP Cloud Application Programming Model and the Annotation Modeler.

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.

Log on to answer question
Step 2: Test-run the UI
  1. Right-click the app module and choose Run | 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. SAP 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.

Log on to answer question
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 you have not added any data yet. In this case, choose Cancel and continue with the next step.

    The empty columns are displayed.

Log on to answer question
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.

Log on to answer question
Step 5: Re-open your app
  1. Open the app from the SAP Fiori Launchpad.

  2. Choose Settings to add the columns you want to see.

  3. Choose OK.

  4. Choose Go.

The columns are displayed with mock data.

Log on to answer question
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.

Log on to answer question
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?
×

Next Steps

Back to top