favicon: https://static-files.umso.co/lib_DmHvtrBlUMtUhGvc/37nmgy0j64hj4pov.png
title: 파트너센터 로그인
subtitle: 입점한 셀러분들만 이용할 수 있어요.
width: 600
buttons:
- label: 도움말
href: https://docs.selectfromuser.com
target: _blank
- label: 입점하기
href: https://docs.selectfromuser.com
target: _blank
footer: |
© 2023 selectfromuser Inc.
주식회사 셀렉트프롬유저 | 서울시 송파구 법원로 128, B동 1408호 (문정동, 문정역SKV1)
사업자등록번호 386-88-02410 | 통신판매신고 제2023-서울송파-0491호
```
### layout.head
셀렉트 어드민 `` 태그에 필요한 스크립트(script)를 임베드할 수 있습니다. 구글 애널리틱스(Google Analytics)나 앰플리튜드(Amplitude) 등 분석 서비스의 스크립트를 활용해보세요.
**구글 애널리틱스(Google Analytics, GA) 예제**
GA 태그
```html
```
셀렉트 임베드 방법
```yaml
layout:
head:
- tag: script
async: true
src: https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX
- tag: script
innerHTML: |
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
```
### layout.hideLeftMenu
상단 메뉴만 유지하고 싶을때 해당 옵션을 적용해주세요. `menus.type: nav`와 함께 사용시 유용합니다.
```yaml
layout:
hideLeftMenu: true
```
# `menus: []`
어드민 사용자 페이지의 메뉴를 설정할 수 있습니다.
## menus.path
메뉴에 접근하는 경로입니다. 링크를 공유했을 때 사용자가 이해하기 쉬운 네이밍을 한다면 좋습니다.
## menus.name
메뉴에 표시되는 이름입니다.
```yaml
menus:
- path: user
name: 사용자
```
## menus.group
group이 없는 경우 모든 메뉴는 같은 그룹으로 인식됩니다. 메뉴들을 따로 묶고 싶으신 경우 group을 이용해주세요.
```yaml
menus:
- path: user
name: 사용자
group: u
- path: user/active
name: 활성 유저
group: u
```
## menus.placement
메뉴는 기본적으로 왼쪽 영역과 오른쪽 탭에 둘다 나타납니다. 왼쪽 또는 탭에만 메뉴를 보여주고 싶은 경우 placement를 이용해보세요.
```yaml
placement: menu-only
placement: tab-only
placement: expand-only
placement: page-only # 탭메뉴 표시 안함
```
```yaml
menus:
- path: user
name: 사용자
group: u
- path: user/active
name: 활성 유저
group: u
placement: tab-only
```
## menus.redirect
메뉴 클릭 시 redirect 시킬 path 또는 링크를 지정합니다.
```yaml
menus:
- path: user
name: 사용자
group: u
redirect: user/all
placement: menu-only
- path: user/all
name: 전체 사용자
group: u
placement: tab-only
- path: user/active
name: 활성 유저
group: u
placement: tab-only
```
## menus.roles
메뉴와 페이지 접근에 대한 권한을 설정합니다. 그룹별 또는 개별 이메일로 설정 가능합니다.
자세한 사항은 ['메뉴 권한 설정'](https://docs.selectfromuser.com/docs/%EB%A9%94%EB%89%B4-%EA%B6%8C%ED%95%9C-%EC%84%A4%EC%A0%95) 가이드에서 확인하실 수 있어요.
```yaml
menus:
- path: /approvals
name: 심사
roles:
list:
- 팀장
- 임원
view:
- 팀장
- 임원
- email::test@email.com
```
| list (메뉴에 보이기) | view (페이지 접근) | 용도/결과 |
| :------------- | :------------ | :-------------------------- |
| O | O | 해당 메뉴와 페이지에 접근 권한 있음 (일반적) |
| X | X | 해당 메뉴와 페이지에 권한 없음 (일반적) |
| O | X | 권한은 없지만 메뉴의 존재 자체는 알 수 있음 |
| X | O | URL만으로 비공개 페이지 공유 또는 테스트할 때 |
## menus.type: divider
메뉴 사이에 시각적으로 영역을 구분짓고 싶을 때 사용할 수 있습니다.
```yaml
menus:
- path: user
name: 사용자
group: u
- type: divider
- path: payment
name: 결제
group: p
```
## menus.type: search
메뉴들 사이에 퀵서치Quick Search 용도로 검색창을 넣을 수 있습니다.
- `redirect`로 path를 지정하여 이동합니다.
- 검색 시 입력값은 trim(공백제거) 처리합니다.
- `label`로 검색 버튼 이름을 바꿔보세요.
- 검색창에 입력한 값은 `value`로 전달됩니다.
```yaml
menus:
- type: search
label: 검색
placeholder: 고객이름
redirect: search-user?name={{value}}
- type: search
label: 찾기
placeholder: 010-0000-0000
redirect: search-user?phone={{value}}
- path: search-user
```
### placement: top
검색창을 최상단 메뉴바 영역에도 보이게 하고, 간단한 스타일도 적용할 수 있습니다.
```yaml YAML
menus:
- type: search
label: 검색
placeholder: 010-0000-0000
redirect: search-user?phone={{value}}
placement: top
style:
width: 500px
```
### datalistFromQuery
검색창 안에 보여줄 특정 데이터들을 datalistFromQuery로 가져올 수 있습니다.
- 가져온 데이터 필드들을 `format`으로 치환해서 보여줍니다.
- `html: true`를 사용하면 format 안에 html 양식을 사용할 수 있습니다.
- redirect가 String이 아니라 Object인 경우 결과값의 category와 일치하는쪽으로 가져와서 redirect 합니다.
```yaml
menus:
- type: search
placement: top
placeholder: 상품코드/재고코드/공급코드
style:
width: 300px
datalistFromQuery:
resource: mysql.qa
type: query
sqlType: select
sql: >
(
SELECT id, name, 'properties' AS category
FROM properties
WHERE id LIKE CONCAT('%', :value, '%')
OR (LENGTH(:value) > 2 AND name LIKE CONCAT('%', :value, '%'))
ORDER BY id DESC
LIMIT 10
)
UNION ALL
(
SELECT id, name AS name2, 'properties2' AS category
FROM properties2
WHERE id LIKE CONCAT('%', :value, '%')
OR (LENGTH(:value) > 2 AND name LIKE CONCAT('%', :value, '%'))
ORDER BY id DESC
LIMIT 10
)
format: >
ID: {{ id}} Name: {{name}}{{ name2 }} ({{category}})
# html: true
# format: >
# ID: {{ id}}
# {{name}}{{ name2 }}
# ({{category}})
# redirect: search-user-id?p={{category}}&user_id={{id}}
redirect:
properties: search-user-id?p={{category}}&user_id={{id}}
properties2: >
search-user-id?p={{category}}&cc_id={{id}}#{{hero_image_url}}
```
## menus.type: nav
`placement: top`과 함께 사용하여 메뉴를 최상단 내비게이션으로 이용할 수 있고, 하위 menus를 추가할 수도 있습니다.
```yaml
menus:
- name: 시약관리
type: nav
placement: top
menus:
- path: pages/search
name: 시약검색
placement: top
- path: pages/codes
name: 코드관리
placement: top
- path: pages/qc
name: 품질관리
placement: top
```
## menus.icon
메뉴 이름(name) 앞에 U, NEW, TIP 같은 내용이나 약어를 텍스트로 추가하거나 mdi 아이콘을 추가할 수 있어요.
- 지원하는 아이콘: https://pictogrammers.github.io/@mdi/font/7.2.96/
- 필요한 아이콘을 찾기 쉬운 사이트: https://pictogrammers.com/library/mdi/
```yaml
menus:
- path: user
icon: U
name: 사용자
- path: payment
icon: mdi-cash
name: 결제관리
```
## menus.iconEnd
메뉴 이름(name) 뒤쪽에 텍스트를 추가하거나 mdi 아이콘을 추가할 수 있어요. icon과 함께 사용할 수도 있습니다.
```yaml
menus:
- path: payment
iconEnd: mdi-cash
name: 결제관리
```
## menus.menus
메뉴 아래에 메뉴를 추가하고 접고 펼 수 있습니다.
```yaml
menus:
- path: user
name: 사용자 관리
placement: expand-only
menus:
- path: active-user
name: 활성 사용자
```
## menus.badgeOptions
메뉴에 쿼리 결과의 카운트 숫자를 배지 형태로 표기할 수 있어요.
지원 색상은 아래와 같습니다. [Customizing Colors - Tailwind CSS](https://tailwindcss.com/docs/customizing-colors)
- slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
```yaml
menus:
- path: orders/pending
name: 상품 준비중 관리
badgeOptions:
enabled: true
type: query
resource: mysql.qa
sql: >
SELECT COUNT(id) FROM ProductOrder
postfix: 건
color: green
```
# `pages: []`
페이지들을 구성하기 위한 최상위 키
## pages.path
개별 페이지와 메뉴를 path 정보로 연결합니다.
```yaml
menus:
- path: user
- path: payment
pages:
- path: user
- path: payment
```
## pages.blocks
페이지 안을 블록으로 구성합니다.
```yaml
menus:
- path: user
pages:
- path: user
blocks:
```
## pages.autofocus
페이지 단위로 입력 필드의 autofocus 기능을 끌 수 있습니다.
```yaml
pages:
- path: user
autofocus: false
```
## pages.layout
페이지 단위로 layout style을 설정하고, 블록을 어떤곳에 넣을지 지정합니다.
layout `name: page1`에 blocks `layout: page1` 블록이 들어갑니다.
지정된 블록(type: `top | left | center | right | bottom`)보다 레이아웃을 더 자유롭게 설정할 수 있습니다.
```yaml
pages:
- path: property-detail
layout:
style:
# max-width: 1400px
margin: 0px auto
display: flex
flex-wrap: wrap
div:
- name: page1
style:
width: 100%
- name: page2-1
style:
width: 50%
padding-right: 20px
- name: page2-2
style:
width: 50%
- name: page3
style:
width: 100%
blocks:
- layout: page1
type: markdown
- layout: page2-1
type: markdown
- layout: page2-2
type: markdown
- layout: page3
type: markdown
```
## pages.layout: dashboard
특정 페이지를 `layout: dashboard`로 설정하면 대시보드 레이아웃이 적용됩니다.
```yaml
pages:
- path: sample/layout/dashboard
layout: dashboard
blocks:
- type: markdown
content: |
layout dashboard 1
- type: markdown
content: |
layout dashboard 2
- type: markdown
content: |
layout dashboard 3
```
## pages.roles
- menus와 마찬가지로 roles를 적용할 수 있습니다.
- menus.roles와 pages.roles가 이중 레이어로 적용됩니다. (어느 한쪽으로 우선적용되지 않습니다.)
```yaml
pages:
- path: pages/Ze1f_b
roles:
list:
- email::test@selectfromuser.com
view:
- email::test@selectfromuser.com
```
메뉴를 노출하지 않으면서 메뉴단위로 roles를 지정하고 싶다면 `placement: page-only`와 `menus.roles`를 사용할 수 있습니다.
```yaml
menus:
- path: pages/Ze1f_b
placement: page-only
roles:
list:
- email::test@selectfromuser.com
view:
- email::test@selectfromuser.com
pages:
- path: pages/Ze1f_b
```
# `blocks: []`
페이지 안은 블록들로 이루어져 있습니다. 1개 또는 여러개를 추가할 수 있으며, 블록의 종류는 query, http, markdown 이 있습니다.
```yaml
blocks:
- type: query
- type: http
- type: markdown
```
## blocks.type
```yaml
blocks:
- type: query
name: 샘플 쿼리
resource: sample.db
sqlType: select # update, insert
- type: http
name: 샘플 http
axios: GET
- type: markdown
content: type anything
```
### type: query
SQL 쿼리의 select, update, insert를 모두 사용할 수 있습니다.
```yaml
sqlType: select
sqlType: update
sqlType: insert
```
```yaml
- type: query
resource: sample.db
sqlType: select
sql: SELECT * FROM user LIMIT 10
```
```yaml
- type: query
resource: sample.db
sqlType: update
sql: UPDATE user SET status = :status WHERE id = :id AND email = :email
params:
- key: status
- key: id
- key: email
```
#### sqlConfirm
실행될 쿼리를 확인하고 진행합니다. (update, delete 경우에 활용)
```yaml
- type: query
resource: sample.db
sqlType: select
sql: UPDATE user SET status = :status WHERE id = :id AND email = :email
sqlConfirm: true
params:
- key: status
- key: id
- key: email
```
#### confirm: false
쿼리 실행시 나타나는 확인(confirm)창을 끄고 싶은 경우 이용해주세요.
```yaml
- type: query
resource: mysql.qa
sqlType: insert
sql: INSERT INTO properties SET created_at = NOW(), name = :name
params:
- key: name
confirm: false
```
#### toast, toastOptions
블록 실행 시 알림창(toast)을 띄울 수 있습니다.
- `toast`: 알림창 안 내용을 입력합니다.
- `toastOptions`
- `type`: 알림창(toast)의 타입을 설정합니다.
- `position`: 알림창 위치를 설정합니다.
- `duration`: 알림창이 떠있는 시간을 설정합니다. (단위: ms)
```yaml
- type: query
resource: sample.db
sqlType: select
sql: UPDATE user SET status = :status WHERE id = :id AND email = :email
sqlConfirm: true
params:
- key: status
- key: id
- key: email
toast: 상태를 변경했습니다.
toastOptions:
type: success
# success, error, warning, info
position: top-right
# top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
duration: 3000
```
쿼리 실행후 toast를 통해 응답 정보를 표기할 수도 있습니다. 데이터베이스 결과값에 따라 맞춰 활용 가능합니다.
```yaml
- type: query
resource: mysql.qa
sqlType: insert
sql: >
INSERT INTO stock_wine
SET code = :code
params:
- key: code
confirm: false
toast: |
완료
affectedRows: {{affectedRows}}
insertId: {{insertId}}
``` **MySQL 응답 예제:** ```json { "fieldCount": 0, "affectedRows": 1, "insertId": 1949, "info": "", "serverStatus": 2, "warningStatus": 0 } ``` ### type: http REST API와 GraphQL API 모두 사용 가능합니다. axios 용법을 그대로 따릅니다. axios에 대한 자세한 설명은 여기서 확인해보세요. #### method: GET ```yaml - type: http axios: method: GET url: https://testapi.com/v1/33iac2d rowsPath: rows ``` #### method: POST ```yaml - type: http axios: method: POST url: https://testapi.com/v1/33iac2d data: 'user_id': user-{{id}} 'v': "{{API_VERSION}}" params: - key: id - key: API_VERSION valueFromEnv: true ``` #### graphQL ```yaml - type: http name: http 샘플 axios: method: POST url: https://testapi.com/v1/33iac2d data: query: > { getUser(id: "test") { id name email } } ``` ### type: markdown 마크다운 용법에 맞춰서 내용을 작성할 수 있습니다. 페이지에 대한 설명이나 유의사항 등을 작성해보세요. ```yaml - type: markdown content: > write something ``` ### type: `top | left | center | right | bottom` 페이지 안에 영역을 구분하는 타입입니다. 해당 타입을 입력하고 아래에 쿼리, API, 마크다운 블록을 추가할 수 있습니다. 간단한 레이아웃(layout)을 빠르게 구성할 수 있어요. ```yaml blocks: - type: top # left, center, right, bottom title: title subtitle: subtitle blocks: - type: markdown - type: query ``` **예제** ```yaml pages: - path: company-layouts blocks: - type: top title: title blocks: - type: markdown content: > > TOP - type: left title: title subtitle: subtitle blocks: - type: markdown content: > > LEFT - type: center style: width: 50% height: 80vh maxHeight: calc(100vh - 300px) overflow: scroll blocks: - type: markdown content: > > CENTER - type: query title: 내역은 최근 30일 subtitle: 내역은 최근 30일 description: 영수증 목록 resource: mysql.qa sql: SELECT * FROM test_10k LIMIT 300 sqlType: select - type: right blocks: - type: markdown content: > > RIGHT - type: bottom blocks: - type: markdown content: > > BOTTOM ``` ### type: header 사이트 이동 경로(breadcrumb)을 페이지 최상단에 표시할 수 있습니다. items 아래 순서대로 표기됩니다. 아이콘`icon`은 아래 방식들로 지원합니다. - 지원하는 아이콘:${row.address}
`{{field_name}}`
```yaml
sql: SELECT user_id, product_name FROM orders LIMIT 10
columns:
이동:
buttons:
- label: 주문
openUrl: orders?user_id={{user_id}}
# openUrl: https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query={{product_name}}
# target: _self # 기본은 새창
```
### buttons.openPage
버튼을 눌렀을 때 (셀렉트 내부) 특정 페이지로 이동합니다.
**openUrl과 차이점**
- 셀렉트 앱(어드민) 안에서의 이동이기 때문에 전체 새로고침이 되지 않습니다.
- URL에 값을 넣어줍니다.
```yaml
sql: SELECT id, name, created_at FROM companies LIMIT 100
columns:
name:
buttons:
- label: 회사 상세
openPage: company/{{id}}
```
### buttons.openPopper
openPopper는 특정 버튼 클릭 시 팝업 레이어(Popper)를 열어 사용자가 추가 작업을 수행하거나 데이터를 확인할 수 있도록 하는 기능입니다. modals와 유사하지만, 더 가볍고 위치 설정이 유연합니다.
- `openPopper`: button 클릭시 Popper를 엽니다.
- `popperOptions`: Popper의 위치 및 간격 조정
- placement: right (Popper 우측)
- distance, skidding: 간격 조절가능
- `popperStyle`: Popper의 크기와 스타일을 정의
- width, height: Popper의 크기
- overflow: 내용이 넘칠 때 스크롤 설정 (auto, scroll)
- padding: Popper 내부 여백
```yaml
columns:
vintage:
buttons:
- label: 빈티지 조회
openPopper: true
popperOptions:
placement: right
popperStyle:
width: 500px
height: 400px
overflow: auto
padding: 20px
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: SELECT DISTINCT vintage FROM wine_stock WHERE id = :id
params:
- key: id
valueFromRow: true
columns:
vintage:
copy: true
showDownload: false
```
### buttons.visible
컬럼 필드의 값에 따라 버튼이 보이거나 보이지 않게 설정할 수 있습니다.
```yaml
menus:
- path: pages/columns-buttons-visible
name: columns
pages:
- path: pages/columns-buttons-visible
blocks:
- type: query
resource: mysql
sqlType: select
sql: >
SELECT 1 AS field, 2 AS field2
columns:
field:
label: field label
buttons:
- label: button label
visible: "{{ row.field == '1' }}"
field2:
label: field2 label
buttons:
- label: button2 label
visible: "{{ row.field !== '1' }}"
```
## columns.updateOptions
한번에 여러 필드를 수정하지 않고, 낱개로 처리할 수 있습니다.
```yaml
columns:
status:
updateOptions:
type: query
resource: mysql.qa
sql: UPDATE test_list SET status = :value WHERE id = :id
confirm: true
```
### confirm: true
쿼리 또는 API 블록을 실행할 때, 한번 더 확인할 수 있게 합니다.
### dropdown 적용
```yaml
columns:
status:
dropdown:
- pending
- confirm
- closed
updateOptions:
type: query
resource: mysql.qa
sql: UPDATE test_list SET name = :value WHERE id = :id
confirm: true
```
### format.checkbox 적용
```yaml
columns:
is_used:
format: checkbox
trueValue: 1
falseValue: 0
updateOptions:
type: query
resource: mysql.qa
sql: UPDATE images SET is_used = :value WHERE id = :id
```
### showActionGroup
columns.updateOptions안에 action 버튼을 보여주고 실행할 수 있습니다.
- `columns.showActionGroup`과 `actions.group`의 값으로 연결됩니다.
- `actions.visible`로 필드 값과 조건에 따라 action 버튼을 보여주거나 가릴 수 있습니다.
```yaml
sql: |
SELECT id, booking_status, canceled_at
FROM classBooking
LIMIT 100
columns:
booking_status:
updateOptions:
showActionGroup: bookingStatus
actions:
- label: 예약복구
single: true
placement: bottom right
button:
type: default
confirm: 예약을 정말 복구하시겠습니까?
type: query
resource: mysql
sql: >
UPDATE classBooking
SET booking_status = 'restored', canceled_at = NULL
WHERE id = :id
params:
- key: id
valueFromRow: id
reloadAfterSubmit: true
group: bookingStatus
visible: "{{ row.booking_status == 'canceled' }}"
```
### format: toggle
조회한 테이블의 특정 컬럼 값을 수정할때 toggle UI를 적용할 수 있습니다.
```yaml
columns:
status:
label: 상태
updateOptions:
type: query
resource: mysql.qa
sqlType: update
sql: >
UPDATE properties SET status = :value WHERE id = :id
params:
- key: id
valueFromRow: id
confirm: true
format: toggle
trueValue: 1
falseValue: 0
trueLabel: 활성
falseLabel: 비활성
```
### format: table
params `format: table` 과 동일하게 columns updateOptions에서 JSON 형태의 데이터를 수정하는 UI 화면을 구성할 수 있어요.
```yaml
- type: query
resource: mysql.qa
title: id=65 wine_stock의 property_json의 일부분을 수정
sqlType: select
sql: |
select id, property_data from wine_stock
where id = 65
display: form
responseFn: |
rows = rows.map(e => {
e.shippingRules = (e.property_data || {}).shippingRules || []
e.shippingRules = e.shippingRules.map(row => {
for (const key in row) {
row[key] = { value: row[key] }
}
return row
})
return e
})
return rows
columns:
property_data:
hidden: true
shippingRules:
label: 배송비 규정
updateOptions:
type: query
resource: mysql.qa
sqlType: update
sql: |
UPDATE wine_stock
SET property_data = :value
where id = :id
requestFn: |
const value = params.find(e => e.key == 'value')
const shippingRules = params.find(e => e.key == 'shippingRules')
value.value = JSON.stringify({
shippingRules: shippingRules.value.map(row => {
return {
minAmount: row.minAmount.value,
maxAmount: row.maxAmount.value,
shippingCost: row.shippingCost.value,
}
})
})
format: table
style:
width: 700px
class: table text-xs
headers:
minAmount:
label: 배송비시작
format: number
postfix: 원 이상
postfixStyle:
width: 50px
maxAmount:
label: 금액 (없으면 최대)
prefix: "~"
format: number
postfix: 원 미만
postfixStyle:
width: 50px
placeholder: 비어있으면 최대금액
shippingCost:
label: 배송비부과
format: number
postfix: 원
```
## columns.updateOptions + display: form
Update 쿼리 블록을 조회/수정 모드를 껐다 켜는 방식으로 사용할 수 있습니다. 적용시 수정버튼이 추가됩니다.
```yaml
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT * FROM app_notice
WHERE id = :id
params:
- key: id
valueFromRow: id
columns:
title:
editable: true
author:
editable: true
body:
editable: true
format: textarea
date:
editable: true
published_at:
editable: true
format: date
display: form
updateOptions:
type: query
resource: mysql.qa
sqlType: update
sql: >
UPDATE app_notice
SET title = :title
, author = :author
, body = :body
, `date` = :date
, published_at = :published_at
WHERE id = :id
```
## columns.searchOptions
개별 항목을 수정할때, 데이터를 먼저 검색하고 찾은 결과값을 반영할 수 있습니다. datalistFromQuery와 유사하지만 사용자에게 더 풍부한 검색 경험을 제공할 수 있습니다.
**적용 가능한 상황**
- display: form
- 개별 컬럼 updateOptions
```yaml
blocks:
- type: query
resource: mysql
sqlType: select
sql: >
SELECT * FROM bookings LIMIT 10
columns:
id:
openModal: bookings/:id
modals:
- path: bookings/:id
blocks:
- type: query
resource: mysql
sqlType: select
sql: SELECT * FROM bookings WHERE id = :id
display: form
columns:
id:
assignee_id:
label: 담당자
updateOptions:
type: query
resource: mysql
sqlType: update
sql: >
UPDATE bookings
SET assignee_id = :value
WHERE id = :id
searchOptions:
enabled: true
# allowEmpty: false # 내역을 선택해야 적용 가능
# allowEdit: true # 선택지에 없는 텍스트 입력 가능
type: query
resource: mysql
sqlType: select
sql: >
SELECT
id AS value,
name AS '이름', status AS '상태'
FROM assingees
WHERE (name LIKE CONCAT('%', :value, '%') OR id = :value)
AND deleted_at IS NULL
columns:
value:
hidden: true
```
## columns.prepend, append
특정 컬럼을 가장 앞(prepend)에 두거나, 가장 뒤로(append) 둘 수 있습니다.
```yaml
columns:
field_first:
prepend: true
field_last:
append: true
```
## columns.sticky
`prepend: true` 와 같이 사용되며, 특정 컬럼을 고정하여 좌우 스크롤하여도 계속 보이게 만듭니다.
```yaml
columns:
column1:
prepend: true
sticky: true
column2:
```
## columns.value, openModal
특정 컬럼에 고정된 값을 입력하고, 모달을 오픈하는 텍스트 링크로 만들 수 있습니다.
```yaml
columns:
field:
value: 조회
openModal: column-openmodal
modals:
- path: column-openmodal
blocks: ...
```
## columns.style
특정 컬럼에 CSS Style을 입힐 수 있어요. 원하는 스타일을 적용해보세요.
```yaml
columns:
user_name:
style: |
text-align: center;
```
## columns.class
특정 컬럼에 Tailwind class를 적용할 수 있습니다. 컬럼내 버튼을 세로 정렬하거나, 가운데 정렬할 수 있습니다.
```yaml
columns:
field:
class: flex flex-col gap-0.5
# class: flex justify-center gap-1
buttons:
- openModal: view
label: 조회
type: primary-light
- openAction: notify
label: 알림
type: plain
```
#### [`blocks`](/reference#blocks-params)
# `params: []`
> 📘 params의 key 값은 영어 알파벳을 지원합니다.
>
> key 의 값에 한글 등 알파벳이 아닌 문자를 입력하면 정상적으로 작동하지 않게 됩니다. 꼭 key: id 와 같이 영어 알파벳을 이용해주세요.
## params.value 계열
parameter에 특정 값을 미리 입력하거나, 다른 곳에서 가져와서 입력하고 싶을 때 아래와 같은 키를 사용하세요.
| key(키) | 설명 |
| :-------------------- | :------------------------------- |
| valueFromRow | viewModal 안에서 사용 |
| valueFromSelectedRows | selectOptions가 있는 actions 안에서 사용 |
| defaultValue | 기본값을 설정하고 싶을 때 이용 |
| defaultValueFromRow | viewModal 안에서 사용 |
| valueFromEnv | API를 호출할 때 안전한 환경변수에서 이용 |
| valueFromUserProperty | 사용자 속성에서 값을 가져와서 이용 |
## params.defaultValueFromQuery
쿼리로 데이터 가져와서 기본값으로 넣는 방법입니다. 페이지 조회 시 1회 실행되며, sql 쿼리 결과의 첫번째 값 또는 AS value 값을 가져옵니다.
```yaml
params:
- key: created_at
defaultValueFromQuery:
type: query
resource: acme
sql: select date_format(now(), '%Y-%m-%d')
```
## params.defaultValueFn
[moment](https://momentjs.com/), [Luxon](https://moment.github.io/luxon/#/?id=luxon)을 지원하고 있습니다.
```yaml
params:
- key: created_at
defaultValueFn: |
// return moment().add(3, 'days').format('YYYY-MM-DD')
// return DateTime.now().toFormat('yyyy-MM-dd')
return '2022-08-12'
```
**범위 날짜 사용시 (format: date, range: true)**
return [] 형태로 입력해주세요.
```yaml
params:
- key: created_at
format: date
range: true
defaultValueFn: |
return [
moment().add(-1, 'month').format('YYYY-MM-DD'),
moment().add(1, 'day').format('YYYY-MM-DD')
]
```
**JavaScript, row 활용법**
- 입력 필드의 기본값을 JavaScript로 동적으로 설정
- 부모 영역에서 가져온 row 값 활용 가능
```yaml
menus:
- path: defaultvaluefn
pages:
- path: defaultvaluefn
blocks:
- type: query # 모달 안에서 적용
resource: mysql.qa
sqlType: select
sql: >
SELECT * FROM wine_order
columns:
memo:
openModal: edit-:id
modals:
- path: edit-:id
blocks:
- type: query
sqlType: update
resource: mysql.qa
sql: |
UPDATE wine_order
SET postcode = :postcode
WHERE id = :id
params:
- key: id
valueFromRow: true
- key: postcode
# defaultValueFromRow: postcode
defaultValueFn: |
if (!row.postcode) return '00000'
return row.postcode
confirm: update?
reloadAfterSubmit: true
- type: query # 모달 없이 적용
resource: mysql.qa
sqlType: select
sql: >
SELECT * FROM wine_order WHERE id = 6
display: shadow
blocks:
- type: query
title: update
sqlType: update
resource: mysql.qa
sql: |
UPDATE wine_order
SET postcode = :postcode
WHERE id = :id
params:
- key: id
valueFromRow: true
- key: postcode
defaultValueFn: |
console.log('>R', row)
if (!row.postcode) return '00000'
return row.postcode
```
## params.valueFromUserProperty
설정 > 계정의 사용자 이름(name)과 이메일(email), 아이디(id) 시스템 데이터와 커스텀 속성을 변수로 이용할 수 있습니다.
```yaml
params:
- key: user_name
valueFromUserProperty: "{{name}}"
- key: email
valueFromUserProperty: "{{email}}"
- key: user_id
valueFromUserProperty: "{{id}}"
- key: custom_category
valueFromUserProperty: category
```
## params.valueFromSheet
CSV 데이터를 업로드하고 params로 매칭한 다음, DB에 데이터를 저장할 수 있습니다.
- `sheetOptions.append: false`: 처음에 추가한 파일만 적용됩니다.
- `multiple: true`: 여러개의 파일을 한번에 선택하고 올릴 수 있습니다.
- `accept`: 선택 가능한 파일 유형을 제한할 수 있어요.
```yaml
actions:
- type: query
resource: mysql.qa
sqlType: insert
sql: >
INSERT INTO products
SET name = :name
, code = :code
, unit = :unit
, created_at = NOW()
forEach: true
single: true
modal: true
params:
- key: sheet
format: sheet
# sheetOptions:
# append: false
# multiple: true
# accept: .csv,.xls,.xlsx
- key: name
valueFromSheet: 상품명
- key: code
valueFromSheet: 상품약어
- key: unit
valueFromSheet: 수량
```
### sheetOptions.convertDate
엑셀에서는 날짜 데이터가 자체 시리얼날짜포맷으로 저장됩니다. 해당 시리얼넘버를 YYYY-MM-DD 형태로 저장하고 싶을때 별도의 코딩없이 convertDate 키를 활용하여 변환할 항목을 지정해줍니다.
엑셀 파일을 통해 INSERT 또는 UPDATE 쿼리를 벌크로 실행할 때 유용해요.
```yaml
params:
- key: sheet
format: sheet
label: 엑셀 가져오기
accept: .xlsx
sheetOptions:
append: false
convertDate:
- 시작일
- 종료일
- key: id
valueFromSheet: id
- key: start_date
valueFromSheet: 시작일
- key: end_date
valueFromSheet: 종료일
```
## params.valueFromSearch
웹 주소(URL)의 쿼리 스트링(Query string)을 파라미터로 사용할 수 있어요. updateParams와 함께 사용할 수 있습니다.
- e.g. xxx.com?property_id=123 → params.valueFromSearch=property_id
```yaml
sql: >
SELECT id, property_id FROM bookings LIMIT 100
columns:
property_id:
updateParams:
id: "{{property_id}}" # id 라는 parameter에 property_id 값을 기입
viewModal:
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT *
FROM properties
WHERE id = :id
display: form
params:
- key: id
valueFromSearch: id
```
## params.required
특정 파라미터를 필수값으로 설정하는 방법
```yaml
params:
- key: email
required: true
```
## params.format
input 안에 값을 입력할 때 format을 지정합니다.
```yaml
format: number
format: date
format: time
format: datetime
format: text
format: editor
format: color
```
### format: number
input 타입을 number로 지정합니다.
```yaml
params:
- key: number
format: number
min: 5 # 최소값
max: 100 # 최대값
step: 10 # 증감 단위
```
### format.`date | datetime | year | month | week`
날짜 데이터의 종류별로 입력 포맷을 선택할 수 있습니다.
```yaml
params:
- key: from
label: 시작일
format: date
# format: datetime
# format: year
# format: month
# format: week
placeholder: 주문생성일 기준
```
### `shortcuts`
- format.date 과 함께 사용하는 손쉬운 입력 방법(shortcuts)을 설정해보세요.
```yaml
params:
- key: from
label: 시작일
format: date
placeholder: 주문생성일 기준
shortcuts:
- label: 최초시점
date: 2024-01-01
- label: 어제
offset: -1
period: day
- label: 오늘
today: true
- label: 지난주
offset: -1
period: week
- label: 지난달
offset: -1
period: month
- label: 월초
startOf: month
- label: 월말
endOf: month
```
### `showButtons: true`
- shortcuts의 label들을 바깥에 버튼으로 빼서 보여줍니다.
### `range: true`
- 기간을 조회하기 쉬운 UI를 띄워주고 `from`과 `to` 값을 입력 받습니다.
- key의 값(e.g. dateFromTo)에 숫자를 붙여 array로 보내줍니다.
- 예시: `dateFromTo1: "2023-03-10", dateFromTo2: "2023-03-20"`
- SQL 쿼리에서 `:dateFrom1`, `:dateFrom2` 와 같이 이용해보세요.
- shortcuts 사용 시, `from`과 `to`로 UI에 값을 입력합니다.
```yaml
sql: >
SELECT *
FROM orders
WHERE created_at >= :dateFromTo1
AND created_at < :dateFromTo2
params:
- key: dateFromTo
label: 조회기간
format: date
showButtons: true
range: true
shortcuts:
- label: 최근 일주일
from:
offset: -7
period: day
to:
offset: 0
period: day
- label: 이번달
from:
offset: 0
startOf: month
to:
offset: 0
endOf: month
```
### `relative: true`
- shortcuts 이용시 상대적(relative)으로 값을 조절할 수 있습니다.
- 여러번 눌러 반복적으로 적용할 수 있습니다.
**예제1: format date 이용시**
```yaml
shortcuts:
- label: 어제 D-1
offset: -1
period: day
relative: true
- label: 내일 D+1
offset: 1
period: day
relative: true
- label: 지난주
offset: -1
period: week
- label: 지난달
offset: -1
period: month
- label: 월초
startOf: month
- label: 월말
endOf: month
```
**예제2: date range 이용시**
```yaml
shortcuts:
- label: 지난주
relative: true
from:
offset: -7
period: day
to:
offset: -7
period: day
- label: 다음주
relative: true
from:
offset: 7
startOf: day
to:
offset: 7
endOf: day
- label: 초기화
reset: true
```
### `reset: true`, `clear: true`
기본값으로 초기화하고 싶을 때는 `reset`, 기본값도 지우고 싶을 때는 `clear`를 사용해요.
```yaml
shortcuts:
- label: 초기화
reset: true
# clear: true
```
### `disabledDate`, `disabledTime`
조건에 따라 선택가능한 날짜를 제한합니다. 예시는 오늘 이후의 날짜만 선택하면서, 30분 단위로 시간을 입력 받습니다.
```yaml
params:
- key: date
format: datetime
disabledDate: |
/**
* 날짜를 비활성화하는 함수
* @param {Date} date - 사용자에게 표시된 날짜 객체
* @param {Date} currentValue - 선택된 날짜 (범위선택시 사용)
* @returns {boolean} - true면 해당 날짜는 비활성화됨
*/
// 현재 날짜(new Date) 이전의 날짜를 비활성화
return date < new Date
minuteStep: 30
showSecond: false
```
### format.time
`format: time`을 추가하여 시간값을 선택 입력할 수 있습니다.
`timeOptions`
- `start`: 시간 선택 범위의 시작점
- `end`: 시간 선택 범위의 끝점
- `step`: 선택 가능한 시간들의 단위 (e.g. 00:10 → 10분 단위)
- `format`: 시간 선택 시, 표시 방법
- HH:mm는 24시간제 표기이고 HH:mm A는 AM/PM 표기입니다.
```yaml
params:
- key: checkin_time
format: time
timeOptions:
start: 08:00
step: 00:10
end: 22:00
format: HH:mm
# format: HH:mm A
```
### format.color
색상(color)을 선택하고 Hex Code로 입력할 수 있습니다.
```yaml
pages:
- path: color
blocks:
- type: query
name: 색상 추가
resource: mysql.qa
sqlType: insert
sql: INSERT INTO color (hex) VALUES (:hex)
params:
- key: hex
format: color
reloadAfterSubmit: true
```
### format: range
슬라이더(slider) UI로 범위 사이 값을 입력할 수 있습니다.
```yaml
params:
- key: range
format: range
label: 범위값
min: -5
max: 5
```
### format: s3
s3를 사용하시는 경우 `format: s3`로 쉽고 안정적으로 파일을 업로드해보세요.
- 파일 여러개를 그때 그때 업로드할 수 있고, 삭제 가능합니다.
- 해당 key에 Array(List)로 들어갑니다.
- 해당 key를 하나씩 forEach로 처리 가능 (String으로 하나씩 들어갑니다.)
- 이미지는 1일 내 자동으로 삭제됩니다. (경로는 무작위 생성, 이름은 원본 그대로 유지)
```yaml
menus:
- path: file-cloud-s3
name: file-cloud-s3
pages:
- path: file-cloud-s3
blocks:
- type: http
axios:
method: POST
url: https://api.selectfromuser.com/sample-api/upload-each-s3
params:
'imageCode': "{{imageCode}}"
'classId': "ATES"
data:
file_urls: "{{ file_urls }}"
params:
- key: imageCode
radio:
MAIN: 메인 사진
SUB: 서브 사진도
- key: file_urls
format: s3
multiple: true
forEach: true
```
### format: storage
별도의 저장소 설정(S3, API)없이도 파일 업로드를 지원합니다.
- format: storage를 적용할 params.key는 중복되지 않는 이름으로 자유롭게 설정해주세요.
- `path`: 파일 저장위치를 지정합니다.
현재 지원 스펙
- 이미지 업로드 지원 (추후 다양한 파일 지원예정)
- 어드민 사용자 대상 프라이빗 URL만 지원
- (외부공유는 차단) 추후 public 용도(공유용, 공지, 게시글)로 활용할수있게 오픈예정
세부옵션
- `multiple`: 여러개 업로드
- `max`: 최대 개수 제한
- `accept`: 파일 타입 제한
```yaml
- type: query
resource: mysql
sqlType: update
sql: UPDATE wines SET name = :name WHERE id = :id
params:
- key: id
valueFromRow: true
- key: name
label: 상품명
- key: data
label: 상품 이미지
format: storage
path: /wine/{{id}}/images
multiple: true
# max: 2
accept: image/*
# accept: .jpg, .png
```
### format: address
주소와 우편번호를 입력해야할 때, 별도의 설치나 개발없이
셀렉트에 내장된 Daum Postcode Service로 주소를 검색하고 우편번호까지 한번에 입력할 수 있어요.
- `format: address` 파라미터 영역에 주소 검색 버튼이 생성됩니다.
- 셀렉트에서 **roadAddress**(도로명주소)와 **zonecode**(우편번호)를 내려줍니다.
- 셀렉트에서 **x축 좌표**(경도, longitude), **y축 좌표**(위도, latitude)값을 내려줍니다.
```yaml
params:
- key: address
label: 주소
format: address
updateParams:
address: roadAddress # address 파라미터에 검색 결과인 roadAddress 값을 넣습니다.
postcode: zonecode # postcode 파라미터에 zonecode 값을 넣습니다.
longitude: x # longitude 파라미터에 x축 값을 넣습니다.
latitude: y # latitude 파라미터에 y축 값을 넣습니다.
- key: postcode
label: 우편번호
- key: longitude
label: 경도
- key: latitude
label: 위도
```
### format: tiptap
상용 에디터 tiptap 옵션을 추가하였습니다.
- 외부이미지, 상품상세를 디비에 바로 넣을 수 있어요.
```yaml
- type: query
resource: mysql.qa
sqlType: insert
sql: >
INSERT wine_notes SET created_at = NOW(), memo = :memo WHERE wine_id = :wine_id
params:
- key: wine_id
- key: memo
format: tiptap
width: 800px
```
### format: table
`format: table`을 통해 JSON 형태의 데이터를 테이블 UI로 표시 및 입력하는 UI 화면을 구성할 수 있어요.
**예제 가이드**
- `headers`: 테이블 열의 입력값 형식, 유효성, 표시방식을 설정
- `requestFn`: 입력 데이터를 서버에 보낼 JSON 형식으로 가공
- style `width`: 700px: 테이블 너비 설정
- `showHeaders`: 테이블 헤더 표시여부
- `class: table text-xs`: 테이블의 클래스 지정(작은 글자 크기)
- headers `label, format`: 헤더 컬럼 라벨, 포맷
- headers `prefix, postfix`: 입력 필드 전후 텍스트
- headers `postfixStyle`: postfix 스타일
```yaml
menus:
- path: pages/sOCGir
name: format table
pages:
- path: pages/sOCGir
title: id=65 wine_stock의 property_json.shippingRules[] 를 수정합니다.
blocks:
- type: query
resource: mysql.qa
sqlType: update
sql: |
UPDATE wine_stock
SET property_data = :shippingRules
where id = 65
params:
- key: shippingRules
label: 배송비 규정
format: table
style:
width: 700px
showHeaders: false
class: table text-xs
headers:
minAmount:
label: 배송비시작
format: number
required: true
postfix: 원 이상
postfixStyle:
width: 50px
maxAmount:
prefix: "~"
format: number
postfix: 원 미만
postfixStyle:
width: 50px
placeholder: 비어있으면 최대금액
shippingCost:
format: number
postfix: 원
value: # 기본값이 필요한 경우에 입력 (예제 데이터)
- minAmount:
value: 0
maxAmount:
value: 50000
shippingCost:
value: 3000
- minAmount:
value: 5000
maxAmount:
value: ""
placeholder: (최대)
shippingCost:
value: 0
reloadAfterSubmit: true
requestFn: |
const shippingRules = params.find(e => e.key == 'shippingRules')
shippingRules.value = JSON.stringify({
shippingRules: shippingRules.value.map(row => {
return {
minAmount: row.minAmount.value,
maxAmount: row.maxAmount.value,
shippingCost: row.shippingCost.value,
}
})
})
```
### format: listbox
`format: listbox`는 선택 옵션을 제공하는 UI 컴포넌트입니다. 드롭다운과 유사하지만 여러 항목을 한번에 볼 수 있고, 다중 선택이 가능한 특징이 있습니다.
- `listStyle`: 리스트박스의 UI 크기와 스크롤을 정의하는 스타일 속성입니다.
- `datalistFromQuery`: 리스트박스에 표시될 데이터를 DB에서 조회하는 쿼리를 정의합니다.
- `template`: 리스트박스의 각 항목이 어떻게 표시될지 정의하는 HTML 템플릿입니다. 쿼리에서 조회한 필드들을 `{{필드명}}` 형태로 사용할 수 있습니다.
```yaml
params:
- key: display_json
format: listbox
multiple: true
listStyle:
minWidth: 300px
height: 300px
overflow: scroll
datalistFromQuery:
type: query
resource: mysql.qa
sql: SELECT DISTINCT name AS value, name AS label, price FROM wine_stock
template: |
{{value}}
{{price}}원
```
- `showOptions`: 선택가능한 옵션을 감추고, 정렬 기능만 이용합니다.
- `buttons`: 추가, 삭제등 버튼을 추가합니다.
```yaml
params:
- key: display_json
format: listbox
multiple: true
listStyle:
minWidth: 300px
height: 300px
overflow: scroll
showOptions: false
buttons:
- label: 상품추가
openModal:
width: 600px
height: 500px
blocks:
- type: query
resource: mysql.qa
title: 전시상품검색
id: query1
sqlType: select
sql: |
SELECT name AS value, name AS label, vintage, price FROM wine_stock
selectOptions:
enabled: true
showDownload: false
params:
- key: t1
footers:
- type: cancel
label: 취소
placement: center
- type: ok
label: 선택
button:
type: primary
placement: center
- label: 상품제거
deleteItem: true
template: |
{{value}}
{{price}}원
```
## params.formatString
입력 포맷을 특정 방식으로 설정할 수 있습니다.
```yaml
params:
- key: amount_decimal
formatString: 0.00 %
format: text
required: true
```
## params.numberFormat
입력 숫자를 포맷팅하는 기능입니다. 소수점, 통화, 접미사 등을 지원합니다.
```yaml
params:
- key: price
numberFormat:
precision: 2 # 소수점 아래 2자리로 제한 (예: 123.456 → 123.46)
prefix: '$' # 숫자 앞에 '$' 추가 (예: $123.46)
suffix: '' # 숫자 뒤에 접미사 없음
separator: ',' # 천 단위 구분 기호로 쉼표 사용 (예: 1,234.56)
decimal: '.' # 소수점 기호로 점 사용
reverseFill: false # 역방향 채우기 비활성화
```
## params.radio
라디오버튼으로 값을 선택하여 입력합니다.
```yaml
params:
- key: status
radio:
- draft
- published
```
값 value와 표시 label을 분리해서 이용할 수도 있습니다.
```yaml
params:
- key: status
defaultValue: draft
radio:
- value: draft
label: 초안
- value: published
label: 배포 완료
```
```yaml
params:
- key: status
defaultValue: draft
radio:
- draft: 초안
- published: 배포 완료
```
### radioButtonGroup
라디오 버튼을 시각적으로 더 큰 버튼 묶음으로 만들어줍니다.
```yaml
radioButtonGroup: true
radio:
- all
- lead
- customer
```
## params.checkbox
체크박스로 값을 선택하여 입력합니다.
```yaml
params:
- key: is_guest
defaultValue: Y
checkbox:
true: Y
false: N
```
```yaml
params:
- key: is_guest
checkbox:
true: ACTIVE
false: ''
```
### checkboxButtonGroup
여러 체크박스들을 버튼 묶음 형태로 만들어줍니다.
```yaml
params:
- key: checkbox
values: []
checkboxButtonGroup: true
checkbox:
- label: A
value: a
- label: B
value: b
```
## params.dropdown
드롭다운으로 값을 선택할 수 있습니다.
```yaml
params:
- key: status
dropdown:
- draft
- published
```
드롭다운 선택 시, 실제 반영되는 값과 UI에 보여지는 내용을 다르게 할 수도 있습니다.
```yaml
params:
- key: status
dropdown:
- value: draft
label: 초안
- value: published
label: 배포완료
```
```yaml
params:
- key: status
dropdown:
- draft: 초안
- published: 배포완료
```
### dropdownSize
dropdown 선택지에 노출되는 개수(size)를 조절합니다.
```yaml
params:
- key: name
- key: status
dropdown:
- pinned: 고정
- event: 이벤트
- ad: 광고
dropdownSize: 3 # 보여지는 선택 내역 개수
```
### dropdownMultiple
dropdown 선택지에서 여러건을 선택할 수 있습니다.
```yaml
params:
- key: name
- key: status
dropdown:
- pinned: 고정
- event: 이벤트
- ad: 광고
dropdownSize: 3
dropdownMultiple: true
```
### dropdown selectOptions
Dropdown 기능의 자동완성, 복수 선택, 키보드 사용을 지원하는 등 개선된 경험을 제공합니다. (`datalist`도 같은 방식으로 지원합니다.)
```yaml
params:
- key: item
label: 신규 카테고리 추가
selectOptions:
enabled: true
dropdown:
- 호텔
- 리조트
- 캠핑
- 독채
- 수영장
```
## params.selectOptions
- `multiple`: 여러개 선택
- `taggable`: 태그 형태로 관리
- `pushTags`: 입력한 값을 옵션에 계속 남겨둘지 여부
```yaml
selectOptions:
enabled: true
multiple: true
taggable: true
pushTags: true
```
## params.datalist
값 선택 시, 보여지는 내용과 실제 저장되는 데이터를 구분해서 처리할 수 있습니다.
```yaml
params:
- key: code
datalist:
- value: A000
label: 분류1
- value: A002
label: 분류2
```
`value` : 데이터에 저장되는 값
`label` : 선택 시 보여지는 내용
## params.datalist.datalistFromQuery
쿼리로 조회한 datalist에서 선택하여 params에 입력합니다.
```yaml
params:
- key: code
datalist: true
datalistFromQuery:
type: query
resource: mysql.qa
sqlType: select
sql: >
select id as 'value', code_name as 'label' from codes
# selectOptions:
# enabled: true
```
## params.datalist.datalistPreview
datalist에서 선택한 값의 label을 미리보기로 표기해줍니다.
```yaml
params:
- key: code
datalist: true
datalistPreview: true
datalistFromQuery: ...
```
## params.datalist.datalistLength
datalist에서 선택할 수 있는 값의 최대 개수를 지정합니다.
```yaml
params:
- key: code
datalist: true
datalistLength: 3
datalistPreview: true
datalistFromQuery: ...
```
## params.reloadParam
reloadParam을 통해 값 입력시 다른 param의 datalist를 새로고침 할 수 있습니다.
```yaml
menus:
- path: pages/wine-inventory
name: 와인 재고 관리
pages:
- path: pages/wine-inventory
params:
- key: vintage
radio:
- 2022
- 2021
- 2020
- 2019
radioButtonGroup: true
reloadParam: winelist
- key: winelist
label: 와인 선택
datalistFromQuery:
type: query
resource: mysql.qa
sql: |
SELECT id AS value, CONCAT(vintage, ' / ', name) AS label
FROM wine_stock
WHERE vintage = :vintage
cache: false
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT *
FROM wine_stock
WHERE id = :wineList
LIMIT 10
```
## params.options
여러 단계로 값을 입력하는등 복잡한 데이터 처리가 필요할 때
- requestSubmitFn과 함께 사용해보세요.
- prefix, postfix: 입력한 값에 붙는 접두어, 접미어
- display 추가 옵션: document, table
- display가 없으면 기본값(plain) 적용
**예제**
`id: form`으로 입력받아서 JS코드로 처리하고 `id: query_add_wine`의 쿼리를 실행
```yaml
- type: query
resource: mysql.qa
sqlType: insert
sql: >
INSERT INTO wine_stock
SET name = :name,
vintage = :vintage,
price = :price
params:
- key: name
- key: vintage
- key: price
id: query_add_wine
hidden: true
toast: 추가했습니다.
- type: query
resource: mysql.qa
sqlType: insert
sql: >
SELECT 1
requestSubmitFn: |
for (const i in form.params.vintage.value) {
const vintage_value = form.params.vintage.value[i]
query_add_wine.params.name.value = form.params.name.value
query_add_wine.params.vintage.value = vintage_value
query_add_wine.params.price.value = form.params.vintage.options.price.value[i] || null
console.log(form.params.vintage)
await query_add_wine.trigger()
}
id: form
params:
- key: vintage
datalist: []
selectOptions:
enabled: true
multiple: true
taggable: true
group: vintage
# display: document
options:
price:
label: 가격
placeholder: 00,000
prefix: 정가
postfix: 원
class: text-right
```
## params.searchOptions
- params datalist 대신에 쓸 수 있습니다. 풍부한 검색 경험을 제공하고 싶은 경우 이용해보세요.
- 검색창이 뜨고, 전체 내역에서 선택한 내용은 구분됩니다.
- 1건 선택지의 경우 엔터시 바로 선택됩니다.
- 검색창 안에(searchOptions) 조회되는 컬럼은 모두 표시합니다.
```yaml
params:
- key: vintage
showSearchButton: true
# searchButtonLabel: 선택
searchOptions:
enabled: true
# allowEmpty: false # 내역을 선택해야 적용 가능
# allowEdit: true # 선택지에 없는 텍스트 입력 가능
resource: mysql.qa
type: query
sql: |
SELECT vintage AS value
FROM wine_stock
WHERE vintage > 2000 AND vintage LIKE CONCAT(:value, '%')
GROUP BY vintage
```
- value를 label 처리하고 싶을때는 아래와 같이 적용하시면 됩니다.
```yaml
params:
- key: vintage
...
searchOptions:
enabled: true
resource: mysql.qa
type: query
sql: |
SELECT vintage AS value, vintage AS label
...
columns:
vintage:
hidden: true
```
## params.filterOptions
- 디비에서 가져오지만 거의 변하지않는 코드/필터검색에 가까운경우 적합합니다. (완전검색 X)
- Array param의 경우 쿼리편의를 위해 mapFirstValue 추가 (첫번째 값을 항상 빼줍니다. name → name1)
```yaml
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT * FROM properties
WHERE (!LENGTH(:property_type1) OR `type` IN ('', :property_type))
LIMIT 30
params:
- key: property_type
label: 숙소타입
mapFirstValue: true
filterOptions:
# 기본 개수 표시 (없으면 '필터'로 표시)
label: 해당 타입
## 값 표시 원하는경우
# style:
# width: 200px
# showValues: true
resource: mysql.qa
type: query
sql: |
SELECT `type` as value, COUNT(id) as count, `memo`
FROM properties
GROUP BY `type`
template: |
{{value}} {{count}}개
{{memo}}
``` ## params.categoryOptions 지역, 카테고리, 코드등을 순차적으로 선택하고 입력해야할때 사용하실 수 있습니다. **예제 가이드** - params와 columns.updateOptions에서 사용할 수 있어요. - template: 카테고리 → 문자열로 변경 (지정 안하면 object로 기입. responseFn 쓰고싶은 경우) - valueFn: 문자열 → 카테고리로 변경 (디비에 저장된 값을 불러와 입력폼에 반영. 001002003 같은 코드는 자동으로 식별불가능) - 조회할때 보통 카테고리정보도 같이 불러와 넘겨줄 수 있습니다. - row `object`: 보고있는 내용 전체 JSON - value `string`: 전달받은 값 - list `array`: 불러온 모든 카테고리 목록 ```yaml blocks: - type: query resource: mysql.qa sqlType: update sql: > UPDATE wine_stock SET name = :category WHERE id = 23 params: - key: name group: 1 - key: category label: 상품카테고리 format: category group: 2 style: width: 800px columns: - label: 대분류 key: code1 style: height: 200px - label: 중분류 key: code2 style: height: 200px # maxWidth: 300px - label: 소분류 key: code3 style: height: 200px # width: 500px categoryOptions: type: query resource: mysql.qa sql: | SELECT * FROM category template: "{{basecode1}}{{basecode2}}{{basecode3}}" - type: query resource: mysql.qa sqlType: select sql: > SELECT * FROM wine_stock WHERE id = 23 display: form columns: name: label: 상품카테고리 format: category updateOptions: type: query resource: mysql.qa sql: | UPDATE wine_stock SET name = :value WHERE id = 23 columns: - label: 대분류 key: code1 style: height: 200px - label: 중분류 key: code2 style: height: 200px - label: 소분류 key: code3 style: height: 200px categoryOptions: type: query resource: mysql.qa sql: | SELECT * FROM category template: "{{basecode1}}{{basecode2}}{{basecode3}}" valueFn: | const code1 = value.slice(0, 3) const code2 = value.slice(3, 6) const code3 = value.slice(6, 9) return list.find(e => { return e.basecode1 == code1 && e.basecode2 == code2 && e.basecode3 == code3 }) ``` ## params.fetchFn 특정 블록의 결과값을 다른 블록의 params에 사용할 수 있습니다. - 데이터를 가져와 특정 엔드포인트로 노출 - fetchFn으로 해당 엔드포인트 호출 - template에서 호출한 결과 활용 ```yaml pages: - path: fetchfn-sample blocks: - type: query resource: mysql.qa sql: | SELECT name, AVG(price) as low_price FROM wine_stock GROUP BY name LIMIT 5 endpoint: /stocks/labels hidden: true - type: query resource: mysql.qa sql: SELECT 1 sqlType: update params: - format: block label: 선택 fetchFn: | const options = await query('/stocks/labels') return { options, } template: | ``` ## params.progressStep 데이터 입력시 스텝을 나눠 각 단계에 집중할 수 있게 돕습니다. ```yaml actions: - label: 등록 single: true type: query resource: mysql.qa sqlType: insert sql: > INSERT INTO leads SET name = :name, birth = :birth, region = :region, job = :job, created_at = NOW() modal: true height: 500px params: - key: name label: 이름 progressStep: 기본정보 - key: birth label: 생년월일 progressStep: 상세정보 format: date - key: region label: 지역 progressStep: 상세정보 - key: job label: 직업 progressStep: 상세정보 ``` ## params.disabled 입력 필드를 비활성화 시킵니다. 마우스 커서도 올릴 수 없게 됩니다. ```yaml params: - key: status disabled: true defaultValue: draft ``` ## params.readonly 일반 텍스트 필드를 '읽기 전용' 상태로 설정할 수 있습니다. 마우스 커서로 내용을 복사할 수 있습니다. dropdown 이나 radio 등 선택이나 옵션 계열의 필드는 적용되지 않습니다. ```yaml params: - key: code_number readonly: true ``` ## params.hidden 입력 필드를 숨길 수 있습니다. ```yaml params: - key: hidden_field hidden: true ``` ## params.`hiddenIfNotOption | disableIfNotOption` 선택지(option)가 없는 경우 해당 param을 숨기거나 비활성화할 수 있습니다. 부모 카테고리/코드 기반으로 데이터를 조회할때 적용할 수 있어요. ```yaml blocks: - type: query resource: mysql sqlType: insert sql: > INSERT INTO products (name, code_group1, code_group2) values (:name, :code1, :code2) reloadAfterSubmit: true class: p-2 params: - key: name - key: code1 required: true datalistDropdown: true dropdownSize: 10 datalistFromQuery: type: query resource: mysql sql: > SELECT DISTINCT level1 AS value FROM category ORDER BY level1 ASC - key: code2 datalistDropdown: true dropdownSize: 10 hiddenIfNotOption: true # disableIfNotOption: true datalistFromQuery: type: query resource: mysql sql: > SELECT DISTINCT level2 AS value FROM category WHERE level1 = :code1 ORDER BY level2 ASC ``` ## params.placeholder 입력 필드 안에 placeholder 를 입력해 필드에 대한 가이드를 줄 수 있습니다. ```yaml params: - key: type1 label: 업종 placeholder: 키워드 입력 ``` ## params.raw 파라미터에 원본 SQL 값을 넣고 싶을 때는 raw를 사용해주세요. (e.g. `NULL`, `NOW()`) ```yaml pages: - path: select/users2 blocks: - type: query resource: mysql.qa sqlType: select sql: > SELECT * FROM test_list WHERE name IS :name LIMIT 100 params: - key: name label: 이름 raw: Y: NOT NULL N: NULL radio: - value: Y label: 있음 - value: N label: 없음 defaultValue: Y ``` ## params.query{{query}}와 params를 활용해서 sql 쿼리 WHERE절에 일부를 옵션으로 넣을 수 있습니다.
```yaml
pages:
- path: properties
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT *
FROM properties
WHERE name LIKE CONCAT('%', :name, '%')
AND {{query}}
LIMIT 1000
params:
- key: name
label: 숙소명
- key: types
label: 숙소타입
radio:
- value: ''
label: 전체
- value: HOTEL
label: 호텔
- value: NON HOTEL
label: 호텔 외
query:
'': >
1=1
'HOTEL': >
`type` = 'HOTEL'
'NON HOTEL': >
`type` IN ('GUESTHOUSE', 'BNB') OR `type` IS NULL
```
## params.orderBy
테이블 정렬을 서버에서 할 수 있어요. 여러개의 정렬 옵션을 추가할 수 있습니다.
- SQL 예시: ORDER BY created_at ASC
- params에서 선택한 값에 따라 orderBy 키와 매칭합니다.
- 매칭된 orderBy의 값을 `{{ orderBy }}`에 넣습니다.
```yaml
- type: query
resource: mysql
name: 회원목록
sqlType: select
sql: >
SELECT *
FROM user_profiles
{{ orderBy }}
LIMIT 100
autoload: false
params:
- key: order
label: 정렬
defaultValue: 최근가입순
dropdown:
- 최근가입순
- 오래된가입순
orderBy:
'최근가입순': ORDER BY created_at DESC
'오래된가입순': ORDER BY created_at ASC
```
## pages.params
페이지 단위로 파라미터(parameter)를 지정하여, 여러 블록의 데이터를 필터 조회할 수 있습니다.
```yaml
pages:
- path: new-charts
title: 마케팅 대시보드
subtitle: 주요 마케팅 지표를 확인할 수 있습니다.
containerClass: container-sm w-50
params:
- key: category
blocks:
- type: query
- type: query
```
## params.validateFn
입력한 값을 사전에 검증하는 기능입니다. `validateFn` 안에 Javascript를 사용할 수 있어요.
전체 params에서 params.key가 `amount`인 내역의 값을 찾고 `key: cancel_amount`의 값(param.value)을 비교하는 예제입니다.
```yaml
params:
- key: amount
valueFromRow: amount
- key: cancel_amount
label: 취소 금액
validateFn: |
const amount = params.find(e => e.key == 'amount')
if (param.value > amount.value) {
return '취소 불가능'
} else {
return ''
}
```
## params.validateFromQuery
쿼리를 validateFn과 함께 사용할 수 있습니다.
- showValidateButton: 버튼 노출시 엔터 또는 클릭해야 검증
- validateButtonLabel: 버튼 라벨
- validText: 서버단 체크했을때 메시지
```yaml
params:
- key: business_number
label: 사업자번호
required: true
validateFromQuery:
type: query
resource: mysql.qa
sql: >
SELECT COUNT(id) AS count
FROM properties
WHERE business_number = :value
validateFn: |
if (+validateFromQuery.count > 0) {
return '중복된 사업자번호 입니다.'
}
return true
validateFn: |
if (param.value.length != 10) {
return '사업자번호(10자리)를 입력해주세요.'
}
if (!isFinite(+param.value)) {
return '사업자 번호만 입력해주세요.'
}
return true
# showValidateButton: true
# validateButtonLabel: 사업자조회
# validText: 새로운 사업자번호 사용가능
```
## params.minlength, maxlength
입력값의 최소, 최대 글자수를 제한할 수 있습니다.
```yaml
params:
- key: phone
minlength: 1
maxlength: 12
```
## params.helpFn
파라미터에 입력한 값을 help 영역에 filters 기능으로 변환하여 표기합니다.
```yaml
pages:
- path: helpfn
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: SELECT 1
params:
- key: date_example
helpFn: |
return filters.datetime(value)
// return filters.datetime9(value)
// return filters.date(value)
// return filters.dateFormat(value, 'YYYY-MM-DD')
// return filters.dateTextFormat(value, 'YYYY년 MM월 DD일', 'YYYY-MM-DD')
- key: lines3_example
format: textarea
value: |
첫 번째 줄
두 번째 줄
세 번째 줄
네 번째 줄
다섯 번째 줄
helpFn: |
return filters.lines3(value)
```
**사용가능한 필터들**
```
filters.datetime(value) // '2025-01-01 13:45:30' → '2025-01-01 13:45'
filters.datetime9(value) // '2025-01-01 04:45:30' → '2025-01-01 13:45'
filters.date(value) // '2025-01-01 13:45:30' → '2025-01-01'
filters.time(value) // '2025-01-01 13:45:30' → '1:45 오후'
filters.dateFormat(value, format) // ('2025-01-01', 'YYYY/MM/DD') → '2025/01/01'
filters.dateTextFormat(value, format, formatParse) // ('2025-01-01', 'YYYY년 MM월 DD일', 'YYYY-MM-DD') → '2025년 01월 01일'
filters.dateTextFromNow(value, formatParse) // ('2025-01-01', 'YYYY-MM-DD') → '2달 전'
filters.ts_datetime(value) // 1735689600000 → '2025-01-01 09:00'
filters.datetimeA(value) // '2025-01-01 13:45:30' → '2025-01-01 1:45 오후'
filters.fromDays(value, postfix) // ('2025-01-01', '일') → '70일'
filters.fromNow(value) // '2025-01-01' → '2달 전'
filters.fromNowDate(value) // '2025-01-01' → '2025년 1월 1일 수요일 오전 12:00'
filters.dday(value, formatParse) // ('2025-01-01', 'YYYY-MM-DD') → 'D+70'
filters.maskCenter4(value) // '1234567890' → '123****890'
filters.phone(value) // '01012345678' → '010-1234-5678'
filters.maskEnd4(value) // '1234567890' → '123456****'
filters.splitComma(value) // '1000000' → '[ "1000000" ]'
filters.decodeURIComponent(value) // '%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94' → '안녕하세요'
filters.marked(value) // '# 제목\n- 항목 1\n- 항목 2' → HTML 태그로 변환된 내용
filters.lines3(value) // '첫 번째 줄\n두 번째 줄\n세 번째 줄\n네 번째 줄\n다섯 번째 줄' → 세번째 줄까지 표시
filters.sql(value.toUpperCase()) // 'select * from users where id = 1' → 'SELECT * FROM users WHERE id = 1'
filters.json2(value) // '{"name":"John","age":30}' → '"{\"name\":\"John\",\"age\":30}"'
filters.jsonArray(value) // '[{"id":1,"name":"John"},{"id":2,"name":"Jane"}]' → '[ { "id": 1, "name": "John" }, { "id": 2, "name": "Jane" } ]'
filters.number(value, prefix, suffix) // (1000000, '₩', '') → '₩1,000,000'
filters.number0(value, prefix, suffix, format) // (1000000, '₩', '', '0,0.00') → '₩1,000,000.00'
filters.numberFormat(value, prefix, suffix, format)// (1000000, '₩', '/월', '0,0') → '₩1,000,000/월'
filters.numberPart(value, format) // (1000000.5678, '0,0.00') → '1,000,000.57'
filters.sanitizeHtml(value) // '안전한 HTML
' → '안전한 HTML
' filters.getByteCount(value) // '안녕하세요' → '10' ``` ------- ## [`blocks.viewModal`](/reference#blocks-viewmodal) # `viewModal: {}` ## viewModal 불러온 데이터를 클릭하여 모달을 열게됩니다. 1개의 모달을 지원합니다. 여러개가 필요한 경우 `modals`를 이용해주세요. ### viewModal.name ### viewModal.mode `center`, `full`, `side` ### viewModal.displayParentRow