Move Widget From Web App Builder to JS API

joerodmey — Mon, 10 Jun 2019 15:35:27 GMT

Hi,

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

Thanks, Joe

Re: Move Widget From Web App Builder to JS API

Noah-Sager — Mon, 10 Jun 2019 17:33:47 GMT

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

Re: Move Widget From Web App Builder to JS API

joerodmey — Mon, 10 Jun 2019 17:40:15 GMT

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

Re: Move Widget From Web App Builder to JS API

Noah-Sager — Mon, 10 Jun 2019 17:46:05 GMT

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

Re: Move Widget From Web App Builder to JS API

joerodmey — Sun, 12 Dec 2021 03:03:33 GMT

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;
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Move Widget From Web App Builder to JS API

RobertScheitlin__GISP — Mon, 10 Jun 2019 18:48:59 GMT

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.

topic Re: Move Widget From Web App Builder to JS API in ArcGIS JavaScript Maps SDK Questions

Move Widget From Web App Builder to JS API

Re: Move Widget From Web App Builder to JS API

Re: Move Widget From Web App Builder to JS API

Re: Move Widget From Web App Builder to JS API

Re: Move Widget From Web App Builder to JS API

Re: Move Widget From Web App Builder to JS API