Show TOC

ViewsLocate this document in the navigation structure

The view in the Model View Controller concept is responsible for defining and rendering the UI. SAPUI5 supports predefined view types.

Although XML and JSON notation has been introduced for SAPUI5 UI controls, the Model View Controller concept is also supported to facilitate traditional programmatic UI constructions.

The following predefined view types are available:

  • XML view. The user interface is defined in an XML file or string.

    Note The XMLView type supports a mix of XML and plain HTML.

  • JSON view. The user interface is defined in a file or string in JSON format.

  • JS view. The user interface is constructed in a traditional manner.

  • HTML view. The user interface is defined in an HTML file or string.

These view types are offered for selection as view options in the application creation wizard. If you use SAPUI5 application development tools, you can also plug in other view types. For defining other or custom view types, you extend the base class sap.ui.core.mvc.View.

API Reference


    JS Views
    A JS view is one of the predefined view types that are available in SAPUI5.
    XML Views
    An XML view is one of the predefined view types that are available in SAPUI5.
    JSON Views
    A JSON view is one of the predefined view types that are available in SAPUI5.
    HTML Views
    An HTML view is one of the predefined view types that are available in SAPUI5.
    Instantiating Views
    To instantiate views, SAPUI5 provides the factory method sap.ui.view.
    Handling Events in JSON Views
    In JSON views, event handlers are bound as attributes with the attribute name as event name like "press" for a button and the attribute value as event handler name.
    Typed Views and Controllers
    More complex use cases may require a more formal way to define views and controllers. For this, typed views and controllers are used.
    File Names and Locations (View and Controller)
    In SAPUI5, controllers and views are defined and instantiated via a name that equals a SAPUI5 module name within the require/declare concept.
    View Cloning
    For normal controls, view cloning bases on control settings that are described by SAPUI5 metadata, such as properties, aggregations, associations, and event handlers. The clone operation collects these settings and creates a new instance.
    Support for Unique IDs
    Static IDs are used to identify and modify the controls within the controller during runtime. However, if you reuse or nest these views, these static IDs are no longer unique. To avoid ambiguity, each view adds its own ID as prefix to all its child controls.