[ SAPUI5 ] Smart Form

○ 상품에 대한 정보와 공급자의 정보를 편집할 수 있도록 한다.

    - SmartForm

      1) sap.ui.layout.form.Form 컨트롤을 사용한다.

      2) SmartField 컨트롤과 함께 SmartForm 컨트롤을 사용하는 경우에는

          레이블 및헤더에 대한 필수 정보가 노출되기 때문에 [ view.xml ]을설정하는 데에 있어서 매우 간편하다. 

      3) 이와 더불어, 읽기 전용 모드와편집 모드 사이를 전환할 수 있는 옵션이있는 경우 토글 편집이 가능하도록

           SmartForm에서 지정이 가능하다. 

---

 

    - [ SmartForm.view.xml ]

<mvc:View 
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="sap.ui.demo.smartControls.SmartForm"
	xmlns:smartForm="sap.ui.comp.smartform" 
	xmlns:smartField="sap.ui.comp.smartfield">
	<smartForm:SmartForm 
		id="smartForm"
		editTogglable="true" 
		title="{Name}"
		flexEnabled="false">
		<smartForm:Group label="Product">
			<smartForm:GroupElement>
				<smartField:SmartField value="{ProductId}" />
			</smartForm:GroupElement>
			<smartForm:GroupElement>
				<smartField:SmartField value="{Name}" />
			</smartForm:GroupElement>
			<smartForm:GroupElement elementForLabel="1">
				<smartField:SmartField value="{CategoryName}" />
				<smartField:SmartField value="{Description}" />
			</smartForm:GroupElement>
			<smartForm:GroupElement>
				<smartField:SmartField value="{Price}" />
			</smartForm:GroupElement>
		</smartForm:Group>
		<smartForm:Group label="Supplier">
			<smartForm:GroupElement>
				<smartField:SmartField value="{SupplierName}" />
			</smartForm:GroupElement>
		</smartForm:Group>
	</smartForm:SmartForm>
</mvc:View>

 

 

      1) 'Product'용과 'Supplier'용의 'SmarForm' 컨테이너 가각 만든다.

        * 'GroupElement'를 사용해 SmartForm이 OData의 메타데이터를 검사하고,

           발견된 레이블을 자동으로 추가하도록 해준다. 

        * 'Product'용에는 동적 변수인 'ProductId'와 'Name', 'CategoryName', 'Description' 'Price' 등을 생성한다.

        * 'Supplier'용에는 공급자 이름인 'Supplier'Name'을 넣어준다.

      2) 'elementForLabel'을 '1'로 지정해 'SmartField'에 대한 'Description' 레이블이 두 필드 모두에 사용되도록 한다.

      3) 'flexEnabled'는 'false'로 설정해 SAPUI5 우연성을 비활성화 한다.

---

 

    - [ SmartForm.controllr.js ]

sap.ui.define([
	"sap/ui/core/mvc/Controller" 
], function(Controller) {
	"use strict";

	return Controller.extend("sap.ui.demo.smartControls.SmartForm", {
		onInit: function() {
			this.getView().byId("smartFormPage").bindElement("/Products('4711')");
		}
	});

});

---

 

    - [ metadata.xml ]

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0"
	xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
	xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
	xmlns:sap="http://www.sap.com/Protocols/SAPData">
	<edmx:DataServices m:DataServiceVersion="2.0">
		<Schema Namespace="com.sap.wt04" 
			sap:schema-version="1" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
			<EntityType Name="Product">
				<Key>
					<PropertyRef Name="ProductId" />
				</Key>
				<Property Name="ProductId" Type="Edm.String" Nullable="false"
					sap:updatable="false" MaxLength="20" sap:label="Product ID" />
				<Property Name="Name" Type="Edm.String" Nullable="false"
					MaxLength="30" sap:label="Name" />
				<Property Name="CategoryName" Type="Edm.String" sap:label="Category Description"
					sap:updatable="true" />
				<Property Name="Description" Type="Edm.String" MaxLength="256"
					sap:label="Description" sap:updatable="true" />
				<Property Name="Price" Type="Edm.String" Nullable="false"
					sap:unit="CurrencyCode" MaxLength="3" sap:label="Price"
					sap:updatable="true" />
				<Property Name="CurrencyCode" Type="Edm.String" Nullable="true"
					MaxLength="3" sap:label="Currency" sap:semantics="currency-code"
					sap:updatable="true" />
				<Property Name="SupplierName" Type="Edm.String" Nullable="false"
					sap:label="Supplier" sap:updatable="true" />
			</EntityType>
			<EntityContainer m:IsDefaultEntityContainer="true"
				sap:supported-formats="atom json">
				<EntitySet Name="Products" EntityType="com.sap.wt04.Product" />
			</EntityContainer>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

 

      1) 'Nullable'을 'false'로 설정해두면 해당 데이터 값이 null 값을 가질 수 없게 된다.

      2) null 값이 없는 필수 필드의 레이블은 UI에서 *로 표시된다.

---

 

    - [ Products.json ]

[{	
	"ProductId": "4711",
	"Name": "Power Projector 4711",
	"CategoryName": "Projector",
	"SupplierName": "Titanium",
	"Description": "A very powerful projector with special features for Internet usability, USB",
	"Price": 856.49,
	"CurrencyCode": "EUR"
}]

---

 

Next Stage : [ SAPUI5 ] Smart Filter Bar and Smart Table

[ SAPUI5 ] Smart Filter Bar and Smart Table

반응형