topic Re: Custom widget for deployed web app - for a beginner in Web AppBuilder Custom Widgets Questions

Custom widget for deployed web app - for a beginner

AllenScully — Fri, 02 Jun 2017 17:16:16 GMT

I'm dipping my toes into the Custom widget waters, so apologies for the amateur question. Basically we have deployed an app configured in Web Appbuilder (via AGOL) onto one of our application servers (development environment). I want to add a simple widget that toggles from basemap to aerials. I've found the relevant code in the Javascript API (ArcGIS API for JavaScript Sandbox).

My plan is to use this code and work it into a version of the CustomWidgetTemplate files from Web AppBuilder Developers edition (from the stmapp/widgets directory) and then add a reference to it in the config.js file for the app (putting the new widget code in the correct spot in the app's widgets folder).

First - is this a valid way to go?

Second, if so, then how to reconcile the very basic code from the API into the CustomWidgetTemplate widget.js file?

the toggle widget code is:

var map;
require([
"esri/map",
"esri/dijit/BasemapToggle",
"dojo/domReady!"
], function(
Map, BasemapToggle
) {

map = new Map("map", {
center: [-70.6508, 43.1452],
zoom: 16,
basemap: "topo"
});

var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();

});

So I'm not sure what part of this is relevant and needed to put into the widget.js file for my new custom widget.

I know there are ways around this that don't involve a custom widget but would like to learn how to be able to do this process.

Thanks -

Allen

Re: Custom widget for deployed web app - for a beginner

KrishV — Sun, 04 Jun 2017 15:38:26 GMT

Allen,

Please find below link, which gives u idea to create custom widget:

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Also you can have a look at below custom widget for your reference.

GitHub - URSpatial/WAB_AddShapefile: Web AppBuilder for ArcGIS widget for uploading shapefiles to the web map as a featu…

Hope this helps.

Regards,

Krish

Re: Custom widget for deployed web app - for a beginner

RebeccaStrauch__GISP — Sun, 04 Jun 2017 15:55:13 GMT

It is great that you are diving into learning to creating new widgets. But don't rule out looking at code others have written, e.g. https://community.esri.com/docs/DOC-2888-enhanced-basemap-gallery-widget-23-02142017 to see how others have. Robert, and many others have shared their custom widgets...many that can be found /blogs/myAlaskaGIS/2017/03/04/web-appbuilder-the-custom-widgets-list-332017?sr=search&searchId=8a51a669-04bc-4293-b8b5-a65545264a6b&searchIndex=0‌

My other blogs that you may want to look at

/blogs/myAlaskaGIS/2017/02/15/web-appbuilder-tips-and-links-for-creating-modifying-and-modifying-custom-widgets-2132017?sr=search&searchId=8a51a669-04bc-4293-b8b5-a65545264a6b&searchIndex=7‌

/blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list?sr=search&searchId=d1728f57-0d28-4ec7-a9cd-161ed7263974&searchIndex=0‌

Re: Custom widget for deployed web app - for a beginner

AllenScully — Mon, 05 Jun 2017 21:31:42 GMT

Thanks Krish and Rebecca -

These links are quite helpful. I know I can grab widgets and code that others have made, but I'm looking to increase my skills as well. The ability to modify out of the box ESRI apps with a custom widget here and there is powerful.

Allen

Re: Custom widget for deployed web app - for a beginner

RebeccaStrauch__GISP — Mon, 05 Jun 2017 21:54:32 GMT

True. But they are also good to read thru, to see how they did it, especially if you get stuck.

The one blog link I sent has many links for the various help docs too, not just completed widgets. Don't overlook easy links.