본문 바로가기

안녕하세요!

SAP/UI5

[ SAPUI5 ] Smart Filter Bar and Smart Table

PythonChoboman 2023. 3. 9. 13:55

○ enableAutoBinding을 사용해 controller가 아닌 view에서 데이터를 자동으로 바인딩 해보자.

    - [ SmartTable.view.xml ]

<mvc:View 
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="sap.ui.demo.smartControls.SmartTable"
	xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
	xmlns:smartTable="sap.ui.comp.smarttable">
	<smartFilterBar:SmartFilterBar 
		id="smartFilterBar"
		entitySet="Products">
		<smartFilterBar:controlConfiguration>
			<smartFilterBar:ControlConfiguration
				key="Category" visibleInAdvancedArea="true"
				preventInitialDataFetchInValueHelpDialog="false">
			</smartFilterBar:ControlConfiguration>
		</smartFilterBar:controlConfiguration>
	</smartFilterBar:SmartFilterBar>
	<smartTable:SmartTable 
		id="smartTable_ResponsiveTable"
		smartFilterId="smartFilterBar" 
		tableType="ResponsiveTable" 
		editable="false"
		entitySet="Products" 
		useVariantManagement="false"
		useTablePersonalisation="false" 
		header="Products" 
		showRowCount="true"
		useExportToExcel="false" 
		enableAutoBinding="true">
	</smartTable:SmartTable>
</mvc:View>

 

      1) 'smartFilterBar'에서 'ControlConfiguration' 컨트롤을 추가한다.

        * [ metadata.xml ]에 있는 데이터 값을 화면에서 보기 위해 설정한 ''entityType'을 참조하도록 한다.

        * 'ControlConfiguration' 요소를 사용해 필터가 표시돼 있는 표시줄에 'Category' 필드를 포함시킨다.

        * 필터 기능을 하는 바를 숨길 수 있는 도구를 사용해 숨기거나 표시할 수 있는 영역을 구현할 수 있다.

      2) 'SmartTable'의 설정 값을 환인해보자.

        * smartFilterId : 'smartFilterBar'로 정해 SmartTable이 FilterBar와 이에 정의된 필터 값이 사용가능한 지 확인한다.

        * tableType : 'ResponsiveTable'로 지정해 기본테이블을반응형으로 정의해 놓는다.

       * useVariantManagement : 'false' 값으로 설정한다.

       * useTablePersonalization : 'false' 값으로 설정한다.

        * header : 'Products'로 테이블의 제목을 지정한다.

        * showRowCount : 'true'로 지정해 제목 뒤에 제품 수가 표시되도록 한다.

        * useExportToExcel : 'false'로 설정한다.

                                            이는 Microsoft Excel로 내보내기를 제공하는 요소이다.

                                            현재 파트에서는 mock server에서 기능을 구현하므로 해당 요소의 형식을 지원하지 않는다.

                                            서버가 이를 지원하기 위해서는 sap:supported-formats="xlsx"가 포함된

                                            메타데이터 문서를 반환해야 한다.

        * enableAutoBinding : 'true' 값으로 설정한다.

                                              이는 쿼리가 처음에 자동으로 실행되는지 여부를 정의하므로

                                              'false'로 설정하면 사용자가 테이블에서 결과를 보기 위해 Go를 눌러야 하게 된다.

 

    - [ SmartTable.controller.js ]

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";
	return Controller.extend("sap.ui.demo.smartControls.SmartTable");
});

 

      1) view에서 'enableAutoBinding'을 'true'로 반환했기 때문에 controller에서 바인딩할 필요가 없다.

      2) 이는 코드의 간편화에 기여한다고 볼 수 있다!

 

    - [ 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.wt05" 
			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"
					sap:filterable="false" />
				<Property Name="Name" Type="Edm.String" MaxLength="30"
					sap:label="Name" sap:filterable="false" />
				<Property Name="Category" Type="Edm.String" sap:label="Category"
					sap:filterable="true" />
				<Property Name="Price" Type="Edm.String" sap:unit="CurrencyCode"
					MaxLength="3" sap:label="Price" sap:filterable="false" />
				<Property Name="CurrencyCode" Type="Edm.String" MaxLength="3"
					sap:label="Currency" sap:semantics="currency-code" sap:filterable="true" />
			</EntityType>
			<EntityType Name="Currency">
				<Key>
					<PropertyRef Name="CURR" />
				</Key>
				<Property Name="CURR" Type="Edm.String" MaxLength="4"
					sap:display-format="UpperCase" sap:text="DESCR" sap:label="Currency Code"
					sap:filterable="false" />
				<Property Name="DESCR" Type="Edm.String" MaxLength="25"
					sap:label="Description" />
			</EntityType>
			<EntityType Name="Category">
				<Key>
					<PropertyRef Name="CAT" />
				</Key>
				<Property Name="CAT" Type="Edm.String" MaxLength="4"
					sap:display-format="UpperCase" sap:text="DESCR" sap:label="Category"
					sap:filterable="false" />
				<Property Name="DESCR" Type="Edm.String" MaxLength="25"
					sap:label="Description" />
			</EntityType>
			<EntityContainer m:IsDefaultEntityContainer="true"
				sap:supported-formats="atom json">
				<EntitySet Name="Products" EntityType="com.sap.wt05.Product" />
				<EntitySet Name="Currency" EntityType="com.sap.wt05.Currency" />
				<EntitySet Name="Category" EntityType="com.sap.wt05.Category" />
			</EntityContainer>
			<Annotations Target="com.sap.wt05.Product/CurrencyCode"
				xmlns="http://docs.oasis-open.org/odata/ns/edm">
				<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
					<Record>
						<PropertyValue Property="Label" String="Currency" />
						<PropertyValue Property="CollectionPath" String="Currency" />
						<PropertyValue Property="SearchSupported" Bool="true" />
						<PropertyValue Property="Parameters">
							<Collection>
								<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterOut">
									<PropertyValue Property="LocalDataProperty"
										PropertyPath="CurrencyCode" />
									<PropertyValue Property="ValueListProperty"
										String="CURR" />
								</Record>
								<Record
									Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
									<PropertyValue Property="ValueListProperty"
										String="DESCR" />
								</Record>
							</Collection>
						</PropertyValue>
					</Record>
				</Annotation>
			</Annotations>
			<Annotations Target="com.sap.wt05.Product/Category"
				xmlns="http://docs.oasis-open.org/odata/ns/edm">
				<Annotation Term="com.sap.vocabularies.Common.v1.ValueList">
					<Record>
						<PropertyValue Property="Label" String="Category" />
						<PropertyValue Property="CollectionPath" String="Category" />
						<PropertyValue Property="SearchSupported" Bool="true" />
						<PropertyValue Property="Parameters">
							<Collection>
								<Record Type="com.sap.vocabularies.Common.v1.ValueListParameterOut">
									<PropertyValue Property="LocalDataProperty"
										PropertyPath="Category" />
									<PropertyValue Property="ValueListProperty"
										String="CAT" />
								</Record>
								<Record
									Type="com.sap.vocabularies.Common.v1.ValueListParameterDisplayOnly">
									<PropertyValue Property="ValueListProperty"
										String="DESCR" />
								</Record>
							</Collection>
						</PropertyValue>
					</Record>
				</Annotation>
			</Annotations>
			<Annotations Target="com.sap.wt05.Product"
				xmlns="http://docs.oasis-open.org/odata/ns/edm">
				<Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
					<Collection>
						<Record Type="com.sap.vocabularies.UI.v1.DataField">
							<PropertyValue Property="Value" Path="ProductId" />
						</Record>
						<Record Type="com.sap.vocabularies.UI.v1.DataField">
							<PropertyValue Property="Value" Path="Price" />
						</Record>
						<Record Type="com.sap.vocabularies.UI.v1.DataField">
							<PropertyValue Property="Value" Path="Name" />
						</Record>
						<Record Type="com.sap.vocabularies.UI.v1.DataField">
							<PropertyValue Property="Value" Path="Category" />
						</Record>
					</Collection>
				</Annotation>
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

 

      1) 'Annotation' 중에 'LineItem'은 테이블에 생성되는열을 정의한다.

        * 이 어노테이션에 정의된레코드만 테이블 열로 생성된다.

      2) 'Annotation' 'ValueList'는 연결된 필드에 대해 생성할 값에 대한 도움말을 실행시킨다.

      3) 'EntityType' 'Name'을 'Currency'로 설정한다.

        * 'description' 필드만 검색 필드로 표시되도록 한다.

        * 'CurrencyCode' 필드는 표시되지 않게 필터링되도록 'description'만 정의한다.

 

    - [ Category.json ]

