Display simple form SAPUI5

Display a simple form in SAPUI5

Create a new folder PersonalInfo in the main Sample folder.

Create a new view PInfo view which by default creates PInfo controller. 

PInfo.view.xml

<mvc:View
height="100%"
controllerName="PersonalInfo.PInfo"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
id="page"
showHeader="false" >
</Page>
</mvc:View>

PInfo.controller.js

sap.ui.define(['jquery.sap.global',
      'sap/ui/core/Fragment',
      'sap/ui/core/mvc/Controller',
      'sap/ui/model/json/JSONModel'
      ], function(jQuery, Fragment, Controller, JSONModel) {
      "use strict";

      var PageController = Controller.extend("PersonalInfo.PInfo", {

      onInit: function (oEvent) {
      var oModel = new JSONModel("PersonalInfo/Supplier.json");
      this.getView().setModel(oModel);
      this.getView().bindElement("/SupplierCollection/0");
      this._showFormFragment("Display");
      },

      onExit : function () {
      for (var sPropertyName in this._formFragments) {
      if (!this._formFragments.hasOwnProperty(sPropertyName)) {
      return;
        }
      this._formFragments[sPropertyName].destroy();
      this._formFragments[sPropertyName] = null;
      }
      },
      _formFragments: {},
     
      _getFormFragment: function (sFragmentName) {
      var oFormFragment = this._formFragments[sFragmentName];
      if (oFormFragment) {
      return oFormFragment;
      }

      oFormFragment = sap.ui.xmlfragment(this.getView().getId(), "PersonalInfo." + sFragmentName);

      this._formFragments[sFragmentName] = oFormFragment;
      return this._formFragments[sFragmentName];
      },

      _showFormFragment : function (sFragmentName) {
      var oPage = this.getView().byId("page");
      oPage.removeAllContent();
      oPage.insertContent(this._getFormFragment(sFragmentName));
      }

      });


      return PageController;

      });

Here we are reading JSON data from Supplier.json file.The path of the file should be mentioned properly to avoid errors.(reading a json file)

this._showFormFragment("Display");

The form data is displayed on the view by another view called fragment. Fragments are the pieces of UI created to resuse all over the application.Fragments are defined as View only and calling Views controller is shared with Fragment as Fragments are not having their own controllers.

Fragment can be created as an xml file in the same folder.

FolderStructure:

Display.fragment.xml

<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id=""
editable="false"
layout="ResponsiveGridLayout"
title="Address"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="4"
emptySpanL="4"
emptySpanM="4"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Name" />
<Text id="nameText" text="{SupplierName}" />
<Label text="City" />
<Text id="City" text="{City}" />
<Label text="Country" />
<Text id="countryText" text="{Country}" />
<Label text="Tel" />
<Text text="{Tel}" />
<Label text="Email" />
<Text id="Email" text="{Email}" />
<Label text="Twitter" />
<Text id="twitText" text="{Twitter}" />
</f:content>
</f:SimpleForm>
</VBox>

</core:FragmentDefinition>


Output:

Source: https://sapui5.hana.ondemand.com/