BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
...
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : Modal 형태로 간단한 입력폼(답변 등록/수정) 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 엑셀 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
Feedback Message
버튼 컴포넌트별 사용 가능한 메시지 형태와 설정 옵션은 아래와 같다.
액션 이후 메시지 : 액션 실행 후 성공/실패 메시지는 alert 형태로 고정되어 출력된다.
액션 이전 메시지 : 액션 실행 전 확인창은 popconfirm 혹은 modal 형태로 선택하여 사용 할 수 있다.
...
No
...
Component
...
Success
...
Error
...
Alert
PopConfirm
...
Modal
...
1
...
Link
...
X
...
X
...
X
...
O
...
2
...
Create
...
O
...
O
...
O
...
O
...
3
...
Delete
...
O
...
O
...
O
...
O
...
4
...
Save
...
O
...
O
...
O
...
O
...
5
...
Execute
...
O
...
O
...
O
...
O
...
6
...
Modal
...
O
...
O
...
O
...
X
...
7
...
Confirm
...
O
...
O
...
O
...
X
...
8
...
Excel(Download)
...
X
...
X
...
X
...
X
...
9
...
UploadExcel
...
X
...
X
...
X
...
X
...
10
...
Select
...
X
...
X
...
X
...
X
...
11
...
Download
...
X
...
X
...
X
...
X
| Status | ||||
|---|---|---|---|---|
|
...
Setting
...
Result
...
...
https://ant.design/components/popconfirm/
...
https://ant.design/components/alert/
...
https://ant.design/components/modal/
...
...
ButtonLink Type
링크 버튼은 특정 URL을 11가지 타입으로 URL 오픈 할 수 있다.
...
  |
|---|
...
Options_04. Icon, Hide Label/Border
...
아이콘을 선택하지 않고 Ghost Type을 선택 한 뒤, Hide Border를 ON으로 설정하면 텍스트 버튼이 된다.
Setting | Result |
 |  |
...
Options_05.
...
Enable Style
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다. Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.
Setting | Result |
Disable{ON}Enable Style | https://ionsdp.atlassian.net/browse/ICE4-1991Enable Style1981 |
Simple CSS로 값 설정, Code CSS 직접 작성, Common Code CSS 선택, 총 3가지 방법으로 설정 할 수 있다.
...
Options_06. Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
Setting | Result |
Disable{ON} |
...
Options_07. Feedback
버튼 컴포넌트별 사용 가능한 Feedback 메시지 형태와 설정 옵션은 아래와 같다.
액션 이후 메시지 : 액션 실행 후 성공/실패 메시지는 alert 형태로 고정되어 출력된다.
액션 이전 메시지 : 액션 실행 전 확인창은 popconfirm 혹은 modal 형태로 선택하여 사용 할 수 있다.
No | Component | Success | Error | Alert PopConfirm | Modal |
|---|---|---|---|---|---|
1 | Link | X | X | X | O |
2 | Create | O | O | O | O |
3 | Delete | O | O | O | O |
4 | Save | O | O | O | O |
5 | Execute | O | O | O | O |
6 | Modal | O | O | O | X |
7 | Confirm | O | O | O | X |
8 | Excel(Download) | X | X | X | X |
9 | UploadExcel | X | X | X | X |
10 | Select | X | X | X | X |
11 | Download | X | X | X | X |
| Status | ||||
|---|---|---|---|---|
|
Setting | Result |
 |  |
https://ant.design/components/popconfirm/
...
https://ant.design/components/alert/
...
https://ant.design/components/modal/
...