Move Widget From Web App Builder to JS API

294
5
06-10-2019 08:35 AM
joerodmey
MVP Regular Contributor

Hi,

 

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

 

Thanks, Joe

0 Kudos
5 Replies
Noah-Sager
Esri Regular Contributor

Hi Joe,

I do not believe it is possible to move a custom widget from Web AppBuilder to an ArcGIS API for JavaScript application. The file structures of the two products are very different. Here are some helpful resources for you:

Widget Development (guide doc)

https://developers.arcgis.com/javascript/latest/guide/custom-widget/

Building Your Own Widget - Esri Dev Summit 2019

https://www.youtube.com/watch?v=YMmBsEanUws&list=PLaPDDLTCmy4Y0GMTl0O4V6LF3EmxIAivv&index=154&t=0s

Customizing Widgets - Esri Dev Summit 2019

https://www.youtube.com/watch?v=IdX7qI1oLUs&list=PLaPDDLTCmy4Y0GMTl0O4V6LF3EmxIAivv&index=155&t=0s

-Noah

0 Kudos
joerodmey
MVP Regular Contributor

All I have is a layer toggle widget that I want to bring over. Any ideas on how to recreate this?

0 Kudos
Noah-Sager
Esri Regular Contributor

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

joerodmey
MVP Regular Contributor

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;
});
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.