Fiori 필수 표시 실수 3가지 #shorts #SAP #Fiori

Fiori 필수 입력 표시란?

사용자가 반드시 입력해야 하는 폼 필드에 빨간 별표(*)를 표시하는 기능입니다. UI5에서는 Label의 required 속성 하나로 즉시 적용할 수 있어 별도 CSS 작업이 필요 없습니다.

Label에 required 적용

가장 기본적인 방법입니다. Label에 required="true"를 추가하면 라벨 옆에 빨간 별표가 자동으로 렌더링됩니다.

<Label text="고객명" labelFor="custInput" required="true" />
<Input id="custInput" placeholder="고객명을 입력하세요" />

SimpleForm에서 여러 필드 처리

SimpleForm을 사용하면 다수의 필수 필드를 깔끔하게 관리할 수 있습니다. 각 Label마다 required를 설정합니다.

<form:SimpleForm editable="true">
  <Label text="이름" required="true" />
  <Input />
  <Label text="이메일" required="true" />
  <Input type="Email" />
  <Label text="비고" />
  <TextArea />
</form:SimpleForm>

시각 표시와 실제 검증은 별개

required="true"는 별표를 보여주는 시각적 역할만 합니다. 실제 미입력 방지는 컨트롤러에서 setValueState로 처리해야 합니다.

// 저장 버튼 핸들러
onSave: function () {
  var oInput = this.byId("custInput");
  if (!oInput.getValue()) {
    oInput.setValueState("Error");
    oInput.setValueStateText("필수 입력 항목입니다.");
    return;
  }
  // 저장 로직 진행
}

핵심 한 줄

Label에 required="true" 한 줄이면 Fiori 필수 입력 표시 완성 — 검증은 컨트롤러에서 별도 구현.