SelectAdmin

https://docs.selectfromuser.com/
Admin
SelectAdmin is a tool designed to help users quickly create and manage administrative operation...
Tokens:27,035
Snippets:155
Trust Score:6.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Implementing Enhanced Search Functionality with searchOptions

Source: https://docs.selectfromuser.com/layout

Explains how to provide a richer search experience for parameters using searchOptions instead of basic datalists. The first example shows a basic setup with a SQL query for filtering. The second example demonstrates how to customize the display of search results by mapping value to label and hiding the original vintage column.

```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
```

```yaml
params:
  - key: vintage
    ...
    searchOptions:
      enabled: true
      resource: mysql.qa
      type: query
      sql: |
        SELECT vintage AS value, vintage AS label
        ...
      columns:
        vintage:
          hidden: true
```

--------------------------------

### YAML Configuration for Number Formatting with Prefix/Postfix

Source: https://docs.selectfromuser.com/reference

This example illustrates how to apply prefixes and postfixes to numbers formatted using `formatFn`. The prefix and postfix are appended sequentially to the formatted number.

```YAML
columns:
  won_price:
    type: number
    formatFn:
      - number0
      - "12개월 " # prefix
      - " 만" # postfix
```

--------------------------------

### Example MySQL Query Response JSON

Source: https://docs.selectfromuser.com/reference

Illustrates a typical JSON response structure from a MySQL query, showing fields like `fieldCount`, `affectedRows`, `insertId`, and `serverStatus`.

```json
{
    "fieldCount": 0,
    "affectedRows": 1,
    "insertId": 1949,
    "info": "",
    "serverStatus": 2,
    "warningStatus": 0
}
```

--------------------------------

### YAML Configuration for Image/URL Formatting with valueAs

Source: https://docs.selectfromuser.com/reference

This YAML example illustrates how `valueAs` can be combined with `format: image` or `url` to dynamically display images or URLs based on data. It supports passing data-driven parameters within the URL.

```YAML
- path: manage-animal
    blocks:
    - type: query
      resource: acme
      sqlType: select
      sql: >
        SELECT id, name, postfix
        FROM animals
        LIMIT 10
      columns:
        postfix:
          format: image
          valueAs: https://placekitten.com/{{postfix}}?id={{id}}
```

--------------------------------

### SQL Snippet for Multiple Update Queries with Explicit Transaction

Source: https://docs.selectfromuser.com/guide/crud-page-selected

This SQL code demonstrates how to wrap multiple `UPDATE` statements within an explicit `START TRANSACTION` and `COMMIT` block. This ensures that all updates are treated as a single atomic unit, rolling back if any part fails.

```sql
START TRANSACTION;

        UPDATE stock_wine SET unit = 5 WHERE id = :id;
        UPDATE stock_wine SET unit = 5 WHERE id = 1 + :id;

        COMMIT;
```

--------------------------------

### Configure Page Layout Blocks in YAML

Source: https://docs.selectfromuser.com/reference

Explains how to define structural layout blocks (`top`, `left`, `center`, `right`, `bottom`) to organize content on a page. The first example shows a generic structure, and the second provides a comprehensive example of a `pages` configuration with multiple layout blocks and nested content.

```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
```

--------------------------------

### YAML Configuration for Multiple Update Queries in Actions (No Explicit Transaction)

Source: https://docs.selectfromuser.com/guide/crud-page-selected

This YAML configuration shows how to define an action within a `pages` block that executes multiple SQL `UPDATE` queries. The queries are triggered by a UI action and can utilize values from selected rows, but do not explicitly use `START TRANSACTION`/`COMMIT`.

```yaml
pages:
- path: pages/8MwfvW
  title: actions update 쿼리 실행
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: SELECT id FROM stock_wine WHERE id > 10 ORDER BY id ASC LIMIT 5
    selectOptions:
      enabled: true
    actions:
    - label: 승인
      name: 승인
      type: query
      resource: mysql.qa
      confirmText: 승인하시겠어요?
      sqlType: update
      sql: UPDATE stock_wine SET unit = 3 WHERE id = :id;
        UPDATE stock_wine SET unit = 3 WHERE id = 1 + :id;
      params:
      - key: id
        valueFromSelectedRows: id
```

--------------------------------

### Add Confirmation Prompt to Actions in YAML

Source: https://docs.selectfromuser.com/guide/action-customize

This YAML example shows how to add a confirmation prompt ('confirmText') before executing a potentially destructive action, such as a database update. It also illustrates how to define a SQL query, specify the resource, and pass selected row IDs as parameters to the query.

