Using UIKit Block Elements

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 '@quickmeet.chat/apps-engine/definition/accessors';
import { App } from '@quickmeet.chat/apps-engine/definition/App';
import { IMessage, IMessageFollowContext, IPostMessageFollowed } from '@quickmeet.chat/apps-engine/definition/messages';
import { IAppInfo } from '@quickmeet.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: