Join the Webstudio community

Updated 3 weeks ago

Use expression editor with field id (Tape)

I am using Tape App (template here: https://p-69856b60-05c8-4be6-ba9b-d4a117ae366e.apps.webstudio.is/?authToken=77ad7517-6b62-41cb-8745-eab9e9a33de5), and I was wondering if there is a way to use Webstudio Expression Editor and get a value filtered by field ID. Let me explain:

Here is a sample payload received from Tape: https://media.discordapp.net/attachments/1354207763613614394/1354207763810619668/Payload.jpg?ex=67e473c2&is=67e32242&hm=9892ee0ed3fa09e63fd9c0b69eb740a42ae4ab24419d8c9e3cc3da44c43c0fb8&=&format=webp&width=655&height=782

In Webstudio Expression Editor, I can get the value I need by doing this: https://media.discordapp.net/attachments/1354207763613614394/1354207764041302168/Expression_Editor_1.jpg?ex=67e473c2&is=67e32242&hm=0a64e4396459364e3b50e58d9cb0f84875dc5ce7dcdb02aad777cda61f954c4f&=&format=webp

But what I want to do instead is this: https://media.discordapp.net/attachments/1354207763613614394/1354207764292829377/Expression_Editor_2.jpg?ex=67e473c2&is=67e32242&hm=4933a06e158a64f639ded9bef8aee3fbbd1031c181c9089732c93703ad479002&=&format=webp

I can accomplish something similar in the Tape script editor by using jsonata as such: https://media.discordapp.net/attachments/1354207763613614394/1354207764536230049/jsonata.jpg?ex=67e473c3&is=67e32243&hm=d113d4d20b216a28a49ed96edee6dab93f466be2b047d8c98fc187d7410789c5&=&format=webp

I would like to know if I can do that filtering similar to jsonata on Webstudio. I like that approach because it is easier to filter by field ID than manually searching by number [0, 1, 2] from the payload. Also, it will help when one of the values is empty in the CMS (which Tape omits from the payload). Is this possible in Webstudio?
Attachments
Expression_Editor_1.jpg
jsonata.jpg
Payload.jpg
Expression_Editor_2.jpg
1
O
L
J
13 comments
you would need to use a collection, then on each item you can add an expression on show property and decide if it should be shown or not, or use some other property depending on what your goal is, I assume your goal is to only show certain items from the list
essentially collection gets Resource.data.records
your collection item then has each record and you can check
Item.fields[12356] !== null or something
Thanks Oleg. What you suggested is not exactly what I'm looking for, but I can definitely use it for other things.

I am trying to get the data using the field id instead of the array index.

With jsonata (on Tape script editor), I can get the value from the payload with this:

jsonata("data.records[0].fields[0].values[0].value").evaluate(parsedpayload);

However, I can also get the same value using this:

jsonata("data.records[0].fields[field_id = 581855].values[0].value").evaluate(parsedpayload);

Filtering by field_id allows me more "developer" control than filtering by the array index. I tried doing it in Webstudio like this: https://media.discordapp.net/attachments/1354207763613614394/1354207764292829377/Expression_Editor_2.jpg?ex=67e473c2&is=67e32242&hm=4933a06e158a64f639ded9bef8aee3fbbd1031c181c9089732c93703ad479002&=&format=webp, but it gave me an error: "Assignment is supported only inside actions"

Is what I'm trying to do possible in Webstudio?

Thanks!
.fields[field_id = 581855] isn't valid JS and can't be accomplished in the expression editor as the value you need to filter by is the value of some property in the object.

I think what Oleg suggested is the workaround.

Get them all, loop over each one in a collection, then bind an expression on show based on your condition Eg field_id === 581855

Though with the flexibility of the tape app, I'm wondering why you can't request exactly what you need
I will give the collections approach a try.

With Tape App, I can request the data I need without much issue. The only problem is that if one of the field values is empty on the Tape record, it will omit it from the payload. For example, if I have:

Fields 0: "Hello World"
Fields 1: "Second line"
Fields 2: "Third Line"

Then, in Webstudio Expression Editor, I use data.records[0].fields[1].values[0].value I will get the value Second line

However, if I delete the content from Fields 1 on the Tape record, the new payload will look like this:

Fields 0: "Hello World"
Fields 1: "Third Line"

Webstudio will give me the value "Third Line" in the expression editor since Tape removed the original Fields 1 value from the payload (because it is empty). I thought I could get around that by filtering by field_id on Webstudio, but as you mentioned, it isn't valid JS.
you don't want to work with arrays like that data.records[0].fields[1]
that number 0 1 is not an id, its an index
arrays want to be iterated using collections
when you have data structure that is so deeply nested: arrays in arrays in arrays, it becomes also accordingly nested in the collections structure and less convenient to work with
are there any plans in changing this solution to a filter ui on a collection component, which let's us add custom filters like: column operator value? would be a nice feature to make it a bit more user friendly
This or AI will make it easier to use
Adding more UI where everyone starts using AI seems pointless
Add a reply
Sign up and join the conversation on Discord