Using the design file to allow admins to configure attributes

The Lightning Components bundle provides a design file. This can be used to add design parameters that become available for the Salesforce administrators when they drag the components using the Lightning Application Builder, Community Builder, or Flow Builder.

Salesforce provides guidelines on best practices when designing components for the Application Builder here: https://developer.Salesforce.com/docs/atlas.en-us.Lightning.meta/Lightning/components_config_for_app_builder_template_component.htm.

Let's imagine we want to allow admins to change labels in the YouTube component for the Search box placeholder, the Search box label, and the message that appears after the search; we can use the design file to make these configurable.

Let's expose these hardcoded values as attributes in the component markup. The following code snippet shows the changed code. Observe the lines in bold:

<aura:component implements="force:appHostable,flexipage...