Dittofi
Search…
Build a sign up form
Learn how to build a sign up form to collect up your apps user data & store this inside your Dittofi backend.

What will your final app will look like?

Your final app will allow you to collect up user information. It will be responsive for mobile devices, inform the user of a successful sign up & will store the new user sign ups inside a database backend.

Step 1 Creating your users table

The first step in the process of creating your user sign up form is to create a table to store your new users information. This can be done inside the Dittofi Design Studio from within Data Models tab.
Call your new table “Users” (note that the name “User”, no “s”, is a reserved name & so cannot be used). Add the columns, FirstName, LastName, Email & Password. Notice that the Password column has the Knd “Password”. This will ensure that your password is correctly encrypted within your app.

Step 2. Configure Your Endpoint & Action

To sign up a new user, we will need to create an endpoint & associated action that will accept data sent from our frontend to our backend.

Adding an Endpoint

This can be done by first creating an endpoint, giving it a name “sign up users”, a path & setting the request method to “Post”.
Next, because the endpoint is going to be receiving your user sign up information from your frontend, you need to create a body variable. The body variable will contain the users sign up data & be forwarded onto the endpoints action in the next step.
Set the body variable Kind to “Model”, give it a sensible label & name, for example, NewUserSignUpInfo & set the Model to Users.
Note that the model describes the data structure that you’re expecting. In our case the data structure will match the data structure of our users table. So we pick the Model “users”.

Adding an Action

As always, the endpoint alone does nothing. In order to give it some functionality, we need to associate it with an action. To do this, create a new action, call it “sign up a user”, set the trigger to “Endpoint” & pick our newly created “Sign up users” endpoint to associate with the action.
Next we need to add an event to our Actions & Events graph on the right hand side of the screen. The actions & events graph allows us to create “event chains” that give our app functionality.
In this example, we pick the “Create” event, since we want to create a new user record when our user signs up, inside our Users table.
Set the type to model & set the event variable to be equal to the body variable that we created inside our endpoint. This will allow you to map the contents of the body variable into your users table.
The final mapping should look like the screenshot below.
Lastly, set your “As” equal to “Newly Created User Record”, set your actions response variable to “Newly Created User Record” & press save.
We have now configured our database & system backend (endpoint & action) to receive data from our frontend. We can test this from within our endpoint by generating our code & manually running our endpoint & setting fields for each of the FirstName, LastName, Email & Password.

Step 3 Creating a workflow

The next step in allowing your users to submit sign up data from your frontend is to create a frontend workflow that will collect up the user sign up data & then submit this data to your backend.
To do this, we first need to create a front end variable to store the user sign up information. We can accomplish this by pressing the “+Add App Variable” button, giving our variable a name, for example, “UserSignUpData” setting the Kind to “Model” & selecting the Model “Users”.
Next, we create a workflow that includes a “Run Endpoint” event. The Run Endpoint event needs to be associated with our newly created “Sign Up User” endpoint.
Ensure that you give meaningful names to your response variable & response code that are sent back from your endpoint.
Next, since our endpoint has been configured to accept the user sign up information, we have the option to map the data in our app variable into the body variable of our endpoint.
Finally, let’s add two more events to our workflow, a condition event that will check that the endpoint has run successfully, i.e. that the endpoint response code is equal to 200. Notice, to do this you’ll need first to create a new app variable of Kind “Number” & set this initial value equal to 200.
And an alert event that will display a standard success message to the user. Notice, to do this you’ll need first to create a new app variable of Kind “Text” & set this initial value equal to the text that you’d like to display in your alert.

Step 4 Building your frontend

Right… now that we have built up our backend & frontend, let’s just build our user sign up form.
To do this, we can start by adding the columns component to the screen & center aligning it.
Next, add a form to the screen.
Add a few div blocks.
Insert the labels & input boxes inside the div blocks.
Under the Nav bar you can see the structure of the elements that we have added to the page.
Make sure everything is evenly spaced using the padding & margin options in the styles panel. Add a gradient background, border radius, background colors, box shadow & update the text labels to get to a screen like the one below.
Next, bind all of the input boxes on your form to the relevant part of your UserSignUpData variable. This will allow your UserSignUpData variable to be filled up with information added to the input boxes by your users.
Lastly, add an “On Click” trigger to the Submit button component & associate the trigger with your sign up workflow. This will mean that your workflow will start whenever your users click the submit button component.
Finally, you can generate your code & press the preview button on the page builder to test your result.

Onward!

We’ve built an app to send sign up information from a custom frontend & store this information in a custom backend.
If we take a look at the high level concepts involved in this & the last tutorial, you’ll see that in the to-do app tutorial we learnt how to read data from a custom backend. In our “sign up form” tutorial we have learnt how to write data to a custom backend.
In the next tutorial we will learn how to give our apps edit & delete functionality. This means we will know how to Create, Read, Update & Delete data from our app. These are what are know as CRUD commands & with a firm grasp of these concepts you'll already be able to build full stack CRUD apps. Next: Learn how to build CRUD apps →
Last modified 6mo ago