Join the Webstudio community

Updated 8 months ago

needed help with binding conditional expression via api variables

At a glance
hello! im really sorry if the title doesnt make sense, i too dont know how should i word it >//<

the stuff im having trouble with, ill explain my usecase, so its easier to understand! so yu guys can help me out accordingly!
*( also i forgot to mention that im new to webstudio and im still learning stuff, i'm not that knowledgeble when it comes to css stuff but currently learning it! ) *

Use Case:

I'm making a livestream redirect page. since i do multistreams on multiple platforms. so basicially i wanted to showcase my livestream's embed ( iframe) only when im live! ( im opting to this method for now, i might be switching to a different service which lets me directly stream to website so i can embed it in the future )
so i do a api call to the streaming platform to check about my live status. if i am live , i just want to control the "show" property of html embed and also have a text block - mention the following . for example
  • if im live - Joqnix is live
  • if im not live - No Active Livestreams or something
or alternatively i could just have the text premade and control it via the "show" property? if live - show the text block, if not, hide it.

what i need help with!

  1. how can i input variables as string? on a text content ( i wasn't able to do it. since some variables weren't strings )
  2. how can i - let's say if a variable = 0, i want it to change or control a certain element? ( for example - the show property of a html embed) if - live_status = 0 - then hide. if Live_status = 1 then show?
for now its just this. i hope its okie if i can keep adding on to this thread. as there would be more issues i might face. since i would be playing around with api based stuff on my website. to dynamically change stuff within the site. ( not cms content! )
if its not okie i can always make new help thread, do lmk!
thank you!!
J
J
O
62 comments
also i was following this guide - https://createtoday.io/posts/webstudio-expression-editor-cheat-sheet

it did help me a bit to understand how to do some stuff. but i wasn't able to control the show property. since the variable is numbers ;w;
about the live_status from the api - it would be
the following path ( refer screenshot)
so it returns 0 ( as im not live) , 1 if im live
Attachment
image.png
regarding the help i needed.
how can i input variables as string? on a text content ( i wasn't able to do it. since some variables weren't strings )

it shows this but it does populate the variable. dunno why its in reds? am i doing something wrong in the expression field?
Attachment
image.png
To output a string as a variable you can surround it with template literals
0
Current it's outputting as a number so you're right, you need to convert to a string
oh so a backtick right? yes i was able to get this part! thank you!
how do i control the variable for the text content property? as in - if variable = 0 - input a certain string?
your condition ? true value : false value
logic is kind of weird to test for 0, so it's better to test for another value if you can like 1 ? 'yeah' : 'no'
just easier mentally to think about IMO
my expression tests if the value exists or not
i think it works!
so if livestatus variable = 0.
it turns "not found". and if the variable is 1 then it says " yea found"
Attachment
image.png
ig its fine. as the api will always have the variable existant. right? when the page gets loaded ( idk how api calls works with webstudio)
the backticks around the variable won't work like that so even though it seems like it's working it won't in some cases
i would just do what i have in the last screenshot
billable room.data outputs literally billable room.data
to access varaibles in backticks you need ${your var}
ohh! so is there a way i can call out a api variable and feed it to a normal variable. ( instead of calling out the full path? )
so like not always doing like i did above, but make it more like - live_status instead?
Sorry feel like i made this more confusing than it should have been 😅
ah i see. so for each use or binding. i gotta call out to a full path. got it. let me check the ${your var} part yu mentioned.
ah its okie! no worries.
no backticks needed
so this would be used in which place? it says this for text property? am i using it wrongly? if its okie with you could yu give a example for this? just to keep myself educated in case if i need it in the future.
Attachment
image.png
yea that worked! i saw a popup saying something isnt available but i couldnt take screenshot of it. but it works thankk you
We're are mixing up two things:

  1. Show/hide field
  2. Text content
For Show hide field it sounds like you want to show it if the value is 1 and hide it if the value is zero. That looks like this

Plain Text
myvar.whateverchild == 1 ? true : false 


That will look if the variable is one and turn on show if it is and hide it if it is not

Now for using the text field binding, normally you would just do this
Plain Text
myvar.whateverchild


BUT, if the output is a number like 1 and not a string like "1" then it will throw an error. So only in those cases would you need to use template literals to convert a number to a string so that would be

Plain Text
`${myvar.whateverchild}`
there are other use cases for template literals too, but just trying to keep it to this example
yes! this helps alot! thank you! ill make sure to follow this!
also since the #︳help is new channel here. so idk if there's strict rules for this channel. so is it okie if i reuse this same thread for seeking help in case if i have trouble with the same issue in the future? or am i supposed to make a new thread?
if the previous info is relevant or the issue is the same area then would make sense to reuse otherwise start new
hope its okie to add onto this! last time you said i cant use a variable outside or use it for other variables right!
im really confused how to do this. so this time the api stuff will be - youtube api v3

im pulling yt api/search , where i get "video_id" but... if i wanted to do a new variable where i do a api request for - yt api/videos
how can i input the variable "video_id" ??? on the url ??

i really wished it was possible to use a random string variable to hold -"video_id" data ;w;
Attachment
image.png
i just need this videoId ;w;
Attachment
image.png
so i needa use this to exclude certain videos. - so i used gemini on how to do it. and it provided with this code. dunno how i can implement this within webstudio ;w;

gemini prompt - "i wanted to exclude a certain video from youtube api search for upcoming livestreams"

but yea i feel like even if i wanted to do it, i would really have to somehow make webstudio do pull video api request , by using the search api request for latest video's id. ( so data.items.id.videoId[0] )

so if im able to achieve this! it would help me to like dynamically update my text boxes. only when a proper livestream happens. and it won't include my waiting room ( which is currently shown in the screenshots - its just used for schedules) and i can do conditional expressions, like you had helped me yesterday!

if you know a better way to do this? do lmk!
Attachment
image.png
Oh, there is one exception to being able to use variables within variables and that's the URL field. you can see the purple plus there. click that and add your video id as a variable to the url
wait me confused. let me try to understand this.
i understood the binding part in url field for a resource type variable.
but i didnt get the part i can use variables within a variable. so i believe its - ${variable} right?

for example - the variable - Youtube Search Api from doing this i get the video_id variable.

so from what you said - yu mean i can somehow feed that value from youtube search api inside the same variable or on a different variable on its url section?
for example in the screenshot you see another api variable - Youtube VideoData so i believe i can somehow input the variable from youtube search api on the url section? but it doesnt show that? tho.. all i see is system and this string variable i made as placeholder! ( cuz the binding ui , shows the available variables i can call out and use right? but here it doesn't show it ? am i missing something? )

if you have time and is free could you provide a example?
Attachment
image.png
oh wait so like this? ahh it is working now!
ahh! why is it, when i write about this, it works well. before i commented this - when i tried so much and it didnt work wah!
Attachment
image.png
yea it worked! thanks again!
Attachment
image.png
i was able to figure out to how js conditionals worked and i did this! while following your expression cheat sheet blog.
do you think there's a better cleaner way to do multiple conditional expressions like this?
Attachment
image.png
pein... more issues when i solve one thing!
so what do you think i can do about a situation where i needa add like a delay or something for an api call?
for example - do youtube search api then after like a few ms do youtube data variable?
so as yu see in the screenshot - it does go through! but i feel like its triggering at the same time or something? making it not feed the "video_id"?

Im super confused if im not feeding the video_id or something.? it worked once when i check the inspect but yea ill check again sorry if im making you more confused ;w;
Attachment
image.png
so which one of these is the correct one?
or i believe i shouldnt put the youtube video data variable on the body ( which has the search variable) does it matter where i place the variable and call out the api stuff?
Attachment
image.png
so i tried it with notion api.
same result - cuz the block id is object or so. it shows the unexpected token error. ig?


so far what've tried are as follows
  1. Plain Text
     ${variablepath} 
  2. Plain Text
     `${variablepath}` 
  3. Plain Text
     variablepath 
since those didnt work i thought - it might be cuz of the variable name. if it contains a space or something it might be causing an error? but it seems that's not the case.
but when i copypaste the value normally. for example - for notion api - 61243af5-78d0-49ce-829e-2dfa0ffe444e or the video id from yt api - ofC4C6Idwyc it works. ;w;

and then i tried just doing it on the url param without clicking on the purple ( + ) icon! that too didnt work.
Attachment
image.png
I don't have time to read through all this. If you still need help, please reduce this to the smallest possible question. Also, have you watched the YouTube vids where I got step by step? Seems like those will help
ah i apologize if my above stuff was too much. ill keep it brief and short. so its easier for you

" i just wish to fetch data and use the fetched data on a different resource variable's url field to fetch a dynamic data " ( hope this made sense?)

for example -
  • make a variable to fetching notion database first > get its page/block id and make a new variable to fetching notion block/page dynamically using the fetched data from database! ( which would be the block id)
  • variable 1 - get request - https://api.notion.com/v1/databases/ (normal )
  • variable 2 - get request - https://api.notion.com/v1/blocks/<block-id from variable 1> ( dynamic )
basically it would be the Airtable example Part 1 video!. where yu did stuff on the url expression field for the search query for mouse etc.
instead of using system.search - imagine yu had to use 2 variables. 1 to pull data. and 2. to use the 1'st data to populate the 2nd variable's url
super sorry for my mess. at this point i wasted the whole day today trying to figure this out. and I'm frustrated. i feel like. its not possible with web studio yet. i tired so much. so ig if its not possible. i should feature request it. and wait till it gets added ig?
" i just wish to fetch data and use the fetched data on a different resource variable's url field to fetch a dynamic data " ( hope this made sense?)

This can't be done. You can fetch multiple resources but they run async, they can't wait for another one and use that info for the next one
ahh so that's why!
hope in the future updates lets us to bind data to a normal variable. that would help a little bit ig?
do you think its possible via code? cant i like input a javascript to do this on a html embed?
you can, client-rendered
dunno if im doing this correctly? but i believe something like this? ( i did blur the api key for safety in the screenshot)
i just used gpt to get a code to fetch upcoming streams from yt api, i did try two methods it gave me.

so "client-rendered" you meant as in turning on the "client only" & "run scripts on canvas" settings and it would be more of final output like?
the limitation here is i wont be able to take a peek or see what all data was fetched etc. am i right?
Attachment
image.png
i couldn't find a feature suggestion on this yet from #︳suggestions regarding what i was looking for. ( if it was suggested before do let me know so i can provide my ideas to it )
"to be able to store data from a api call and use it to execute a new api call dynamically on its url field etc"
i do have some ideas on this! ill try to make a detailed feature request on this~ hope it may be implemented in the future. and if other users also wants it. then it would help em alot! but yea thanks for replying john and oleg! and helping me out! :Felix_heart:

edit - nvm! seems it was asked before - https://discord.com/channels/955905230107738152/1243046297322393671 and it seems to be on the roadmap as well.
ig ill just wait till variables manager feature comes out!

i was gonna suggest a new type of variable ( so it supports delays etc) but ig variables manager might help to acheive what i wanted.
Anything you have in embed is public
Add a reply
Sign up and join the conversation on Discord