Custom widget for deployed web app - for a beginner

1899
4
06-02-2017 10:16 AM
AllenScully
Occasional Contributor III

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

0 Kudos
4 Replies
KrishV
by
Occasional Contributor III

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 Developer... 

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 th... 

Hope this helps.

Regards,

Krish

RebeccaStrauch__GISP
MVP Emeritus

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=8a51a...

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-cus...

/blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list?sr=search...

AllenScully
Occasional Contributor III

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

0 Kudos
RebeccaStrauch__GISP
MVP Emeritus

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.