Tutorial - Single Record Form

Using Google Firebase Single Record Form

By Thorium Builder Team - November 2020

The Single Record Form is a new form setup that allows you to manage a set of fields in a Firebase collection and attached to users. It can be used to create a simple memo that will be reloaded automatically when the user opens the application, or more generally to allow the user to save personal data attached to their user credentials.

You can download the working App template at the end of this page.

Getting Started

In order to implement a Firebase Single Record Form, you must first setup your Firebase configuration, you can find all the useful information here: https://www.thoriumbuilder.com/helpcenter/firebaseconfiguration.html

Create a New App

Create a new App, enable the Google Firebase Plugin and enter your Firebase configuration to the Plugin Settings:

Make sure that the “Default Sign-In method: Anonymous” is unchecked.
Single Record Forms are attached to registered users, they will be automatically disabled and hidden if the user is not connected with a valid credential.

Now just add a Firebase Avatar Widget to the index page in order to check that we are connected:

Create a New Page

We will now create a new page with the name “mydata” , and we will add a Firebase Form Widget to this page:

In our example, we have added a “Form Delegate Button” to the page (Save Button in the Navbar)

Setup the Form

Now we will setup the Form Workflow and the Form Fields.

Regarding the Fields, we have added only 2 fields (But you can add as many fields of any type you need):

• position: a text field with sub-type “geo” and with attributes “autofill” and “read only” selected. This field will automatically get the user position

• Memo: a long text field with the attribute “Rich Text”, so the user will be able to store rich text

For the Workflow, we just set the “Initial Value” to “Load Firebase Single Recode Form” and we have set the Collection name to “privateinformations”:

Finally just add a button on the index page that will open the page “mydata"

Run the App

When you run the App for the firs time, then you should see the login screen first:

---

After Login, click on the button that open our page “my data"

After Login, click on the button that open our page “my data"

As this is the first time we open the form, the contents is empty, but if you take a look at the Firebase Console, you will see that the collection “privateinformations” has been created and an empty record has been created as well with a name equal to the user uid.

Now Let’s fill the Memo contents and save the record:

As this step, if you take a look at the Firebase Console, you will see that the user Record now contains the form data:

Close and Reopen the App

Now we will close the App and Reopen it, as you can see in the screen shot, now the record is loaded by default and can be modified!

Application to Advanced User Profile

Since the version 2.0, Thorium creates automatically a User Shadow profile collection so you can have access to the App user list, this Collection has a fixed name: “thorium.users” (You should see it by default in the Firebase console for all your Thorium projects)

It means that you can use the Firebase Single Record Form to manage this Collection and add some custom fields if required.
So we will create another page in our example App with then name “extendeduserprofile"

We now add another Firebase Form with the same workflow settings than for the previous form, except that we link it to the collection “thorium.users"

Then we add 3 fields: address, city and country to the form as followed:

Now we will go back to the index page, double-click on the “Firebase Avatar” widget:

We enable the option “Show user Extended Profile” , we set the Label of the Menu “My Profile” and finally, we link the option to the new created page “extendeduserprofile"

Let’s run the App, and click on the Avatar:

You can now see another option in the popover:

Let’s run the App, and click on the Avatar:

You can now see another option in the popover:

The user can now manage his Extended user profile!

Download the Template App

You can download the Working App template here: