App Builder app Custom Configuration

Developers of distributable App Builder apps can define configuration options for users to set at deploy time.

Defining custom configuration options

Custom configuration can be defined via the configSchema property.

app.config.yaml

application:
  <application config>
extensions:
  <extension configs>
configSchema: # This is a top-level property and is global to the app and all extensions
  title: 'the title'
  description: 'the description'
  properties:
    - title: 'Slack Webhook'
      type: 'string'
      description: 'Please provide the webhook used by this application. Configure in slack.com'
      envKey: 'SLACK_WEBHOOK'
CopyCopied to your clipboard
1application:
2  <application config>
3extensions:
4  <extension configs>
5configSchema: # This is a top-level property and is global to the app and all extensions
6  title: 'the title'
7  description: 'the description'
8  properties:
9    - title: 'Slack Webhook'
10      type: 'string'
11      description: 'Please provide the webhook used by this application. Configure in slack.com'
12      envKey: 'SLACK_WEBHOOK'

Usage

The envKey property of a custom configuration option maps to the environment variable name in the app.

Runtime action

To use custom configuration in a Runtime action, map the envKey value for the desired variable to the inputs of the Runtime action, then access values via params.<envKey> in the action code.

Example

app.config.yaml

configSchema:
  title: 'the title'
  description: 'the description'
  properties:
    - title: 'enable caching'
      type: 'boolean'
      envKey: 'IS_CACHING_ENABLED'                      <--- Environment variable name
application:
  actions: actions
  web: web-src
  runtimeManifest:
    packages:
      dx-excshell-1:
        license: Apache-2.0
        actions:
          generic:
            function: actions/generic/index.js
            web: 'yes'
            runtime: nodejs:16
            inputs:
              LOG_LEVEL: debug
              IS_CACHING_ENABLED: $IS_CACHING_ENABLED   <--- Mapped environment variable
            annotations:
              require-adobe-auth: true
              final: true
              code-download: true
CopyCopied to your clipboard
1configSchema:
2  title: 'the title'
3  description: 'the description'
4  properties:
5    - title: 'enable caching'
6      type: 'boolean'
7      envKey: 'IS_CACHING_ENABLED'                      <--- Environment variable name
8application:
9  actions: actions
10  web: web-src
11  runtimeManifest:
12    packages:
13      dx-excshell-1:
14        license: Apache-2.0
15        actions:
16          generic:
17            function: actions/generic/index.js
18            web: 'yes'
19            runtime: nodejs:16
20            inputs:
21              LOG_LEVEL: debug
22              IS_CACHING_ENABLED: $IS_CACHING_ENABLED   <--- Mapped environment variable
23            annotations:
24              require-adobe-auth: true
25              final: true
26              code-download: true

Action code

async function main (params) {
    if (params.IS_CACHING_ENABLED) {
        enableCache()
    }
}

exports.main = main
CopyCopied to your clipboard
1async function main (params) {
2    if (params.IS_CACHING_ENABLED) {
3        enableCache()
4    }
5}
6
7exports.main = main

Web application

To use custom configuration in the web application, values can be accessed directly via process.env.<envKey>.

Example

app.config.yaml

configSchema:
  title: 'Configurable Web App'
  description: 'Web application that can be configured.'
  properties:
    - title: 'Frontend background color'
      type: string
      description: 'Please provide the background color for your frontend'
      enum:
        - blue-400
        - celery-400
        - indigo-400
      envKey: FRONTEND_BACKGROUND_COLOR                <--- Environment variable name
application:
  web: web-src
CopyCopied to your clipboard
1configSchema:
2  title: 'Configurable Web App'
3  description: 'Web application that can be configured.'
4  properties:
5    - title: 'Frontend background color'
6      type: string
7      description: 'Please provide the background color for your frontend'
8      enum:
9        - blue-400
10        - celery-400
11        - indigo-400
12      envKey: FRONTEND_BACKGROUND_COLOR                <--- Environment variable name
13application:
14  web: web-src

Component.js

<View backgroundColor={process.env.FRONTEND_BACKGROUND_COLOR}></View>
CopyCopied to your clipboard
<View backgroundColor={process.env.FRONTEND_BACKGROUND_COLOR}></View>

