SAP UI5 - Views

Views are defined using SAP libraries as follows −

• XML with HTML, mixed, or Standalone: Library- sap.ui.core.mvc.XMLView
• JavaScript: Library- sap.ui.core.mvc.JSView
• JSON: Library - sap.ui.core.mvc.JSONView
• HTML: Library - sap.ui.core.mvc.HTMLView

JavaScript View Sample

Sap.ui.jsview(sap.hcm.address, {
   getControllerName: function() {
      return sap.hcm.address;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: Hello });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

HTML View Sample

<template data-controller-name = sap.hcm.address>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = test data-sap-ui-type = sap.ui.commons.Button
      Id = Button1 data-text =  Hello Data-press = sayHello>
   </div>
</template>

Similarly, you can create JSON view derived from sap.ui.core.mvc.JsonView.

{
   type:sap.ui.core.mvc.JsonView,
   controllerName:sap.hcm.address,
   .
   ...
   .
}

Comparison of View Types

The following table lists key features associated with MVC concept and comparison of different view types w.r.t the features.