포스트

버튼 속성별 정리

버튼 속성별 정리

Fiori 버튼 속성 정리 (이미지 순서 기준)

이미지에 제시된 버튼의 실제 배치 순서(생성 ➔ 복사 ➔ 세부사항 ➔ 취소 ➔ 건너뛰기 ➔ 재시작)에 맞추어 정리합니다.

관련 이미지

1. 생성 (Create)

  • 속성(Type): Emphasized
  • 특징: 화면에서 가장 중요한 주 액션(Primary Action)을 수행하며, 파란색 배경으로 강조됩니다.

SAPUI5 XML:

1
<Button text="생성" type="Emphasized" press="onCreate" />

RAP CDS Annotation:

1
{ type: #FOR_ACTION, dataAction: 'createObject', label: '생성', importance: #HIGH }

2. 복사 (Copy)

  • 속성(Type): Transparent (또는 Default)
  • 특징: 기본 보조 작업(Secondary Action)으로, 테두리나 배경이 강조되지 않는 형태입니다.

SAPUI5 XML:

1
<Button text="복사" type="Transparent" press="onCopy" />

RAP CDS Annotation:

1
{ type: #FOR_ACTION, dataAction: 'copyObject', label: '복사' }

3. 세부사항 (Details)

  • 속성(Type): Transparent (또는 Default)
  • 특징: 화면 전환이나 상세 정보 조회를 위한 일반적인 보조 버튼입니다.

SAPUI5 XML:

1
<Button text="세부사항" type="Transparent" press="onDetail" />

RAP CDS Annotation:

1
{ type: #FOR_ACTION, dataAction: 'showDetails', label: '세부사항' }

4. 취소 (Cancel)

  • 속성(Type): Negative
  • 특징: 파괴적이거나 주의가 필요한 작업(Delete/Cancel/Reject)에 사용되며, 빨간색 아이콘/배경으로 표현됩니다.

SAPUI5 XML:

1
<Button text="취소" type="Negative" icon="sap-icon://decline" press="onCancel" />

RAP CDS Annotation:

1
{ type: #FOR_ACTION, dataAction: 'cancelObject', label: '취소' }

5. 건너뛰기 (Skip)

  • 속성(Type): Transparent (또는 Neutral)
  • 특징: 현재 단계를 통과하거나 유예하는 보조 작업용 버튼입니다.

SAPUI5 XML:

1
<Button text="건너뛰기" type="Transparent" press="onSkip" />

RAP CDS Annotation:

1
{ type: #FOR_ACTION, dataAction: 'skipStep', label: '건너뛰기' }

6. 재시작 (Restart)

  • 속성(Type): Attention (또는 Critical)
  • 특징: 상태 재설정이나 주의를 요하는 실행 액션에 사용되며, 주황색/노란색 계열로 표시됩니다.

SAPUI5 XML:

1
<Button text="재시작" type="Attention" press="onRestart" />

RAP CDS Annotation:

1
{ type: #FOR_ACTION, dataAction: 'restartProcess', label: '재시작' }

통합 코드 예시

SAPUI5 XML View 전체 예시

1
2
3
4
5
6
7
8
9
<OverflowToolbar>
    <ToolbarSpacer />
    <Button text="생성" type="Emphasized" press="onCreate" />
    <Button text="복사" type="Transparent" press="onCopy" />
    <Button text="세부사항" type="Transparent" press="onDetail" />
    <Button text="취소" type="Negative" icon="sap-icon://decline" press="onCancel" />
    <Button text="건너뛰기" type="Transparent" press="onSkip" />
    <Button text="재시작" type="Attention" press="onRestart" />
</OverflowToolbar>

SAP RAP CDS Annotation 전체 예시

1
2
3
4
5
6
7
8
@UI.lineItem: [
  { type: #FOR_ACTION, dataAction: 'createObject', label: '생성', importance: #HIGH },
  { type: #FOR_ACTION, dataAction: 'copyObject', label: '복사' },
  { type: #FOR_ACTION, dataAction: 'showDetails', label: '세부사항' },
  { type: #FOR_ACTION, dataAction: 'cancelObject', label: '취소' },
  { type: #FOR_ACTION, dataAction: 'skipStep', label: '건너뛰기' },
  { type: #FOR_ACTION, dataAction: 'restartProcess', label: '재시작' }
]
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.