QuickApps: An Introduction

1010data's QuickApp framework provides a powerful and versatile set of interactive layouts and widgets for building custom interfaces on top of 1010data's analytics engine. Collectively, the tools available in QuickApps provide a unified technology solution for building customizable front-end interfaces that allow for end users and reports consumers to interact with analyses on the 1010data platform.

As a front-end development framework, QuickApps provide the following benefits:
  • User interaction
  • Customizable presentation layer
  • A single interface that can incorporate multiple queries
  • Linkable dependencies

They say the most important part of completing any journey is to know where you're going. To that end, let's take a look at the finished product so you'll know what you'll have when you've finished following this tutorial.

The QuickApp we will build is designed to graph metrics along X and Y axes. We start off doing this with weather data, but by the time we're finished, any table you have access to will be applicable to this QuickApp. It simply uses one column as the X axis for the graph, and another column for the Y axis. Our QuickApp will have drop-down menus that allow the end-user to select which column in the table they want to use for each axis. It will also have input fields that allow the end user to control the size of the intervals along the X axis, as well as minimum and maximum values for the X and Y axes. Here's a screenshot of the input fields:

And here's the chart that will result when the user clicks the Submit Changes button:

This tutorial will walk you through building this QuickApp. Make sure you keep the 1010data Reference Manual handy so you can look up those elements and attributes used throughout the tutorial that may be unfamiliar to you.

There are several important elements you should know in order to create a QuickApp. Before moving forward with this tutorial, take a little time to familiarize yourself with the documentation for the following QuickApp elements:
  • <dynamic> - Functions as a container for a QuickApp.

    If QuickApp elements are not contained within a <dynamic> element, they will not work.

  • <layout> - Specifies the shape, look, and feel of a QuickApp.

    This is the best place to define the visual characteristics of a QuickApp.

  • <widget> - Provides a single point of interaction in a QuickApp.

    A <widget> serves as a point of input/output interaction, and usually contains a single query that the QuickApp will use to determine the output of the interaction.

Once you've looked over the documentation for these elements, you're ready to start building your first QuickApp.