Experience App Editor

The Experience App Editor is a tool on the Showpad Online Platform that enables admins to easily modify the contents of an experience app after it has been uploaded.

The interface and structure of the editor is derived from the structure and contents of the config.json file included with your application. Each content-type defined in your config.json file has a corresponding ui-element in the experience app editor.

Content Types

To demonstrate the behaviour of the different content-types, please see below an example config.json file that can then be packaged into a .showpad experience app. ( for instructions on how to do this see our seperate guide how to create your own Experience App )

{
	"version": 1,
	"labels": {
		"My labels": {
			"title": "",
			"description": "",
			"background-color": "#CCC",
			"font-color": "rgba(200,200,200,0.3)",
			"currency-symbol": "€",
			"logo": "https://www.showpad.com/img/logo.png"
		}
	},
	"contents": {
		"My content": {
			"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" }
		}
	}
}

Once packaged and uploaded, a click on the ‘Edit’ tab of the Experience App Editor should unveil the editable fields:

Each content-type in the config.json has a different type of field in the Experience App Editor.

Top level key: labels

When adding key/value pairs under the “labels” top-level key the values of these pairs become editable as text in the editor. The user is not limited to inserting only plain text content as it is possible to include numbers, hexadecimal colours, special characters (like currencies) and even HTML tags.

For example:

Will result in the following:

Top level key: content

Content objects can have one of the following content-types: asset, tags, page, page-tags, url, folder or channel. Each of these content-types provides for a different behaviour in the editor.

asset

When using the “asset” content-type the editor will display a handy file selector in which the user can select the asset or URL asset they wish to include.

When the developer then fetches the config.json in the app, the selected file’s slug will be provided for these selected files.

tags

When using the “tags” content-type the user is presented with a way to easily select and combine tags.

page

When using the “page” content-type the editor will display a handy file selector in which the user can select the page they wish to include.

When the developer then fetches the config.json in the app, the selected page’s slug will be provided for these selected files.

page-tags

When using the “page-tags” content-type the user is presented with a way to easily select and combine tags.

The resulting config.json will then for each tag hold the corresponding slug. The “assets” top-level key will be extended with all the pages that match the given tag queries.

url

The “url” content-type displays as a regular text field in the editor with the added requirement that the provided value is a valid URL.

folder

The ‘folder” content-type displays in the editor as a regular text field with the added requirement that the provided value matches a folder app link ( showpad://folder/123 )

channel

The ‘channel” renders in the editor as a dropdown menu where the user can select a channel to link to. The channels URL will be included in the config.json for the developer to use.