process JSON data to html table and display in pop-up

MehranMalek · ‎05-02-2018

Hi everyone,

Is there a way to include a function in a popup that process JSON data and display them in HTML pop-up?

I have the code that process the JSON and display in HTML table. I don't know how to get this working in pop-up inside the webapp.

Additional info about what I'm trying to do:

I'm trying to integerate our record managment system with Webapp. So I would like to be able to send a request to

I’m trying to link documents (PDF, Word, etc. ) from our record management system to feature classes and have access to them through web applications. Each documents in record management system has GIS_ID which I’m using to link to each feature in my GIS layers. I have established a code to be able to process the JSON results which is created from our record management system. What I would like to do is to have the results to show up as a popup in my web application.
I have attached my HTML and JavaScript Code that process the JSON results received from our record management system and display them in HTML table. I have attached some screenshots. and here is my code:

<!DOCTYPE html>
<html>
<head>
<title> Json to table using Ajax Jquery getJSON</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1> Record Drawings</h1>
<br />
<table class="table table-bordered table-striped" id="drawing_table">
<tr>
<th>RecordNumber</th>
<th>RecordTitle</th>
<th>Uri</th>

</tr>
</table>
</div>
</div>

</body>

</html>
<script>

$(document).ready(function(){
$.getJSON("http://HPRMServiceAPI/Record?q=GISID:*{GIS_ID}*&format=json&properties=number,title",
function(data){

var drawing_data ='';
$.each(data['Results'], function(key, value){
drawing_data += '<tr>';
drawing_data += '<td>' +value.RecordNumber.Value+'</td>';
drawing_data += '<td><a href="http://HPRMServiceAPI/Record/' + value.Uri + '/file/document" target="_blank">' + value.RecordTitle.Value + '</a></td>';
drawing_data += '<td>' +value.Uri+'</td>';
drawing_data += '<tr>';
});
$('#drawing_table').append(drawing_data);
});
});
</script>

Grant-S-Carroll · ‎05-06-2018

You can create a listener for when features are selected as below.

this.own(on(this.map.infoWindow, 'selection-change', lang.hitch(this, this._onSelectionChange)));

Then in your "_onSelectionChange" function you can check the details of the feature and do your query. I have something similar set up to query related records out of an a-spatial database, then add them to the popup under the feature details.

_onSelectionChange: function (selectedFeature) {

console.log(selectedFeature);

//use the selected feature to run your query.

//nl should return the main section of your popup.

var nl = query('.mainSection');

if(nl.length > 0){

//Add your table details in to this div.

var div = domConstruct.toDom(drawing_data);

//Then append it to the popup

nl[0].appendChild(div);

}

In the above you'll need the following.

query = dojo/query

domConstruct = dojo/dom-construct

The above may not be perfect as its from my web appbuilder application, but it should help you along the way.

MehranMalek · ‎05-18-2018

Thank you so much Grant! I'll try and see if I can get mine working

MattEitrem · ‎08-09-2018

Did you ever get this working? Since the default popup configuration for AGO does not return 1:M related data. I am looking at direct querying my rest endpoint returning JSON data and passing into the popup. I want to return multiple related records in the popup for a feature class(1) that has documents(M) presented as hyperlinks. I would like to implement in a WAB application, but not real sure on how to do it.

Grant-S-Carroll · ‎08-09-2018

Hi Matt,

See the attached code, I use this in a custom theme based on the foldable theme. There is a custom widget in there that handles the results from a query and builds a table based on that and then inserts in to the popup. (There is also code in there to make the popup moveable). While this works ok in a standard popup, it works really well with Robert Scheitlin, GISP popup side panel.

If you reference the popuphandler.js in your controller widget, and then use it in the post create, like below. (You will need to have the code in the same location as the Widget.js for your theme's controller).

this.popupHandler = new PopupHandler({
    map: this.map,
    controller: this,
 });

Hopefully that helps.

Cheers

Grant