Implementing Tripetto using React

Mark van den Brink
Nov 9, 2017 · 7 min read

Tripetto bring a new way of creating and deploying forms and surveys in websites and applications. You use its intuitive graphical editor to build and edit smart forms with logic and conditional flows in 2D on a self-organizing drawing board. In any modern browser. Mouse, touch or pen.

And you then deploy these smart forms in websites and applications using the supplementary collector library. Anything you build in the editor, the collector will simply run. You just focus on the visuals of the embedded form.

We’ll explain here how to build such a collector implementation using React that’s capable of running Tripetto smart forms inside a website or application.


The basics

Before we dive into the real power-coding, let’s briefly touch on the following basics behind Tripetto.

Editor

The editor is the graphical 2D form designer. It runs in any modern browser. Forms you build in the editor are stored in JSON files. We call these files form definitions. A single form definition contains the complete structure of a form. The definition file is parsed by the collector.

Collector

The collector basically transforms a form definition into an executable program. Once correctly implemented in your website or application, the collector autonomously parses any form definition you build or alter in the editor to an actual working form. You only have to worry about the visuals. We don’t impose any particular UI for the collector.

Blocks

You compose forms in the editor with the available building blocks. These essentially are the different element types (e.g. text input, checkbox, dropdown etc.) you typically use in a form. You decide which blocks to use in the editor and collector. And you may also develop your own.

For this tutorial we are going to use some of our default blocks. But if you want to learn more about creating blocks, take a look here.

That’s it for now. Let’s start coding!


Part A — Setting up your project

First of all, we’re assuming you have Node.js installed. If you don’t, please go ahead and take care of that first. After that, do the following.

1. Create a new folder for your project. Then create two subfolders in there. One for our source and one for some static files:

2. Initialize your package.json file:

3. Install the required packages:

4. Create a tsconfig.json file in the root of your project folder with the following content:

5. Create a webpack.config.js file in the root of your project folder with the following content:

6. Setup some test/build tasks by inserting a script section in yourpackage.json file:

7. Create the application entry point by creating the ./src/app.tsx file with the following content:

8. Create a static HTML page ./static/index.html for your project with the following content:

That’s it for now. Let’s check what we’ve got!

If you’ve correctly followed the steps above you should now have this file tree:

This should now be an actual working application. We can run it by executing the following command:

This will start the webpack-dev-server which invokes webpack, compiles your application and makes it available at http://localhost:9000. You should be able to open it with your browser and it should welcome you with the iconic Hello world!. Yeah!


Part B — Coding the collector

We are going to create a React component for the Tripetto collector. It will be capable of running Tripetto forms and can be used anywhere in your React application. It accepts a form definition as a prop and we use it to implement three blocks (text input, dropdown and checkbox).

Take the steps below to get this going.

1. Create a ./src/helper.tsx file with the following content to implement the collector:

This class simply extends the base collector class of Tripetto. It implements a simple render function that renders the blocks and some buttons. It also implements an interface called IBlock that defines the contract for the block implementation. In this case each block should implement a method render. In other words, this class CollectorHelper is able to use all the blocks that have implemented a proper render method.

2. Create a./src/component.tsx file with the following content to implement our React component:

The React component shown above is actually quite simple. It creates a new instance of the collector helper (implemented in step 1) and invokes its render function when the component needs to be rendered. Since the state of the form is kept in the collector instance, the collector should be able to request an update of the component. So the rest of the code inside the component does just that. We also implement an onFinish prop that can be used to bind a function that is invoked when the collector is finished.


Part C — Implementing blocks

This tutorial covers the implementation of three simple blocks:

1. Add these blocks to the project first. To do so, fire up your terminal/command line and enter:

2. Add a special configuration section to our package.json file:

This section instructs the editor to only load the three blocks we just added. Your package.json should now look like this:

3. Implement the blocks in the collector component by adding the following files:

  • ./src/blocks/checkbox.tsx
  • ./src/blocks/dropdown.tsx
  • ./src/blocks/text.tsx

As you can see, a block simply implements a render function. These functions are automatically invoked by the collector library. Each block needs to register itself by calling the @tripetto.block decorator at the top of the class. The source codes for the three blocks we want to implement look as follows.


Part D — Firing things up

We are almost done. Follow these final steps to get airborne.

1. Import your blocks in your app.tsx to make sure the blocks are registered:

2. Add some code to load a form definition and feed it to the collector. Open your app.tsx and replace the code with:

We use superagent here to fetch the form definition stored in ./static/form.json and feed it to the collector component.

3. Install the Tripetto editor using npm (detailed instructions here) to create a form definition:

This command installs the editor globally and allows you to start it from your command line just by entering tripetto. And it allows you to start creating a form by executing the following command from your project folder (make sure you execute this command from the root ./ of your project folder):

This will start the editor at http://localhost:3333 so you can create your form with it. When you’re done, hit the Save button to store the form definition. Verify that the file ./static/form.json is present.

4. Start your collector by executing npm test. Open http://localhost:9000 in your browser. You should then see the form running.


Part E — Processing collected data

Now that your form is running properly, you probably want to do something with data you collect through it. That's where our onFinish prop comes into play.

Open app.tsx and add the prop as shown below. This will output the collected data to your console when the form is completed. We use the export API for this job.

Don't forget to import the required symbols. In this case import * as Tripetto from “tripetto-collector”;.


Browse the full example

What else?

This tutorial is just a basic example of what you can do with Tripetto. It shows you how to implement a collector and some simple building blocks. But Tripetto can do more than that. For example, you can write your own conditional blocks that allow Tripetto to branch on certain conditions — making ever smarter forms. Dive into our documentation to learn more!

Documentation

You can find all Tripetto docs here. The detailed collector documentation can be found here. If you want to develop your own building blocks, have a look around here.

Other examples

We also have examples for React with Material UI, Angular, Angular Material and more:

Community

We hope more people will start developing building blocks and collectors for Tripetto. If you have created something yourself and want to share it with the community, add your implementation to our list and create a PR:

Tripetto

Tripetto is for making crispy conversational exchanges with your audience. Shifting forms to vivid interactions.

Mark van den Brink

Written by

Entrepreneur / Full-stack software engineer / TypeScript enthusiast / Building @Tripetto

Tripetto

Tripetto

Tripetto is for making crispy conversational exchanges with your audience. Shifting forms to vivid interactions.