The main content of this message is comprised of a few visual sections: "Company business", "Read about our culture", and "Inspirational quote of the day".
Company businessThe entirety of the "Company business" section of this message is contained within a single rich_text block. The flexibility of formatting is possible through many element types we'll dive into deeper here.
Within the top-level rich_text block, we have a rich_text_section, a rich_text_list, and another rich_text_list. Think of each rich_text_section as a single line of text. This may be deceiving, given that it holds an array of elements. However, structuring it as an array of elements provides maximum flexibility with styling each element (which can be as tiny as a single character), as well as ease in parsing. For instance, looking at the rich_text_section, we see two elements: an emoji and a text element. While these are different elements in the array, they appear on the same line.
The rich_text_section block allows for elements of the following types, providing many possibilities for styling: text, link, emoji, user, user_group, and channel.
Our text object has a style field, in which we specify bold. Other style options include italic, strike, and code. You apply them in the same manner as bold is shown here.
Moving on to the lists, you'll see in the code that we have two lists. One is the bulleted list, containing the first three bullets, and the second is an ordered list containing the last two elements. Notice how the rich_text_list is comprised of another elements array. This again allows for flexibility in the types of text you want to show, whether that be links, quotes, code snippets, or simply formatted text. To achieve the style of linking one word in a line of plain text, we use a rich_text_section, remembering that each rich_text_section is read as a single line of text.
To achieve the nested list that is part of the third bullet point, we simply create another rich_text_list below the prior one and set the indent property to 1. To indent a list further, you keep increasing the number by one to create deeply nested lists.
This section ends with another divider block.
Company business code{
"type": "rich_text",
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "emoji",
"name": "office"
},
{
"type": "text",
"text": " Company business",
"style": {
"bold": true
}
}
]
},
{
"type": "rich_text_list",
"style": "bullet",
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "text",
"text": "Fill out your W-2"
}
]
},
{
"type": "rich_text_section",
"elements": [
{
"type": "text",
"text": "Enroll in "
},
{
"type": "link",
"text": "benefits",
"url": "https://salesforcebenefits.com"
}
]
},
{
"type": "rich_text_section",
"elements": [
{
"type": "text",
"text": "Fill out your Slack profile, including:"
}
]
}
]
},
{
"type": "rich_text_list",
"style": "ordered",
"indent": 1,
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "text",
"text": "Time zone"
}
]
},
{
"type": "rich_text_section",
"elements": [
{
"type": "text",
"text": "Pronouns"
}
]
}
]
}
]
},
The entirety of the "Read about our culture" section is also contained within a single rich_text block. Let's look at how to format links in a list like the ones shown in this example.
Again within this block we see it is constructed using a rich_text_section and a rich_text_list. Unlike the prior section, we have decided to link the entire text line of the bullet, which can be done using the text property of the link element, instead of breaking it into multiple link and text elements.
This section ends with another divider block.
Read about our culture code{
"type": "rich_text",
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "emoji",
"name": "green_book"
},
{
"type": "text",
"text": " Read about our culture",
"style": {
"bold": true
}
}
]
},
{
"type": "rich_text_list",
"style": "bullet",
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "link",
"text": "Four tips for building a digital first culture",
"url": "https://slack.com/blog/collaboration/four-tips-build-digital-first-culture"
}
]
},
{
"type": "rich_text_section",
"elements": [
{
"type": "link",
"text": "6 simple ways to foster a positive hybrid work environment",
"url": "https://slack.com/blog/collaboration/ways-foster-positive-work-environment"
}
]
}
]
}
]
},
While the header and emoji of the last section of content also use the rich_text block, the following rich text element is different: the rich_text_quote. Using this element creates the vertical bar to the left of the text that indicates it is a quote, similar to how it is shown in messages in the Slack client or app.
The next piece is an input block, which allows collection of data, in this case, a quote, from the user that can be stored and recalled again at a later date.
The final block is the actions block, which is the call to action after the user submits their favorite quote — they push the button, letting the app know the action has been completed and the data is submitted. Read more about button function on the Block elements & interactive components reference page. We've added a block_id for both the input and actions block in order to reference them later. When a block_id is not explicitly added for a block, one will be automatically generated.
{
"type": "rich_text",
"elements": [
{
"type": "rich_text_section",
"elements": [
{
"type": "emoji",
"name": "speech_balloon"
},
{
"type": "text",
"text": " Inspirational quote of the day",
"style": {
"bold": true
}
}
]
},
{
"type": "rich_text_quote",
"elements": [
{
"type": "text",
"text": "Having no destination I am never lost. - Ikkyū."
}
]
}
]
},
{
"type": "input",
"block_id": "quote_input_block",
"element": {
"type": "plain_text_input"
},
"label": {
"type": "plain_text",
"text": ":envelope: Enter your favorite quote, to be shared with future hires like you:",
"emoji": true
}
},
{
"type": "actions",
"block_id": "submit_button_action_block",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Submit"
},
"value": "submit",
"action_id": "button_1"
}
]
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4