```yaml
- label: 삭제
  type: query
  resource: mysql
  sql: UPDATE property SET deleted_at = NOW() WHERE id IN (:ids)
  # 컨펌 텍스트
  confirmText: 삭제하시겠습니까?
  class: text-danger
  params:
    - key: ids
      valueFromSelectedRows: true
      valueFromSelectedRowsAs: id
```

--------------------------------

### Format Column as Viewer

Source: https://docs.selectfromuser.com/reference

This YAML example shows how to display data entered via an editor using the 'viewer' format, with an option to specify the column width.

```yaml
- type: query
  resource: mysql.qa
  sqlType: select
  sql: >
    SELECT id, wine_id, amount, memo FROM wine_stock LIMIT 5
  columns:
    memo:
      format: viewer
      width: 50vw
```

--------------------------------

### Configure Loading Skeletons for HTTP Blocks

Source: https://docs.selectfromuser.com/reference

This YAML configuration demonstrates how to apply loading indicators to HTTP blocks, providing a smoother user experience while data is being fetched. It shows examples of using specific loading types (circle, line) or a generic 'true' value for default loading behavior.

```yaml
menus:
- path: pages/tDvIDv
  name: 로딩 스켈레톤
pages:
- path: pages/tDvIDv
  blocks:
  - type: http
    axios:
      url: http://httpbin.selectfromuser.com/delay/3
      method: GET
    style:
      height: 200px
    loading:
      - type: circle
      - type: line
      - type: line
        # width: 700
  - type: http
    axios:
      url: http://httpbin.selectfromuser.com/delay/2
      method: GET
    style:
      height: 200px
    loading: true
  - type: http
    axios:
      url: http://httpbin.selectfromuser.com/delay/1
      method: GET
    style:
      height: 200px
    loading: true
```

--------------------------------

### Dynamic Parameter Population with `fetchFn`

Source: https://docs.selectfromuser.com/layout

This example demonstrates how to use `fetchFn` to dynamically populate parameters based on the results of another block's query. It allows fetching data from an internal endpoint and then using that data to render dynamic content, such as a dropdown list, within the form.

```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: |
          <select class="form-select">
            <option v-for='e in options' :value='e.name'>
              {{ e.name }} (가격대: {{e.low_price | number}})
            </option>
          </select>
```

```JavaScript
const options = await query('/stocks/labels')
return {
  options,
}
```

--------------------------------

### Configure HTTP GET Request in YAML

Source: https://docs.selectfromuser.com/reference

Shows how to define an HTTP GET request block using `axios` configuration, specifying the method and URL.

```yaml
- type: http
  axios:
    method: GET
    url: https://testapi.com/v1/33iac2d
  rowsPath: rows
```

--------------------------------

### YAML Configuration for Cross-Database Transaction (MySQL and CRM)

Source: https://docs.selectfromuser.com/guide/crud-page-selected

This example demonstrates a transaction spanning different database resources, specifically updating MySQL and inserting into CRM. The `sqlTransaction` ensures atomicity across these disparate systems, rolling back all changes if any step fails.

```yaml
menus:
- path: test/transaction
  name: 트랜잭션 테스트
pages:
- path: test/transaction
  blocks:
  - type: query
    sqlType: update
    resource: sqlTransaction
    sqlTransaction:
    # for database
    - resource: mysql
      sql: UPDATE test_transaction1 SET name = :name WHERE id = 2
    # for crm
    - resource: crm
      sql: INSERT INTO test_transaction SET name = 'crm3'
    params:
    - key: name
```

--------------------------------

### Format Column as URL Link with Template Options

Source: https://docs.selectfromuser.com/reference

This YAML example demonstrates how to format a column's value as an active URL link. It also shows how to use the 'template' feature to customize the link's appearance with custom text or icons, including HTML structure and CSS classes.

```yaml
- path: manage-animal
    blocks:
    - type: query
      resource: acme
      sqlType: select
      sql: >
        SELECT id, name, image_url
        FROM animals limit 10
      columns:
        image_url:
          format: url
```

```yaml
- type: query
  resource: mysql.qa
  sqlType: select
  sql: >
    SELECT 'https://www.google.com' AS link, 'https://www.naver.com' AS link2
  columns:
    link:
      template: |
        <a href="{{link}}" target="_blank">열기</a>
    link2:
      template: |
        <a href="{{link2}}" target="_blank" class="no-underline bg-slate-500/5 rounded-lg p-1.5">
          <span class="mdi mdi-share"></span>
          열기
        </a>
```

