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.

Feature	JS View	XML View	JSON View	HTML View
Standard and Custom Libraries	Yes	Yes	Yes	Yes
Properties of types string, int Boolean, float	Yes	Yes	Yes	Yes
Aggregation 1:1, 1:n Association 1:1, 1:n	Yes	Yes	Yes	Yes
Simple Data Binding	Yes	Yes	Yes	Yes
Customize Data Binding	Yes	No	No	No
Embedded HTML	No	Yes	No	No
Code Completion	Yes	Yes	No	No
Templating	Yes	No	No	No
Validation	No	Yes	No	No
Single Event Listener	Yes	Yes	Yes	Yes