Building a Slack App With Native SFDC Integration | by Michael Bogan | Apr, 2022

Picture by Stephen Phillips — Hostreviews.co.uk on Unsplash

This publish is a continuation of our collection based mostly on a video series explaining how to build Slack Apps that combine with Salesforce APIs.

With the Slack Starter Kit from Salesforce, Slack app builders can offload frequent issues like Salesforce authentication, listing hierarchies, reusable code, and deployments to Heroku. The tip result’s much less time spent wrangling code and extra time constructing options to your app.

In our last post, we familiarized ourselves with the starter package and arrange our improvement surroundings to construct a primary Slack app. On this publish, we’ll proceed constructing on that Slack app, specializing in how the Slack Starter Package makes it straightforward to develop two important parts of each Slack app:

  1. Listening to consumer interactions
  2. Drawing a consumer interface

For those who’ve ever developed a front-end net app utilizing JavaScript or CSS, you’re in all probability acquainted with the fundamental tenets of occasion dealing with. Occasions on this context are outlined because the actions a consumer takes in your web site. For instance, a mouse pointer clicking on a hyperlink emits an onclick occasion; a pointer linking over a bit of textual content emits onhover; a keyboard keystroke emits onkeypressed; and so forth.

In Slack, there’s a multitude of events you possibly can take heed to, starting from particular person occasions (when a message is posted or pinned) to world modifications (when channel names or visibilities are modified) to the executive (when an app is put in or a brand new emoji is uploaded). The full list of emitted events is really spectacular. The method for listening to an occasion is as follows:

  • First, your app must outline a webhook URL. It is a path in your server which may obtain POST requests from Slack.
  • Subsequent, in your App Manifest, you determine the occasions which you’d prefer to seize.
  • When an occasion happens in a workspace the place your app is put in, a JSON payload is distributed to your app. Each occasion has its personal distinctive payload.

When your app receives the occasion from Slack, you are able to do something you need: reply to the consumer, pop open a dialog to ask for extra info, or just retailer some info away in your database. There’s just one essential level to recollect: you must respond to Slack within three seconds.

That is to let Slack know that your app obtained its payload and is engaged on a response. You are able to do that work within the background — maybe on a distinct thread, taking so long as you want — however solely after you let Slack know every part is 200 OK.

Let’s check out how occasion dealing with works in apply. Head on over to your App Manifest, and scroll all the way down to the underside of the web page, close to the settings key. It ought to seem like this:

settings:
event_subscriptions:
request_url: https://<your-app-name>.herokuapp.com/slack/occasions
bot_events:
- app_home_opened
interactivity:
is_enabled: true
request_url: https://<your-app-name>.herokuapp.com/slack/occasions

This part identifies the place Slack ought to ship its payload as soon as an occasion happens. The bot_events key already defines one occasion to take heed to, app_home_opened, which is triggered as soon as your app is opened in Slack.

Now, open up the native copy of your Starter Package in your IDE; navigate to apps/slack-salesforce-starter-app/listeners/occasions/app-home-opened.js. As we noticed within the final publish, the Starter Package has an opinionated listing construction to resolve any ambiguities as to the place modifications ought to be made.

On this case, the occasions folder is chargeable for defining all of our occasion responses, similar to the shortcuts folder outlined our slack command within the earlier article. Seek for the primary prevalence of the next line:

shopper.views.publish

As the strategy identify implies, this operate makes use of a Slack SDK to name an API named views.publish. The primary view for this occasion is created by a operate referred to as authorization_success_screen, which could be present in apps/slack-salesforce-starter-app/user-interface/app-home/auth-success.js.

Let’s make a number of modifications to those recordsdata. On line 16, add this line to fetch the timestamp of the occasion:

let event_ts = occasion.event_ts;

Change each authorization_success_screen calls to incorporate this variable as a brand new argument:

view: authorization_success_screen(
currentuser.username,
event_ts
)

Lastly, open up auth-success.js, change the strategy signature to incorporate event_ts, and modify the displayed string to incorporate this info:

'use strict';const  HomeTab, Blocks  = require('slack-block-builder');const authorization_success_screen = (username, event_ts) => {  // previous code stays unchanged       Blocks.Part(
textual content: `It is $event_ts, and you're efficiently authenticated to Salesforce as $username.`
)
);
// continued code stays unchanged