Custom Configuration Types

Text field

configSchema:
  title: 'Configure your application'
  description: 'Set configurable variables for this Slack application'
  properties:
    - title: 'Slack Webhook'
      type: 'string'
      description: 'Please provide the webhook used by this application. Configure in slack.com'
      envKey: 'SLACK_WEBHOOK'
      default: 'https://slack.com/webhook'
CopyCopied to your clipboard
1configSchema:
2  title: 'Configure your application'
3  description: 'Set configurable variables for this Slack application'
4  properties:
5    - title: 'Slack Webhook'
6      type: 'string'
7      description: 'Please provide the webhook used by this application. Configure in slack.com'
8      envKey: 'SLACK_WEBHOOK'
9      default: 'https://slack.com/webhook'

Checkbox

configSchema:
  title: 'Configure your application'
  description: 'Customize this application to meet your needs.'
  properties:
    - title: 'Enable caching'
      description: 'Determines whether or not the app caches.'
      type: 'boolean'
      envKey: 'IS_CACHING_ENABLED'
CopyCopied to your clipboard
1configSchema:
2  title: 'Configure your application'
3  description: 'Customize this application to meet your needs.'
4  properties:
5    - title: 'Enable caching'
6      description: 'Determines whether or not the app caches.'
7      type: 'boolean'
8      envKey: 'IS_CACHING_ENABLED'

Dropdown

configSchema:
  title: 'Configurable Web App'
  description: 'Web application that can be configured.'
  properties:
    - title: 'Frontend background color'
      type: string
      description: 'Please provide the background color for your frontend'
      enum:
        - blue-400
        - celery-400
        - indigo-400
      envKey: FRONTEND_BACKGROUND_COLOR
CopyCopied to your clipboard
1configSchema:
2  title: 'Configurable Web App'
3  description: 'Web application that can be configured.'
4  properties:
5    - title: 'Frontend background color'
6      type: string
7      description: 'Please provide the background color for your frontend'
8      enum:
9        - blue-400
10        - celery-400
11        - indigo-400
12      envKey: FRONTEND_BACKGROUND_COLOR

Secret

Secret screenshot pending bug fix

configSchema:
  title: 'the title'
  description: 'the description'
  properties:
    - title: 'aws secret key'
      type: 'string'
      secret: true 
      envKey: 'AWS_SECRET'
CopyCopied to your clipboard
1configSchema:
2  title: 'the title'
3  description: 'the description'
4  properties:
5    - title: 'aws secret key'
6      type: 'string'
7      secret: true 
8      envKey: 'AWS_SECRET'

Multiple configuration options

configSchema:
  title: 'Configurable Web App'
  description: 'Web application that can be configured.'
  properties:
    - title: 'Frontend background color'
      type: string
      description: 'Please provide the background color for your frontend'
      enum:
        - blue-400
        - celery-400
        - indigo-400
      envKey: FRONTEND_BACKGROUND_COLOR
    - title: 'Enable caching'
      description: 'Determines whether or not the app caches.'
      type: 'boolean'
      envKey: 'IS_CACHING_ENABLED'
    - title: 'Slack Webhook'
      type: 'string'
      description: 'Please provide the webhook used by this application. Configure in slack.com'
      envKey: 'SLACK_WEBHOOK'
      default: 'https://slack.com/webhook'


export const _frontmatter = {}
CopyCopied to your clipboard
1configSchema:
2  title: 'Configurable Web App'
3  description: 'Web application that can be configured.'
4  properties:
5    - title: 'Frontend background color'
6      type: string
7      description: 'Please provide the background color for your frontend'
8      enum:
9        - blue-400
10        - celery-400
11        - indigo-400
12      envKey: FRONTEND_BACKGROUND_COLOR
13    - title: 'Enable caching'
14      description: 'Determines whether or not the app caches.'
15      type: 'boolean'
16      envKey: 'IS_CACHING_ENABLED'
17    - title: 'Slack Webhook'
18      type: 'string'
19      description: 'Please provide the webhook used by this application. Configure in slack.com'
20      envKey: 'SLACK_WEBHOOK'
21      default: 'https://slack.com/webhook'
22
23
24export const _frontmatter = {}