How do I auto populate a form with browser local storage?

App Development
1

Hi, is there a way to auto-populate a form with values from the browser local or session storage?
In other words, when the form loads, it is filled with the values from the browser local storage. Right now, we can only use record rules to populate the record with browser local storage upon submission of the form. There is no chance to see what was populated.

2

@philipteng can you please describe more with example ?

3

image
image1854×865 80.9 KB

In the Form’s Record Rules, you can assign browser local storage values to the record.
What I was looking for is to fill in the Form with values from the browser local storage, and at the point of the loading of the form. This will allow me to see the values that are loaded from browser local storage, instead of just seeing them in the record after the form is submitted.

4

You can try code along these lines:

TB.render('component_3', function(data) {
	$('#fieldoaANBE1r1b').val(localStorage.getItem('MyLocalStroageKeyName')).change(); 
});

Be sure to change the component ID to your form. Also, change the field ID to the field you wnt to use.

2 Likes
5

I like this!

Now if you could tell us the secret to auto-populating a select field this way, that would be a game changer. :smiley:

6

@SuiteUpstairs you’re referring to a Connection or simple dropdown/select field?

7

A connection field, yes.

8

@moe Is there anyway to do this? Say we already know the connected value ID.

9

I think there is no way to populate the connection field on the form itself. The best you can do is to get the Record Rule to pick up the connection field record ID from the browser local storage and save it with the record upon form submission.
I also found out that even if I define a text field to populate the connection field record ID on the form, it can’t be assigned to the connection field. Seems to have some weird bugs there.

10

Related to this I’m trying to…

  1. Populate a form field of a form in an iframe. Do you know how do do this? To clarify - I have a Tadabase form with fields to fill. I am able to populate those. In that form I added an iframe (via html field) containing another form from other software of ours. I’m trying to populate one of those fields with a value I wrote to the browser storage. For testing sake I used a second TB form in the iframe instead of a form from our other webapp. Still haven’t been able to populate a field.

  2. Would like to populate a date field in the main TB form. I can populate other fields but have not figured out how to populate a date field. Is it possible?

11

Not sure if I fully understand what you are trying to do.

  1. You should be able to populate the inner HTML with the values from browser local storage, as what Moe wrote in the earlier post. But this JS code should be running in the same page as the form that you are trying to populate.
  2. I have not tried populating the date field using browser local storage, but I think if you use Get Value from URL to populate the date field, it should work.
12

@philipteng Thanks! I didn’t think about that but it worked well.