--- schema_version: "1" id: 4af52291efe014821c057ef5160ca3e9340b4bcedb2b5a2b06a358923849a948 title: Define a View collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/salesforce-slack-sdk/apex-slack-sdk/guides/build/views_create.md canonical_url: https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/guide/views_create.html source_site: developer.salesforce.com content_type: documentation content_hash: 583a6963fa5fee62a52c4b3bfae859c2dd293064e77d9e944663165112abcf7b products: - Apex SDK for Slack (Beta) --- # Define a View A view is composed of components that display in a [Slack surface](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/surface.md): 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](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/api_tooling/tooling_api_objects_viewdefinition.md) Tooling API object. Components in a view can handle events such as a button click. See [Interactive Components](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/guide/actions_handlers_write.md). You can also bind data to a view using [expressions](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/guide/expressions.md) and [data providers](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/guide/data-providers.md). **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](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/reference.md). ## Examples Use these examples to build your own views. ### Display a Message in a Modal This view definition displays a message in a [modal](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/surface.md#modal). The modal component contains a [section](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/layout.md#section) component. The view has a title and message property, which is bound to the modal's title and section's text property each. ```yml 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](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/surface.md#modal) for creating a record. The modal contains a [section](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/layout.md#section) component with an [actions](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/layout.md#actions) component, which has a `button` to create the record. When clicked, the button calls the `createOpportunity` Apex class. ```yml 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](https://developer.salesforce.com/docs/platform/salesforce-slack-sdk/components/elements.md#select) component with a list of options. ```yml 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" ```