Define a View

A view is composed of components that display in a Slack surface: a home tab, message, or modal. Define a view in a .view file, which is YAML that describes the components that make up the view.

In a Slack runtime environment, a view translates to blocks. In your SFDX project, a view lives in the force-app/main/default/viewdefinitions folder. For more information, see the ViewDefinition Tooling API object.

Components in a view can handle events such as a button click. See Interactive Components. You can also bind data to a view using expressions and data providers.

note: Views are not cached. If your view fails to render, check your view definition and YAML indentation.

View Definition Keys

Key	Type	Description
`description`	String	A description of this view. Not used in code.
`schema`	Object	The input properties for this view.
`schema.properties`	Object	A map of property names to their schema.
`schema.properties.type`	String	The type of the property value. One of these values: `string`, `boolean`, `number`, `list`, `map`, or `null`.
`schema.properties.required`	Boolean	Specifies whether the property is required. If true, defaultValue is ignored.
`schema.properties.defaultValue`	String	The default value to use if one isn't provided and required is false. Must be a literal value.
`dataproviders`	Object	The data sources for this view. A map of data provider keys to data providers.
`dataproviders.definition`	String	Required. The name of the data provider in the format `apex__MyClassName.getMyMethodName` or `apex__MyNamespace.MyClassName.getMyMethodName`.
`dataproviders.properties`	Object	The input properties for this data provider. A map of property names to either literal values or string expressions.
`components`	Array	Required. The components that make up this view.
`components.definition`	String	Required. The name of the component definition.
`components.name`	String, Expression	The name to uniquely identify the component within the view.
`components.visibility`	Boolean, Expression	Indicates whether the component is shown or hidden. If this property isn't present or it evaluates to true, the component is shown. Otherwise, the component is hidden.
`components.properties`	Object	The properties of this component. A map of property names to literal values or expressions.
`components.components`	Array	The child components of this component.
`regions`	Array	The regions for this view component. Not currently supported.

tip: Some components can handle an event like onclick or onchange, which is also configured in the view definition. See the Component Reference.

Examples

Use these examples to build your own views.

Display a Message in a Modal

This view definition displays a message in a modal. The modal component contains a section component. The view has a title and message property, which is bound to the modal's title and section's text property each.

description: "Display a message in a modal"
schema:
  properties:
    title:
      type: string
      required: true
    message:
      type: string
      required: true
components:
  - definition: modal
    properties:
      title: "{!view.properties.title}"
    components:
      - definition: section
        properties:
          text: "{!view.properties.message}"

Create a Record

This view definition displays a modal for creating a record. The modal contains a section component with an actions component, which has a button to create the record. When clicked, the button calls the createOpportunity Apex class.

description: "Trigger an Apex block action."
components:
  - definition: modal
    properties:
      title: "Create Record"
    components:
      - definition: section
        properties:
          text: "Which object do you want to create a record for?"
      - definition: actions
        name: "apex_actions"
        components:
          - definition: button
            properties:
              label: "Create Opportunity"
              style: "primary"
              name: "apex_action"
            events:
              onclick:
                #createOpportunity must exist in the consumer org as an apex class that implements Slack.Action
                definition: "apex__action__createOpportunity"
                properties:
                  objectApiName: "Opportunity"

Submit a Record

This view definition creates an opportunity record when the submit button is clicked. When clicked, the button calls the submitOpportunity Apex class. The modal contains input fields with placeholders, including a select component with a list of options.

description: "Creates an opportunity record by triggering an Apex action on submission."
components:
  - definition: modal
    properties:
      title: "Create Opportunity"
      submitLabel: "Create"
    events:
      onsubmit:
        #submitOpportunity must exist in the consumer org as an Apex class that implements Slack.ActionDispatcher
        definition: "apex__action__submitOpportunity"
    components:
      - definition: input
        properties:
          label: "Name" # label is the field label
          required: true
        components:
          - definition: textInput
            properties:
              name: "Name" # name should be FieldApiName
              placeholder: "Name"
              value: "{!view.properties.name}"
      - definition: input
        properties:
          label: "Amount"
          required: true
        components:
          - definition: textInput
            properties:
              name: "Amount"
              placeholder: "175000"
      - definition: input
        properties:
          label: "Stage"
          required: true
        components:
          - definition: select
            properties:
              name: "StageName"
              value: ""
              placeholder: "Select a stage."
              options:
                - identifier: "Prospecting"
                  label: "Prospecting"
                - identifier: "Qualification"
                  label: "Qualification"
                - identifier: "Needs Analysis"
                  label: "Needs Analysis"
                - identifier: "Value Proposition"
                  label: "Value Proposition"
                - identifier: "Id. Decision Makers"
                  label: "Id. Decision Makers"
                - identifier: "Perception Analysis"
                  label: "Perception Analysis"
                - identifier: "Proposal/Price Quote"
                  label: "Proposal/Price Quote"
                - identifier: "Negotiation/Review"
                  label: "Negotiation/Review"
                - identifier: "Closed Won"
                  label: "Closed Won"
                - identifier: "Closed Lost"
                  label: "Closed Lost"
      - definition: input
        properties:
          label: "Close Date"
          required: true
        components:
          - definition: datepicker
            properties:
              name: "CloseDate"
              placeholder: "YYYY-MM-DD"