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
My Project Structure,
- 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>
- Component.js,
- jQuery.sap.declare(“smartform.Component”);
- jQuery.sap.require(“sap.ui.model.resource.ResourceModel”);
- 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 }),
]});
},
})
- 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>
- smartform.controller.js,
- 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,
Could you please reformat your blog?
Comic Sans is already painful to read, but reading code with that typeface makes my eyes bleed... 😐
Thanks Robin van het Hof. I reformatted it.
<smartField:Configuration controlType="dropDownList"
displayBehaviour="descriptionAndId" />
displayBehaviour This property specifies how available values are presented.
where descriptionAndId is defined ??
@abhishek lohiya
Look at SPUI5 API reference,
Enum sap.ui.comp.smartfield.DisplayBehaviour