Show TOC

SAPUI5 SnippetsLocate this document in the navigation structure

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


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.


  1. To open the Snippets view, proceed as follows:
    1. Choose Start of the navigation path Window 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 path General Next navigation step Snippets End 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

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


The page should then be displayed correctly:

SAPUI5 Snippets 6SAPUI5 Snippets 7