[ SAPUI5 ] Flexible Column Layout App - Using Page Layout as a Detail Page

○ 데이터에 대한 상세 정보를 보여주는 화면 출력하기

    - ObjectPageLayout

      1) 앱이 비즈니스 객체와 관련된 정보를 쉽게 표시할 수 있도록 하는 레이아웃을 제공한다.

      2) 버전 1.52부터 컨트롤은 sap.f.DynamicPage에서 사용되는 것과 동일한 동적 헤더를 가질 수 있게 되었다.

      3) 이동 경로 네비게이션, 네비게이션 작업, 제목 영역을 탭 및 클릭하거나 사용 가능한 화살표 버튼 선택해

          머리글 확장 및 축소와 같은 SAP Fiori 기능의 가용성 확보할 수 있게 된다.

      4) sap.uxap.ObjectLayout은 정보를 구조화하는 섹션 및 하위 섹션에 래핑된 선택적 앵커 표시줄 및

          블록 콘텐츠를 사용해 보다 구조화된 페이지 콘텐츠 제공이 가능해진다.

---

    - [ manifest.json ]

...,
"sap.ui5": {
	"rootView": {
    	"viewName": "sap.ui.demo.fiori2.view.App",
        ...
    },
    "dependencies": {
    	"minUI5Version": "1.60.0.",
        "libs": {
        	"sap.ui.core": {},
                "sap.m": {},
                "sap.f": {},
                "sap.uxap": {}
        }
    },
    ...
}

---

    - [ Detail.view.xml ]

<mvc:View
		... >
        <ObjectPageLayout
        		...>
                <headerTitle>
                        <ObjectPageDynamicHeaderTiltle>
                        	<actions>
                                		<m:ToggoleButton
                                        		text="Edit"
                                        		type="Emphasized"/>
                                        	<m:Button
                                        		text="Delete"
                                        		type="Transparent"/>
                                        	<m:Button
                                        		text="Copy"
                                        		type="Transparent"/> 
                                        	<m:Button
                                        		icon="sap-icon://action"
                                        		type="Transparent"/> 
                                </actions>
                        </ObjectPageDynamicHeaderTiltle>
                </headerTitle>
        </ObjectPageLayout>
</mvc:View>

 

      1) 'ObjectPageLayout'의 'headerTitle'에서 'ObjectPageDynamicHeaderTitle'의 동적 헤더를 추가한다.

      2) 'Edit' 버튼은 'ToggleButton'으로 'Emphsized'로 강조해준다.

      3) 나머지 'Delete', 'Copy' 등의 버튼은 'Transparent'로 투명하게 표현해준다.

---

 

<headerContent>
		<m:FlexBox wrap="Wrap" fitContainer="true" alignItems="Stretch">
                <f:Avatar
                        displaySize="L"
                        displayShape="Square"
                        class="sapUITinyMarginedEnd">
                </f:Avatar>
                <m:VBox justifyContent="Center" class="sapUiSmallMarginedEnd">
                		<m:Label text="Main Category"/>
                </m:VBox>
                <m:VBox justifyContent="Center" class="sapUiSmallMarginedEnd">
                		<m:Label text="Main SubCategory"/>
                </m:VBox>
                <m:VBox justifyContent="Center" class="sapUiSmallMarginedEnd">
                		<m:Label text="Price"/>
                </m:VBox>
        </m:FlexBox>
</headerContent>

 

      4) sap.f.Avatar

        * 이미지, 이니셜 및 아이콘을 나타내는 다양한 표시 옵션이 있는 이미지 컨트롤이다.

        * 즉 해당 컨트롤을 사용하면 콘텐츠 모양 및 크기를 설정할 수 있게 된다.

      5) 사용할 'Avatar'는 'displaySize'를 'L'로 설정해두고 'displayShape는 'Square' 모양으로 만들어 둔다.

      6) 'Main Category'와 'Subcategory', 'Price'를 'VBox'로 생성한다.

---

<sections>
    <ObjectPageSection title="General Information">
        <subSections>
            <ObjectPageSubSection>
                <blocks>
                    <form:SimpleForm
                        maxContainerCols="2"
                        editable="false"
                        layout="ResponsiveGridLayout"
                        labelSpanL="12"
                        labelSpanM="12"
                        emptySpanL="0"
                        emptySpanM="0"
                        columnsL="1"
                        columnsM="1">
                        <form:content>
                            <m:Label text="Product ID"/>
                            <m:Label text="Description"/>
                            <m:Label text="Supplier"/>
                        </form:content>
                    </form:SimpleForm>
                </blocks>
            </ObjectPageSubSection>
        </subSections>
    </ObjectPageSection>

    <ObjectPageSection title="Suppliers">
        <subSections>
            <ObjectPageSubSection>
                <blocks>
                    <m:Table
                        id="suppliersTable"
                        items="{path : 'products>/ProductCollectionStats/Filters/1/values'}">
                        <m:columns>
                            <m:Column/>
                        </m:columns>
                        <m:items>
                            <m:ColumnListItem type="Navigation">
                                <m:cells>
                                    <m:ObjectIdentifier text="{products>text}"/>
                                </m:cells>
                            </m:ColumnListItem>
                        </m:items>
                    </m:Table>
                </blocks>
            </ObjectPageSubSection>
        </subSections>
    </ObjectPageSection>
</sections>

---

해당 데이터의 상세 정보를 알 수 있게 되었다.

반응형