--------------------------------

### YAML Configuration for Custom HTML Templates in Columns

Source: https://docs.selectfromuser.com/reference

This snippet shows how to use the `template` key within column definitions to render data using complex HTML structures. It provides examples for embedding audio players, video players, and custom-styled hyperlinks directly within the column display.

```YAML
- type: query
  resource: pgsql
  sqlType: select
  sql: >
    SELECT
      'media/cc0-audio/t-rex-roar.mp3' AS url,
      'media/cc0-videos/flower.webm' AS video_url,
      'https://www.google.com' AS link,
      'https://www.selectfromuser.com' AS link2
  # display: form
  columns:
    url:
      template: |
        <audio controls src="https://interactive-examples.mdn.mozilla.net/{{url}}"></audio>
    video_url:
      template: |-
        <video controls width="250">
          <source src="https://interactive-examples.mdn.mozilla.net/{{video_url}}" type="video/webm" />
        </video>
    link:
      template: |
        <a href="{{link}}" target="_blank">열기</a>
    link2:
      template: |
        <a href="{{link2}}" target="_blank" class="no-underline bg-slate-500/5 rounded-lg p-1.5">
          <span class="mdi mdi-share"></span>
          열기
        </a>
```

--------------------------------

### Date Range Input with SQL Integration

Source: https://docs.selectfromuser.com/layout

Enables a date range selection UI, returning 'from' and 'to' values as an array. This example demonstrates how to configure a date range input with shortcuts and integrate the selected range into a SQL query using named parameters.

```sql
SELECT *
FROM orders
WHERE created_at >= :dateFromTo1
AND created_at < :dateFromTo2
```

```yaml
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
```

--------------------------------

### Form Options: Inline Display Configuration

Source: https://docs.selectfromuser.com/layout

YAML configuration to set form fields to display inline, optimizing space for compact layouts. This example shows how to apply display: inline to formOptions.

```yaml
formOptions:
  display: inline
params:
  - key: customer_name
    label: 고객이름
```

--------------------------------

### Date Input Shortcuts Configuration

Source: https://docs.selectfromuser.com/layout

Configures predefined shortcuts for date input fields, allowing users to quickly select common date ranges like 'yesterday', 'today', 'last week', or 'start/end of month'. This YAML example demonstrates how to define custom labels and their corresponding date offsets or specific dates.

```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
```

--------------------------------

### YAML Configuration for Chaining SQL Query and API Calls with JavaScript Trigger

Source: https://docs.selectfromuser.com/guide/crud-page-selected

This YAML configuration utilizes `requestSubmitFn` to orchestrate a sequence of operations: first, an `UPDATE` query to a MySQL database, followed by a `POST` request to an external API. JavaScript is used to control the flow, handle results, and manage error conditions between the blocks.

```yaml
pages:
- path: api-trigger
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: update
    id: query1 # requestSubmitFn에서 사용
    sql: UPDATE wine_stock SET safeflow = :safeflow
      WHERE id = :id
    params:
      - key: id
      - key: safeflow
        help: 안전재고
    # 버튼 숨기기/비활성화
    submitButton:
      hidden: true
      disabled: true
    toast: DB 업데이트 완료

  - type: http
    axios:
      method: POST
      url: https://api.selectfromuser.com/sample-api/tags
      data:
        memo: ${{memo}}
    params:
      - key: memo
        help: 메모 100자
    # 반드시 순차실행이 필요하면 await 사용
    requestSubmitFn: |
      const result1 = await query1.trigger()
      console.log('query1 result:', result1) // console.log로 확인 가능

      if (result1.message != 'ok') {
        throw new Error('디비 업데이트 실패')
      }
      // 진행
    toast: API 업데이트 완료
```

--------------------------------

### Color Input Format for Hex Codes

Source: https://docs.selectfromuser.com/layout

Enables a color picker input that allows users to select a color and inputs its Hex Code. This YAML example demonstrates how to integrate a color input field into a form for inserting color data into a database.

```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
```

--------------------------------

### Date and Time Input Formats

Source: https://docs.selectfromuser.com/layout

Illustrates various date and time input formats, including date, datetime, year, month, and week. This snippet shows how to configure a date input field with a placeholder in YAML, with commented-out examples for other date-related formats.

```yaml
params:
  - key: from
    label: 시작일
    format: date
    # format: datetime
    # format: year
    # format: month
    # format: week
    placeholder: 주문생성일 기준
```

--------------------------------

### Relative Date Shortcuts for Date Range Input

