SAPUI5 Snippets

SAPUI5 snippets are templates and examples on how to use the SAPUI5 runtime and controls.

Context

You can add SAPUI5-specific code parts, so called SAPUI5 Snippets. SAPUI5 snippets are available as prepared HTML pages with no separation between model, view and, controller (MVC) and they are generated during startup of the Eclipse runtime.

Procedure

  1. To open the Snippets view, proceed as follows:
    1. Choose Start of the navigation pathWindow Next navigation step Show View Next navigation step Other...End of the navigation path.
    2. In the Show View dialog, choose Start of the navigation pathGeneral Next navigation step SnippetsEnd of the navigation path and confirm you selection with OK.

    The Snippet view opens.

    SAPUI5 Snippets 2

  2. To insert a snippet, proceed as follows:
    1. Open the index.html of your application project in the HTML editor.
      SAPUI5 Snippets 3
    2. Delete all content.
    3. To insert the snippet code, double click the snippet or use drag&drop.
      SAPUI5 Snippets 4
    4. Save the code and run it in the integrated browser.
      SAPUI5 Snippets 5
      Note

      If you have problems with incorrect rendered pages, open the external browser.

Results

The page should then be displayed correctly:

SAPUI5 Snippets 6SAPUI5 Snippets 7