Visible option for elements and not just for components

Feature requests
#1

I know it is possible to show/hide through the interaction but what I believe could be useful is to implement the “visible” feature that RS already have for components but for elements. I have seen that it was asked about it before:

In my particular case, I was looking to show or hide an element according to props in the dataSheet and then show/hide if some interaction is taken in the screen. The second part is already possible, but not the first unless I create several states of the screen and I go for the “show state based on props” path.

Thanks!

#2

You can do that with a bit of javascript. Have a look here: https://www.w3schools.com/jsref/prop_style_visibility.asp

#3

Thank you so much @Oliver_Burrell. I will give it a try. One quick question before even try it myself. How would I know which Id to refer to? It is something that is within the div in the generated code. Do I have to take a look at the generated code to find out this or there is some way to make the reference to the element with info in RS UI? Thanks!

#4

Yes, you can have a look in the code if the element has a defined id.
E.g. <input type=“email” id=“email” >
or you can use this command to find out the id of a named element:
var x = document.getElementsByClassName(“anchors”)[0].id;

More options here: https://stackoverflow.com/questions/3623110/get-an-elements-id/3623125

1 Like
#5

Thank you so much! I will check it out :slight_smile:

#6

Now that I have some time I am now trying the suggestion made by @Oliver_Burrell. I am sorry to say I am not achieving it because it seems there is no id for the element. I am going to take as an example a picker that I have in the screen. When I go into the Code Glance I can see that the picker has a ClassName but not an id. The ClassName is “state1_elPickerTutor474298”. So I have tried a script like this:

var x = document.getElementsByClassName(“state1_elPickerTutor474298”)[0].id;
document.getElementByClassName(x).style.visibility = “hidden”;
console.log(x)

However it is not working. I throws an error for undefined id and the console.log shown no id.

How could I do it?

#7

Hi Pedro,

I think it should be like this:
document.getElementByClassName(“state1_elPickerTutor474298”).style.visibility = “hidden”;

#8

Thank you for your quick answer! I tried it but it told me that document.getElementByClassName is not a function. I just found a workaround to get what I needed but I am still curious to find out how to do this so I might need it for some other time. I am going to try again that line of code and see if it works. Maybe I did something wrong. I’ll let you know in a moment!

#9

I just tried it out again and it gave me the same error telling me that it is not a function.

#10

Sorry it should be:
document.getElementsByClassName

#11

Thank you @Oliver_Burrell for your answer. I just tried your new suggestion and still not working. It gave me an “Unhandled Rejection (TypeError): Cannot set properties of undefined (setting ‘visibility’)” :sweat_smile:

#12

Ok! Now it works! I was missing the index [0] after the ClassName.

document.getElementsByClassName('state0_elPickerCursoAlumno938565384')[0].style.visibility

Now I have a question. I have that picker in 8 states. For each one of the states it is the exact Classname but changing the beginning state0 for state1 and so on. Do I have to write the line of code for each ClassName or can I do it simpler writing like ‘state?_elPicker…’?

Thanks!

#13

Yeah, it returns a collection and you have tell it which one you want to set hidden. Well done!
The easiest is to use the same statement with different “stateX_…” in the class names and put it in each render of a state.

1 Like
#14

Ok! Thank you so much. I was doing some lessons in the page you suggested (scrimba). It is so cool!

Thank you so much for your help. I am feeling more confident with the JS scripts step by step :slight_smile:

1 Like
#15

Mmm. I see that if I have some elements hidden by default (made that with React Studio options), that option won’t make those elements to be visible.

What I am looking for is to have a picker hidden when the user enters the screen, and it will only appear if a checkbox is marked. I could do that with the React Studio interactions, but my issue is that the checkbox and picker are present in several states and the state of the screen will change based on that picker, so when the value for the picker changes, the picker dissapears.

I could also solve this with an if statement in a script (if the checkbox is true, the picker would be visible), but then again, I am not able to make visible with a script a hidden element with React Studio. Maybe I am missing something.

#16

This is a cool hack by @Oliver_Burrell but not every visibility can be driven by interaction events. Further, you will be creating and then hiding elements each time, which might be not be performant.

Finally, if the HTML element is not on the DOM, this won’t work. It kind of defeats the purpose of React’s virtual DOM when you are hiding html elements this way.

Creating a state for every permutation of visibility elements is time consuming, and not easy to maintain as there is no intuitive connection to the data props driving the UI.

However, components have the visibility “Data Runtime Linkage” so I’ve been able to make this work by wrapping every element that require visibility as a component.

Screen Shot 2022-03-22 at 4.31.07 PM
Screen Shot 2022-03-22 at 4.31.07 PM1044×500 105 KB

@Antti_Neonto
This still feels quite hacky, so I was wondering if there is a better solution to toggle visibility of elements like Text, Icon Button, Hotspot without the use of States [0, 1, 2, …].