[ SAPUI5 ] Smart Field

○ mock data의 정보를 통화코드와 연결해 화면에 띄우기

    - [ SmartField.view.xml ]

<mvc:View
	controllerName="sap.demo.smartControls.SmartField"
        xmlns="sap.m"
        xmlns:smartForm="sap.ui.comp.smartform"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:sap.ui.layout"
        xmlns:smartField=sap.ui.comp.smartField">
        <smartForm:SmartForm editable="true">
            <smartForm:layout>
                <smartForm:ColumnLayout
                                emptyCellsLarge="4"
                                labelCellsLarge="4"
                                columnsM="1"
                                columnsL="1"
                                columns="1"/>
                </smartForm:Layout>
        </smartForm:SmartForm>
</mvc:View>

 

      1) SmartLabel의 메타 데이터가 SmartField의 바인딩을 통해 제어된다.

      2) 둘 간의 연결은 필수이다.

---

    - [ SmartFiled.controller.js ]

sap.ui.define([
		"sap/ui/core/Controller"
], function(Controller) {
		"use strict";
        
        return Controller.extend("sap.ui.demo.smartControls.SmartFiled", {
                onInit: function() {
                        this.getView().bindElement("Products('4711')");
                }
        }
});

 

      1) mockdata에 있는 [ Products.json ]에 입력해 놓은 데이터 정보를 확인한다.

      2) 'ProductId' '4711'을 바인딩해 view로 전달한다.

---

    - [ 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.wt01"
				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"/>
				<Property Name="Price" Type="Edm.String"
						  sap:unit="CurrencyCode" sap:label="Price"
						  Precision="13" Scale="6"
						  sap:updatable="true"/>
				<Property Name="CurrencyCode" Type="Edm.String"
						  MaxLength="3" sap:label="Currency" sap:semantics="currency-code"
						  sap:updatable="true"/>
			</EntityType>
			<EntityContainer m:IsDefaultEntityContainer="true"
							 sap:supported-formats="atom json">
				<EntitySet Name="Products" EntityType="com.sap.wt01.Product"
						   sap:updatable="true"/>
			</EntityContainer>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

      1) 'EntityType'의 'Name'을 'Product'로 지정한다.

      2) 'Key'로는 'PropertRef'의 'Name'을 'ProductId'로 설정해 이름을 통해 속성에 대해 참조한다.

      3) [ Products.json ]에 입력해두었던 mockdata 속성들에 대한 알맞은 타입을 설정해준다.

      4) 'updatable'을 'true'로 설정해주면 필드를 편집 가능하게 한다는 것을 의미한다.

        * 반대로 'false'로 설정하게 되면, 이는 필드를 읽기 전용으로 하겠다는 것이다.

        * 만약 아무런 설정 값을 선언해두지 않는다면 기본값은 'true'가 된다.

---

해당 상품에 대한 가격과 통화 코드가 나타난다!

---

Next Stage : [ SAPUI5 ] Smart Field with Value Help

[ SAPUI5 ] Smart Filed with Value Help

반응형