Skip to main content

SDK

Legacy Process

The information here applies only for Showpad Apps v1 (deprecated). While your existing v1 Showpad Apps will continue to work, we strongly recommend:

Showpad Apps are built using the Experience App SDK. This is a TypeScript library to help you use ShowpadJS, the JavaScript library injected on the window where your Showpad App is running. It acts as bridge between your app and native Showpad functionalities on our different platforms. The Experience App SDK is a layer on top of this to provide:

  • support for local development,
  • a modern typed interface,
  • and more.

During development of your Showpad App, you'll use the Experience App SDK to communicate with the SDK API.

Platform and Browser Compatibility​

The Experience App SDK is compatable with the following platforms/browsers (latest two versions unless specified):

  • Web (Chrome, Firefox, Windows, Safari)
  • iOS (Safari)
  • Android (Chrome)
tip

You can use the Showpad.getDeviceInfo function to find out what platform your app is running on.

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

const deviceInfo = Showpad.getDeviceInfo();

Distribution​

The Experience App SDK is distributed two ways:

  • Immediately Invoked Function Expression (IIFE): This version adds its objects directly to the global namespace. This is a legacy approach which is often easier for beginners.

  • ES6 Module (ESM): This is a more modern approach that allows you to import the objects as needed (works in newer browser versions).

Retrieving the Library​

Depending on your needs and environment, you can retrieve and install the Experience App SDK in a variety of different ways. Let's look at all of them.

Linking From CDN​

The fastest way to get started is to link the library directly from the CDN (Content Delivery Network) by adding a <script> tag to your HTML page:

<script src="https://app-tools.showpad.com/sdk/experience-app-sdk.latest.js"></script>

You can retrieve different versions of the library by modifying the URL. For example:

Then you can import the library:

const { Showpad } = window.ShowpadSdk;

Package Manager Install​

The easiest approach is to install the library with NPM (Node Package Manager) or Yarn. Installation is done during the develoment phase when you scaffold your project.

At the root of your project, simply issue the following command to perform the installation (note, Node.js must be installed on your system):

npm install @showpad/experience-app-sdk

Then you can import the library:

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

Special Considerations​

Filepaths​

Showpad Apps are displayed in Iframes. Absolute paths might resolve incorrectly which can cause issues when importing files or routing in your app. Therefore, we highly recommend using relative paths.

Windows Desktop App​

Modern versions of ECMASCript may encounter issues when your Showpad App is rendered in Edge 18 on the Windows Desktop App. Therefore, we highly recommend using Babel or other transpiling tools.

Known issues​

The slug field is empty on Android for the following function:

  • upload: success