Accessing element attribute values from within a show formula
Clinton
2 years ago
I am trying to set an elements visibility based on a value set in one of it's attributes.
Tod
2 years ago
Great energy @Clinton! Your continuous contribution to the toddle Community just made you advance to Community Level 1!
Lucas G
2 years 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
2 years ago
Use class or the show/hide condition
👍1
Ah... @Lucas G is a speedster
😅1
Clinton
2 years ago
How do I see the attribute from within the formula editor?
Clinton
2 years 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
2 years 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
2 years ago
Good to know
Lucas G
2 years 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
2 years ago
It's was more for readability in the elements tree - I was getting lost
Lucas G
2 years 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
2 years 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
2 years ago
Oh... That changes thing
Clinton
2 years ago
I had the idea to then show/hide the elements based on the icon-name input
Lucas G
2 years 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
2 years ago
Oooh like stuff you get from some other source
Gotcha
Lucas G
2 years 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)