[UI5] Dialog Detail Page

Link

column에 링크를 걸어보자.

링크가 걸린 필드를 클릭하면 해당 필드의 값이 Dialog로 뜨게 해본다.

App.view.xml

    <table:Column width="11rem">
               <Label text="Product Id" />
                   <table:template>
                        <Link text="{product>ProductId}" press=".onDetailDialog"/>
                   </table:template>
          </table:Column>

링크는 Link모듈을 사용하면 된다. 링크를 걸 column안에 Label이었던 기존 모듈을 Link로 변경하고 이벤트 함수를 실행시킨다.

Dialog.fragment.xml

함수를 구현하기 전에 다이얼로그 창을 먼저 만들어준다.

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Dialog
        id="HelloDialog"
        title="Hello"
        contentWidth="50%"
        contentHeight="40%">
    <VBox>
        <Text text="{product>/detailData/ProductId}" />        
    </VBox>
    <beginButton>    <!-- 창닫기버튼 -->
        <Button
            text="OK"
            press=".onCloseDialog" />
        </beginButton>
    </Dialog>
</core:FragmentDefinition>

컨트롤러의 함수에서 Dialog를 사용해야 되서 id를 부여한다.

사용자가 Product Id에서 선택한 값을 띄워야 하기 때문에 VBox의 text에는 사용자가 선택한 Product Id가 들어간다.

App.controller.js

먼저 fragment를 사용하기 위해 경로와 매개변수에 fragment를 정의해준다.

      onDetailDialog : function (oEvent) {
              var oView = this.getView();
              var oModel = oView.getModel("product");
              var sSelectedPath = oEvent.getSource().getBindingContext("product").getPath();
              var oSelectedData = oModel.getProperty(sSelectedPath);
              oModel.setProperty("/detailData", oSelectedData);

            if(!this.byId("HelloDialog")) { 
                Fragment.load({ 
                    id: oView.getId(),
                    name: "product.view.HelloDialog",    
                    controller: this
                }).then(function (oDialog) {    
                    oView.addDependent(oDialog);     
                    oDialog.open();
                });
            } else {
                this.byId("HelloDialog").open(); 
            }
        }, 

모델에 접근하기전에 뷰에 먼저 접근을 해야한다.

oEvent.getSource()를 통해 Link 객체를 가져온다. getBindingContext 메소드를 사용하면 path가 있는 객체까지 한번에 진입이 가능해, 해당 row의 path를 가져온다. 배열데이터기 때문에 만약 3번째 row를 선택했다면 2번째 인덱스가 된다. "/ProductCollection/2"

getProperty로 데이터를 가져오는데 path가 담긴 sSelectedPath를 넣어주면 클릭한 데이터의 row를 가져온다.

원래는 ProductCollection에 detailData 프로포티가 없다. setProperty가 이 프로포티를 자동으로 만들어주고 getProperty로 가지고 온 객체를 여기에 객체 모양으로 넣어준다. 이 객체는 모델이 감싸고 있다.

setProperty
객체에 프로포티 추가는 가능하지만 프로포티의 값으로 객체를 다시 추가하는 2단계는 불가능하다.

recipient : {
        name : "Nion"
          }
 이런식으로 객체가 있다면,
 oModel.setProperty("recipient", {})
 oModel.setProperty("recipient/name", "Nion")
 이렇게 setProperty를 두번 해줘야 한다. 

        onCloseDialog : function () {
            this.byId("HelloDialog").close();
        }

창닫기 버튼을 눌렀을때 Dialog를 닫아준다.

---

Dialog detail

text를 클릭했을때 값이 아닌 detail 데이터들이 나오게 해본다.

Dialog.fragment.xml

text부분을 아래 로직으로 변경한다.

<Form> <!--Form은 모듈 하나만 허용-->
            <layout>
               <ResponsiveGridLayout 
                labelSpanXL="2" 
                labelSpanL="4" 
                labelSpanM="4" 
                labelSpanS="12" 
                columnsXL="2" 
                columnsL="2" 
                columnsM="2"/>
            </layout>
            <formContainers> <!--formContainers 모듈 여러개 허용-->
            <FormContainer>
               <formElements>
                  <FormElement>
                     <label>
                        <m:Label text="Product Name"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Name}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Product Id"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/ProductId}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Quantity"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Quantity}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Status"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Status}"/>
                     </fields>
                  </FormElement>
               </formElements>
            </FormContainer>
            <FormContainer>
               <formElements>
                  <FormElement>
                     <label>
                        <m:Label text="Price"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Price}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="SupplierName"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/SupplierName}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Category"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/Category}"/>
                     </fields>
                  </FormElement>
                  <FormElement>
                     <label>
                        <m:Label text="Delivery Date"/>
                     </label>
                     <fields>
                        <m:Text text="{detail>/DateOfSale}"/>
                     </fields>
                  </FormElement>
               </formElements>
            </FormContainer>
           </formContainers> 
         </Form>