Fiori 필수 표시 — 90%가 Label required 빼먹는다 #shorts #SAP #Fiori

Moderator · 조회 3

이 글이 답하는 질문

  • Input에 required=true 줬는데 왜 별표(*)가 안 보일까?
  • Label과 Input 중 어디에 required를 걸어야 할까?
  • SmartForm에서는 왜 required를 직접 안 써도 될까?

Fiori 필수 표시 실수 3가지

1. Input에만 required="true" 걸기

가장 흔한 삽질. Input에만 required를 줘도 화면에는 별표가 안 찍힌다. UI5에서 빨간 * 렌더링은 sap.m.Label이 담당하기 때문. Input의 required는 시맨틱 의미만 가질 뿐 시각적 표시는 Label 책임이다.

<!-- 안 됨: 별표 안 보임 -->
<Label text="이름" labelFor="nameInput"/>
<Input id="nameInput" required="true"/>

<!-- 됨: Label에도 required -->
<Label text="이름" required="true" labelFor="nameInput"/>
<Input id="nameInput" required="true"/>

2. labelFor 연결 빼먹기

스크린리더가 Label과 Input을 못 묶는다. 접근성 검사(axe, Accessibility Checker)에서 바로 걸리는 항목. labelFor는 단순 옵션이 아니라 Fiori Accessibility 권장 사항이다.

<Label text="이메일" required="true" labelFor="emailInput"/>
<Input id="emailInput" required="true" type="Email"/>

3. SmartForm에서 수동 * 텍스트 추가

SmartForm/SmartField는 OData 메타데이터의 Nullable="false"를 읽어서 자동으로 별표를 붙인다. 여기에 라벨 텍스트로 "이름*"이라고 박으면 별표가 두 번 찍힌다. CDS 어노테이션이나 EDMX를 손보는 게 정석.

<!-- 잘못: 이중 별표 -->
<smartField:SmartLabel text="이름*"/>

<!-- 옳음: 메타데이터가 처리 -->
<smartField:SmartField value="{Name}"/>
<!-- EDMX: <Property Name="Name" Type="Edm.String" Nullable="false"/> -->

삽질 노트

  • required는 Label에서 시각적, Input에서 검증용 — 둘 다 걸기
  • SimpleForm/Form은 수동, SmartForm은 메타데이터 기반
  • 제출 시 빈 값 검증은 ValueState.Error로 별도 처리 필요 (required만으론 폼 차단 안 됨)
  • theme별로 별표 색·위치가 다르니 Horizon에서 확인

핵심 한 줄

별표는 Label이 그리고, 검증은 Input이 받고, SmartForm은 메타데이터가 알아서 한다.

더 파볼 주제

  • sap.ui.core.ValueState로 실시간 검증 UX 만들기
  • CDS @Common.FieldControl로 필수/읽기전용 동적 제어
  • MessageManager + MessagePopover로 폼 에러 모으기