F4 Value Help 30초 만에 완성 #shorts #SAP #Fiori

Value Help가 뭔가요?

SAP Fiori에서 입력 필드 옆 아이콘을 클릭하면 팝업 검색창이 뜨는 기능이 Value Help(F4 Help)입니다. 사용자가 코드나 ID를 외울 필요 없이 검색해서 선택할 수 있어, UX를 크게 개선합니다.

UI5에서 ValueHelpDialog 연결하기

sap.m.Input에 showValueHelp: true를 설정하면 F4 아이콘이 자동으로 나타납니다. 클릭 시 valueHelpRequest 이벤트가 발생하므로 여기서 Dialog를 열면 됩니다.

// XML View
<Input showValueHelp="true"
       valueHelpRequest=".onValueHelpRequest" />

// Controller
onValueHelpRequest: function() {
  if (!this._oDialog) {
    Fragment.load({
      name: "myApp.view.ValueHelp",
      controller: this
    }).then(function(oDialog) {
      this._oDialog = oDialog;
      this.getView().addDependent(oDialog);
      oDialog.open();
    }.bind(this));
  } else {
    this._oDialog.open();
  }
},

onConfirm: function(oEvent) {
  var oItem = oEvent.getParameter("selectedItem");
  this.byId("supplierInput").setValue(oItem.getTitle());
  this._oDialog.destroy();
  this._oDialog = null;
}

SearchHelp와의 차이

ABAP에서는 SE11에서 Search Help(SHPM/SHPD)를 정의해 필드에 연결하지만, UI5 Fiori에서는 OData 서비스를 백엔드로 사용하는 ValueHelpDialog를 직접 구성합니다. 최신 Fiori Elements는 @Common.ValueList 어노테이션 하나로 자동 생성됩니다.

핵심 한 줄

showValueHelp="true" + valueHelpRequest 이벤트로 수동 dropdown 없이 깔끔한 F4 팝업을 만든다.