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
Advertisements