Source: https://docs.selectfromuser.com/layout

Illustrates the application of `relative: true` for date range shortcuts, enabling dynamic adjustment of date ranges. This YAML example shows how to define relative shortcuts for 'last week' and 'next week' within a date range context, along with a 'reset' option.

```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
```

--------------------------------

### API Reference: blocks.params Configuration

Source: https://docs.selectfromuser.com/reference

Detailed documentation for the `params` configuration within `blocks`, covering general usage, value-related keys, and methods for setting default values from queries.

```APIDOC
blocks:
  params: []
    Note: The key value of params supports English alphabets. If you enter non-alphabetic characters like Korean in the key, it will not work properly. Please use English alphabets like key: id.

  params.value (Value-related keys):
    Description: Use the following keys when you want to pre-enter specific values into parameters or retrieve them from elsewhere.
    Keys:
      - key: valueFromRow
        description: Used inside viewModal
      - key: valueFromSelectedRows
        description: Used inside actions with selectOptions
      - key: defaultValue
        description: Used to set a default value
      - key: defaultValueFromRow
        description: Used inside viewModal
      - key: valueFromEnv
        description: Used with secure environment variables when calling APIs
      - key: valueFromUserProperty
        description: Used to retrieve values from user properties

  params.defaultValueFromQuery:
    Description: A method to fetch data via a query and use it as a default value. It executes once when the page is loaded and retrieves the first value or AS value from the SQL query result.
    Example:
      params:
      - key: created_at
        defaultValueFromQuery:
          type: query
          resource: acme
          sql: select date_format(now(), '%Y-%m-%d')
```

--------------------------------

### Compare modals and viewModal configurations

Source: https://docs.selectfromuser.com/reference

This comparison highlights the structural differences between configuring a single modal using `viewModal` and supporting multiple modals using the `modals` array. Both allow opening a modal based on a column click, but `modals` provides a more flexible structure for multiple modal definitions.

```YAML
- type: query
  resource: mysql
  sqlType: select
  sql: SELECT id, name, email, created_at FROM users LIMIT 10
  columns:
    id:
      openModal: user
  modals:
    - path: user
      useColumn: id
      blocks:
        - type: query
```

```YAML
- type: query
  resource: mysql
  sqlType: select
  sql: SELECT id, name, email, created_at FROM users LIMIT 10
  columns:
  viewModal:
    useColumn: id
    blocks:
      - type: query
```

--------------------------------

### YAML Configuration for Product/Inventory Detail View and Update Modal

Source: https://docs.selectfromuser.com/guide/sample-inventory-management

This YAML configuration defines a `viewModal` for displaying and updating product/inventory details. It queries the `wine_stock` table, calculates current stock, and provides inline editing capabilities for fields such as `name`, `vintage`, `memo`, `price`, `inflow`, `outflow`, and `deleted_at`. It demonstrates how to use `updateOptions` with SQL queries for each field and the `params.raw` feature for inserting SQL functions like `NULL` or `NOW()`.

```yaml
viewModal:
  useColumn: name
  blocks:
  - type: query
    resource: mysql.qa
    sql: >
      SELECT *,
        COALESCE(inflow, 0) - COALESCE(outflow, 0) AS '재고',
        COALESCE(IFNULL(deleted_at, 'Y'), 'N') AS deleted_at
      FROM wine_stock
      WHERE id = :id
    display: form
    params:
    - key: id
      valueFromRow: id
    columns:
      재고:
        style: |
          color: tomato;
          background-color: #f0f0f0;
          font-size: 28px !important;
          font-weight: 700;
          padding: 1rem;
          text-align: center;
      name:
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET name = :value WHERE id = :id
      vintage:
        maxlength: 10
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET vintage = :value WHERE id = :id
      memo:
        maxlength: 1000
        format: textarea
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET memo = :value WHERE id = :id
      price:
        format: text
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET price = :value WHERE id = :id
      inflow:
        label: 입고수량
        format: number
        min: 0
        step: 1
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET inflow = :value WHERE id = :id
      outflow:
        label: 출고수량
        format: number
        min: 0
        step: 1
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET outflow = :value WHERE id = :id
      deleted_at:
        label: 상태(삭제일시)
        radio:
        - Y
        - N
        updateOptions:
          type: query
          resource: mysql.qa
          sql: UPDATE wine_stock SET deleted_at = :value WHERE id = :id
          params:
          - key: value
            raw:
              Y: NULL
              N: NOW()
```

--------------------------------

### Format Individual Columns

