Show TOC

Creating a Smart Template ProjectLocate this document in the navigation structure

As an app developer, you must define a configuration in the SAP Web IDE. The main aspects are the destinations to the back-end metadata, navigation between pages, and page design (as pages may contain several templates).

The following figure shows the application in the SAP Web IDE that starts the wizard to create a new project using smart templates:

Figure 1: Smart Template Application
  • You have created an OData service in your ABAP back-end system.

  • You have created annotation files if required.

  • You have access to SAP Web IDE 1.17 or higher. For information about how to access the SAP Web IDE, see App Development Using SAP Web IDE.

  1. In the SAP Web IDE, from the File menu, choose Start of the navigation path New Next navigation step Project from Template End of the navigation path. The system starts the wizard for new projects.

  2. Follow the guided procedure:



    1. Template Selection

    Select Smart Template Application and click Next.

    2. Basic Information

    The following fields are mandatory:
    • Project Name

    • Title

    • Application Component Hierarchy

    Choose Next.

    3. Data Connection

    1. Choose Service Catalog and select the desired data source from the list.

    2. Choose a service and then choose Next.

    4. Annotation Selection

    Select the required annotation file and then choose Next.

    5. Template Customization

    1. Under Data Binding, complete the fields as follows:
      • OData Collection – this is a mandatory field

      • OData Navigation – select the relevant navigation option
    2. Choose Next and Finish.
  3. Open your project (already selected in project list).
  4. Open the webapp folder.
  5. Select Component.js and choose Run.
If you get the message that variants can't be loaded, choose OK to continue.
More Information
For more information about deploying new applications from SAP Web IDE to different servers, see Deploying Applications.