파이썬 슬랙 봇 만들기(3-3): 파일 전송하기 > 모달 드롭다운 만들기

이전 포스팅 - 2023.04.18 - [파이썬/파이썬 활용] - 파이썬 슬랙 봇 만들기(3-2): 파일 전송하기 > 드롭다운 메뉴 만들기

파이썬 슬랙 봇 만들기(3-2): 파일 전송하기 > 드롭다운 메뉴 만들기

이번 포스팅에선 사무실이라는 글자를 눌렀을 때 나오는 모달 드롭다운을 만들어보겠습니다.

모달 창은 기존의 페이지에서 새로운 창을 보여주고 기존의 화면은 흐려지게 만들어줘서 새로운 창에만 시선을 집중시킵니다.

그래서 사용자가 바로 아 여기서 뭘 해야 하는구나를 유도하기에 좋습니다.

[코드 리뷰]

사용한 코드를 지난 시간에 작성한 코드 아래에 붙여줍니다.

@app.action("select_2")
def approve_request(ack, body, client):
    ack()
    selected = body["actions"][0]["selected_option"]["value"]
    if selected == "사무실":
        client.views_open(
            trigger_id=body["trigger_id"],
            view={
                "type": "modal",
                # View identifier
                "callback_id": "view_1",
                "title": {"type": "plain_text", "text": "사무실 "},
                "submit": {"type": "plain_text", "text": "Submit"},
                "blocks": [
                    {
                        "type": "input",
                        "block_id": "input_request_type",
                        "element": {
                            "type": "static_select",
                            "placeholder": {
                                "type": "plain_text",
                                "text": "Select an item",
                            },
                            "options": [
                                {
                                    "text": {
                                        "type": "plain_text",
                                        "text": "테스트 테스트",
                                    },
                                    "value": "테스트 테스트",
                                },
                                {
                                    "text": {
                                        "type": "plain_text",
                                        "text": "테스트 테스트",
                                    },
                                    "value": "테스트 테스트",
                                },
                                {
                                    "text": {
                                        "type": "plain_text",
                                        "text": "견적서 출력",
                                    },
                                    "value": "견적서 출력",
                                },
                            ],
                            "action_id": "select_office_request_type",
                        },
                        "label": {"type": "plain_text", "text": "Label"},
                    },
                ],
            },
        )

 

앱의 action 중에 id 값이 select_2인게 있으면 approve_request 함수를 실행합니다.

selected = body["actions"][0]["selected_option"]["value"] 는 지난 2탄의 드롭다운에서 어떤 걸 선택했냐를 의미합니다. selected에 그 값이 담기고 if문을 통해 사무실이라는 단어로 확인이 되면 아래의 코드들이 실행됩니다.

​

client.views_open() 매서드를 통해 모달창을 열게 만듭니다. 이 매서드는 어떤 걸 기준으로 열리는지를 알아야 해서 trigger_id를 값으로 넣어줘야 합니다. 그리고 view 부분에서는 기존에 했던 것처럼 블락을 만들어주면 되는데 type이 모달인 것을 설정해주셔야 합니다.

​

"callback_id": "view_1"는 제출을 했을 때, 그 값을 받아서 다음 액션을 할 수 있도록 해주는 값이라 꼭 기재해주셔야 합니다.

​

여기까지 기재해주고 나면 2탄과 마찬가지로 그냥 드롭다운을 구성하는 것으로 보시면 됩니다.

 

text에 submit이라고 되어 있는 걸 제출하기로 바꾸면 모달창에서도 값이 바뀝니다.

닫는 것도 수정하고 싶다면 위에는 없는데

"close": {
"type": "plain_text",
"text": "Cancel"
},

를 추가하고 여기서 text를 다른 걸로 바꿔주시면 됩니다.

​

마찬가지로 Label이라고 써있는 것도 다른 단어를 넣어주면 바뀝니다.

그러면 화면을 이렇게 구성할 수 있습니다.

예시는 실제 슬랙이 아니고 2탄에서 공유했던 Block Kit Builder에서 만든 걸 캡처했습니다.

​

여기서 눈치가 빠른 분들은 아시겠지만.. 이전 드롭다운에서 여러가지 항목이 있기 때문에 거기서 다른 값을 선택했을 때, 이번 코드에서 elif를 주고 selected == "test" 이런 식으로 짜주게 되면 각각에 부합하는 경우에 다른 액션을 하도록 만들 수도 있습니다.

​

이번 포스팅은 여기까지 하겠습니다.

이 다음에는 견적서 출력을 위한 필수 정보를 받는 모달을 만들어보겠습니다.