Get field labels in a form

App Building
1

I have a tabbed container with a bunch of forms in it. The last tab is a "Preview" tab, where there is a Key Value component that basically shows a pretty-printed {{ form.data }}, where the key is the field name/form data key, formatted using startCase.

I was wondering if there's a way to retrieve the fields in the form, and iterate through them so I can just use the field labels instead of manually formatting the form data key.

A workaround I was thinking is to have a lookup variable where the key is the form data key and the value is the field label. Is there an easy way to do this?

2

Hi @lazymaplekoi,
Not an elegant solution but using your label as form data key works. Since json object allows spacing in the property name like: { "my property": 0}

You just have to use [" "] to reference each field in your form's data.

image
image1880×767 97.7 KB

3

Get the keys Object.keys(form1.data).
... values Object.values(form1.data).
... keys and values Object.entries(form1.data).

Have you thought about using a simple table instead of the key value component? You could map the object to an array of properties and values, then use the mapped value option on the key/property value.
{{ _.startCase(item) }}

Back to the key value component... a transformer with something like

const data = {{ form1.data }};
let prettyData = {};

for (const [k,v] of Object.entries(data)) {
  prettyData[_.startCase(k)] = v;
}
return prettyData

might need a transformer for each form, unless you track the form you want formatted in variable/temp state. I didn't test.

I don't know what the consensus here is on using iife in retool apps, but I use them sometimes. Wrap the code above (removing the {{ }} around form1.data) with the following and place it in the data property of the key value component.

{{(() => {
<code-above>
})()}}
4

thanks for the tip @lamh_bytecode.io. Unfortunately this solution isn't ideal as I would need the form data key to update tables in the database.

My use case is a mere display nitpick tbh. We are recording measurements and there are fields labelled with units like kOhm or mm. The form data key is something like value_kohm/value_mm, and using start case on this outputs "Kohm"/"Mm", which isn't exactly very readable.

5

Oh, I get it now, the form labels. My bad. You can do the same thing but use a object to map it to pretty like you mentioned.

6

Object.keys(form.data) should give you the form data keys, but we currently don't expose component labels (as you've run into). I've created a feature request for this and will keep this thread updated!