작성일 | 2025.03.14 |
버전 | 1.0 |
1. 프로젝트 개요
•
상품 주문, 배송 상태, 재고 수량 등 다양한 상태를 한 눈에 확인 가능
•
JSON과 OData를 혼합 바인딩
•
차트 시각화, 재고 부족 알림, CRUD 처리, 검색 및 필터 기능 구현
•
SAP Launchpad 또는 로컬에서 실행 가능한 Fiori 스타일 UI
전체 구조
화면 영역 | View 파일 | 기능 | 바인딩 방식 |
주문 리스트 | OrderList.view.xml | 상태 그룹핑, 재고 표시, 검색 | JSON |
고객 관리 | CustomTable.view.xml | 고객 CRUD, OData 테이블 | OData |
판매 차트 | LineChart.view.xml | 라인 / 도넛 / 컬럼 차트 | JSON |
상품 팝업 | StockAlert.fragment.xml | Fragment 팝업 | JSON |
수정 팝업 | UpdateDialog.fragment.xml | Fragment + 양방향 바인딩 | JSON |
2. 주요 기능 구성 및 구현 기술
2.1 전체 구조 및 화면 전환
•
메인 View: Scutom.view.xml
•
IconTabBar 기반으로 4개의 기능 영역 구성
◦
주문 목록
◦
고객 테이블
◦
차트 통계
◦
주문별 차트
<IconTabFilter text="List | searchField | fommatter | Fragment" key="OrderList">
<mvc:XMLView viewName="sync6.scustom.view.OrderList"/>
</IconTabFilter>
XML
복사
3. 핵심 기능 상세 정리
3.1 주문 목록 관리
View: OrderList.view.xml
Model: order.json (JSONModel)
구현 기능
•
배송상태별 그룹핑
•
상태별 아이콘, 색상 표시
•
검색 필터
•
체크박스 기반 상태 필터링
•
재고 부족 상품 팝업 Fragment 표시
<ObjectStatus text="{order>status}" state="{= ${order>status} === '배송완료' ? 'Success' : 'Error' }"/>
XML
복사
검색 필드
<SearchField id="searchField" width="30%" placeholder="상품명을 검색하세요" search="onSearch"/>
XML
복사
재고 부족 팝업 (Fragment)
<Dialog id="stockAlertDialog" title="재고 부족 상품">
<List id="lowStockList" items="{filteredModel>/}">
<ObjectListItem title="{filteredModel>product}" intro="(주문번호: {filteredModel>orderId})" number="재고: {filteredModel>quantity} 개"/>
</List>
</Dialog>
XML
복사
3.2 고객 정보 CRUD
View: CustomTable.view.xml
Model: /sap/opu/odata/sap/ZSCUSTOM_MD25_SRV/ (OData V2)
입력 폼 구성
•
SimpleForm 양식 기반 좌우 2열 구성
•
고객 ID, 이름, 주소, 이메일 등 정보 입력 가능
•
Create, Delete, Update 버튼 지원
테이블 구성
•
바인딩된 엔터티셋: ZSCUSTOM_MD25Set
•
SAP OData 메타데이터 기반 15개 필드 출력
<Table id="table" items="{/ZSCUSTOM_MD25Set}" mode="SingleSelectLeft">
XML
복사
3.3 차트 시각화 (제품 판매 및 재고)
View: LineChart.view.xml
Model: JSONModel (order, chart, donutChart)
Line Chart: 제품별 월별 판매 수량
<viz:VizFrame id="idBarChart" vizType="line" data="{order>/order}">
<viz.data:DimensionDefinition name="product" value="{order>product}" />
<viz.data:MeasureDefinition name="quantity" value="{order>quantity}" />
</viz:VizFrame>
XML
복사
Donut Chart: 등급별 비율
<viz:FlattenedDataset data="{donutChart>/data}">
<DimensionDefinition name="category" value="{data>category}" />
<MeasureDefinition name="value" value="{data>value}" />
</viz:FlattenedDataset>
XML
복사
Column Chart: 제품별 재고 현황
<viz:VizFrame id="idBarChart2" vizType="column" data="{chart>/data}">
XML
복사
•
X축: 제품ID, 제품명
•
Y축: 재고 수량
•
하단에 전체 제품 수, 평균 재고량 표시
<Text text="총 제품 수: {chart>/stats/totalProducts}" />
<Text text="평균 재고량: {chart>/stats/averageStock}" />
XML
복사
4. 모델 구성 요약
order.json
{
"order": [
{
"orderId": 101,
"product": "노트북",
"quantity": 2,
"price": 1500000,
"status": "배송중"
},
...
]
}
JSON
복사
OData 메타데이터 주요 필드
•
엔티티셋: ZSCUSTOM_MD25Set
•
필드
◦
Id, Name, Street, Postbox, Country, Telephone, Custtype, Email, 등 총 15개
5. Formatter 기능 활용
OrderList.view.xml 내에서 다중 조건 기반 표현식과 formatter 함수 사용
<ObjectMarker type="{
parts: [
{path: 'order>quantity'},
{path: 'order>status'}
],
formatter: 'Formatter.getOrderMarker'
}"/>
XML
복사
•
배송 상태와 재고 수량을 종합해 아이콘으로 상태 표현
•
날짜 포맷, 통화 포맷도 Formatter로 처리 가능
프로젝트 셋팅 생성
1. 환경 설정
npm install ui5-middleware-simpleproxy --save-dev
Shell
복사
•
shell 에서 명령어 실행
•
package.json에 의존성 추가 확인
2. manifest.json
"northwindService": {
"uri": "/northwind/northwind.svc/",
"type": "OData",
"settings": {
"annotations": [],
"localUri": "localService/northwindService/metadata.xml",
"odataVersion": "2.0"
}
}
JSON
복사
•
manifest.json → dataSources에 내용 추가
"northwindModel": {
"dataSource": "northwindService",
"preload": true,
"settings": {}
},
JSON
복사
•
manifest.json → sap.ui5 → models에 내용 추가
3. RootView
<IconTabBar
id="idIconTabBarNoIcons"
class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="OrderList" key="OrderList">
</IconTabFilter>
<IconTabFilter text="Customer Table" key="CustomerTable">
<content>
</content>
</IconTabFilter>
<IconTabFilter text="Discount Chart" key="Discount Chart">
<content>
</content>
</IconTabFilter>
<IconTabFilter text="OrderChart" key="OrderChart">
</IconTabFilter>
</items>
</IconTabBar>
XML
복사
•
tab 생성
Customer Table
•
수업 실습과 동일하게 수정, 삭제, 업데이트 기능 추가 → 만든 ZCUTOM 테이블로 만들기
Discount Chart
•
Customer의 할인율 차트로 나타내기
◦
Dimension : Name
◦
Measure : Discount
Order Chart
•
https://services.odata.org/v2/northwind/northwind.svc/ 에 있는 Order_Details 엔티티 셋 사용하여 차트 그리기
◦
Dimension : OrderID
◦
Measure : Quantity
•
데이터 많아서 slice활용하기