[{
	"CAT": "PRO",
	"DESCR": "Projector"
},
{	
	"CAT": "GCD",
	"DESCR": "Graphics Card"
},
{
	"CAT": "ACC",
	"DESCR": "Accessory"
},
{
	"CAT": "PRI",
	"DESCR": "Printer"
},
{
	"CAT": "MON",
	"DESCR": "Monitor"
},
{
	"CAT": "LAP",
	"DESCR": "Laptop"
},
{
	"CAT": "KBD",
	"DESCR": "Keyboard"
}]

 

    - [ Currency.json ]

[{
	"CURR": "EUR",
	"DESCR": "European Euro"
},
{
	"CURR": "USD",
	"DESCR": "United States Dollar"
},
{
	"CURR": "GBP",
	"DESCR": "British Pound"
},
{
	"CURR": "DKK",
	"DESCR": "Danish Krone"
},
{
	"CURR": "INR",
	"DESCR": "Indian Rupee"
},
{
	"CURR": "NOK",
	"DESCR": "Norwegian Krone"
},
{
	"CURR": "SEK",
	"DESCR": "Swedish Krona"
},
{
	"CURR": "CHF",
	"DESCR": "Swiss Franc"
}]

 

    - [ Products.json ]

[
  {
	"ProductId": "1239102",
	"Name": "Power Projector 4713",
	"Category": "Projector",
	"SupplierName": "Titanium",
	"Description": "A very powerful projector with special features for Internet usability, USB",
	"WeightMeasure": 1467,
	"WeightUnit": "g",
	"Price": 856.49,
	"CurrencyCode": "INR",
	"Status": "Available",
	"Quantity": 3,
	"UoM": "PC",
	"Width": 51,
	"Depth": 42,
	"Height": 18,
	"DimUnit": "cm"
  },
.
.
.
]

Next Stage : [ SAPUI5 ] Table Personalization
 

[ SAPUI5 ] Table Personalization

○ 데이터의 정보를 자신이 원하는 정렬 방식대로 필터링 해보자. - Table Personalization 1) 테이블에서 표시되는 열과 순서, 데이터 정렬 방법, 데이터 그룹화 활성화 여부 2) 그리고 테이블 항목의

pythonchoboman.tistory.com

반응형

 

728x90
반응형
저작자표시 비영리 변경금지

'SAP > UI5' 카테고리의 다른 글

[ SAPUI5 ] View Management  (4) 2023.03.10
[ SAPUI5 ] Table Personalization  (16) 2023.03.09
[ SAPUI5 ] Smart Form  (10) 2023.03.09
[ SAPUI5 ] Smart Field with Smart Link  (4) 2023.03.09

'SAP/UI5' Related Articles

loading

티스토리툴바