# \[예제\] row button openModal, closeAfterSubmit

**URL:** <https://ask.selectfromuser.com/t/row-button-openmodal-closeaftersubmit/214>\
**Category:** 자유게시판\
**Tags:** buttons, openmodal, closeaftersubmit\
**Created:** [7월 1, 2024, 5:56오전 UTC](https://ask.selectfromuser.com/t/row-button-openmodal-closeaftersubmit/214 "2024-07-01T05:56:52Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [7월 1, 2024, 5:56오전 UTC](https://ask.selectfromuser.com/t/row-button-openmodal-closeaftersubmit/214/1 "2024-07-01T05:56:52Z")

</div>

테이블 row에 버튼을 만들고, 클릭시 모달이 뜨고  
해당 모달안에서 api 요청으로 내역을 받아와 실행하는 예제입니다.

```yaml
menus:
- path: pages/Y-Vz18
  name: row button openModal closeAfterSubmit
pages:
- path: pages/Y-Vz18
  title: row 버튼으로 모달 오픈, 실행 후 닫기
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      select * from properties      
    searchOptions:
      enabled: true
    paginationOptions:
      enabled: true
      perPage: 10
    columns:
      작업:
        prepend: true
        buttons:
          - label: 모달
            openModal: modal1-:id
    modals:
      - path: modal1-:id
        header: false
        height: 400px
        blocks:
          - type: http
            name: 모달 상세            
            axios:
              method: POST
              url: https://jsonplaceholder.typicode.com/posts
            closeAfterSubmit: true
            toast: 작업을 실행하였습니다.
            toastOptions:
              type: info
            params:
            - key: 파라미터
              datalist: true
              datalistFromQuery: 
                type: http 
                label: API 조회
                name: API 조회 결과
                params:
                  - key: id
                    valueFromRow: id
                axios:
                  method: GET
                  url: >-
                    https://gist.githubusercontent.com/eces/c267436ddeec8917b47ee666b0d5e955/raw/892877e7035c4f61e946848a3f6da7e9983cab15/test.json
                rowsPath: rows
                selectOptions: 
                  enabled: true
                

```