nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Trouver plus de publications taguées avec

ArcGIS Online

ArcGIS Enterprise

Accepted answers

Carlos_ArturoSarmiento_Royero

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.

All comments

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.

Jeff.Thompson@arlingtontx.gov_arlingtontx

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

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.

Jeff.Thompson@arlingtontx.gov_arlingtontx

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-javascript

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.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.