Skip to Content
Author's profile photo Santhosh Gowda

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.

example,

<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,

<!DOCTYPE HTML>

<html>

       <head>

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

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

              <script src=https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js

                           id=“sap-ui-bootstrap”

                           data-sap-ui-libs=“sap.ui.commons,sap.m”

                             data-sap-ui-xx-bindingSyntax=“complex”

                           data-sap-ui-theme=“sap_bluecrystal”

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

                           >

              </script>

                <script>

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

               new sap.ui.core.ComponentContainer({

height : “100%”,

                        name : “smartform”

              

                }).placeAt(“content”);

            });

        </script>

       </head>

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

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

       </body>

</html>

  1. Component.js,
  2. jQuery.sap.declare(“smartform.Component”);
  3. jQuery.sap.require(“sap.ui.model.resource.ResourceModel”); 
  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”

  xmlns:html=http://www.w3.org/1999/xhtml

  xmlns:app=http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1

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

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

    <content>

      <smartForm:SmartForm id=“smartForm”

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

        <smartForm:Group label=“Customer”>

          <smartForm:GroupElement>

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

          </smartForm:GroupElement>

          <smartForm:GroupElement>

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

          </smartForm:GroupElement>

          <smartForm:GroupElement>

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

              <smartField:configuration>

                <smartField:Configuration controlType=“dropDownList”

                  displayBehaviour=“descriptionAndId” />

              </smartField:configuration>

            </smartField:SmartField>

          </smartForm:GroupElement>

        </smartForm:Group>

         <smartForm:Group label=“Address”>

          <smartForm:GroupElement>

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

          </smartForm:GroupElement>

          <smartForm:GroupElement>

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

          </smartForm:GroupElement>

        </smartForm:Group>

      </smartForm:SmartForm>

    </content>

  </Page>

</core:View>

  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);

           oModel.setCountSupported(false);

           oView = this.getView();

           oView.setModel(oModel);

           oView.bindElement(“/CollectionName(‘295003114’)”);

         }

});

Output,

Assigned tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin van het Hof
      Robin van het Hof

      Could you please reformat your blog?

      Comic Sans is already painful to read, but reading code with that typeface makes my eyes bleed... 😐

      Author's profile photo Santhosh Gowda
      Santhosh Gowda
      Blog Post Author

      Thanks Robin van het Hof. I reformatted it.

      Author's profile photo abhishek lohiya
      abhishek lohiya

      <smartField:Configuration controlType="dropDownList"

                        displayBehaviour="descriptionAndId" />



      displayBehaviour This property specifies how available values are presented.


      where  descriptionAndId is defined ??

      Author's profile photo Former Member
      Former Member

      @abhishek lohiya

      Look at SPUI5 API reference,

      Enum sap.ui.comp.smartfield.DisplayBehaviour