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

Copying a common widget to be customized

LietuvosKariuomenė

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.

Finde mehr Beiträge mit dem Tag

ArcGIS Online

ArcGIS Enterprise

Accepted answers

abureaux

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"

All comments

adriancmlee

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'

LietuvosKariuomenė

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.

abureaux

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.

LietuvosKariuomenė

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?

BolanChen

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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