Show TOC

SAPUI5 SnippetsLocate this document in the navigation structure

You can add SAPUI5-specific code parts, so called SAPUI5 Snippets. Code snippets are templates and examples on how to use the SAPUI5 runtime and controls and what can be done with them. 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.

Before you can use the SAPUI5 snippets, the SAPUI5 application development tools must be installed in your Eclipse.

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.SAPUI5 Snippets 1
  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.SAPUI5 Snippets 2
  3. The Snippet view opens.SAPUI5 Snippets 2

To insert a snippet, proceed as follows:

  1. Create a SAPUI5 application project, see Creating a SAPUI5 Application Project.

  2. Open the index.html in the HTML editor.

  3. Delete all content.

    SAPUI5 Snippets 3

  4. To insert the snippet code, double click on the snippet or use drag&drop.

    SAPUI5 Snippets 4

  5. Save the code and run it in the integrated browser.

    SAPUI5 Snippets 5
  6. Note

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

    SAPUI5 Snippets 6

    The page should then be displayed correctly:

    SAPUI5 Snippets 7