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

3480
12
Jump to solution
05-17-2019 10:18 AM
BrianVan_Nostrand
New Contributor III

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?

1 Solution

Accepted Solutions
LeoLiu1
Occasional Contributor

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.

View solution in original post

0 Kudos
12 Replies
RowenaTansley1
New Contributor III

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?

0 Kudos
LeoLiu1
Occasional Contributor

Here is an example: 

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

It's very easy to migrate into your widget.

0 Kudos
BrianVan_Nostrand
New Contributor III

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!

0 Kudos
DianaWalker1
New Contributor II

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

0 Kudos
BrianVan_Nostrand
New Contributor III

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.

0 Kudos
BrianVan_Nostrand
New Contributor III

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.

0 Kudos
LeoLiu1
Occasional Contributor

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.

0 Kudos
BrianVan_Nostrand
New Contributor III

Thanks Leo, that would be a huge help.

0 Kudos
LeoLiu1
Occasional Contributor

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.

0 Kudos