In the previous document, we went through examples of how to use UI blocks. Here, we will look at some examples of using block elements. Block elements are defined inside blocks. In the following examples, the UI elements will be triggered when a message is followed and unfollowed.
Add a radio button element
The main app class looks like this:
import {
IAppAccessors,
IHttp,
ILogger,
IMessageUpdater,
IModify,
IPersistence,
IRead,
} from '@rocket.chat/apps-engine/definition/accessors';
import { App } from '@rocket.chat/apps-engine/definition/App';
import { IMessage, IMessageFollowContext, IPostMessageFollowed } from '@rocket.chat/apps-engine/definition/messages';
import { IAppInfo } from '@rocket.chat/apps-engine/definition/metadata';
export class SampleAppApp extends App implements IPostMessageFollowed {
async executePostMessageFollowed(context: IMessageFollowContext, read: IRead, http: IHttp, persistence: IPersistence, modify: IModify): Promise<void> {
const messageCreator = modify.getCreator().startMessage();
const appId = this.getID();
messageCreator.setBlocks([
{
type: 'section', // we have added a section block to give a heading to the radio buttons
text: {
type: 'plain_text',
text: 'Select a radio button option:'
}
},
{
type: 'actions', // the action block contains the radio button definition
appId: appId,
blockId: 'action_block_1',
elements: [
{
type: 'radio_button',
actionId: 'radio_button_action_1',
appId: appId,
blockId: 'radio_button_action_block_1',
options: [
{
text: {
type: 'plain_text',
text: 'Option 1',
},
value: 'option_1',
},
{
text: {
type: 'plain_text',
text: 'Option 2',
},
value: 'option_2'
}
]
},
]
}
])
messageCreator.setRoom(context.message.room);
await modify.getCreator().finish(messageCreator);
}
}
In the workspace, the following screenshot shows the response returned by the sample app bot when a message is followed:
Add an overflow menu
To this example, we will now add an overflow menu element after the radio buttons. Add the following definition to the messageCreator.setBlocks
parameter.
{
type: 'section', // the section block which contains the overflow menu block element
blockId: 'section_2',
text: {
type: 'plain_text',
text: 'Overflow menu', // the text displayed for the section block
},
accessory: { // the accessory parameter contains the overflow menu definition
type: 'overflow',
actionId: 'overflow_1',
appId: appId,
blockId: 'overflow_menu_block',
options: [{
value: 'option_1',
text: {
type: 'plain_text',
text: 'This is the first option',
emoji: true,
}},
{
value: 'option_2',
text: {
type: 'plain_text',
text: 'This is the second option',
emoji: true,
}}]}},
The following screenshot shows how the overflow menu is displayed in the UI:
Add a plain text input element
To this example, we will add a plain text input element contained in an input block. Add the following code to the messageCreator.setBlocks
parameter:
{
type: 'input', // the input block
label:{ // a label for the input block
type: 'plain_text',
text: 'Plain text input'
},
element: { // the definition of the plain text input element
type: 'plain_text_input',
appId: appId,
actionId: 'plain_text_input_action_1',
blockId: 'plain_text_input_block_1',
placeholder: {
type: 'plain_text',
text: 'Enter the text input here'
},
multiline: false
}},
The following screenshot shows the plain text input in the UI:
Add a linear scale element
A linear scale element is defined in an action block. Add the following code to the messageCreator.setBlocks
parameter:
{
type: 'actions', // the action block
appId: appId,
blockId: 'action_block_3',
elements: [{ // the definition of the linear scale element
type: 'linear_scale',
actionId: 'linear_scale_action_1',
appId: appId,
blockId: 'linear_scale_action_block_1',
minValue: 0,
maxValue: 10,
initialValue: 0,
preLabel: {
type: 'plain_text',
text: 'Min value'
},
postLabel: {
type: 'plain_text',
text: 'Max value'
}}]},
The following screenshot shows how the linear scale element looks like in the workspace:
Add a checkbox element
A checkbox element is defined in an action block. Add the following code to the messageCreator.setBlocks
parameter:
{
type: 'section', // the section block - adds a text heading to the checkbox action block
text: {
type: 'plain_text',
text: 'Select a checkbox option:'
}},
{
type: 'actions', // the action block contains the checkbox element definition
appId: appId,
blockId: 'action_block_4',
elements: [{
type: 'checkbox',
actionId: 'checkbox_action_1',
appId: appId,
blockId: 'checkbox_action_block_1',
options: [{
text: {
type: 'plain_text',
text: 'Option 1'
},
value: 'option_1',
},
{
text: {
type: 'plain_text',
text: 'Option 2',
},
value: 'option_2'
}]}]},
The following screenshot shows the checkbox element displayed on the UI:
Add date picker and time picker elements
Add the following code to the messageCreator.setBlocks
parameter:
{
type: 'actions', // the action block
blockId: 'action_block_5',
elements: [ // the elements parameter contains the date picker block element definition
{
type: 'datepicker',
appId: appId,
blockId: 'date_block_1',
actionId: 'date_action_1',
}]},
{
type: 'actions', // another action block that contains the time picker element definition
appId: appId,
blockId: 'action_block_6',
elements: [{
type: 'time_picker',
actionId: 'time_picker_action_1',
appId: appId,
blockId: 'time_picker_action_block_1',
}]},
The following screenshot shows what the date picker element looks like on the UI:
The following screenshot shows the time picker element: