Skip to main content

Component Visibility based on Environments

Intro​

In a website or app, it's important to show or hide certain things based on where it's being used, like during testing or when it's live for everyone. This helps make sure everything works smoothly and keeps sensitive stuff hidden when it's not supposed to be seen. It's like showing different parts of a game depending on whether you're practicing or playing for real.

In this video tutorial you will understand how to set components visibility based on environments.

1. Environment Based Visibility​

To enable components visibility based on environment, right-click the eye icon. Under Environment based Visibility you will find two options - hide on production and hide on preview. You can choose either of these as per your use case.

DrapCode Builder Cards

2. Choose Environment​

Go to App Settings and choose the Enivronment as per your use case.

DrapCode Builder Cards

3. Execute the Changes​

Once you have selected the preferred environment Save the changes and preview or publish.

DrapCode Builder Cards

4. Hide on Preview Environment Changes​

Reload the page to view your changes.

DrapCode Builder Cards

5. Hide on Publish Environment Changes​

Reload the page to view your changes.

DrapCode Builder Cards

Conclusion​

One benefit of managing component visibility based on environments is that it helps prevent accidental mistakes or unintended actions during development and testing. By showing or hiding specific features depending on the environment, developers can avoid unnecessary complications and ensure a smoother testing process, reducing the risk of issues when the application goes live.