Skip to Content

Smart Form and Smart Field in UI5

Hi All,

     The Smart Form is the Form Generated based on oData metadata.

So, The form is generated based on the metadata (Labels, text and drop down also will be generated).

Advantages over a form:-

1.It will auto adjust means the form elements will be aligned and grouped based on your metadata.

2.No more code for getting the data and binding with the view.

3.Framework is providing “edit” button so based on your metadata form elements will be editable.

4. Framework is providing “update” button for updating the data to backend.

5. If some fields will be updated in back end, you need to change your manual form code.

6. if you use smart form and smart field it will be automatically changes will reflect here.

And many more features.

In your metadata.xml,

For Input and Text fields, sap:updatable=”true” then your text will be in editable mode after click on edit button else it will be in text view.


<Property Name=”Description” Type=”Edm.String” Nullable=”false”

          MaxLength=”256″ sap:label=”Description” sap:creatable=”false”

          sap:updatable=”true” sap:sortable=”false” />

For DropDown,sap:text=”CategoryName” should be mapped with the key for getting drop down.

<Property Name=”Category” Type=”Edm.String” Nullable=”false”

          MaxLength=”3″ sap:label=”Category” sap:creatable=”false”

          sap:updatable=”true” sap:sortable=”false” sap:text=”CategoryName” />

<Property Name=”CategoryName” Type=”Edm.String” Nullable=”false”

          MaxLength=”3″ sap:label=”Category Description” sap:creatable=”false”

          sap:updatable=”true” sap:sortable=”false” />

Reference –

Smart Form – UI Development Toolkit for HTML5 (SAPUI5) – SAP Library

SAPUI5 Explored

My Project Structure,

  1. Index.html,




              <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>

              <meta http-equiv=‘Content-Type’ content=‘text/html;charset=UTF-8’/>

              <script src=





                           data-sap-ui-resourceroots=‘{“smartform”: “./”}’




sap.ui.getCore().attachInit(function() {

               new sap.ui.core.ComponentContainer({

height : “100%”,

                        name : “smartform”






       <body class=“sapUiBody” role=“application”>

              <div id=“content”></div>



  1. Component.js,
  4. sap.ui.core.UIComponent.extend(“smartform.Component”, {

  init : function()


sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

      var mConfig = this.getMetadata().getConfig();


createContent : function() {

     return new sap.m.App({id :“idApp”,pages: [

sap.ui.view({id : “idsmartform”, viewName : “smartform.smartform.smartform”, type : sap.ui.core.mvc.ViewType.XML, viewData : this }),




  1. Smartform.view.xml,

<core:View xmlns:core=“sap.ui.core” xmlns=“sap.m”

  xmlns:smartForm=“sap.ui.comp.smartform” xmlns:smartField=“sap.ui.comp.smartfield”



  controllerName=“smartform.smartform.smartform” class=“sapUiSizeCompact”>

  <Page id=“page” title=“Product” enableScrolling=“false”>


      <smartForm:SmartForm id=“smartForm”

        editTogglable=“true” title=“{SoldToName}”>

        <smartForm:Group label=“Customer”>


            <smartField:SmartField value=“{SalesDocument}” />



            <smartField:SmartField value=“{SoldToName}” />



            <smartField:SmartField value=“{Status}”>


                <smartField:Configuration controlType=“dropDownList”

                  displayBehaviour=“descriptionAndId” />





         <smartForm:Group label=“Address”>


            <smartField:SmartField value=“{HouseNo}” />



            <smartField:SmartField value=“{District}” />







  1. smartform.controller.js,
  2. sap.ui.controller(“smartform.smartform.smartform”, {

       onInit: function() {

           var sURL, oModel, oView;

           oModel = new sap.ui.model.odata.ODataModel(“URL”, true);


           oView = this.getView();






You must be Logged on to comment or reply to a post.