The Making of the 'How It Works' SDK Demo

Today we are releasing a brand new FormBuilder SDK demo on our website. It lets you play around with a live form builder, shows you how JSON plays a role in the whole process and how that translates into a working form with response data.

In this blog article we'd like to explain why we added an SDK demo. Besides that, it's a perfect opportunity for us to demonstrate how easy it was to implement the form builder and form runners for this demo with just a few lines of code.

You can have a look at the How It Works demo via the link below. After playing around with it, don't forget to return to this blog article for some more insights 😉

---

Why this SDK Demo?

Our FormBuilder SDK proposition already has a dedicated part on our website. It comes with extensive documentation on every aspect of how to integrate our full form solution in any application.

While that documentation includes code demos, we lacked a simple overview of how the SDK components work on both the front end and back end. Our goal with this new SDK demo therefore was twofold:

1. Let potential implementers play around with the fully functioning components, like the form builder component and form runner components. That way they can determine if the FormBuilder SDK is the right fit for their project in terms of functionality;
2. Let potential developers see how the components can be integrated with just a few lines of code and how JSON plays a vital role in the data management. That way they can determine if the FormBuilder SDK is the right fit for their project in terms of technology.

The SDK demo combines those goals by showing the fully functioning components (determine functionality fit), while the implementation code snippets and JSON output of the components are displayed in real time (determine technology fit).

---

How we built the SDK Demo

Now, let's focus on how we built this SDK demo, because it's a perfect example of how easily you can use the form components. To keep things simple we used a combination of plain JavaScript and HTML for this implementation, but the SDK also includes dedicated React and Angular components.

1 - Include JavaScript Bundles

First, we include the JavaScript bundles for the Form Builder component and Form Runner components.

2 - Integrate Form Builder

Next, we initiate the form builder component. We do that with the Tripetto.Builder.open() function. With this function the entire Tripetto form builder with all question blocks and functions becomes available!

2.1 - Preload a form

To make the demo instantly usable, we load a predefined form structure, the so-called form definition. We do that in the first parameter in the Tripetto.Builder.open() function.

For this case we have built this form definition in our Tripetto studio, which is the SaaS version of Tripetto. A possible setup for SDK projects is to use the Tripetto studio as builder (instead of implementing the builder yourself) and extract the form definition from there on; the so-called Hybrid setup.

2.2 - Implement events

Next, we use some events that are available in the builder component:

• The onReady event waits for the builder to be fully loaded, including the form definition. When the event fires we hide the loader and display the builder. The form builder is now ready to use!
• The onChange event fires with every change that's done in the form builder. For this demo we want to display the form definition to make it clear how that's structured. It's a JSON structure that holds all question blocks, content and settings of your form. With every onChange event we update the display of the definition JSON and make it easy to read with Prettier code formatter.

3 - Integrate Form Runners

Now that we have the form builder implemented and show the form definition that comes out of it, it's time to implement a form runner. A form runner takes care of displaying the form, including UI/UX, form logic and data output.

Tripetto's FormBuilder SDK comes with 3 stock runners, each with its own look and feel:

• Autoscroll Runner - Fluently presents one question at a time, comparable to Typeform.
• Chat Runner - Presents all questions and answers as a chat.
• Classic Runner - Presents question fields in a traditional format.

For this demo we implement all 3 form runners to demonstrate that the form definition JSON is separate from the form layout (UI/UX). To initiate those form runners we use the TripettoAutoscroll.run() function, TripettoChat.run() function and TripettoClassic.run() function.

3.1 - Load the form definition

With the builder parameter in each run() function we connect the builder and runner. By doing that, each change in the form structure in the form builder is passed to the runner instantly.

And with the definition parameter in each run() function we feed the form definition from the builder to the runner. The runner reads the definition JSON and will display the form according to the runner's layout (UI/UX).

3.2 - Implement events

For this demo we also use some events that are available in the runner component:

• The onReady event waits for the runner to be fully loaded, including the form definition. When the event fires we hide the loader and display the runner. The actual form is now ready to use!
• The onChange event fires with every change in the form's dataset. The dataset holds the response data of the respondent. This also is a JSON structured format, in this case with Name-Value-Pairs (NVPs)¹. Because for this demo we want to display that, with every onChange event we update the display of the response JSON and make it easy to read with Prettier code formatter.

Ad 1: The runner component comes with several export functions to use the response data as you please, for example as NVPs or as a CSV format.

---

Conclusion

The FormBuilder SDK demo unleashes all the SDK components’ functionalities with just a few lines of JavaScript code. Compare that with how much code and development time it would take to build all of those advanced form features yourself! That's an important reason why the FormBuilder SDK is so interesting if you're looking for a full form solution in your application. No wonder that Fortune 500 companies already use Tripetto's FormBuilder SDK!

The FormBuilder SDK is largely open-source and comes with extensive technical documentation. Investigating if the FormBuilder SDK is the right for you is totally free. Once you’re ready to deploy it to a production environment an SDK license is required in most (not all) cases. You can determine license requirements and pricing via our license request wizard. If you have any questions, please reach out to us via a live chat or schedule a call with us. We’re happy to answer any of your questions and go over your project right away to determine the license.