Move Widget From Web App Builder to JS API

Question

Hi,

Is there a tool or predefined workflow to move a custom widget from Web app builder to my JS API app?

Thanks, Joe

rscheitlin · Answer

Joe,

As Noah mentioned all the widget is doing is toggling a layer visibility on or off, just like the sample he provided does for a JS API app.

joerodmey · Answer

Its the toggle based off Robert's Code. I'll attach my WAB code from the widget.js file. Hopefully this helps define([ 'dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'jimu/BaseWidget', 'jimu/LayerStructure', 'jimu/WidgetManager', 'dojo/query', 'dojo/dom-class', 'dojo/dom', 'dijit/registry', 'dojo/_base/html', 'dojo/topic' ], function( declare, lang, array, BaseWidget, LayerStructure, WidgetManager, query, domClass, dom, registry, html ) { var clazz = declare([BaseWidget], { name: 'LayerToggleButton', baseClass: 'widget-layertogglebutton', isToggling: false, layerStructure: null, toggleLayerIds: null, parentContainer: null, originalTitle: null, isExclusive: false, zoomToLayer: false, startup: function() { this.inherited(arguments); this.layerStructure = LayerStructure.getInstance(); this.setToggleLayer(); var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']"); toggleBtnArr.forEach(lang.hitch(this, function(node){ var parentWid = html.getAttr(node, 'widgetId'); var chkTitle; if(!parentWid){ var parentSid = html.getAttr(node, 'settingId'); if(parentSid === this.id){ this.parentContainer = node; chkTitle = html.getAttr(node, 'title'); this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,''); } }else{ var widg = registry.byId(parentWid); if(widg && widg.widget && widg.widget.config === this.config){ this.parentContainer = node; chkTitle = html.getAttr(node, 'title'); this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,''); } } })); }, setToggleLayer: function() { this.toggleLayerIds = []; Object.getOwnPropertyNames(this.config.layerOptions).forEach(lang.hitch(this, function(val) { if(!this.config.hasOwnProperty("zoomTo")){ this.zoomToLayer = false; }else{ if(this.config.zoomTo){ this.zoomToLayer = true; } } if(!this.config.hasOwnProperty("isExclusive")){ this.isExclusive = false; }else{ if(this.config.isExclusive){ this.isExclusive = true; } } if(this.config.layerOptions[val].display){ this.toggleLayerIds.push(val); } })); }, onOpen: function() { this.setToggleLayer(); var lObjs = []; array.map(this.toggleLayerIds, lang.hitch(this, function(id){ var lyrNode = this.layerStructure.getNodeById(id); //lyrNode.on('toggle-change', this.setCheckedState(lyrNode)); lObjs.push(lyrNode); })); if (!this.isToggling) { this.isToggling = true; this.toggleLayer(lObjs); setTimeout(lang.hitch(this, function() { this.isToggling = false; WidgetManager.getInstance().closeWidget(this); if(lObjs[0].isToggledOn()){ domClass.add(this.parentContainer, "jimu-state-selected"); }else{ domClass.remove(this.parentContainer, "jimu-state-selected"); } }), 300); } }, setCheckedState: function(evt){ console.info(evt); if(evt._layerInfo && evt._layerInfo.layerObject && !evt._layerInfo._visible){ this.map.setExtent(evt._layerInfo.layerObject.fullExtent); topic.publish('toggleChanged', evt._layerInfo._visible, evt); } }, toggleLayer: function(lObjs) { if(!lObjs[0].isToggledOn() && this.isExclusive){ this.layerStructure.traversal(lang.hitch(this, function(layerNode) { layerNode.hide(); })); } var onOff; array.map(lObjs, lang.hitch(this, function(lObj, index){ onOff = (lObj.isToggledOn()) ? 'On' : 'Off'; if(this.parentContainer && this.originalTitle){ html.setAttr(this.parentContainer, 'title', this.originalTitle + ': ' + onOff); } if(onOff === 'Off' && index === 0 && lObj._layerInfo && lObj._layerInfo.layerObject && lObj._layerInfo.layerObject.fullExtent){ if(this.zoomToLayer){ this.map.setExtent(lObj._layerInfo.layerObject.fullExtent.expand(1.2)); } topic.publish('toggleChanged', lObj._layerInfo._visible, lObj); } lObj.toggle(); if(!lObj.isVisible() && lObj.isToggledOn()){ lObj.show(); } })); } }); return clazz; });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Noah Sager · Answer

It's difficult to say without knowing the actual code involved. Perhaps something like just toggling visibility?

Examples: https://developers.arcgis.com/javascript/latest/sample-code/?search=toggle