Source: https://docs.selectfromuser.com/reference

This YAML configuration shows how to apply specific data formats to individual columns, such as 'date' or 'checkbox'. It includes examples for 'trueValue' and 'falseValue' for checkbox formatting.

```yaml
- type: query
  ...
  columns:
    id:
    name:
    created_at:
      format: date
    agree:
      format: checkbox
      trueValue: 1
      falseValue: 0
```

--------------------------------

### Number Input Format with Min/Max/Step

Source: https://docs.selectfromuser.com/layout

Specifies an input field as a number type, allowing configuration of minimum, maximum, and step values. This example demonstrates how to define a numeric input with constraints in YAML.

```yaml
params:
- key: number
  format: number
  min: 5 # 최소값
  max: 100 # 최대값
  step: 10 # 증감 단위
```

--------------------------------

### Configure a query action

Source: https://docs.selectfromuser.com/reference

Illustrates how to define an action that executes a SQL query. This is typically used for operations like updating records, where parameters can be dynamically passed to the query.

```YAML
actions:
- type: query
  label: 전시
  resource: acme
  sqlType: update
  sql: update product set status = 'published' where id = :id
  params:
  - key: id
```

--------------------------------

### YAML Configuration for HTML Table Display

Source: https://docs.selectfromuser.com/layout

Defines a query block to fetch wine stock data and display it as an HTML table. This configuration includes SQL query definition, display type, action buttons, and detailed structures for thead, tbody, and tfoot elements, along with references to responseFn and totalFn for data manipulation.

```yaml
pages:
- path: pages/3qQ2sR
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT
        id, name, vintage, inflow, outflow, price, safeflow, deleted_at
      FROM wine_stock
      WHERE inflow IS NOT NULL

    display: html table
    # display: table html

    actions:
      - label: 확정

    responseFn: |
      return rows.map(e => {
        e.deleted_at = e.deleted_at ? moment(e.deleted_at).format('YY.MM.DD') : '-'
        return e
      })

    thead:
      rows:
        - class: bg-neutral-100 text-neutral-800 font-medium divide-x
          cells:
            - th: { rowspan: 2, content: "번호" }
            - th: { rowspan: 2, content: "상품명" }
            - th: { colspan: 2, content: "재고량" }
            - th: { rowspan: 2, content: "판매기간", help: "해당기간까지 게시됩니다.", width: 200px}
        -
          class: "bg-neutral-100 text-neutral-800 font-medium divide-x"
          cells:
            - th: { class: "border", content: "입고" }
            - th: { class: "border", content: "출고" }

    tbody:
      rows:
        - class: "text-center divide-x hover:bg-neutral-100"
          cells:
            - td: { content: "{{id}}" }
            - td: { content: "{{name}}", class: "text-left" }
            - td: { content: "{{inflow}}", class: "text-right" }
            - td: { content: "{{outflow}}", class: "text-right" }
            - td: { content: "{{deleted_at}}" }

    tfoot:
      rows:
        - class: "font-medium divide-x text-center"
          cells:
            - th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "수량합계" }
            - td:
                class: "text-right"
                content: <span class="text-blue-600">{{inflow}}</span> Box
            - td:
                class: "text-right"
                content: <span class="text-blue-600">{{outflow}}</span> Box
            - td: ""
        - class: "font-base divide-x text-center"
          cells:
            - th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "금액합계" }
            - td: { class: "text-right", content: "{{inflow_amount}} 원" }
            - td: { class: "text-right", content: "{{outflow_amount}} 원" }
            - td: ""
        - class: "font-base divide-x text-center"
          cells:
            - th: { colspan: 2, class: "bg-neutral-100 text-neutral-800", content: "재고금액합계" }
            - td: { colspan: 2, content: "{{amount}} 원" }
            - td: ""

    totalFn: |
      total.inflow = _.sumBy(rows, 'inflow')
      total.outflow = _.sumBy(rows, 'outflow')

      total.inflow_amount = _.sum(rows.map(e => (+e.price || 0) * +e.inflow))
      total.outflow_amount = _.sum(rows.map(e => (+e.price || 0) * +e.outflow))

      total.amount = total.inflow_amount - total.outflow_amount

      total.inflow_amount = filters.number(total.inflow_amount)
      total.outflow_amount = filters.number(total.outflow_amount)
      total.amount = filters.number(total.amount)
```

--------------------------------

### Example JSON Response for SIEM Audit Log Search

Source: https://docs.selectfromuser.com/guide/audit-log

