Action Buttons
A Rocket.Chat App to registers action buttons to be displayed in different contexts in Rocket.Chat UI, such as message actions, room actions, and message box actions.

Registering a button

Action buttons are registered during the configurationExtend lifecycle method. Here is an example:
1
protected async extendConfiguration(configuration: IConfigurationExtend, environmentRead: IEnvironmentRead): Promise<void> {
2
configuration.ui.registerButton({
3
actionId: 'my-action-id', // this identifies your button in the interaction event
4
labelI18n: 'my-action-name', // key of the i18n string containing the name of the button
5
context: UIActionButtonContext.MESSAGE_ACTION, // in what context the action button will be displayed in the UI
6
});
7
}
Copied!
Registering a button requires ui.registerButton permission. Make sure to add it to your app manifest file (app.json); as shown below:
app.json
1
{
2
"id": "some-app-id",
3
"name": "My App",
4
// ... other definitions
5
"permissions": [
6
{ "name": "ui.registerButtons" }
7
]
8
}
Copied!
That button will be shown as follows:

Handling an interaction

Whenever the user clicks one of the action buttons, the app receives an interaction event. Here is an example of how to handle it:
MyApp.ts
1
export class MyApp extends App implements IUIKitInteractionHandler {
2
public async executeActionButtonHandler(
3
context: UIKitActionButtonInteractionContext,
4
read: IRead,
5
http: IHttp,
6
persistence: IPersistence,
7
modify: IModify
8
): Promise<IUIKitResponse> {
9
const {
10
buttonContext,
11
actionId,
12
triggerId,
13
user,
14
room,
15
message,
16
} = context.getInteractionData();
17
18
// If you have multiple action buttons, use `actionId` to determine
19
// which one the user interacted with
20
if (actionId === 'my-action-id') {
21
const blockBuilder = modify.getCreator().getBlockBuilder();
22
23
return context.getInteractionResponder().openModalViewResponse({
24
title: blockBuilder.newPlainTextObject('Interaction received'),
25
blocks: blockBuilder.addSectionBlock({
26
text: blockBuilder.newPlainTextObject('We received your interaction, thanks!')
27
}),
28
});
29
}
30
31
return context.getInteractionResponder().successResponse();
32
}
33
34
}
Copied!

Choosing when your button will be displayed

Most of the times you will have an action button that does something specific, and should not be displayed everywhere the context is available. For that, you can use the when prop when registering the button:
1
protected async extendConfiguration(configuration: IConfigurationExtend, environmentRead: IEnvironmentRead): Promise<void> {
2
configuration.ui.registerButton({
3
actionId: 'my-action-id',
4
labelI18n: 'my-action-name',
5
context: UIActionButtonContext.MESSAGE_ACTION,
6
// If you want to choose `when` the button should be displayed
7
when: {
8
roomTypes: [
9
RoomTypeFilter.PUBLIC_CHANNEL,
10
RoomTypeFilter.PRIVATE_CHANNEL,
11
RoomTypeFilter.DIRECT,
12
],
13
hasOnePermission: ['create-d'],
14
hasAllRoles: ['admin', 'moderator'],
15
}
16
});
17
}
Copied!
The button above can only be seen in public and private channels and direct messages, by users that have the create-d permission and have both the admin and moderator roles.