topic Re: Copying a common widget to be customized in ArcGIS Experience Builder Questions

Copying a common widget to be customized

LietuvosKariuomenė — Fri, 22 Nov 2024 09:33:40 GMT

Hello, I am trying to copy the common print widget and want to customize it a little. I found it in the client/dist/widgets/common folder, copied the src folder and manifest.json, icon.svg, config.json to client/your-extensions/widgets/CustomPrintWidget folder and changed the manifest file to match the folder name.

Now I am getting an error when trying to build the widget:
ERROR in ./your-extensions/widgets/CustomPrintWidget/src/setting/component/report-template-setting.tsx 14:0-69 Module not found: Error: Can't resolve 'jimu-ui/advanced/app-item-selector' in 'D:\Users\pratybos\Desktop\ArcGIS Experience Builder Dev\ArcGISExperienceBuilder\client\your-extensions\widgets\CustomPrintWidget\src\setting\component' resolve 'jimu-ui/advanced/app-item-selector' in 'D:\Users\pratybos\Desktop\ArcGIS Experience Builder Dev\ArcGISExperienceBuilder\client\your-extensions\widgets\CustomPrintWidget\src\setting\component'

To my understanding this error is shown because the widget doesn't know where some modules are. How do I config it so it finds the necessary modules? Editing dependencies in manifest doesn't seem to work. Do I need to use the loadArcGISAPIModules function? Or is there some better way to point where the module is stored?

Thanks in advance, all help is appreciated.

Re: Copying a common widget to be customized

BolanChen — Mon, 25 Nov 2024 01:57:27 GMT

The 'jimu-ui/advanced/app-item-selector' component has been moved from jimu-ui to the Print widget. I guess you copied the Print widget from the old version of dev.

Re: Copying a common widget to be customized

LietuvosKariuomenė — Mon, 25 Nov 2024 12:39:18 GMT

It might be that my Experience builder version is older, but I copied it into the same developer installation, just into 'your-extensions' folder. Should it not at least work with my current installation or am I missing something?

Re: Copying a common widget to be customized

abureaux — Tue, 26 Nov 2024 18:55:29 GMT

If you want to create a copy of one of the stock widgets, that's easy enough. But you need to do two things:

Change the name of that widget (in manifest.json). If more than one widget has the same name, it will break things.
Using the Command Prompt, run npm start form Experience Builder's client folder.

Re: Copying a common widget to be customized

LietuvosKariuomenė — Mon, 02 Dec 2024 06:21:31 GMT

I have changed the name of the widget and I have run the npm start command in the client folder, that is exactly where I get this error that the widget can't be built because it can't find some modules, that the original widget has no issue finding.

Re: Copying a common widget to be customized

abureaux — Mon, 02 Dec 2024 16:54:53 GMT

There may be something wrong with your workflow or with your install. Compare what you are doing with the example below. If the processes match, maybe try reinstalling EB.

I just confirmed this workflow works:

Go to widgets folder (i.e., \ArcGISExperienceBuilder\client\dist\widgets\common)
Copy a widget (e.g., Print)
Paste copied widget into your custom widget folder (i.e., \ArcGISExperienceBuilder\client\your-extensions\widgets)
Open the folder, locate manifest.json and open it, and change the "name" value to something unique (e.g., I used "print2")
Update folder name to match the name in manifest.json (e.g., "print2" in my case)
Open command prompt as an admin
cd into your client directory (e.g., cd C:\Users\%username%\Desktop\ArcGISExperienceBuilder\client)
Execute npm start
Open EB and load a new or saved project. You should see the copied widget under "Custom"

Re: Copying a common widget to be customized

LietuvosKariuomenė — Tue, 03 Dec 2024 08:28:05 GMT

Seems like the issue was with my version EB, thanks for the help.

Re: Copying a common widget to be customized

adriancmlee — Wed, 09 Apr 2025 13:29:20 GMT

I experienced the same problem as well. It looks like that the Print widget in ExB v1.14 has missing folders
.\print\src\tools
.\print\src\setting\component\app-item-selector

I had to copy these 2 folders from ExB v1.15 and amend the layout-template-setting.tsx and report-template-setting.tsx from

import { AppItemSelector } from 'jimu-ui/advanced/app-item-selector'

import { AppItemSelector } from './app-item-selector'