topic Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder in Experience Builder Custom Widgets

Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Sat, 19 Feb 2022 09:14:09 GMT

Hi Robert,

Thanks a million for all the time and effort you have spent in migrating your Custom Widgets for the Web AppBuilder to the Experience Builder.

I know it was a monumental task when you converted your Enhanced Search Widget from the Flex API to the Web AppBuilder. It involved 50,000 lines of code.

Now you are doing it again with JavaScript 4.x and React.js on the Experience Builder platform.

Our customers appreciate the 4 Custom Widgets your have released for the Experience Builder:

Print Widget
Enhanced Locate Widget
Measurement Widget
Draw Widget

I have tested them in the Experience Builder version of our Parcel Map.

This link will work in Firefox not Chrome since I am using http:

http://www.davidapps.net/exb/ParcelMapV2/

I wrote a comprehensive 267-page Tutorial on how to download and install your Custom Widgets for the Experience Builder Developer Edition.

This may help a novice on getting started on the Experience Builder Platform.

This this the Online Tutorial in HTML5 format:

http://davidapps.net/exb/EXBDevTutorial

It can be downloaded as a single PDF file:

http://davidapps.net/exb/EXBDevTutorial.pdf

I am anxiously looking forward to your Enhanced Search Widget and Identify Widget for the Experience Builder.

I would be more than happy to beta test them for you using our Parcel Map.

Your Enhanced Search Widget for the Web AppBuilder has become the centerpiece of all our Web Apps.

It would be awesome to have this functionality ported to the Experience Builder Platform.

Best regards,

David Das

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Tue, 03 May 2022 21:44:06 GMT

Thank you for this tutorial. Much appreciated! I am having an issue with the custom widgets. I followed your directions to the T but my developers version is not recognizing the new widget. There is no error message, it just doesn't show as a widget to add. One thing I did notice when doing an npm start on the Client is a message that says "'crossw-env' is not recognized as an internal or external command, operable program, or batch file". Any ideas on how to fix this?

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Tue, 03 May 2022 22:23:21 GMT

Hi Tim,

Let me investigate this.

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Tue, 03 May 2022 23:17:27 GMT

Hi Tim,

Could you please verify these steps during your installation?

Are you using Node.js version 16.14.0

https://nodejs.org/en/download/

During Node.js setup do not install Chocolatey

Uncheck this option

Use Experience Builder Developer Edition version 1.7

https://developers.arcgis.com/downloads#arcgis-experience-builder

Do not use version 1.8

Let’s say this is your Experience Builder folder:

C:\DAVID\EXB\EXB2

This is your server folder:

C:\DAVID\EXB\EXB2\server\

This is your client folder:

C:\DAVID\EXB\EXB2\client\

Open a Command Window

Navigate to the server folder

C:\> cd C:\DAVID\EXB\EXB2\server

Start npm

C:\DAVID\EXB\EXB2\server>npm start

You should receive the message that the

http server is running on port 3000

https servers is running on port 3001

Open a 2nd Command Window.

Navigate to the client folder

C:\> cd C:\DAVID\EXB\EXB2\client

Start the npm client

C:\DAVID\EXB\EXB2\client>npm start

You should receive a message saying:

cross-env NODE_ENV=development webpack --mode development --watch

However, you are getting this message:

'crossw-env' is not recognized as an internal or external command, operable program, or batch file

If everything works correctly, you should have 2 Command Windows open:

Open Chrome and enter https://localhost:3001

This should launch the ArcGIS Experience Builder (Developer Edition)

Robert’s Custom Widgets should appear in the Widget Gallery like so:

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Tue, 03 May 2022 23:28:22 GMT

Hi Tim,

Here is some help from StackOverflow:

https://stackoverflow.com/questions/45034581/laravel-5-4-cross-env-is-not-recognized-as-an-internal-or-external-command

First run:

rm -rf node_modules

rm package-lock.json yarn.lock

npm cache clear --force

Then run the command

npm install cross-env

npm install

and then you can also run

npm run dev

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Tue, 03 May 2022 23:31:15 GMT

Thank you for the quick reply

1. I am using Node.js version 16.15. Also, I did install the Chocolatey

2. Yes, I am using version 1.7

3. They all match except my client directory does not have dist-prod and dist-report directories

4. This works on my end

5. That is correct. I am getting that error message. It comes right after "cross-env.....--watch"

6. I have two commands opened

7. EB opens fine and everything works correctly, I just don't have the Feature Panel widget to add in the "Insert Widget" panel.

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Tue, 03 May 2022 23:46:38 GMT

Sorry, this did not work. Should I reinstall Node.js but without the Chocolatey this time? That is the only difference (other than the dist-prod and dist-report directories missing) from what you posted. Also, I have version 16.15 installed rather than 16.14

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Wed, 04 May 2022 00:01:15 GMT

Hi Tim,

Thanks for the quick confirmation.

Navigate to this folder:

C:\DAVID\EXB\EXB2\client\your-extensions\widgets

Do you have the FeaturePanel folder?

C:\DAVID\EXB\EXB2\client\your-extensions\widgets\FeaturePanel\

If not, this needs to be copied from:

https://community.esri.com/t5/experience-builder-custom-widgets/feature-panel-widget-1-7-0-2-24-22/ta-p/1147687/

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Wed, 04 May 2022 00:06:38 GMT

Hi Dave,

Yes, I have the folder in the widgets folder

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Wed, 04 May 2022 00:24:39 GMT

Hi Tim,

Thanks for the confirmation again.

Were you able to get any of Robert’s Custom Widgets for the Experience Builder working?

Draw
eLocate
Measurement
Print

Once you add a Custom Widget to the your-extensions/widgets folder, you would need to restart the npm client service. That is all it takes for the custom widget to appear under the Insert Widget Panel.

Perhaps we should wait for Robert’s assistance on this.

Best,

David

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Wed, 04 May 2022 00:28:53 GMT

I'm assuming to restart the npm client service I can just close out the command prompt and open another one to run the npm start? Or is there a command to stop or restart it? I saw on your documentation that you did a cntrl C in both command windows. I am on a mac remotely connected to my PC at work and a cntl-C or command-C did not do anything.

Thanks for all your help on this.

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Wed, 04 May 2022 00:32:23 GMT

This is my first attempt at installing Robert's custom widget. Thanks

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

DavidDas__GISP — Wed, 04 May 2022 00:34:59 GMT

Hi Tim,

Just close the command window running the npm client.

This will terminate the process.

Then, open another command window to restart it.

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Mon, 09 May 2022 14:42:36 GMT

I figured out what happened. I reinstalled EB and went through the install process and it occurred to me that I never did the 'npm ci' in the client directory. Once it did that it worked. Thank you for looking into this for me.

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

Aazia_Taylor_ — Mon, 27 Nov 2023 19:16:08 GMT

Hi!

I was able to install the widget with no problem, but the line does not appear while measuring. Any idea why that might happen?

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

sapnas — Tue, 16 Apr 2024 23:34:50 GMT

Hi David, What did you use to create online tutorial using HTML5? The site that you built is interesting and I would like to use it for our internal documentation. Any help would be greatly appreciated

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

TimConfare2 — Fri, 03 May 2024 15:51:05 GMT

I would also like to know how you created the online tutorial. Any guidance is appreciated

Re: Tutorial on using Robert Scheitlin’s Custom Widgets for the Experience Builder

baohuachu7 — Wed, 26 Feb 2025 13:32:18 GMT

Now the link above cannot be accessed.