Accessing element attribute values from within a show formula
Clinton
1 year ago
I am trying to set an elements visibility based on a value set in one of it's attributes.
Tod
1 year ago
Great energy @Clinton! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Lucas G
1 year ago
Use a show/hide condition and base it off the attribute. Just make sure the attribute, or your use of it, outputs Bool True/False
noCode.Lad
1 year ago
Use class or the show/hide condition
👍1
Ah... @Lucas G is a speedster
😅1
Clinton
1 year ago
How do I see the attribute from within the formula editor?
Clinton
1 year ago
The elements attributes look as follows. I want to add a formula to the Show attribute that states if "icon-name" is equal to a value from an input, in this case "icon-close", then show the element, otherwise hide it.
noCode.Lad
1 year ago
First off, either bing the input to a variable, or add an event that updates a variable when the input changes.
Then using that variable, build your function. Lemme show an example
Don't change the 'tag' to custom things unless it is really, really needed. These tags are HTML tags and ideally you use existing tags for elements. They're for the browser to know what is what, as well as for accessibility compliance, etc
👍1
Clinton
1 year ago
Good to know
Lucas G
1 year ago
Not saying never do it. It is okay to use custom HTML elements sometimes but as a rule of thumb, you'll want to just try to use existing elements
Back to the original question though
What input are you referring to?
Where is this input coming from?
Clinton
1 year ago
It's was more for readability in the elements tree - I was getting lost
Lucas G
1 year ago
Yeah, I understand no worries lol
😅1
There are 2 types of attributes in toddle. One is regular HTML attributes that you can set in the tab taht you screenshotted
And there are component attributes that you can set up (you can see them on the right sidebar when there is nothing selected in the element tree)
Clinton
1 year ago
Okay - so the goal is to create a component that holds all the icons I am using throughout the application - the component takes in an "icon-name" attribute which is the input I am talking about.
noCode.Lad
1 year ago
Oh... That changes thing
Clinton
1 year ago
I had the idea to then show/hide the elements based on the icon-name input
Lucas G
1 year ago
I recommend making icons into components and reusing them that way
I'm pants at JS 😅, custom formula is a no go for me unfortunately. Even copying and pasting requires some tweaking which I can't do for the life of me. And its strange cos I had HTML & CSS down easily
The only thing I'm usually able to edit is scripts I paste directly in the canvas. As I simply need to change the target element inside "get element by" or something like that
Yeah, generally you need to change one or two things to suit your particular use case in a lot of copied code. Not always will the code work 100% out of the box without you having to tweak something
Lucas G
1 year ago
Oooh like stuff you get from some other source
Gotcha
Lucas G
1 year ago
I have a couple custom actions/formulas but they're hardly needed tbh, toddle's formula editor is very powerful out of the box
@noCode.Lad
@Clinton
.jpeg/public)