topic Re: Has anyone made a custom widget to display related data from a feature selection? in Web AppBuilder Custom Widgets Questions

Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Fri, 17 May 2019 17:18:20 GMT

Hi all,

I'm trying to figure out how to put together a web appbuilder widget that will display a formatted table of related attributes from a selected feature. My customer doesn't like how the out of the box attribute table looks.

Has anyone ever tried something like this?

Re: Has anyone made a custom widget to display related data from a feature selection?

RowenaTansley1 — Sun, 19 May 2019 22:54:11 GMT

I have a custom widget that shows a custom report base on a polygon and 3 related tables. Unfortunately it's not yet public, so I can't show it to you.

Basically there is a map click, it does the polygon selection, then finds all the related records and parses JSON. Then it formats the report in the panel. I can try to be more details, or do you have any specific questions?

Re: Has anyone made a custom widget to display related data from a feature selection?

LeoLiu1 — Wed, 22 May 2019 08:36:59 GMT

Here is an example:

https://developers.arcgis.com/javascript/3/samples/featuretable_relatedrecords/

It's very easy to migrate into your widget.

Re: Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Tue, 28 May 2019 15:19:31 GMT

This looks like it would do what we need perfectly. Is there a GitHub page or something I can pull the code from and work with it?

Thanks for your help!

Re: Has anyone made a custom widget to display related data from a feature selection?

DianaWalker1 — Tue, 28 May 2019 15:37:35 GMT

I am with Brian, is there a publicly available code somewhere?

Re: Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Tue, 28 May 2019 23:50:02 GMT

This appears to be an app built using the ESRI API 3.28. I need this functionality, but within a Web AppBuilder widget. I understand how to build this out in the JS API, but the WAB widget creation is giving me plenty of issues.

Re: Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Tue, 28 May 2019 23:55:14 GMT

Here's the code he used:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FeatureTable - related records</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/"></script>
<style>
html, body, #map{
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/tasks/query",
"esri/geometry/Extent",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/map",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"dojo/dom-construct",
"dojo/dom",
"dojo/number",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dojo/_base/lang",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/TextBox"
], function (
FeatureLayer, FeatureTable, Query, Extent, SimpleFillSymbol, SimpleLineSymbol, Color, Map,
Popup, PopupTemplate, domConstruct, dom, dojoNum, parser, ready, on,lang,
registry, Button, ContentPane, BorderContainer, TextBox
) {
parser.parse();
ready(function(){
var popupOptions = {
marginLeft: "20",
marginTop: "20"
};

// create a popup to replace the map's info window
var popup = new Popup(popupOptions, domConstruct.create("div"));

var map = new Map("map",{
basemap: "topo",
infoWindow: popup,
extent: new Extent({
xmax: -13178092.546668783, xmin: -13180901.607458338,
ymax: 4038066.907666304, ymin: 4036294.524072895,
"spatialReference":{"wkid":102100,"latestWkid":3857}
})
});
map.on("load", loadTable);
function loadTable(){
// create a popup template for Bevery Hills
// Trees by block layer
var popupTemplate = new PopupTemplate({
"title": "Beverly Hills Trees By Block",
"fieldInfos": [{
"fieldName": "Point_Count",
"label": "Count of Points",
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "relationships/0/Point_Count_COMMON",
"label": "Sum of species tree count",
"format": {
"places": 0,
"digitSeparator": true
},
"statisticType": "sum"
}, {
"fieldName": "relationships/0/COMMON",
"label": "Common Name"
}, {
"fieldName": "BLOCKCE10",
"label": "Block"
}],
"description": "There are {Point_Count} trees within census block {BLOCKCE10}",
"showAttachments": false,
"mediaInfos": [{
"title": "Count By Type",
"type": "columnchart",
"caption": "",
"value": {
"theme": "GreySkies",
"fields": ["relationships/0/Point_Count_COMMON"],
"normalizeField": null,
"tooltipField": "relationships/0/COMMON"
}
}]
});

var myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: popupTemplate,
outFields: ["*"],
//set the definition expression
definitionExpression: "TRACTCE10 = '700902'",
visible: true,
id: "fLayer"
});
// apply the selection symbol for the layer
var selectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.35]), 1),
new Color([255, 0, 0, 0.35]));
myFeatureLayer.setSelectionSymbol(selectionSymbol);

