Experience Builder widgets cannot be installed into the ArcGIS Online shared environment. Because ArcGIS Online is shared by hundreds of thousands of different subscribers, custom widgets such as Geovonic Connect need to be installed in a local version of Experience Builder Developer Edition.

(If you are using ArcGIS Enterprise, the widget can be installed directly to your portal without the need for developer edition.)

This article walks through the steps necessary to install Experience Builder Developer Edition. For further information it is recommended you refer to the ArcGIS documentation.

STEP 1 – Download the latest version of the Experience Builder ZIP file

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

STEP 2 – Unzip the file contents to a folder on the server hosting Experience Builder.

STEP 3 – Create an Application to allow Experience Builder to connect to ArcGIS

From the “My Content” page, select New Item and choose Application.

Type: Web Mapping

Purpose: Ready to Use and API (if required): JavaScript

URL: https://[your.server.url]:3001

Once saved, go to the Settings tab and scroll down to App Registration.

Click Register, enter https://[your.server.url] and click Add.

Copy the App ID value.

STEP 3 – Run the Experience Builder program.

Go to the /server folder within the Experience Builder installation.

Run npm ci to install the necessary modules.

Run npm start to start the server.

STEP 4 – Open the Experience Builder application

            https://[your.server.url]:3001

STEP 5 – Enter the URL for your ArcGIS Online account

STEP 6 – Enter the Client ID for the Experience Builder application.

STEP 7 – Login and approve Experience Builder app.

Your Experience Builder developer edition is now ready to use.

 

Further steps and information about running within different environments, different ports etc can be found on the ArcGIS Experience Builder help.

Adding the Geovonic Connect widget

Now that you’ve installed Experience Builder developer edition, we need to add the Geovonic Connect custom widget to your environment.

STEP 1 – On the Geovonic Connect Admin Console, go to the “Widget Installation” page from the dashboard.

STEP 2 – Select Experience Builder.

STEP 3 – Click on Download to download the widget ZIP file.

STEP 4 – Open the ZIP file and copy the GeovonicConnect folder.

STEP 5 – Paste the widgets\GeovonicConnect folder into the client\your-extensions\widgets in your Experience Builder Developer Edition

STEP 6 – Open the Command prompt and navigate to client\your-extensions\widgets\GeovonicConnect

STEP 7 – Run npm install command to install required package

STEP 8 – Now when accessing the Experience Builder editor, Geovonic Connect will appear in the custom widgets section.

 

Re-adding widget to update the latest version of Geovonic Connect

Follow the steps below if you wish to update your Experience application with latest version of Geovonic Connect widget.

STEP 1 – Remove existing Geovonic Connect widget folder from STEP 5 above.

STEP 2 – Re-run all the steps for adding Geovonic Connect widget in ExB as per above instructions.

STEP 3 – Re-download the applications with the previous older widget version again.

 

Please check the Release notes to see what’s new in Geovonic Connect.