destroy featureTable

[RichardMoussopo]

There is only one method on the FeatureTable widget (startup). is there anyway to completely destroy the featureTable and recreate it each time the selection query changes.

I could create my own table to display selection query result but I would prefer using featureTable widget because of the editing capability to it.

[Ronald_GuiovanniVenegas_Pulido]

Good morning,

I don't know if the original subject of this question is still a problem. A few weeks ago I come across with the same issue and I manage to solve it by destroing the container of the FeatureTable. This is he code of my solution (with some extra code that you may not need at all):

var editorWidget;
var featureTable0;
var featureTable1;
var map;
var capaVisible = [];
var definitivo = [];
var relationships = [];
var relationship0;
var relationship1;
var relationship2;
var names = [];
var name0;
var name1;
var name2;
var myFeatureLayer0 = null;
var capasUsuario = [];
//var webmap = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Mapa de consulta (Servidor de pruebas)
var webmap = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //Mapa de edición (Servidor pruebas)

require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"dojo/ready",
"dojo/parser",
"esri/arcgis/Portal",
"esri/arcgis/OAuthInfo",
"esri/IdentityManager",
"esri/config",
"esri/tasks/GeometryService",
"esri/symbols/PictureMarkerSymbol",
"esri/arcgis/utils",
"esri/dijit/LayerList",
"esri/tasks/query",
"dojo/on",
"dojo/dom",
"dojo/dom-attr",
"dojo/_base/lang",
"dojo/_base/array",
"esri/dijit/editing/Editor",
'dojo/_base/html',
"esri/dijit/HomeButton",
"dojo/domReady!"
], function (
FeatureLayer,
FeatureTable,
ready,
parser,
arcgisPortal,
OAuthInfo,
esriId,
config,
GeometryService,
PictureMarkerSymbol,
arcgisUtils,
LayerList,
Query,
on,
dom,
domAttr,
lang,
array,
Editor,
html,
HomeButton
) {
ready(function () {

var info = new OAuthInfo({
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
portalUrl: "https://your.server/arcgis",
popup: false
});

esriId.registerOAuthInfos([info]);

esriId.checkSignInStatus(info.portalUrl + "/sharing").then(
function () {
createMap();
}
).otherwise(
function () {
esriId.getCredential(info.portalUrl + "/sharing").then(function () {
createMap();
});
}
);

on(dom.byId("return"), "click", function () {
window.location.replace("inicio.php");
});

on(dom.byId("sign-out"), "click", function () {
esriId.destroyCredentials();
});

function createMap() {

parser.parse();

config.defaults.io.proxyUrl = "https://your.server/apps/edicion/Net/proxy.ashx";
config.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

//Creando el mapa
arcgisUtils.arcgisUrl = "https://your.server/arcgis/sharing/rest/content/items";

arcgisUtils.createMap(webmap, "map", {
ignorePopups: true
}).then(function (response) {

map = response.map;
var capas = arcgisUtils.getLayerList(response);
//var capasTematicas = capas.reverse();
var capasTematicas = capas;

for (var i = 0; i < arreglo.length; i++) {
for (var j = 0; j < capasTematicas.length; j++) {
if ((capasTematicas.layer.layerId === parseInt(arreglo[0])) && (capasTematicas.layer.arcgisProps.title === arreglo[1])) {
capasUsuario.push(capasTematicas);
}
}
}

var myWidget = new LayerList({
map: map,
layers: capasUsuario.reverse()
}, "layerList");
myWidget.startup();

var table1 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode3'
}, "myTableNode0");

var table2 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode4'
}, "myTableNode1");

var table3 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode5'
}, "myTableNode2");

// FeatureLayer editable
myFeatureLayer0 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

// FeatureLayer editable
var myFeatureLayer1 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

// FeatureLayer editable
var myFeatureLayer2 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

domAttr.set("tab0", "innerHTML", "Seleccione una capa para ver las tablas relacionadas");
domAttr.set("tab1", "innerHTML", ".");
domAttr.set("tab2", "innerHTML", ".");

