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; } } }

Equivalent WAB code in EB Developers Edition

JHayes

Hello,

I have WAB 2.25 Dev. Edition and some custom code added to the Search Widget 'widget.js' file. I recently downloaded and installed EB Dev. Edition 1.15. I've been looking for the equivalent code/folder but can't find it. I feel like I've looked everywhere. Hoping that someone can point me in the right direction. Thanks in advance!

Best,

Find more posts tagged with

Accepted answers

Jeff.Thompson@arlingtontx.gov_arlingtontx

https://community.esri.com/t5/experience-builder-tips-and-tricks/modifying-esri-widgets-and-making-the-search/ba-p/1373949

You'll need to copy the search widget into the your-extensions folder and modify that version. Modifying the version in the dist folder will not work properly. Follow the link for more details.

All comments

JHayes

@TimWestern I am new to EXB development. I appreciate your detailed response, thank you.

I did some WAB development over the last couple years, but nothing too extensive. I got WAB Dev. Edition up and running, made my app, downloaded it, deployed it to our web server, made my code changes, then made the app live. I made a few changes to the live code (not best practice) but never dealt with updating to a newer version of Builder because it was so near the end of its life cycle. My EXB app will be around for a long time and will need to be updated to newer versions. I'm unsure of the best way to do this. Your and @JeffreyThompson2's suggestions have been very helpful. I'll do some testing next week and report back!

TimWestern

Apologies if my question was not understood. When you build with npm, and components get packaged in dist, that is the end result of a compilation step. When you use dependencies from npm (or pnpm or yarn), they get installed into node_modules.

When you make changes to code, you have to be mindful of your deploy and build process because if you aren't you may find code you changed that worked is suddenly gone.

So in the case of NPM dependencies in node_modules: If you make updates here, those will be potentially lost the next time that module is updated from NPM. (Like say for a security update)
In the case of any /dist* folder: since those are .js files which are produced by npm build commands, making changes there may work when testing, it may work after copying the dist folder to production, but the moment you rebuild something from the your-extensions/widgets folder, it may wipe out or remove any and all changes made in the dist folder. This is because dist is a folder for publishing, not development.

I feel like this is something that nodejs and react docs don't spend a lot of time on, because publishing/delivery is so near the end of the life of many projects, I'm not surprised that anyone new to Experience builder potentially might also get confused. (I'm not sure how much you have used EXB btw)

So when I asked this question, I was trying to understand, what purpose editing something already built and ready for deployment in a publish folder really accomplishes long term.

I think you can use @JeffreyThompson2 suggestion of copying the widget, of course the practice of doing this may also mean that updates to those widgets by Esri in the future will not be 'cross polinated' into your new customized version. (Many understand this as part of the nature of how custom widgets work, but since it may not be obvious to everyone, this is why I mention this.) It is an approach that may work. (although some WAB widgets are not quite like their EXB replacements)

Jeff.Thompson@arlingtontx.gov_arlingtontx

https://community.esri.com/t5/experience-builder-tips-and-tricks/modifying-esri-widgets-and-making-the-search/ba-p/1373949

You'll need to copy the search widget into the your-extensions folder and modify that version. Modifying the version in the dist folder will not work properly. Follow the link for more details.

JHayes

@TimWestern How would anyone customize EB if you don't change the code? I will customize, download and deploy the EB app on our webserver. I was planning on trying the suggestion by @JeffreyThompson2 in this post to update EB in the future.

TimWestern

Isn't there a risk, in trying to modify something under dist? That one npm install or update and what you customize gets lost?

Additionally, I'm not sure this kind of code can then be changed in portal on Enterprise, unless you are planning to port it with a new name as a new widget maybe?

kenbuja

It's much more complex in Experience Builder. I believe this is the one you're looking for (in \client\dist\widgets\common\search\src\runtime)

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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