// listen to featurelayer click event to handle selection
// from layer to the table.
// when user clicks on a feature on the map, the corresponding
// record will be selected in the table.
myFeatureLayer.on("click", function(evt) {
var idProperty = myFeatureLayer.objectIdField;
var feature, featureId, query;
if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
feature = evt.graphic,
featureId = feature.attributes[idProperty];
query = new Query();
query.returnGeometry = false;
query.objectIds = [featureId];
query.where = "1=1";
myFeatureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
map.addLayer(myFeatureLayer);
// create new FeatureTable and set its properties
var myFeatureTable = new FeatureTable({
featureLayer : myFeatureLayer,
map : map,
syncSelection: true,
showRelatedRecords: true,
showAttachments: true,
fieldInfos: [
{
name: 'AnalysisArea',
alias: 'Area SQ/KM',
editable: false,
format: {
template: "${value}",
places: 3 // number of decimal places
// digitSeparator: true // default is true
}
}
],
// outfields
outFields: ["TRACTCE10", "BLOCKCE10", "GEOID", "NAME", "MTFCC", "ALAND", "AnalysisArea", "Point_Count", "Join_ID"],
}, 'myTableNode');
myFeatureTable.startup();
// listen to row-click event
// to hide visible popups
myFeatureTable.on("row-select", function(evt){
if (map.infoWindow.isShowing){
map.infoWindow.hide();
}
});
// listen to show-attachments event
myFeatureTable.on("show-attachments", function(evt){
console.log("show-attachments event - ", evt);
});
// listen to show-related-records event
myFeatureTable.on("show-related-records", function(evt){
console.log("show-related-records event - ", evt);
});
}
});
});
</script>
</head>
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:60%">
<div id="map"></div>
</div>
<div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:40%">
<div id="myTableNode"></div>
</div>
</div>
</body>
</html>

It appears to be JS API code from the 3.28 API. It probably is very easy to migrate into my widget. I don't know how to do that, though.

Re: Has anyone made a custom widget to display related data from a feature selection?

LeoLiu1 — Wed, 29 May 2019 02:35:13 GMT

The codes are very similar to it supposed to be in the widget. You just need to:

1. configure feature actions for your custom widget.

2. in the function that binding to your feature action, determine feature/featureset has related data or not.

3. show the widget UI if it has related data.

I will see if I can figure out some time to build a simple widget sample for you.

Re: Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Wed, 29 May 2019 15:10:58 GMT

Thanks Leo, that would be a huge help.

Re: Has anyone made a custom widget to display related data from a feature selection?

LeoLiu1 — Thu, 30 May 2019 02:09:47 GMT

Hi Brian,

Try this customized widget, I just quickly copied the codes from the sample I mentioned before.

You probably need to polish the codes to make it more robust.

https://github.com/LeoLiu-EsriAu/WebAppBuilderDEV

Cheers,

Leo.

Re: Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Fri, 31 May 2019 00:21:24 GMT

Leo,

Thanks! I'm working on tweaking the code to use the schema of my services now. Do you have any tips on resources to figure out how to do this? How did you learn to make widgets?

Thanks again,

Brian

Re: Has anyone made a custom widget to display related data from a feature selection?

LeoLiu1 — Fri, 31 May 2019 00:39:47 GMT

I normally play in the developer version before deploy to Portal.

The documents and samples there are very helpful.

https://developers.arcgis.com/web-appbuilder/guide/getstarted.htm

Re: Has anyone made a custom widget to display related data from a feature selection?

BrianVan_Nostrand — Tue, 09 Jul 2019 19:39:09 GMT

Leo,

Thanks a lot for your help last month. Using your code as a framework, I managed to put together a widget that our customer likes. For anyone reading this in the future that is getting hung up on accessing the attributes of a selected feature, look at the code Leo shared above, specifically:

showRelatedData: function(featureSet){
var layerId = featureSet.features[0]._layer.id;
this.selectedFeatureLayer = this.map._layers[layerId];

poke around in featureSet to find a list of the selected features and their attributes, and in this.map to find map properties, as they would appear in a ESRI JS API 3.28 map.