Widget Visibility

[Carlos_ArturoSarmiento_Royero]

I am trying to hide a widget or widget button if a user is not authenticated but I have not been able to help me how it would be?

I have tried to destroy the widget but it didn't help me.

I need to hide this button.

[JeffreyThompson2]

Are you trying to hide a custom widget or a default ESRI widget? I've come up with two possible solutions. The first one is not "the React way" and may have issues with your choices being undone on re-renders, but it will be much easier to pull code. The second is much more "React friendly" but will require much more extensive coding and will probably somewhat easier to pull off if it is your own custom widget than an ESRI widget.

1. Use the data-widgetid attribute to select the div for the button and add display:none to the style. https://css-tricks.com/a-complete-guide-to-data-attributes/#aa-accessing-data-attributes-in-javascri...

2. Build your own version of a widget controller. Remove your widget from the ESRI Widget Controller and build a three-level custom widget. In the top tier, find out if the user is logged in and use a tertiary in your JSX to display/hide the button. Something like this:

{isLoggedIn ? <ShowButton></ShowButton> : <div></div>}

The next level of your React tree will handle if the widget should be open or closed with another tertiary to handle the open/closed states. And the third level down being the actual logic for your widget. 

Possibly simpler would be to alter the ESRI Widget Controller to hide/display the button using logic similar to above.

[Carlos_ArturoSarmiento_Royero]

Thank you very much for your answer. I would like to create my own version of the Widget Controller, but how do I compile and deploy that new Controller? Thank you.

[JeffreyThompson2]

Have you built custom widgets before? Making a custom Widget Controller would be a very difficult task for your first widget. If you haven't already, build some of the tutorial widgets and look at how the ESRI Widget Controller is written before trying to make one from scratch.

[Carlos_ArturoSarmiento_Royero]

Thanks. I have built many custom widgets and set them up perfectly. But never a custom core widget, nor do I know this is overwriting or deploying the Controller. 

[JeffreyThompson2]

If you want to start from scratch, it's no different than any other widget. 

To modify the ESRI widget, turn off your client server, go to /client/dist/widgets/common/controller and copy that folder into /client/your-extensions/widgets. (The dist and test folders are not necessary. You can delete them after you copy the folder over or just ignore them. You will do your development in the src folder.) Rename the folder, open manifest.json and change the name to match your new folder name. It's also a good idea to change the label property. Start your client server and the copied widget should now be in your custom widgets.

[Carlos_ArturoSarmiento_Royero · Accepted solution]

With the help of esri this is one of the solutions:

const widgetIdController = "widget_5";

const layoutId = appConfig.widgets[widgetIdController].layouts.controller.LARGE;

const contentWidget = appConfig.layouts[widgetIdController].content;

const contentOrder = appConfig.layouts[widgetIdController].order;

We must filter both the contentWidget object and the contentOrder array.