//Crea un nuevo FeatureTable y establece sus propiedades
featureTable0 = new FeatureTable({
featureLayer: myFeatureLayer0,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode3');
featureTable0.startup();

//Crea un nuevo FeatureTable y establece sus propiedades
featureTable1 = new FeatureTable({
featureLayer: myFeatureLayer1,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode4');
featureTable1.startup();

//Crea un nuevo FeatureTable y establece sus propiedades
featureTable2 = new FeatureTable({
featureLayer: myFeatureLayer2,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode5');
featureTable2.startup();

on(myWidget, "toggle", lang.hitch(this, function (evt) {
array.map(myWidget.layers, function (layer, indx) {

if (evt.visible) {
if (indx === evt.layerIndex) {
if (layer.visibility === true) {
if (typeof capaVisible !== 'undefined') {
capaVisible.push(layer);
}
}
layer.layer.setVisibility(true);
layer.visibility = true;
}
if (indx !== evt.layerIndex) {
layer.layer.setVisibility(false);
layer.visibility = false;
}
}
});

if (typeof capaVisible[0] !== 'undefined') {
if (typeof capaVisible[0].layer.relationships[0] !== 'undefined') {
if (typeof capaVisible[0].layer.relationships[1] !== 'undefined') {
relationships = [];
names = [];
name0 = capaVisible[0].layer.name;
name1 = capaVisible[0].layer.relationships[0].name;
name2 = capaVisible[0].layer.relationships[1].name;
names.push(name0);
names.push(name1);
names.push(name2);
relationship0 = capaVisible[0].layer.layerId.toString();
relationship1 = capaVisible[0].layer.relationships[0].relatedTableId.toString();
relationship2 = capaVisible[0].layer.relationships[1].relatedTableId.toString();
relationships.push(relationship0);
relationships.push(relationship1);
relationships.push(relationship2);

if (featureTable0 && featureTable1 && featureTable2) {
featureTable0.destroy();
featureTable1.destroy();
featureTable2.destroy();
featureTable0 = null;
featureTable1 = null;
featureTable2 = null;
capaVisible = [];
loadTable(relationships, names);
}
} else if (typeof capaVisible[0].layer.relationships[1] === 'undefined') {
relationships = [];
names = [];
name0 = capaVisible[0].layer.name;
name1 = capaVisible[0].layer.relationships[0].name;
name2 = ".";
names.push(name0);
names.push(name1);
names.push(name2);
relationship0 = capaVisible[0].layer.layerId.toString();
relationship1 = capaVisible[0].layer.relationships[0].relatedTableId.toString();
relationship2 = "0";
relationships.push(relationship0);
relationships.push(relationship1);
relationships.push(relationship2);

if (featureTable0 && featureTable1 && featureTable2) {
featureTable0.destroy();
featureTable1.destroy();
featureTable2.destroy();
featureTable0 = null;
featureTable1 = null;
featureTable2 = null;
capaVisible = [];
loadTable(relationships, names);
}
}

} else if (typeof capaVisible[0].layer.relationships[0] === 'undefined') {
relationships = [];
names = [];
name0 = capaVisible[0].layer.name;
name1 = ".";
name2 = ".";
names.push(name0);
names.push(name1);
names.push(name2);
relationship0 = capaVisible[0].layer.layerId.toString();
relationship1 = "0";
relationship2 = "0";
relationships.push(relationship0);
relationships.push(relationship1);
relationships.push(relationship2);

if (featureTable0 && featureTable1 && featureTable2) {
featureTable0.destroy();
featureTable1.destroy();
featureTable2.destroy();
featureTable0 = null;
featureTable1 = null;
featureTable2 = null;
capaVisible = [];
loadTable(relationships, names);
}
}
}
}));

});
}

function loadTable(id, nombre) {
map.removeLayer(myFeatureLayer0);
domAttr.set("tab0", "innerHTML", nombre[0]);
domAttr.set("tab1", "innerHTML", nombre[1]);
domAttr.set("tab2", "innerHTML", nombre[2]);

var table1 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode3'
}, "myTableNode0");

var table2 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode4'
}, "myTableNode1");

var table3 = html.create('div', {
'class': 'esriTable',
'id': 'myTableNode5'
}, "myTableNode2");

// FeatureLayer1 editable
myFeatureLayer0 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/" + id[0], {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

// Recuadro azul al seleccionar un feature en el mapa
var selectionSymbol = new PictureMarkerSymbol("img/select.png", 35, 35);

myFeatureLayer0.setSelectionSymbol(selectionSymbol);

// Cuando un usuario hace clic sobre un elemento en el mapa, la fila correspondiente en la primer tabla
// (Tabla de featureLayer) se selecciona
myFeatureLayer0.on("click", function (evt) {
var idProperty = myFeatureLayer0.objectIdField,
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";

myFeatureLayer0.selectFeatures(query, FeatureLayer.SELECTION_NEW);
}
});
map.addLayer(myFeatureLayer0);

//Crea una nueva FeatureTable y establece sus propiedades
featureTable0 = new FeatureTable({
featureLayer: myFeatureLayer0,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode3');
featureTable0.startup();

console.log("featureTable0");
console.log(featureTable0);

// FeatureLayer2 editable
var myFeatureLayer1 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/" + id[1], {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

//Crea una nueva FeatureTable y establece sus propiedades
featureTable1 = new FeatureTable({
featureLayer: myFeatureLayer1,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode4');
featureTable1.startup();

console.log("featureTable1");
console.log(featureTable1);

// FeatureLayer2 editable
var myFeatureLayer2 = new FeatureLayer("https://gyour.server/server/rest/services/yourService/FeatureServer/" + id[2], {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
visible: true
});

//Crea una nueva FeatureTable y establece sus propiedades
featureTable2 = new FeatureTable({
featureLayer: myFeatureLayer2,
map: map,
editable: true,
syncSelection: true,
showGridHeader: false
}, 'myTableNode5');
featureTable2.startup();

// Escucha al evento para refrescar la información
featureTable0.on("refresh", function (evt) {
//console.log("refresh event - ", evt);
});

featureTable0.on("show-related-records", function (evt) {
console.log("show-related-records", evt);
});

// Escucha al evento para refrescar la información
featureTable1.on("refresh", function (evt) {
//console.log("refresh event - ", evt);
});

// Escucha al evento para refrescar la información
featureTable2.on("refresh", function (evt) {
//console.log("refresh event - ", evt);
});

relationships = null;
}

});
});

And in this video you can see how this code works (of course, the HTML code is on a different file):

I hope this answer helps with this problem