An illustrative JSON response from the SIEM audit log search API, showcasing the structure of a typical audit log entry within the 'rows' array.

```json
{
    "message": "ok",
    "rows": [
        {
            "id": 17038,
            "user_id": 1,
            "team_id": 1004,
            "team_row_id": null,
            "user_role_id": 8,
            "name": "Role access",
            "json": {
                "scope": [
                    "tid:1004:admin"
                ]
            },
            "created_at": "2024-08-28 10:08:25",
            "user_permission": "admin",
            "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36",
            "user_ip": "14.138.143.156",
            "memo": null,
            "mode": null,
            "user_email": "jhlee@selectfromuser.com",
            "user_role_email": "jhlee@selectfromuser.com"
        }
    ],
    "count": 141,
    "total": 141
}
```

--------------------------------

### YAML Configuration for Data Visualization with SQL Query

Source: https://docs.selectfromuser.com/guide/view-page-graph-chart

This comprehensive YAML configuration defines a query to fetch product category counts from a MySQL database and then visualizes the results as a bar chart. It includes the SQL query, resource definition, and chart options specifying the chart type, x-axis ('type'), and y-axis ('count').

```yaml
type: query
name: 상품 카테고리 비율
resource: mysql.qa
sqlType: select
sql: >
  SELECT `type`, COUNT(id) AS count
  FROM products
  WHERE `type` IS NOT NULL
  GROUP BY `type`
chartOptions:
  type: bar # line, doughnut, polarArea
  x: type
  y: count
showButtonWithResult: true # 조회 버튼 활성화 여부
```

--------------------------------

### Format Column as Table from JSON Data

Source: https://docs.selectfromuser.com/reference

This YAML configuration demonstrates how to transform JSON data within a column into a table format. It shows examples for both object (pivot table) and array (standard table) JSON structures.

```yaml
sql: >
  SELECT id, json->'$.data' AS json_to_table FROM users LIMIT 100
columns:
  json_to_table:
    format: table
```

```json
{
  "data": {
    "id": 1234,
    "amount": 99000
  }
}
```

```json
{
  "data": [
    {
      "id": 1234,
      "amount": 99000,
      "status": "DONE"
    },
    {
      "id": 2234,
      "amount": 179000,
      "status": "DONE"
    }
  ]
}
```

--------------------------------

### Configure HTTP POST Request in YAML

Source: https://docs.selectfromuser.com/reference

Demonstrates how to define an HTTP POST request block, including setting the method, URL, request body (`data`), and parameters that can be sourced from the environment.

```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
```

--------------------------------

### YAML Configuration for Date/Time Formatting with formatFn

Source: https://docs.selectfromuser.com/reference

This snippet shows how to use `formatFn` with predefined date/time formatting options. It includes `datetime` for original display, `datetime-local` for local timezone adjustment, and `datetimeA` / `datetimeA-local` for AM/PM notation.

```YAML
columns:
  created_at:
    formatFn: datetime
    # formatFn: datetime-local
    # formatFn: datetimeA
    # formatFn: datetimeA-local
```

--------------------------------

### Disabling Dates and Times in Datetime Picker

Source: https://docs.selectfromuser.com/layout

Configures a datetime input to disable specific dates or times based on custom logic. This example shows how to use `disabledDate` to prevent selection of past dates and `minuteStep` to enforce 30-minute intervals.

```APIDOC
disabledDate:
  /**
  * Function to disable dates
  * @param {Date} date - The date object displayed to the user
  * @param {Date} currentValue - The selected date (used for range selection)
  * @returns {boolean} - true if the date should be disabled
```

```yaml
params:
  - key: date
    format: datetime
    disabledDate: |
      // Current date (new Date) disables dates before it
      return date < new Date
    minuteStep: 30
    showSecond: false
```

--------------------------------

### YAML Configuration for Simultaneous MySQL INSERT and UPDATE Transaction

Source: https://docs.selectfromuser.com/guide/crud-page-selected

This YAML snippet defines a `sqlTransaction` block to perform an `INSERT` and an `UPDATE` operation on a MySQL database. The operations are atomic; if one fails, both are rolled back, ensuring data consistency.

```yaml
menus:
- path: test/transaction
  name: 트랜잭션 테스트

pages:
- path: test/transaction
  blocks:
  - type: query
    sqlType: update
    # 연속 실행 (insert + update)
    resource: sqlTransaction
    sqlTransaction:
    - resource: mysql
      sql: INSERT INTO test_transaction1 SET status = :status
    - resource: mysql
      sql: UPDATE test_transaction2 SET status = :status WHERE id = 1000
    params:
    - key: status
      label: 상태코드 4자리
```

