Building Blocks

Apps-Engine’s UIKit framework contains blocks, block elements, and objects that you can use to create UI surfaces and interactions for your apps. The components are built using structured JSON. These UI elements need to be triggered by an action or condition, such as sending a message, using slash commands, or using action buttons.

Let’s look at each of these components in detail.

Blocks

Blocks are the components you will use to create the base of the UI layout. Within blocks, you can add block elements and objects.

section

Example

{
  type: 'section',
  blockId: 'section_1',
  text: {
      type: 'plain_text',
      text: 'lorem ipsum 🚀',
      emoji: true,
    }
  accessory: { /* define any of the block elements in this object */ } ,
}

For examples on how to use section blocks, see the topics Using UIKit Blocks, Create Contextual Bar, Create Modal, and Create Action Buttons.

divider

Example

{
  type: 'divider',
  blockId: 'divider_1',
}

See how to use the divider block in the Using UIKit Blocks and Create Modal topics.

image

Example

{
  type: 'image',
  blockId: 'image_1',
  imageUrl: 'https://picsum.photos/200/300',
  altText: 'An image',
  title: {
      type: 'plain_text',
      text: 'lorem ipsum 🚀',
      emoji: true,
    }
}

See how to use the image blocks in the Using UIKit Blocks and Create Contextual Bar topics.

actions

Example

{
  type: 'actions',
  blockId: 'actions_1',
  elements: [ /* block elements */ ]
}

Learn how to use the action block in the Create Modal topic.

context

Example

{
  type: 'context',
  blockId: 'context_1',
  elements: [ /* block elements */ ]
}

input

Example

{
  type: 'input',
  blockId: 'input_1',
  label: {
          type: 'plain_text',
          text: 'Input block',
        }
  element: { /* input block element */ }
}

See how you can add an input block in the Create Modal topic.

preview

Example

{
  type: 'preview',
  description: [
      {
           type: 'plain_text',
           text: 'Description of preview'
       }],
  title: [
  {
    type: 'plain_text',
    text: 'Title of preview'
   }
]}

Block elements

Block elements are components that you can add to the blocks to enhance user interaction.

button

Example

{
  type: 'button',
  text: {
      type: 'plain_text',
      text: 'danger❗',
      emoji: true,
    },
  actionId: 'button_1_danger',
  style: 'danger',
}

For an example on how to use buttons, see the Using UIKit Blocks topic.

image

Example

{
  type: 'image',
  imageUrl: 'https://picsum.photos/200/300',
  altText: 'An image',
}

overflow menu

Example

{
  type: 'overflow',
  actionId: 'overflow_1',
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
  ],
}

See the Create Contextual Bar topic for an example on how to add an overflow block element.

plain text input

Example

{
  type: 'plain_text_input',
  actionId: 'plain_text_input_1',
  placeholder: {
      type: 'plain_text',
      text: 'Enter name',
      emoji: true,
    },
  initialValue: 'John Doe',
  multiline: false,
}

static select menu

Example

{
  type: 'static_select',
  actionId: 'overflow_1',
  initialValue: 'option_2',
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
  ],
  placeholder: {
      type: 'plain_text',
      text: 'Select an item',
    },
}

Learn how to use the static menu block element in the Using UIKit Blocks topic.

multi-static select menu

Example

{
  type: 'multi_static_select',
  actionId: 'overflow_1',
  initialValue: ['option_1' ,'option_2'],
  options: [
    {
      value: 'option_1',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
    {
      value: 'option_2',
      text: {
          type: 'plain_text',
          text: 'lorem ipsum 🚀',
          emoji: true,
        }
    },
  ],
  placeholder: {
      type: 'plain_text',
      text: 'Select an item',
    },
}

radio button

Example

{
   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' }
]}

Objects

Text object

Example

{
  type: 'plain_text',
  text: 'lorem ipsum 🚀',
  emoji: true,
}

Option object

Example

{
  value: 'option_1',
  text: {
      type: 'plain_text',
      text: 'lorem ipsum 🚀',
      emoji: true,
    }
}

Parameter details

When you are defining UI elements, you will have to add some common parameters. The parameters are as follows:

• blockId: Set a unique ID for each block and element that you define. This ID can be used to determine which block interaction to handle.

• actionId: Set a unique ID for each action block and element. This has a similar purpose to blockId as it is used to determine the interaction.

• appId: This determines which app is going to receive any potential interaction that might be generated by the user within a block.

Depending on the block and element, any of these parameters may be mandatory or optional.

Now that we have the information on the various UI blocks, let’s see how to use them in our apps in the next topics.