버튼 속성별 정리
버튼 속성별 정리
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 라이센스를 따릅니다.
