Getting Started with your UI App

A Quantive Results UI app is a web application that loads within the context of a Quantive Results account and enables users to interact with Quantive Results using your app. The technology you pick when developing your UI App is up to you. In the end all that really matters is for you to provision an http server which serves your UI app static content on a public URL which Quantive Results will use to load it.

Building a Quantive Results UI app can be broken down to the following steps:

  1. Develop a web application
  2. Install and use the UI Apps SDK in your app
  3. Bring up an http server that servers your UI App on a public URL
  4. Upload your app to the Quantive Results Marketplace ot test it
  5. Once ready submit your app for review

Getting started

We will walk you through the steps of building a simple UI App. It will load in the Objective or Key Result side view screen in a Quantive Results account and enable users to create a Task under the current item they are viewing.

Technology Stack

For the purposes of this tutorial we will use:

Before we begin, ensure you have the above technologies installed on your machine.

Download and run the demo app

The demo UI app that this tutorial walks you through is available on GitHub. Follow the steps below to clone it locally, install the needed packages and run it.

As a first step, clone the repo locally:

  1. Open a terminal
  2. Execute the following command
git clone https://github.com/gtmhub/gtmhub-plugin-demo.git
  1. Once the repo is cloned locally, navigate to the project directory and run the following command to install the npm packages:
npm install
  1. After the successful installation of all packages, in a terminal window run the integrated server to start serving the app on your localhost:
npm start
  1. By default, the demo UI App runs on http://localhost:5000/ click on this link http://localhost:5000/hello-world or copy it and navigate to it in your browser.
  2. If everything is correct you should see the Hello world app is working! message.

Congratulations, you have installed the demo UI App and you can proceed with the next steps in Public localhost