App Home is a private space in Slack that's shared by an app and a user. It's useful for onboarding users, such as showcasing the app's key features and including information and links to popular items.
Get users acquainted with your app with these onboarding block ideas. Use the Home tab to describe what the app helps users achieve. Also, use action verbs in button labels, like "Share Record" or "Post to Channel".
App Home contains 3 tabs:
- Home
- Messages
- About
The Home and About tabs are required in Salesforce apps.
Introduction
Introduce your app with a value proposition. Include 1-2 call to actions to highlight key documentation or tutorials.
Here's the view definition.
# apphome.view
description: "Home page"
schema:
properties:
bodyText:
type: string
required: true
headerText:
type: string
defaultValue: "Welcome Home"
components:
- definition: home
properties:
title: "Sample Home"
components:
- definition: header
properties:
text: "{!view.properties.headerText}"
- definition: section
properties:
text: "{!view.properties.bodyText}"
- definition: actions
components:
- definition: button
properties:
name: "my_button"
label: "Take a Tour"
value: "take_tour"
events:
onclick:
definition: "apex__action__TakeTour"
When a user opens App Home, the app_home_opened event is triggered. To onboard users on how to use your app, handle the app_home_opened event.
This Apex class responds to the app_home_opened event by publishing apphome.view.
/* Publish apphome.view using Slack.EventDispatcher */
public class AppHomeOpened extends Slack.EventDispatcher {
public override Slack.ActionHandler invoke(Slack.EventParameters parameters, Slack.RequestContext context) {
return Slack.ActionHandler.ack(new Handler(parameters, context));
}
public class Handler implements Slack.RunnableHandler {
Slack.EventParameters parameters;
Slack.RequestContext context;
public Handler (Slack.EventParameters parameters, Slack.RequestContext context){
this.parameters = parameters;
this.context = context;
}
public void run () {
// Gets the IntroSlackApp.slackapp app definition
Slack.App app = Slack.App.IntroSlackApp.get();
Slack.BotClient botClient = app.getBotClientForTeam(context.getTeamId());
// Gets the userId
String event = String.valueOf(parameters.getEvent());
String userId = event.substringBetween('user=', ',');
// Gets the apphome view and publish it
Slack.ViewReference viewReference = Slack.View.apphome.get();
viewReference.setParameter('headerText', 'Introduction');
viewReference.setParameter('bodyText', 'Introduce your app with a value proposition. Display 1-2 maximum call to actions that demonstrate key documentation and tutorials. Hands-on walkthroughs and tutorials to get folks using your app right away are preferred.');
Slack.HomeView homeView = new Slack.HomeView.builder()
.viewReference(viewReference)
.build();
Slack.ViewsPublishRequest req = new Slack.ViewsPublishRequest.builder()
.userId(userId)
.view(homeView)
.build();
Slack.ViewsPublishResponse response = botClient.ViewsPublish(req);
if(response.getError() != null) {
System.debug(response.getError());
}
}
}
}
Main Actions
List 1-3 common actions for users to perform.
Here's the view definition.
description: "Common Actions Example"
components:
- definition: modal
properties:
title: "Getting Started"
components:
- definition: header
name: "basics"
properties:
text: "Basics"
- definition: section
properties:
text: "Describe what this slash command does"
- definition: section
properties:
text:
type: "mrkdwn"
text: "`/slashcommand1`"
- definition: header
name: "shortcuts"
properties:
text: "Shortcuts"
- definition: actions
name: "run_shortcut"
components:
- definition: button
properties:
label: "Run Shortcut"
style: "primary"
name: "run_shortcut_button"
events:
onclick:
definition: "apex__action__DoSomething"
Help and Feedback
Display help, documentation, videos, or tutorials for deeper features that might navigate a user outside of Slack. Provide a feedback link to enable customers to easily send their feedback about the app.
Here's the view definition.
description: "Help & Feedback Example for App Home"
components:
- definition: home
properties:
title: "Sample Home"
components:
- definition: header
properties:
text: "Help & Feedback"
- definition: section
properties:
text:
type: "mrkdwn"
text: "• <https://trailhead.salesforce.com/trailblazer-community/groups/0F94S000000kGtASAU|Apex SDK for Slack (UISF Apex) Trailblazer Community> \n • <https://developer.salesforce.com/blogs/2021/09/introducing-foyer-native-slack-integration-for-the-salesforce-platform | Introducing Foyer — Native Slack Integration for the Salesforce Platform> "
disableEncoding: true
See the markdwn text type.
Dashboard and Settings
Additionally, you can list an overview for common tasks to be done within your app. Define a default view that leans towards showing active or relevant items. List all personal settings for your app including connecting to Salesforce, managing notifications, and other preferences.
