Skip to main content

Define Experience Config

||
caution

This step is only for Experience Type extensions.

When you build an Experience Type extension, you define the labels and contents that administrators can edit through the Experience App Editor - a tool in the Admin App for configuring the contents of a Showpad App.

The editor's interface is derived directly from the structure of your config.json file. You define your own tree structure, which is reflected visually in the editor. The top-level labels and contents keys are removed from the display, so only your nested keys appear.

tip

Use the same tree structure in both labels and contents to group related fields together in the Experience App Editor.

Warning

The following words are reserved. They cannot be used as keys. They can only be used inside a label or content object:

  • type
  • value

Labels​

Labels define editable text strings in your app.

{
  "version": 1,
  "labels": {
    "title": {
      "value": "My application title",
      "description": "A title description",
      "limit": 30
    }
  },
  "contents": {}
}
  • value sets the default text shown in the editor
  • description is optional - displayed as a hint to the administrator
  • limit is optional - sets the maximum character count
tip

Underscores in label keys are transformed into spaces when displayed in the editor.

Contents​

Contents define the Showpad assets, pages, URLs, folders, and channels administrators can assign to your app.

When an organization is assigned to the app, it is also granted access to any assets and pages defined in contents, making them searchable within the organization.

{
  "version": 1,
  "labels": {},
  "contents": {
    "asset_example": {
      "type": "asset"
    },
    "tags_example": {
      "type": "tags"
    },
    "page_example": {
      "type": "page"
    },
    "page_tags_example": {
      "type": "page-tags"
    },
    "url_example": {
      "type": "url"
    },
    "folder_example": {
      "type": "folder"
    },
    "channel_example": {
      "type": "channel"
    }
  }
}

asset​

When using the asset content-type, the editor displays a selector where administrators can search and select an asset or URL asset.

"key": {
  "type": "asset",
  "value": ["bd184adb8ad2a2cdce69413c8b42c93f"],
  "description": "A description for the admin"
}
  • description is optional
  • value is a reserved word and cannot be used as a key
  • The value array supports a single asset
  • Filenames must include the file extension

channel​

When using the channel content-type, the editor displays a selector where administrators can search and select a channel.

folder​

The folder content-type displays as a regular text field in the editor. The provided value must match a folder app link (showpad://folder/123).

page​

When using the page content-type, the editor displays a selector where administrators can search and select a page.

page-tags​

When using the page-tags content-type, administrators can search, select, and combine tags tied to pages.

tags​

When using the tags content-type, administrators can search, select, and combine tags.

url​

The url content-type displays as a regular text field in the editor. The provided value must be a valid URL.

Working Example​

Start with a config.json that includes one label and one asset:

{
  "version": 1,
  "labels": {
    "label_example": ""
  },
  "contents": {
    "asset_example": {
      "type": "asset"
    }
  }
}

The following main.ts example reads label_example as a heading and opens asset_example in the asset viewer when a button is clicked. Inline comments explain each step.


note

The working example must be bundled and uploaded before it can be tested in Showpad.

Next Steps​

Was this page helpful?