Tutorials

Part 2: Capturing & Using Data

Prefer to watch rather than read? There’s a video version of this tutorial in our Videos section – you can find it hereGo to the video.

In Part 1 of this tutorial, we built a very basic “Hello World” app and published it to a Smartphone device. The app itself didn’t do very much, but it introduced us to a lot Nutshell’s functionality and demonstrated how Nutshell deals with workflows.

This tutorial follows on from that, adding some clever components to capture and make use of user-data within our “Hello World” app. If you haven’t already completed the first tutorial, now would be a good time to do that.

If you have, fire-up Nutshell, open your “Hello World” app in the builder and let’s get started.

Creating a Simple Form

To capture data from our end-user, we need to add some simple form components to our app. In this tutorial, rather than saying “Hello” to the world, let’s say “Hello” to our end-user. But to do that, we need to know their name.

Let’s start by making a few changes to our “Hello World” app.

Our simple Hello World app

Double-click on the “Say Hello” title of the first screen to open the text editor. Change it to read “What’s your name?” instead. This will give our end-user an idea of what we want them to do.

Now, change the toolbar to Forms, and drag a Text Field component onto the screen below the title, so that it looks something like this:

Drag the Text Field until it snaps neatly to the bottom of your title text

We’re going to use this Text Field to capture the end-user’s name, so we’ll need to make a few changes in the Properties panel. Make sure it’s selected on the canvas, change the Reference to “Name Field”, leave the Data Type as “Plain Text” and hit Save Changes.

Further down the Properties panel, you’ll find a section called Validation Settings. Click its header to expand it, and you’ll find two further settings within it called Required Field and Validation field.

With these options, you can force your end-user to enter a value, and then have Nutshell automatically check that whatever they enter is valid – for example, a properly formed email address. In this case, we don’t want to be that strict, so let’s turn them both off.

Turn off Required and Validate Field options

That’s all we need from a functional point of view. But it doesn’t look as nice as the rest as our app. Let’s play with the styling a little.

Start by resizing it, and positioning it in the center of the screen. With the Text Field still selected on the canvas, go to the Properties panel and expand the Styling settings.

Make the following changes:

• Padding: Top/Bottom: 6px
• Text Alignment: Center
• Text Options: Font: Calibri
• Text Options: Font Size: 10px
• Border Options: All: 2px #980fb1
• Border Options: Corner Radius: All: 3px

You should end up with something like this:

A few simple changes make everything look consistent

That’s our start screen finished. Now we can capture the end-user’s name, and pass it to the next screen, where we can give them a personalised message.

Move to the second screen now, and double-click on the “Hello World” text to bring up the in-line text editor. Select the word “World” and click the little thunderbolt icon in the toolbar.

Select the word “World” so that we can replace it with our end-user’s name

In Nutshell, you’ll see the little thunderbolt icon a lot. Wherever you see it, you can dynamically insert data into a component from a data source (from a form field on another screen, for example).

Nutshell will ask you what type of data source you want to use

Nutshell will need to know what kind of data source you’d like to use to populate the word “World”. In this case, we want to pull in data from our “Name” field on the start screen (which is an input).

Select Input and hit Confirm.

Nutshell will ask you to choose the form field on your canvas that you’d like to use as the data-source. Click on the “Name” field on your start screen.

Click on the “Name” field on your start screen to pull its data into your Text component

Once you’ve selected the “Name” field, you’ll be returned to the in-line text-editor, where the word “World” has been replaced with a placeholder labelled “DATA”.

When the app runs, this placeholder will be replaced automatically with whatever the end-user types into the “Name” field.

The word “World” is replaced with the “DATA” placeholder

Let’s try it.

Hit Preview, and you’ll see something like this:

Type a name into the first screen, for a personalised message on the second

Apps are much better when they’re personalised.

The only problem now, is that when we tap the Go Back button, the last name we typed is still in the field. Wouldn’t it be better if we could clear the field again when we return to the start screen? Well we can.

Select the start screen and look at the Properties panel.

Under the Behaviour section, you’ll see an option that is unique to any screen set as the Start Screen: Clear all screens. Tick this box and save your changes.

The Clear all screens option will clear any forms in your app each time the screen runs

Ticking Clear all screens tells Nutshell that all forms within your app should be reset (cleared) each time this screen is visited by the end-user. This is especially useful if you have very long forms.

Preview your app again. When you return to the start screen, the “Name” field will be blank.

So, that’s it.

In this tutorial, we’ve taken our “Hello World” app and improved it by capturing some data from the end-user, and injecting it dynamically into a text component to personalise our “Hello” message specifically to them.

In the next tutorial, we’ll take this a stage further by sending that same “Hello” message to the end-user in a PDF attached to a matching email.

In the meantime, why not publish the app and play with it on your Smartphone.