Skip to main content

5min Quick Start

Eager to dive right in and get started as quickly as possible? Keep reading to learn how you can create a simple Showpad App in less than 5 minutes.


Prerequisites

Development

Showpad

  • Ultimate subscription to Showpad
  • Administrator access to Showpad's Online Platform

1. Create HTML page​

Create an index.html file and link to the Experience App SDK:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Showpad Quick Start</title>
    <script src="https://app-tools.showpad.com/sdk/experience-app-sdk.latest.js"></script>
  </head>

  <body></body>
</html>

2. Add Script​

Add the following <script> tag to the <body> of the HTML page.

<script type="module">
  const { Showpad } = ShowpadSdk;

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

    const { fullName } = await Showpad.getUserInfo();
    document.body.innerHTML += fullName;
  };

  main();
</script>

This code waits for the library to be loaded and then requests the user information through an Experience App SDK method.

3. Add Config files​

Showpad Apps require two configuration files:

  1. The manifest.json file defines publicly available information about your app:

    {
      "identifier": "quick.start",
      "name": "Quick Start",
      "version": "1.0.0",
      "description": "Create a simple Showpad App in less than 5 minutes",
      "author": "Platform Solutions <platformsolutions@showpad.com>"
    }

  2. The config.json file defines the structure and contents displayed in the Experience App Editor in Showpad's Online Platform:

    {
      "version": 1,
      "labels": {},
      "contents": {}
    }

tip

You can use the Experience App CLI initcommand to create and validate all necessary files.

4. Bundle Files​

Open a terminal and from your app's root folder, bundle the files together using the app identifier (from the manifest.json file) as the first parameter:

zip quick.start.showpad index.html manifest.json config.json

tip

You can use the Experience App CLI bundle command to validate and bundle all necessary files.

5 Upload to Showpad​

  1. Create the upload resource:

    POST /app-portal/v1/uploads
    Content-Type: application/json

    {} // empty json object as body for the POST

  2. Add your zipped package to the resource you just created. Be sure to use the uploadUrl and contentType from the response you received:

    PUT {{uploadUrl}}
    Content-Type: {{contentType}}

    // {your .showpad package} as body

    If your upload is successful, you’ll receive an empty response and a 200 Ok status code.

    After a successful upload, the package still needs to be processed. During processing, the status will be WAITING_FOR_UPLOAD. If the status is:

    • ACTIVE - Your package has processed correctly. The app and version properties provide the appId and versionId of your Showpad App.

    • FAILED - Your package has not processed correctly. The error property will contain more details.

Congratulations! You've just created and uploaded your first custom Showpad App!

At this point, administrators will take over so you can get started on your app's next version or an entirely different app.