adrisolid / wab-custom-widgets

Web AppBuilder Custom Widgets

Hi there 👋

I'm Adrián Pérez, currently working as a Frontend Engineer, creating mapping-focused data visualizations

---

My other side: I'm electronic music producer 🎹

I really enjoy everything related to synthesizers and drum machines. I like dark electronics 🖤 electro, EBM, dark wave

• Instagram
• Soundcloud

wab-custom-widgets's Issues

CSS style on select layer buttons overrides Table widget buttons

Inside the style.css file you set

 .claro .dijitButton .dijitButtonNode, .button {
  width : 40px;
}

This has the negative effect of setting the buttons inside the Table display to 40px; (which is too small, they become squished).
I'm not exactly familiar with the way you're creating the buttons, but one fix I found was to set a width to a more specific class:
style.css :

.opSize .dijitButtonNode {
  width: 40px;
}

And widget.js :
(In the _initButtons function):
class: "button opSize",

Select by attribute for newly added layers

Hi, excellent widget, thank you! I'm putting together an app that also includes the Add Data widget and it appears your widget doesn't auto-update if new layers are added to the app. Simply, for your reference, here is the approach I've taken with your code to handle the situation. The changes are way too much to make a PR. I've migrated code out of idWebMapLayers.js and into widget.js as well as a bunch of linting changes. If you or someone else finds it useful, great! If not, no problems!

Thanks again

