Custom widget not showing changes

[KateHowlett]

Hi,

It was hard to articulate the problem in the title so apologies for that. I have been following the tutorial for Getting Started with Custom Widgets. I've installed Developer Edition, I'm using VSCode, I've the client and server running all fine.

My goal is to create a version of the Survey123 widget where there is a toggle and setting so that you can set the autorefresh/reload within the setting panel when setting up your survey. Whether that's doable (or worth doing) is quite another question because I can't actually get ExB to show my custom widget properly at all.

I have my 'refreshable-survey' widget under client/your-extensions/widgets as intended. I actually copied the entire survey123 widget folder so I have manifest etc., which I've edited to have the new name. And I've made a couple of changes:

1. I've duplicated one of the toggles from the Appearance section - so I would expect there to be two instances of 'Show survey footer'.

2. I've edited some of the label text both in setting.js and default.ts - so it should say 'Show survey footer?'

3. I changed the icon from the survey one to a checkmark

None of these things are being applied. What I notice is that when I do npm start is that it copies over my custom widget folder into client/dist/widgets and whenever I update my files in your-extensions/widgets it appears to be updating them in dist/widgets. Which would be fine and seem like a pretty logical workflow, except that the version that is in dist/widgets is not showing any of my changes. Even if I delete that folder so the one that appears on running npm start is brand new after changes, they don't appear. The files and code are the exact same as the ones inside dist/widgets/survey123

(Worth noting that that workflow I don't think is explained in the documentation so it confused me at first)

If I make changes to the starter-widget then they show up so I know the process is working but no changes display in my refreshable-survey widget.

Is is not recommended to copy an existing widget and edit it? Is there some other setting or bit of code I need to tweak that I've missed. Is there straight up a better way to do this?

I have done web development before but I was mostly writing in VueJS or C#/ASP not React so I'll gladly allow that I don't have perfect insight. Plus the setting.js file for the survey123 widget is more than 4000 lines long so I haven't read all of it.

Happy to hear either answers that explain what I've done wrong or that say "oh my gosh, don't do that" if I've gone about this completely bass ackwards.

Thanks for reading.

Kate

[HillaryBjorstrom]

Not sure if this is what you are looking for but here are my notes for creating widget if it helps. i just started working in this. you edit in the 

Note: exbVersion should match your EB 11.5 build number. Check client/package.json for the exact value.

1. Write your widget in src/runtime/widget.tsx — this is your React/TypeScript component using the jimu-arcgis and jimu-core libraries.

Ctrl-C then npm run build:for-download

Refresh the builder site CTRL+shift+R (important)

1. Restart the client terminal after creating new files   CTRL+C then npm start (important)

Once you widget works as expected

cd C:\ArcGISExperienceBuilder\client npm run build:for-download

Edit source files here: client\your-extensions\widgets\testwidget\src\runtime\widget.tsx ↓ save file Terminal auto-recompiles into: client\dist\widgets\testwidget\ ← used by localhost:3001 ↓ npm run build:for-download Production build goes to: client\dist-download\widgets\testwidget\ ← copy this to IIS

[JeffreyThompson2]

Reading your description it's hard to tell what's going on, but I suspect the issue is that the name property in the manifest.json does not exactly match the name of the folder. Experience Builder is a highly opinionated framework and Widgets will not work unless these things match. Here is my primer for turning ESRI Widgets into Custom Widgets.

https://community.esri.com/t5/experience-builder-tips-and-tricks/modifying-esri-widgets-and-making-t...

[KateHowlett]

Hi Jeffrery,

Thanks for that, I actually copied the folder name and pasted it into the manifest to avoid exactly that problem! The first picture is the manifest under your-extensions/widgets, and the second is the manifest under dist/widgets

So it's definitely copying over the files from your-extensions/widgets, it just seems to be copying them over but without applying changes. I wasn't able to add pictures before but I can now, so re: number 2 on my list.

The file on the left is the one in your-extensions/widgets, and the one on the right is the one in dist/widgets, you can see that there is a ? in the your-extensions file but not in the dist file.

I hope the screenshots make it a little clearer? And apologies for the lack of clarity before, I'm very new to it all so I appreciate your response. I'll have a look at your primer though, thank you.

Kate

[JeffreyThompson2 · Accepted solution]

I think I see the problem now. You need to work in the src folder, not the dist folder. The client terminal is running a service called Webpack that tracks changes in the src folder and complies it from Typescript/TSX to useful JavaScript and copies it into that dist/widgets folder. It's this compiled code that is actually used by Experience Builder. The code inside the widgetName/dist folder is never read and it's changes are not tracked. It's actually good practice to delete the dist folder inside your Widget. It is unnecessary and can cause confusion.

[KateHowlett]

You are an absolute star, thank you so much!

[HillaryBjorstrom]

i also had the manifest issue i used the one in the sample in the dev to create one. 

Create manifest.json

{

  "name": "testwidget",

  "label": "testwidget",

  "type": "widget",

  "version": "1.0.0",

  "exbVersion": "1.17.0",

  "author": "Your Name",

  "description": "Test for feature layers",

  "properties": {},

  "dependency": [],

  "translatedLocales": ["en"]

}

also you need to make sure the folder structure is correct 

C:\ArcGISExperienceBuilder\client\your-extensions\widgets\

  └── testwidget\

        ├── manifest.json

        ├── src\

        │     └── runtime\

        │           └── widget.tsx

        └── src\

              └── setting\

                    └── setting.tsx   (optional)

not sure if it is the same for the survey but i think there is also a sample survey in the dev folder. when you npm start the console for client up each time it rebuilds it to the dist folder then you do a Ctrl+Shift+R in the browser for the experience builder to clear cache and refresh.

[KateHowlett]

Hi Hillary,

Thanks for both your messages, I must admit I copied the manifest.json from the survey123 folder and although it doesn't appear to have specific code in it that would get in the way, I wonder if that's the issue and I should make the manifest "from scratch" (or rather, copy the starter widget one instead).

I have been making sure to hard refresh the browser every time because the one time you forget, it's _always_ caching issues! But always good to be reminded 🙂

Thanks for the example folder layout, that's definitely what I have and I've checked the ExB version and that all matches too.

[KateHowlett]

Hello, thank you both for your replies, I was then in a two hour meeting and it's now clocking off time so I will read them first thing Monday but I didn't want to disappear without acknowledging your help 🙂