Show TOC

XML ViewLocate this document in the navigation structure

The XML view type is defined in an XML file. The file name either ends with .view.xml or as an XML string. The file name and the folder structure together specify the name of the view that equals the SAPUI5 module name.

Example

For resources/sap/hcm/Address.view.xml, the view name is sap.hcm.Address. The application uses this view name for displaying an instance of this view. If you define the XML view by means of an XML string, no file or require/declare is needed.

The file looks as follows: 

<mvc:View controllerName="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
   <Panel>
      <Image src="http://www.sap.com/global/ui/images/global/sap-logo.png"/>
      <Button text="Press Me!"/>
   </Panel>
</mvc:View>

Nest the XML tags analogous to the nesting sequence of SAPUI5 controls and add the property values as attributes.


In this section:
    Namespaces in XML Views
    The names of the SAPUI5 control libraries are mapped to XML namespaces.
    Aggregation Handling in XML Views
    In XML views, child controls can be simply added as child tags.
    Using Native HTML in XML Views
    The use of native HTML in XML views depends on the XHTML feature set.
    Using CSS Style Sheets in XML Views
    Style sheets are included in XML views in the same way as plain HTML. To add further CSS classes to SAPUI5 controls, use the class attribute.
    Handling Events in XML Views
    XML views use event handlers as attributes: The attribute name is the event name, such as "press" for a button, and the attribute value is the event handler name.
    Preprocessing XML Views
    Applying preprocessing to views enables you to use features like XML templating. This feature is currently only enabled for XML views. On an abstract level, preprocessing means that a view can be modified during runtime before it is rendered. This makes it possible to use the templating syntax, as it is interpreted by the preprocessor. It also makes it possible to apply user customization.