kyleb

Populate an existing popup with an AttributeInspector after RelationshipQuery returns

Discussion created by kyleb on Apr 14, 2012
Latest reply on Sep 22, 2012 by kyleb
Here's the workflow: A user selects a feature layer polygon, views a popup. A link added to the popup will run a RelationshipQuery to view related records. How can I get the RelationshipQuery results to update the first popup as an AttributeInspector? A second link on the first popup would run a function to add a new record to the related table, that would also need to appear as an AttributeInspector in the first popup. I don't think I'm handling the RelationshipQuery results correctly because the second popup comes back with 'no features selected'. I've run the Query Related Records on the REST feature service so I know the relationship is established.

Thanks much for any input

B

dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("esri.map");
dojo.require("esri.toolbars.navigation");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.dijit.Popup");
dojo.require("esri.dijit.AttributeInspector-all");

var popup, popupTemplate;
var startExtent;
var map;
var gallerymaps = [];
var featureLayer, basemapGallery, HybridLayer, ImageryLayer, BasemapLayer, operationalLayer;
var HybridBasemap, ImageryBasemap, BasemapBasemap;
var selectionHandler;
var query,relatedQuery;
var deferred = [];
var viewLink, newLink;

function init() {
esri.config.defaults.map.sliderLabel = null;

popup = new esri.dijit.Popup({
fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0, 0, 255]), 2), new dojo.Color([0, 0, 255, 0.25]))
}, dojo.create("div"));

startExtent = new esri.geometry.Extent(...);
map = new esri.Map("map", {
extent: startExtent,
infoWindow: popup
});

dojo.connect(dijit.byId('map'), 'resize', map, map.resize);

dojo.connect(map, "onClick", function (evt) {
query = new esri.tasks.Query();
query.geometry = evt.mapPoint;
deferred.push(featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));
map.infoWindow.setFeatures(deferred);
map.infoWindow.show(evt.mapPoint);
map.infoWindow.resize(325, 210);
});

relatedQuery = new esri.tasks.RelationshipQuery();
relatedQuery.outFields = ["*"];
relatedQuery.returnGeometry = false;
relatedQuery.relationshipId = 0;

// Add links into the InfoWindow Actions panel
viewLink = dojo.create("a", {
"class": "action",
"innerHTML": "View Activity",
"href": "javascript:void(0);"
}, dojo.query(".actionList", map.infoWindow.domNode)[0]);

newLink = dojo.create("a", {
"class": "action",
"innerHTML": "Add Activity",
"href": "javascript:void(0);"
}, dojo.query(".actionList", map.infoWindow.domNode)[0]);

// Register a function to be called when the user clicks on the link
dojo.connect(viewLink, "onclick", function (evt) {
var feature = map.infoWindow.getSelectedFeature();
exeViewRelated(feature);
});
dojo.connect(newLink, "onclick", function (evt) {
var feature = map.infoWindow.getSelectedFeature();
exeAddRelated(feature);
});

dojo.connect(featureLayer, "onEditsComplete", function () {
featureLayer.refresh();
});

addFeatureLayer();

//working around an arcgis server feature service bug
esri.setRequestPreCallback(function (ioArgs) {
if (ioArgs.url.indexOf('queryRelatedRecords') !== -1) {
ioArgs.url = ioArgs.url.replace("FeatureServer", "MapServer");
}
return ioArgs;
});
return map;
}

function addFeatureLayer() {
//add the operational layer to the map
operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://.../MapServer");
map.addLayer(operationalLayer);

popupTemplate = new esri.dijit.PopupTemplate({
title: "{PHYISICALADDRESS}",
fieldInfos: [
{ fieldName: "PARCELNO", visible: true, label: "Parcel Number:" },
{ fieldName: "OWNERNAME", visible: true, label: "Owner Name:" },
{ fieldName: "MAILADDRESS", visible: true, label: "Mailing Address:" },
{ fieldName: "MAILLOC", visible: true, label: "Mailing Location:" },
{ fieldName: "CONTACT_PHONE_NUMBER", visible: false, label: "Phone Number:" },
{ fieldName: "CONTACT_EMAIL", visible: false, label: "Email Address:" },
{ fieldName: "ACTIVITY_DESIGNATION", visible: false, label: "Designation:" },
{ fieldName: "ACTIVITY_DATE", visible: false, label: "Activity Date:" },
{ fieldName: "ACTIVITY_INFO", visible: false, label: "Activity Information:" },
{ fieldName: "ACTIVITY_CUSTODIAN", visible: false, label: "Information Custodian:" },
{ fieldName: "PROPERTY_LOC_DESC", visible: false, label: "Property Location Description:" }
],
showAttachments: true
});

featureLayer = new esri.layers.FeatureLayer("http://.../FeatureServer/0", {
mode: esri.layers.FeatureLayer.MODE_SELECTION,
infoTemplate: popupTemplate,
outFields: ["*"],
id: "propertyLayer"
});

map.addLayer(featureLayer);
}

function exeViewRelated(parcelFeature) {
relatedQuery.objectIds = [parcelFeature.attributes.OBJECTID];
featureLayer.queryRelatedFeatures(relatedQuery, function (relatedRecords) {
var fset = relatedRecords[parcelFeature.attributes.OBJECTID];

title = parcelFeature.attributes.PHYISICALADDRESS;
//    content = "<b>Owner Name: </b>" + parcelFeature.attributes.OWNERNAME
//            + "<br /><br /><b>Mailing Address: </b>" + parcelFeature.attributes.MAILADDRESS
//            + "<br /><br /><b>Mailing Location: </b>" + parcelFeature.attributes.MAILLOC

var layerInfos = [{ 'featureLayer': featureLayer,
'showAttachments': true,
'isEditable': true,
'fieldInfos': [
{ 'fieldName': 'PHYISICALADDRESS', 'isEditable': false, 'label': 'Property Address:' },
{ 'fieldName': 'OWNERNAME', 'isEditable': false, 'label': 'Owner Name:' },
{ 'fieldName': 'MAILADDRESS', 'isEditable': false, 'label': 'Mailing Address:' },
{ 'fieldName': 'MAILLOC', 'isEditable': false, 'label': 'Mailing Location:' },
]
}];

var attInspector = new esri.dijit.AttributeInspector({
layerInfos: layerInfos
},
dojo.create("div")
);

dojo.place(attInspector.domNode, popup.domNode);

//add a save button next to the delete button
var saveButton = new dijit.form.Button({ label: "Save", "class": "saveButton" });
dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

dojo.connect(saveButton, "onClick", function () {
updateFeature.getLayer().applyEdits(null, [updateFeature], null);
});

dojo.connect(attInspector, "onAttributeChange", function (feature, fieldName, newFieldValue) {
//store the updates to apply when the save button is clicked
updateFeature.attributes[fieldName] = newFieldValue;
});

dojo.connect(attInspector, "onNext", function (feature) {
updateFeature = feature;
console.log("Next " + updateFeature.attributes.objectid);
});

dojo.connect(attInspector, "onDelete", function (feature) {
feature.getLayer().applyEdits(null, null, [feature]);
map.infoWindow.hide();
});

dojo.connect(map.infoWindow, "onHide", function () {
featureLayer.clearSelection();
});

map.infoWindow.setTitle(title);
map.infoWindow.setContent(attInspector.domNode);
map.infoWindow.resize(500, 500);
});
}

Outcomes