--------------------------------

### Navigate with Multiple Parameters Using Jinja-like Syntax (YAML)

Source: https://docs.selectfromuser.com/guide/view-page-reference

This YAML configuration demonstrates how to construct a URL for internal page navigation using multiple parameters. It utilizes a Jinja-like '{{parameter}}' syntax within the 'href' to dynamically pass values from 'id' and 'type' columns.

```yaml
refs:
- column: active_team
  href: users?team_id={{id}}&type={{type}}
```

--------------------------------

### Pass row data to viewModal parameters

Source: https://docs.selectfromuser.com/reference

Demonstrates how to pass data from the selected row into the modal's parameters. This enables dynamic content within the modal based on the clicked row, for example, querying related data using an ID from the row.

```YAML
sql: select id, name, email, created_at from user limit 10
viewModal:
  blocks:
  - type: query
    ...
    sql: select * from order where user_id = :user_id
    params:
    - key: user_id
      valueFromRow: id
```

--------------------------------

### Pass row data to viewModal parameters

Source: https://docs.selectfromuser.com/layout

This example demonstrates how to pass a value from the selected row data (e.g., 'id') into a modal's query parameters. The `valueFromRow` property links a parameter key to a column in the parent query's result.

```YAML
sql: select id, name, email, created_at from user limit 10
viewModal:
  blocks:
  - type: query
    ...
    sql: select * from order where user_id = :user_id
    params:
    - key: user_id
      valueFromRow: id
```

--------------------------------

### Configure an HTTP action

Source: https://docs.selectfromuser.com/reference

Demonstrates how to define an action that makes an HTTP request. This is useful for integrating with external APIs, allowing dynamic data from the application to be sent in the request body or URL.

```YAML
actions:
- type: http
  label: 결제취소
  axios:
    method: POST
    url: https://testapi.com/v1/33iac2d/payment/cancel
    data:
      'payment_id': {{id}}
      'v': "{{API_VERSION}}"
      'status': 'cancel'
  params:
  - key: id
  - key: API_VERSION
    valueFromEnv: true
```

--------------------------------

### Block Types API Reference

Source: https://docs.selectfromuser.com/reference

API documentation for various block types used in page layouts and content display, including `query`, `http`, `markdown`, `top`, `left`, `center`, `right`, `bottom`, `header`, and `tab`.

```APIDOC
type: query
  Description: Executes a database query.
type: http
  Description: Makes REST or GraphQL API requests using axios conventions.
type: markdown
  Description: Displays content formatted with markdown.
type: top | left | center | right | bottom
  Description: Defines a section within the page for layout purposes.
  Properties:
    title: string (optional)
    subtitle: string (optional)
    blocks: array (of block objects)
type: header
  Description: Displays a breadcrumb navigation at the top of the page.
  Properties:
    items: array (of header item objects)
      - path: string (optional)
      - label: string
      - icon: string (optional)
type: tab
  Description: Creates a tabbed interface.
  Properties:
    tabOptions: object
      type: string
        Description: Style of the tabs.
        Possible Values: button, button full, full, plain
      keep: boolean
        Description: If true, maintains the selected tab state.
      autoload: number (optional)
      tabs: array (of tab objects)
        - name: string
        - blocks: array (of block objects)
```

--------------------------------

### Relative Date Shortcuts for Single Date Input

Source: https://docs.selectfromuser.com/layout

Demonstrates how to use the `relative: true` property with date shortcuts, allowing repeated application of offsets. This YAML snippet provides examples for 'yesterday' (D-1) and 'tomorrow' (D+1) shortcuts that can be applied relatively.

```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
```

--------------------------------

### Chart Data Visualization Configuration

Source: https://docs.selectfromuser.com/guide/component-library

YAML configuration for displaying data as a chart, including a SQL query to fetch data and chart options for x-axis, y-axis, and chart type (bar, pie, line).

```yaml
blocks:
- type: query
  name: bar
  resource: mysql.qa
  sqlType: select
  sql: >
    SELECT status, count(id) AS count
    FROM test
    GROUP BY status
  chartOptions:
    x: status
    y: count
    type: bar # pie, line
```

--------------------------------

### Dropdown Select Input Field Configuration

Source: https://docs.selectfromuser.com/guide/component-library

YAML configuration for defining a dropdown select input field, including its key, label, and a list of dropdown options.

```yaml
params:
- key: text
  label: 드롭다운
  dropdown:
  - dropdown1: 드롭다운1
  - dropdown2: 드롭다운2
  - dropdown3: 드롭다운3
```