`
define([//Dojo
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/Deferred',
'dojo/dom',
'dojo/_base/html',
//Jimu
'jimu/BaseWidget',
'jimu/dijit/LoadingShelter',
'jimu/SelectionManager',
'jimu/dijit/Message',
//Dijit
'dijit/dijit',
'dijit/form/Select',
'dijit/form/Button',
//Esri
'esri/tasks/query',
'esri/tasks/QueryTask',
//Files
'xstyle/css!./files/bootstrap.min.css',
'./files/jquery-3.3.1.min',
'./files/bootstrap.min',
//domReady!
'dojo/domReady!'
],
function(declare, lang, domConstruct, domStyle, Deferred, dom, html, BaseWidget, LoadingShelter,
SelectionManager, Message, dijit, Select, Button, Query, QueryTask) {

return declare([BaseWidget], {

shelter: null,
layerName: null,
layer: null,
field: null,
url: null,
uniqueValue: null,
ese: null,
selectedField: null,
selectionManager: SelectionManager.getInstance(),

startup: function(){
this.layerChooserNodeID = "layerChooserNodeEvent";
this.inherited(arguments);
this._setWidgetSize();
this._initLoadingShelter();
this._initLayerChooser();
this._initButtons();

// Listen for new layers and add them to query options
this.map.on("layer-add-result", lang.hitch(this, function(l) {
console.log("a layer was added ");
var selectLayer = dijit.byId(this.layerChooserNodeID);
selectLayer.addOption(this._makeLayerOption(this.folderUrl, [l.layer], "*"));
}));

// Listen for layers being removed and update query list
this.map.on("layer-remove", lang.hitch(this, function(l) {
console.log("a layer was removed ");
var selectLayer = dijit.byId(this.layerChooserNodeID);
var lid = l.layer.id;

for(var i=0; i < selectLayer.options.length; i++){
    if (selectLayer.options[i].value === lid){
        selectLayer.removeOption(i);
    }
}

}));

},

_setWidgetSize: function(){
var panel = this.getPanel();
panel.position.height = 550;
//panel.setPosition(panel.position);
panel.panelManager.normalizePanel(panel);
},

_initLoadingShelter: function(){
this.shelter = new LoadingShelter({
hidden: false
});
this.shelter.placeAt(this.loadingNode);
this.shelter.startup();
this.shelter.hide();
},

_createLayerSelect: function(id, layerNode, map, geometry){
new Select({
name: layerNode,
id: id
}).placeAt(layerNode).startup();

var selectLayer = dijit.byId(id);

var layers = [];
for(var i = 0; i < map.graphicsLayerIds.length; i++) {
  var layerObject = map.getLayer(map.graphicsLayerIds[i]);
  if(layerObject.url){
    layers.push(layerObject);
  } 
}

selectLayer.addOption(this._makeLayerOption(this.folderUrl, layers, geometry));

},

_makeLayerOption: function(f, layers, geometry){
var r = layers.map(function(record){
switch(true){
case record.geometryType === "esriGeometryPolygon" && (geometry === '' || geometry === 'polygon'):
return html.create("option", {
label: ' ' + record.name,
value: record.id
});
case record.geometryType === "esriGeometryPoint" && (geometry === '' || geometry === 'point'):
return html.create("option", {
label: ' ' + record.name,
value: record.id
});
case record.geometryType === "esriGeometryLine" && (geometry === '' || geometry === 'line'):
return html.create("option", {
label: ' ' + record.name,
value: record.id
});
case record.geometryType === "esriGeometryPolyLine" && (geometry === '' || geometry === 'line'):
return html.create("option", {
label: ' ' + record.name,
value: record.id
});
case record.geometryType === "esriGeometryMultiPatch" && (geometry === '*' || geometry === 'multiPatch'):
return html.create("option", {
label: ' M ' + record.name,
value: record.id
});
default:
return null;
}
});
return r;
},

_initLayerChooser: function(){
var idForChangeEvent = "layerChooserNodeEvent";

this._createLayerSelect(idForChangeEvent, "layerChooserNode", this.map, "*");

this.layerName = dijit.byId(idForChangeEvent).value;
this._fieldMultiSelect(this.layerName); 
this.selectFrom.innerHTML = 'SELECT * FROM ' + this.layerName  + ' WHERE:';

dijit.byId(idForChangeEvent).on("change", lang.hitch(this, function(evt){
    this._updateFieldMultiSelect('fieldsMultiSelect', evt);
    this.selectFrom.innerHTML = 'SELECT * FROM ' + evt + ' WHERE:';
}));

},

_fieldMultiSelect: function(layerId){
this.layer = this.map.getLayer(layerId);
this.url = this.layer.url;
var fields = this.layer.fields;
this.field = this.layer.fields;

for(var i in fields){
    var opData = domConstruct.create('option');
    opData.innerHTML = fields[i].name;
    opData.value = fields[i].name;
    dom.byId('fieldsMultiSelect').appendChild(opData);
}

var self = this;
$('#fieldsMultiSelect').on('change', function(){
    self.selectedField = $(this).val();
    $('#textBoxNode').val( $('#textBoxNode').val() + $(this).val() );
    
    var $uniques = $('#uniquesMultiSelect' + ' option');
    $.each($uniques, function(index, element) {
    element.remove();
    });
});

$('#uniquesMultiSelect').on('change', function(){
    $('#textBoxNode').val( $('#textBoxNode').val() + "'" + $(this).val() + "'" );
});

},

_updateFieldMultiSelect: function(id, layerId){
var $uniques = $('#' + id + ' option');
$.each($uniques, function(index, element) {
element.remove();
});

this.layer = this.map.getLayer(layerId);
this.url = this.layer.url;
var fields = this.layer.fields;
this.field = this.layer.fields;

for(var i in fields){
    var opData = domConstruct.create('option');
    opData.innerHTML = fields[i].name;
    opData.value = fields[i].name;
    dom.byId(id).appendChild(opData);
}

},

_initButtons: function(){
for(var i in this.config.ids){
new Button({
label: this.nls.buttons[this.config.ids[i]],
value: this.nls.buttons[this.config.ids[i]],
class: "button",
onClick: function(){
$('#textBoxNode').val( $('#textBoxNode').val() + ' ' + this.get("value") + ' ' );
}
}, this[this.config.ids[i]]);
}
},

_getUniqueValues: function(){
this.shelter.show();
var query = new Query();
query.where = '1=1';
query.outFields = this.selectedField;
new QueryTask(this.url).execute(query, lang.hitch(this, function(results){
var map = results.features.map(lang.hitch(this, function(record){
return record.attributes[this.selectedField[0]];
}));
var def = new Deferred();
def.resolve(map);
def.then(lang.hitch(this, function(results){
return results.sort()
.filter(lang.hitch(this, function(x, i){
return results.indexOf(x) === i;
}));
})).then(lang.hitch(this, function(results){
var $uniques = $('#uniquesMultiSelect option');
$.each($uniques, function(index, element){
element.remove();
});
return results;
})).then(lang.hitch(this, function(results){
this._updateUniquesMultiselect('uniquesMultiSelect', results);
})).then(lang.hitch(this, function(results){
this.shelter.hide();
}));
}));
},

_updateUniquesMultiselect: function(id, data){
for(var i in data){
var opData = domConstruct.create('option');
opData.innerHTML = data[i];
opData.value = data[i];
dom.byId(id).appendChild(opData);
}
},

_performQuery: function(){
var query = new Query();
query.where = $('#textBoxNode').val();
query.outFields = ["*"];
if (this.url.indexOf("MapServer") > 0) {
query.returnGeometry = true;
}
new QueryTask(this.url).execute(query, lang.hitch(this, function(results){
this.selectionManager.setSelection(this.layer, results.features);
}),function(error){
new Message({
message: "There was a problem selecting."
});
});
},

_confirmQuery: function(){
var query = new Query();
query.where = $('#textBoxNode').val();
query.outFields = ["*"];
new QueryTask(this.url).execute(query, lang.hitch(this, function(results){
if(results.features.length !== 0){
new Message({
message: "There expression was successfully verified."
});
}else{
new Message({
message: "The expression was verified successfully, but no records were returned."
});
}
}),function(error){
new Message({
message: "There was an error with the expression."
});
});
},

_clearSelection: function(){
this.selectionManager.clearSelection(this.layer);
this.sqlquery.value = "";
var $uniques = $('#uniquesMultiSelect' + ' option');
$.each($uniques, function(index, element) {
element.remove();
});
}
});
});`

IntroJS - Trouble adding additional widgets to config file

Hello,
Firstly I want to say thank you so much for this port of the introJS library for use in the WAB! I wondered if you could help me with an app that I am setting up. I have many additional widgets and I can't seem to find a way to adjust your config file to point to them. See screenshot.

If you notice this element has a (settingid="widgets_About_Widget_47") element but if I add this to the config file like so:

the introJS window pop's up in the middle of the screen.

Any ideas?

Requesting assistance selecting widgets docked in "More" section in WAB

I have been working on this issue for some time. I wanted to see if perhaps someone ells had a brilliant idea.

As you can see from the screenshot the intro js tooltip is unable to find my "print plus" widget that is docked inside of the "more" section of the WAB.

I have tracked the code into the libs\introJS/intro.js file on line 171 there is a "for each" that builds a list of the elements that will be used later to add the tooltip to the correct items.

Any suggestions or thoughts would be very much appreciated.