Commit this transformation, and deploy it to Heroku as earlier than:

$ git add .
$ git commit -m "Add occasion timestamp"
$ git push heroku primary

When the deployment is finished, navigate to your app’s tab within the left-hand Slack menu. You need to see a distinct string, which reveals the timestamp of once you opened the app.

Responding to app_home_opened generally is a helpful occasion to take heed to every time your app wants a centralized location to fetch information. Due to this, our subsequent step will likely be to fetch information from Salesforce and current it in our Slack UI.

To design and current layouts, Slack supplies a system referred to as Block Kit. Simply as HTML is a markup language for the online, and Visualforce is a markup language for Salesforce, Block Package is a markup language for Slack — besides it makes use of JSON. For instance, right here’s what a button designed in Block Package may seem like:


"kind": "button",
"textual content":
"kind": "plain_text",
"textual content": "Save"
,
"type": "main"

Block Package ensures that each Slack App has a constant consumer interface. Due to this, there’s a restricted set of UI parts that you should utilize.

When working with Block Package, you design your structure in JSON. Then, you utilize the Slack API to POST that JSON to a channel, tab, or direct message.

We have already got a system in place for listening to an occasion and presenting textual content, so let’s construct on that basis. Earlier than we work in Slack, although, let’s add some information to our recent Salesforce org. To launch your browser on to your Salesforce org, you possibly can run the next command:

sfdx power:org:open

Within the Setup menu, seek for the Data Import Wizard. Select CSV as your information kind, then copy-paste the next traces into a brand new file referred to as information.csv:

Contact First Identify, Contact Final Identify, Contact Description
Arden, Isabela, Lorem ipsum dolor sit amet
Rowina, Arti, Proin a est sit amet quam varius efficitur.
Aislin, Oedipus, Praesent et euismod sem
Sindri, Filbert, Proin facilisis sit amet libero vulputate sodales
Cyril, Gratien, Nulla at massa eu turpis venenatis egestas

Add this file as your information supply. Importing this information ought to solely take a minute or two. You possibly can navigate to the Contacts tab when you’d prefer to be further positive and confirm that these names exist.

Subsequent, we’re going to make modifications just like those we made earlier than when including the occasion timestamp. A variable referred to as conn is on the market to make use of, which serves as a connection to Salesforce. We are able to use it to question for Contact information, which is what we’re enthusiastic about displaying in Slack.

Navigate to apps/slack-salesforce-starter-app/user-interface/app-home/auth-success.js. We’ll await the resolving of the promise on this operate, and we’ll embody the prevailing connvariable as a brand new argument:

view: await authorization_success_screen(
currentuser.username,
event_ts,
conn
)

And as soon as once more, open up auth-success.js and alter the strategy signature to incorporate conn. You additionally have to declare the operate as async:

'use strict';const  HomeTab, Blocks  = require('slack-block-builder');const authorization_success_screen = async (username, event_ts, conn) => {// continued code stays unchanged for now

Subsequent, with this connection, we’re going to challenge a question to Salesforce to get our newly created Contact data. We’ll then show them within the Dwelling tab of our Slack app.

Since we have already got a connection to Salesforce, fetching the info is as straightforward as issuing an SQL question. Place this code proper earlier than the place the place the homeTab variable is outlined:

const end result = await conn.question(
`SELECT Identify, Description FROM Contact`
);
let data = end result.data;
let fields = data.map((document) =>
return `*$document.Identify*: $document.Description`;
);

Then, on the backside of the blocks methodology name, add these traces, which characterize the UI you’re establishing out of Block Package:

Blocks.Part(
textual content: `It is $event_ts, and you're efficiently authenticated to Salesforce as $username.`
),
Blocks.Header( textual content: 'Contacts' ),
Blocks.Divider(),
Blocks.Part(
textual content: fields.be a part of('n')
)

For those who navigate again to your Slack App’s Dwelling tab, you’ll see your group’s record of contacts!

We’ve constructed a Slack app that fetches information from Salesforce and presents that information in a UI utilizing a framework referred to as Block Package. In our subsequent publish, we’ll ship information from Slack again to Salesforce!

Earlier than then, you may wish to familiarize your self with how Block Package works. Slack supplies the Block Kit Builder, which is a playground for his or her UI parts. Underneath the hood, the Slack Starter Package makes use of the Block Builder to simplify the UI assemblage we labored with.

More Posts