--------------------------------

### Time Input Format with Options

Source: https://docs.selectfromuser.com/layout

Defines an input field as a time type and configures its selection range and step. This snippet demonstrates how to use `timeOptions` to set start, end, step, and display format for a time picker in YAML, including 24-hour and AM/PM formats.

```APIDOC
timeOptions:
  start: string - Start point of the time selection range.
  end: string - End point of the time selection range.
  step: string - Unit for selectable times (e.g., "00:10" for 10-minute intervals).
  format: string - Display format for time selection (e.g., "HH:mm" for 24-hour, "HH:mm A" for 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
```

--------------------------------

### Color Input Field Configuration

Source: https://docs.selectfromuser.com/guide/component-library

YAML configuration for defining a color picker input field, specifying its key, label, and format.

```yaml
params:
- key: color
  label: 색상
  format: color
```

--------------------------------

### Open a specific page within viewModal

Source: https://docs.selectfromuser.com/reference

Illustrates how to configure `viewModal` to open a pre-defined page, passing dynamic parameters from the query results. This allows for complex modal content defined as separate pages, enhancing reusability and modularity.

```YAML
pages:
  - path: company
    blocks:
    - type: query
      resource: mysql.qa
      sql: SELECT * FROM properties LIMIT 8
      columns:
        id:
        name:
        type:
        address:
      viewModal:
        usePage: company/detail/{{id}} # sql 쿼리 결과의 id를 가져와서 사용합니다.

  - path: company/detail/{{id}} # 받아온 id 값을 아래 sql 쿼리 파라미터에 사용합니다.
    blocks:
    - type: query
      resource: mysql.qa
      sqlType: select
      sql: >
        SELECT id, name
        FROM properties
        WHERE id = :id
```

--------------------------------

### Search SIEM Audit Logs with cURL

Source: https://docs.selectfromuser.com/guide/audit-log

Demonstrates a cURL POST request to the SIEM audit log search API. The example queries logs by a creation date range. This endpoint allows filtering by specific dates, date ranges, actor IDs, and action target IDs.

```sh
curl -X POST 'https://api.selectfromuser.com/api/siem/1004.0000000-0000-0000-0000-000000000/audit-search?q=created%3A2023-08-20..2024-08-29'
```

--------------------------------

### Set Default Date Range Parameter Value with `defaultValueFn`

Source: https://docs.selectfromuser.com/reference

Illustrates setting a default date range for a parameter using `defaultValueFn` when `format: date` and `range: true`. The function is expected to return an array containing two date strings, representing the start and end of the default range.

```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')
    ]
```

--------------------------------

### Configure Tab Component in YAML

Source: https://docs.selectfromuser.com/reference

Shows how to define a tab component, allowing for different tab types (button, full, plain) and options like `autoload` and `keep` to manage tab behavior and content.

```yaml
blocks:
- type: tab
  tabOptions:
    type: button # 버튼형 탭
    # type: button full # 전체폭 버튼형 탭
    # type: full # 전체폭 탭
    # type: plain
    # keep: true
    autoload: 1
    tabs:
    - name: 주문
      blocks:
    - name: 결제
      blocks:
```

--------------------------------

### Time Input Field Configuration

Source: https://docs.selectfromuser.com/guide/component-library

YAML configuration for defining a time input field, specifying its key, label, and format.

```yaml
params:
- key: time
  label: 시간
  format: time
```

--------------------------------

### File Input Field Configuration

Source: https://docs.selectfromuser.com/guide/component-library

YAML configuration for defining a file upload input field, specifying its key, label, and format.

```yaml
params:
- key: file
  label: 파일
  format: file
```

--------------------------------

### Validate Input with Custom JavaScript Function

Source: https://docs.selectfromuser.com/guide/input-validation

This example shows how to use a custom JavaScript function (`validateFn`) to implement more complex validation logic. The function checks if the 'name' field's length is less than 5 characters, returning true for success and false for failure, along with a custom help message.

```YAML
params:
  - key: name
    label: 이름
    help: 이름이 짧으면 성공하고 길면 실패하는 예제입니다.
    validateFn: >
      return String(param.value || '').length < 5
```

--------------------------------

### Date Time Input Field Configuration

Source: https://docs.selectfromuser.com/guide/component-library

YAML configuration for defining a date and time input field, specifying its key, label, and format.

```yaml
params:
- key: datetime
  label: 시간
  format: datetime
```
Tokens:
Raw