Implement Slack’s newly launched Home tab in your app using Python & Django

Slack has launched a new way of welcoming users on your App.

Photo by Austin Distel on Unsplash

They have launched a persistent Home tab which is a dynamic interface for apps. This is placed in App home just besides messages tab. The Home tab is currently in open beta.

You will have to get it enabled for your app. Once enabled, you will see a tab with name Home as you can see in the above image.

In my previous article, I have explained how to setup a basic infrastructure of your app using Python & Django on Slack. In this article, I will focus on implementing Home tab in your existing Slack app.

Lets start by enabling this feature for your application. You will see App Home in the sidebar under Features, just click on it.

Sign Up for the feature by clicking on the button. Click on Continue in the dialog box. You will see a confirmation message that App Home beta has been successfully enabled for your app.

As you see that Home Tab and Messages Tab, both have been enabled for your app. You can disable any of them as per your needs and requirements.

Build better voice apps. Get more articles & interviews from voice technology experts at voicetechpodcast.com

You will have to subscribe to app_home_opened event, so that slack can inform when some user clicks on Home tab.

Now, lets start by handling this event in your codebase and form a response for the Home tab. For this, I will refer to the code from my earlier article. Append the below code in views.py to handle this event.

#actions/views.py
def event_hook(request):
    client = slack.WebClient(token=settings.BOT_USER_ACCESS_TOKEN)
    json_dict = json.loads(request.body.decode('utf-8'))
    if json_dict['token'] != settings.VERIFICATION_TOKEN:
        return HttpResponse(status=403)
    if 'type' in json_dict:
        if json_dict['type'] == 'url_verification':
            response_dict = {"challenge": json_dict['challenge']}
            return JsonResponse(response_dict, safe=False)
    if 'event' in json_dict:
        event_msg = json_dict['event']
        if ('subtype' in event_msg) and (event_msg['subtype'] == 'bot_message'):
            return HttpResponse(status=200)
    if event_msg['type'] == 'message':
        user = event_msg['user']
        channel = event_msg['channel']
        response_msg = ":wave:, Hello <@%s>" % user
        client.chat_postMessage(channel=channel, text=response_msg)
        return HttpResponse(status=200)
    if (event_msg['type'] == 'app_home_opened') and ('tab' in event_msg) and (event_msg['tab'] == 'home'):
        user = event_msg['user']
        channel = event_msg['channel']
        blocks = get_app_home_block()
        views = {"type": "home", "blocks": blocks}
        client.views_publish(user_id=user, view=views)
        return HttpResponse(status=200)
    return HttpResponse(status=200)

Here, you can see I have handled app_home_opened event. The payload is created, then sent via views.publish Web API method.

I have created a dummy block, whose code is written in actions/models.py under get_app_home_block() method. Sample method is shown below.

#actions/models.py
from django.db import models
def get_app_home_block():
    blocks = [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*ronakbansal Team Summary*"
            }
        },
        {
            "type": "context",
            "elements": [
                {
                    "text": "AttendanceBot Announcements",
                    "type": "mrkdwn"
                }
            ]
        },
        {
            "type": "divider"
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "\nHi :wave:, I am TestBot"
            }
        }
    ]
    return blocks

Lets start the development server and click on the Home tab. You will see a dummy response on the Home tab as in the image below.

You can use Block kit components for better user experience. Take a deeper look at Block Kit and find out the complete range of layout blocks and elements available for use in Home tabs.

You can also use Modals. Button interactions can trigger modals, thus enabling apps to take user inputs and respond on the same basis.

Slack says Home tabs and modals are powerful features separately — combining them allows your app to scale even greater heights.

Complete Code of the above sample app can be found here.

Note: Please do not push your code into any public repository with private information like tokens or secrets stored in it. Ideally these values should be exported as environment variables.

Hope this is useful to all! Should you have any questions, please feel free to contact at ronakbansal@gmail.com anytime.

Something just for you