Skip to main content

Experience App Editor

In this tutorial, you will define labels and contents for the Experience App. Along the way, those defined labels and contents will be assigned using the Experience App Editor.

Requirements

  • Showpad domain with administrator rights
  • NodeJS

App setup

Configure config.json

First, we need to add labels and contents inside the config.json file.

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

Finally, we need to deploy our app so we can fill in the config.json values in the Experience App editor. These values can be used inside our Experience app using the Showpad.parseConfig() method.

App deployment

Bundle Experience App

Bundle the app by following the steps outlined in this guide.

Deploy the app

Deploy the app by following the steps outlined in this Help Center article, but do not click on Publish Experience yet.

Alter label_example and asset_example as explained in the above article. Now publish the experience app. A process will kick in to assign all the contents assigned by the experience app to our user. It will also calculate all the results to the resulting config.json which we can access with the Showpad.parseConfig() method.

App development

Run development server

npm run dev

The server is now running on the URL returned by the command. Open your browser and go to this local URL, and you'll see the HTML content of the index.html file.

Run the Experience App CLI proxy command

Locally, we don't have access to the Showpad functionality. So we need to add an intermediate server providing us this functionality. The Experience app CLI provides a command to spin up this proxy server. Before using this command, we have to:

  1. Download the proxy app.
  2. Upload the proxy app to Showpad platform.
tip

Check this Help Center article for a well-detailed explanation on how to upload custom Experience Apps to Showpad.

Now run the proxy app:

npx experience-app-cli proxy

Use the Experience App Editor config result inside your app

Replace the contents of main.ts with the following so instead of saying "Hello username", you get the contents of label_example and a button which will open the configured asset from asset_example in the Showpad asset viewer.

import { Showpad } from '@showpad/experience-app-sdk';
import './style.css';

interface Config extends Showpad.EnrichedConfigJSON {
labels: {
label_example: Showpad.Label;
};
contents: {
asset_example: Showpad.ContentAsset;
};
}

const app = document.querySelector<HTMLDivElement>('#app')!;

const main = async (): Promise<void> => {
// Always wait for ShowpadLib to be loaded
await Showpad.onShowpadLibLoaded();

try {
// Destructure labels, contents, and assets retrieved from the
// Showpad.parseEnrichedConfig() method.
// Pass the defined Config interface which extends Showpad.EnrichedConfigJSON
// as a generic.
const { labels, contents, assets } = await Showpad.parseEnrichedConfig<Config>();

// Select the label_example label value.
const label_example = labels.label_example.value;

// Select the computed result of the asset_example content value,
// this will be the asset Id.
const asset_example = contents.asset_example.result?.[0];

// Display the label as our title
app.innerHTML = `<h1>${label_example}!</h1>`;

// Check if the asset_example contains a result.
if (asset_example) {
// Select the asset from the assets object by using the key of the result.
const asset = assets[asset_example];
const button = document.createElement('button');

// Set the asset display name as the text of our button.
button.innerHTML = `Open ${asset.displayName}`;

// Open the Showpad assetviewer with our selected asset when pressing the button.
button.addEventListener('click', () => Showpad.openAssetViewer(asset.slug));

app.append(button);
}
} catch (error) {
// Show a native error toast.
Showpad.handleErrorWithToast(error);
}
};

main();

App deployment

Bundle Experience App

Bundle the app by following the steps outlined in this guide.

Deploy the app

Deploy the app by following the steps outlined in this Help Center article.