🧱
Blocks
This guide will introduce you to use blocks to custom Twake messages. Twake allows application to send customs messages. This customs messages offer the possibility for an application to easily format the text your application wants to send and/or display UI components like button, input or iframe.
- Understand basic layers of block:
- BlockFirst layer object, defining the use case of the current block (Actions, Context, Header, Files...). It can contain block elements and Composition object.
- Block elementsSecond layer object, defining complex element that will be display in a block (Button, Menus, Input...). It can contain composition object
- Composition objectThird layer object, formatting the data to display in both block and/or block elements
- Try to add/remove block
- Start writing block and check your result
Twake have some blocks that are not implemented in slack block kit (iframes, progress bar and copiable). To use them please follow this:
An iframe is Block allowing you to display an html page in twake.
How to use it:
- Iframe type:
type BlockIframe = {
type: "iframe";
iframe_url: string;
width: number;
height: number;
};
- type: always "iframe"
- iframe_url: the URL of the web page you want to display
- width: the with that you iframe will take
- height: the height that you iframe will take
Example:
{
"blocks": [
{
"type": "iframe",
"iframe_url": "
https://twake.app
",
width: "40vh",
height: "40vh"
}
]
}
A copiable is Block element is a readable only input allowing you to copy string with a button.
How to use it:
- Copiable type: it is a plain text input block element with readonly and copiable set to true
type BlockElementPlaintextInput = {
type: "plain_text_input";
action_id: string;
placeholder?: CompositionPlainTextObject;
initial_value?: string;
multiline?: boolean;
min_length?: number;
max_length?: number;
dispatch_action_config?: DispatchActionConfiguration;
readonly?: boolean;
copiable?: boolean;
};
- type: always
"plain_text_input" - readonly: always
true - copiable: always
true
Example :
{
"blocks": [
{
"type": "input",
"element": {
"type": "plain_text_input",
"action_id": "plain_text_input-action",
"initial_value": "https://twake.app"
"readonly": true,
"copiable": true,
},
}
]
}
A Progess bar is Block element that display a progress bar.
How to use it:
- Progress bar type:
export type BlockElementProgressBar = {
type: "progress_bar";
value: number;
title: string;
};
- type: always
"progress_bar" - value: the value of your progress between 0 and 100
- title: the title associate to your progress bar
Example :
{
"blocks": [
{
"type": "progress_bar",
"value": 50,
"title": "Chargement"
}
]
}
Last modified 1yr ago