In-app interactivity

Learn how to build and use interactive elements on Intersect

In this video we'll show you how to create an analytics dashboard that gives the power to the user.

Interactive apps allow for a two-way conversation between you and your results. Usually, notebooks respond to a series of predetermined gestures.

However, by toggling the inputs of an interactive block, your results become a reaction to your dynamic wishes.

In other words, you say something, and the app says something back. You say something else and the app says something else back- all without leaving the polished, comfort of your finished dashboard.

Caffeinated beverage intake calculator

Let’s apply these techniques to an extremely meaningful, use-case: a caffeinated beverage intake calculator.

The "Caffeine Calculator" data app uses a data set containing caffeine and nutrition information for over 600 caffeinated beverages. When functioning as it should, this calculator should allow caffeine fiends to calculate exactly how many caffeinated beverages they can safely guzzle in a single 24 hour period.

Currently, the app is set to calculate The number of Pepsi’s that a 125 pound, 18-year-old can safely consume in a day.... If this age, weight and choice beverage happens to fit your needs then you’re in luck (and maybe I should further explore my prophetic prowess)!

However, in its current state, this calculator is of very little use to the general public since it is tied to a very specific weight, age and beverage.

Ultimately, we want to publish this calculator for public use and allow users to enter their own age, weight and beverage of choice.

Editing the data app

So, let’s return to the app mission control. From here we can edit the notebook.

Here is the extensive pipeline that carries out the caffeine calculations.

Adjust interactivity

First, let’s locate the block with the age and weight inputs. As you can see the block contains hard-coded inputs, however I want these two input boxes to appear as editable on the finished dashboard.

So, w adjust the in app interactivity of our block inputs.

To do this, we use this little gear icon. By checking this box, the input becomes interactive and is free to be updated once the app is run.

In this case, I want to prompt both the age and weight inputs.

Next, Let’s find the block that determines the caffeinated drink type. Right now, the notebook is hardcoded to search for Pepsi.

By toggling the interactive gears, we allow the user to enter their own beverage of choice.

Toggle

Now, let’s publish these changes to check out our newfound calculating power!

As you can see this app has now been flagged as Interactive.

Lastly, the app awaits our wishes- so feel free to toggle the inputs to fit your custom calculation.

NEXT TUTORIAL