UI5

아직도 행마다 클릭? Fiori 일괄수정 3단계 #shorts #SAP #Fiori

이 글이 답하는 질문

  • Fiori List Report에서 여러 행을 한 번에 수정하려면?
  • Mass Edit Dialog를 열 때 입력 필드가 비어 있는 이유는?
  • OData $batch 요청을 올바르게 묶는 방법은?

직접 해보기

1. Table MultiSelect 활성화

<!-- view.xml -->
<Table id="massEditTable" mode="MultiSelect"
       selectionChange=".onSelectionChange">
  ...
</Table>

2. 선택 행 수에 따라 버튼 활성화

onSelectionChange: function(oEvent) {
  var nSelected = oEvent.getSource()
                        .getSelectedItems().length;
  this.byId("btnMassEdit").setEnabled(nSelected > 0);
}

3. Dialog afterOpen 후 모델 바인딩

// ❌ 잘못된 순서 — Dialog 열기 전에 bind하면 필드가 빔
oDialog.setModel(oEditModel, "massEdit");
oDialog.open();

// ✅ 올바른 순서 — 완전히 열린 뒤 bind
oDialog.open();
oDialog.attachEventOnce("afterOpen", function() {
  oDialog.setModel(oEditModel, "massEdit");
});

4. OData $batch 일괄 MERGE

var aItems = this.byId("massEditTable").getSelectedItems();
var aBatch  = aItems.map(function(oItem) {
  var sId = oItem.getBindingContext().getProperty("ID");
  return oModel.createBatchOperation(
    "/OrderSet( + sId + )", "MERGE",
    { Status: sNewStatus }
  );
});
oModel.addBatchChangeOperations(aBatch);
oModel.submitBatch(fnSuccess, fnError);

삽질 노트

  • mode="MultiSelect"만 켜면 헤더 체크박스가 없다 — growing="true"와 함께 쓸 때 growingScrollToLoad="true"도 함께 설정해야 전체 선택이 정확하게 동작한다.
  • $batch 요청 중 한 건이라도 실패하면 전체가 롤백되므로, 성공/실패 케이스를 aBatchResponse에서 파싱해 사용자에게 안내해야 한다.
  • Mass Edit Dialog를 fragment로 분리할 경우, fragment 로드 타이밍과 afterOpen 이벤트가 충돌하지 않도록 loadFragment Promise 체인 안에서 open()을 호출한다.

핵심 한 줄

Mass Edit = MultiSelect + afterOpen 바인딩 순서 + $batch — 이 셋이 맞아야 UX도 성능도 잡힌다.

더 파볼 주제

  • OData V4 Batch Requests (submitBatch 그룹 ID 활용)
  • sap.m.SelectDialog vs sap.m.Dialog 선택 기준
  • Flexible Column Layout에서 Mass Edit 적용 패턴

댓글 0

아직 댓글이 없습니다.