Apex SDK for Slack Components

These components are specific to the Apex SDK and don’t have Slack block equivalents.

Date Time Picker

Select a date from a calendar and select a time.

Datetime Picker Example

The date time picker component is a unique type of component; it isn’t a surface, layout component, or element.

Examples

This example shows a date time picker with a selected date and time.

1components:
2  - definition: datetimepicker
3    name: "exampleDatetimepickerId"
4    properties:
5      label:
6        date: "Example date"
7        time: "Example time"
8      value: "2021-04-01T09:00"
9      placeholder: "Enter a date & time"
10      name: "exampleDatetimepickerName"

This example shows various ways to use a date time picker.

1description: "Example usage of the datetimepicker component"
2components:
3  - definition: modal
4    properties:
5      title: "Datetimepicker Example"
6      submitLabel: "Submit"
7      closeLabel: "Close"
8    components:
9      - definition: section
10        properties:
11          text: "Datetimepicker with required properties only"
12      - definition: datetimepicker
13        name: "exampleDatetimepickerId"
14        properties:
15          label:
16            date:
17              text: "Pick a date with a smile :smile:"
18              emoji: true
19            time:
20              text: "Pick a time"
21              emoji: false
22          name: "exampleDatetimepickerName"
23      - definition: divider
24      - definition: section
25        properties:
26          text: "Datetimepicker with placeholder"
27      - definition: datetimepicker
28        name: "exampleDatetimepickerPlaceholderId"
29        properties:
30          label: "Pick a date & time"
31          name: "exampleDatetimepickerPlaceholderName"
32          placeholder: "Provide a datetime"
33      - definition: divider
34      - definition: section
35        properties:
36          text: "Datetimepicker with confirm dialog"
37      - definition: datetimepicker
38        name: "exampleDatetimepickerConfirmId"
39        properties:
40          label:
41            date: "Pick a date"
42            time: "Pick a time"
43          name: "exampleDatetimepickerConfirmName"
44          confirm:
45            title: "Confirm selection"
46            text: "Please confirm the selection"
47            confirm: "Confirm"
48            deny: "Cancel"
49            style: "primary"
50      - definition: datetimepicker
51        name: "exampleDatetimepickerRequiredId"
52        properties:
53          label:
54            date: "Pick a date (required)"
55            time: "Pick a time (required)"
56          required: true
57          name: "exampleDatetimepickerRequiredName"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `datetimepicker`.
`properties`	Object	Yes	The component’s properties.
`properties.label`	String, Plain Text, Expression, Object	Yes	An object containing the labels for the date time picker, or a label for the date time picker.
`properties.label.date`	String, Plain Text, Expression	No	A label for the date input of the date time picker.
`properties.label.time`	String, Plain Text, Expression	No	A label for the time input of the date time picker.
`properties.value`	String, Expression	No	The initial time that’s selected when the date time picker is loaded in the format `YYYY-MM-DDThh:mm`. The time zone is local to the Slack user client.
`properties.required`	Boolean, Expression	No	If `true`, the form can’t be submitted when either values in the date time component are empty. The default value is `false`.
`properties.placeholder`	String, Plain Text, Expression	No	Text used as a placeholder when the `value` is empty.
`properties.name`	String, Expression	Yes	A name applied to the date time picker. The name is used to retrieve the value on submission. If not specified, a name is automatically generated for you.
`properties.confirm`	Confirm, Expression	No	A confirmation dialog to display after a date/time is selected.
`name`	String, Expression	No	The name to uniquely identify this component within the view.

Field

Available in: Surface components

This component has been deprecated. We recommend that you use a section layout component and render the field name and value using mrkdwn instead.

Warning

Add a field-value pair to your view. A field is an Expression that references a value from a data provider.

The field component is a unique type of component; it isn’t a surface, layout component, or element.

Example

1components:
2  - definition: field
3    properties:
4      label: "Name"
5      field: "{! record.Name }" # 'record' references a value from a data provider

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `field`.
`properties`	Object	Yes	The field’s properties.
`properties.label`	String, Expression	Yes	The label for the field. This value is interpreted as Mrkdwn.
`properties.field`	String, Expression	Yes	An expression referencing the field on a record. This value is interpreted as Mrkdwn.
`properties.verbatim`	Boolean, Expression	No	When set to `false`, Slack detects and parses certain values like links in markdown. The default value is `true`. To turn on automatic parsing, set this key to `false`. See Mrkdwn for more details.
`properties.disableEncoding`	Boolean, Expression	No	An optional parameter that disables encoding for control characters in Mrkdwn.

Iteration

Available in: Surface components Operates on: Layout components

To iterate over data in a view, use the iteration component. The iteration component is a unique type of component; it isn’t a surface component, layout component, or element component.

The iteration component can contain only layout components. It uses the specified components as a template to display data for each item in a data set.

Examples

This example iterates over a list of records from a data provider.

1components:
2  - definition: iteration
3    properties:
4      foreach: "{! records }" # where 'records' references a value from a data provider
5      foritem: "record"
6    components:
7      - definition: text
8        text: "{! record.Name }"

This example iterates over a list of commands.

1description: "A component for the help command that displays a list of available commands."
2schema:
3  properties:
4    commands:
5      type: List
6      required: true
7components:
8  - definition: message
9    properties:
10      text: "List of commands"
11    components:
12      - definition: section
13        properties:
14          text: "Here are the available commands for this app"
15      - definition: iteration
16        properties:
17          foreach: "{!view.properties.commands}"
18          foritem: "command"
19        components:
20          - definition: divider
21          - definition: section
22            properties:
23              text:
24                text: "*Command*: `{!command.commandName}`"
25                type: "mrkdwn"
26              fields:
27                - text: "*Title*: {!command.title}"
28                  type: "mrkdwn"
29                - text: "*Description*: {!command.description}"
30                  type: "mrkdwn"

This example uses a simple list and a list of maps that are passed into a view.

1description: "This displays a simple list and list of maps passed into a view to be used in an iteration"
2schema:
3  properties:
4    names:
5      type: list
6      defaultValue:
7        - Assam
8        - Chai
9        - Earl Grey
10        - Green Tea
11        - Matcha
12        - Oolong
13    others:
14      type: list
15      defaultValue:
16        - name: Chamomile
17        - name: Darjeeling
18        - name: Peppermint
19components:
20  - definition: modal
21    properties:
22      title: Popular Tea
23    components:
24      - definition: iteration
25        properties:
26          foreach: "{!view.properties.names}"
27          foritem: "name"
28        components:
29          - definition: section
30            properties:
31              text: "{!name}"
32      - definition: divider # distinction between "cards"
33      - definition: section
34        properties:
35          text: "More fancy tea variety:"
36      - definition: iteration
37        properties:
38          foreach: "{!view.properties.others}"
39          foritem: "tea"
40        components:
41          - definition: section
42            properties:
43              text: "{!tea.name}"

Keys

Key	Type	Required	Description
`definition`	String	Yes	The value must be `iteration`.
`properties`	Object	Yes	The component’s properties.
`properties.foreach`	Expression	Yes	The list to iterate over.
`properties.foritem`	String	Yes	Used to refer to the current item in the array of child components.
`components`	Array	No	An array of child components to render inside the iteration.

Beta Feature

This feature is not generally available. It is not part of your purchased Services. This feature is subject to change, may be discontinued with no notice at any time in SFDC’s sole discretion, and SFDC may never make this feature generally available. Make your purchase decisions only on the basis of generally available products and features. This feature is made available on an AS IS basis and use of this feature is at your sole risk.