nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Encontre mais publicações marcadas com

Accepted answers

All comments

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);

} 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);

});
}

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

LauraMiles1

myFeatureTable.grid.refresh(); is still not functioning in 3.17, but I was able to use your solution Jeff.

rscheitlin

Richard,

The FeatureTable does not respect the records available based on the FeatureLayers Mode (i.e. onDemand or Selection) but I provided some code to work around that in this thread:

Can a FeatureTable only display the FeatureLayer's selection when the FeatureLayer is in MODE_SELECTION?

RichardMoussopo

Thank you Jeff for this trick. it works good.

Now the only issue I have is that the table is loading all attributes from the FeatureLayer. I only want the table to load only the selected features in the featureLayer. I have the fLayer added to the map with MODE ONDEMAND. I tried flayer.setDefinitionExpression(whereClause) it works ok but limit the records set for the next query.

JeffJacobson

Richard Moussopo, you are correct when you state that the FeatureTable does not update when you update your FeatureLayer. I contacted Esri customer support in February about this and was told to use the workaround that you are trying, to destroy and recreate the table each time the feature layer is updated.

I asked them to create an enhancement request to keep the features in sync, which they did:

#ENH-000094524 [Enhancement] Update Featuretable when the underlying Featurelayer's definition query changes

Below is the function I used to create the table, which will destroy the previous table each time it is called.

var table;
function createTable() {
    // Destroy existing table.
    if (table) {
        table.destroyRecursive();
        registry.byId("tablePane").domNode.innerHTML = '<div id="table"></div>';
    }

    /**
     * Resizes the table panel as the table is collapsed or expanded.
     * @param {Event} e - Table close button click event.
     */
    function resizeTablePanel(e) {
        var gridHeaderNode = registry.byId(table._gridHeaderNode || table._gridMenu).domNode;
        var tableNode = registry.byId("tablePane").domNode;
        var borderContainer = registry.byId("borderContainer");
        var isOpening = e.target.classList.contains("toggleClosed");
        if (isOpening) {
            tableNode.style.height = tableNode.dataset.openHeight || "50%";
        } else {
            // Store the old height.
            tableNode.dataset.openHeight = tableNode.style.height || [tableNode.clientHeight, "px"].join("");
            // Set to "closed" height.
            tableNode.style.height = [gridHeaderNode.clientHeight, "px"].join("");
        }
        borderContainer.resize();
    }

    // Create the feature table
    table = new FeatureTable({
        featureLayer: layer,
        outFields: outFields,
        editable: false,
        syncSelection: false,
        zoomToSelection: false,
        // These fields are hidden by default, but user can turn them back on.
        hiddenFields: [
            "Direction_Ind",
            "RouteID",
            "Begin_ARM",
            "End_ARM",
            "SRMP_Begin_AB_Ind",
            "SRMP_End_AB_Ind",
            "SRMP_Date",
            "LRSDATE",
            "RelRouteType",
            "RelRouteQual",
            "Mid_Arm",
            "Mid_Mile_Post",
            "Project_List",
            "LOC_ERROR"
        ],
        showGridHeader: true,
        map: map
    }, "table");
    table.startup();

    // 3.15 event handler setup.

    /**
     *
     * @param {DGridRow[]} rows - The rows that were selected
     */
    table.on("dgrid-select", function (rows) {
        selectOrDeselectFeatures(rows);
    });

    /**
     *
     * @param {DGridRow[]} rows - The rows that were unselected
     */
    table.on("dgrid-deselect", function (rows) {
        selectOrDeselectFeatures(rows, true);
    });

    // 3.16 event handler setup

    /////**
    //// *
    //// * @param {DGridRow[]} rows - The rows that were selected
    //// */
    ////table.on("row-select", function (rows) {
    ////    selectOrDeselectFeatures(rows);
    ////});

    /////**
    //// *
    //// * @param {DGridRow[]} rows - The rows that were unselected
    //// */
    ////table.on("row-deselect", function (rows) {
    ////    selectOrDeselectFeatures(rows, true);
    ////});


    // resize panel when table close is toggled.
    table.tableCloseButton.addEventListener("click", resizeTablePanel);
}

RichardMoussopo

here is the sample code. I am expecting it to work a bit more like the FeatureTable from ArcGIS Online:

<!DOCTYPE html>

<html>

<head>

<title>FeatureTable Formatting</title>

<style>

html, body, #map {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

</style>

// Sample from http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=featuretable_formatting

// Globals

var map, myFeatureLayer, myFeatureTable;

require([

"esri/layers/FeatureLayer",

"esri/dijit/FeatureTable",

"esri/tasks/query",

"esri/tasks/QueryTask",

"esri/geometry/Extent",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/Color",

"esri/map",

"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, QueryTask, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,

domConstruct, dom, dojoNum, parser, ready, on,lang,

registry, Button, ContentPane, BorderContainer, TextBox

) {

parser.parse();

ready(function(){

map = new Map("map",{

basemap: "dark-gray",

extent: new Extent({xmax: -13035353.854156237, xmin: -13053431.211345658,

ymax: 4038351.1313028745, ymin: 4034089.766975982,

"spatialReference":{"wkid":102100,"latestWkid":3857}

})

});

var myFeatureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Redlands_Emergency_Facilities/FeatureServer/0",{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"],

visible: true,

id: "fLayer"

});

//set a selection symbol for the featurelayer.

var selectionSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 197, 1])));

myFeatureLayer.setSelectionSymbol(selectionSymbol);

map.addLayer(myFeatureLayer);

map.on("load", loadTable);

map.on("extent-change", updateTableByExtent);

function updateTableByExtent(ext){

console.log("Map Extent: ", ext.extent);

var qTask = new QueryTask(myFeatureLayer);

var q= new Query();

q.where = "1=1";

q.returnGeometry = true;

q.outFields=["*"];

q.geometry = ext.extent;

q.spatialRelationship = Query.SPATIAL_REL_CONTAINS;

qTask.execute(q, successCallBack, errorCallBack);

function successCallBack(result){

// Update the featureTable here ====> this should work more like the featureTable widget on ArcGIS Online

console.log(result);

}

function errorCallBack(err){

console.log("Ooops Error: ", err);

}

function loadTable(){

//create new FeatureTable and set its properties

myFeatureTable = new FeatureTable({

featureLayer : myFeatureLayer,

map : map,

gridOptions: {

allowSelectAll: true,

allowTextSelection: true,

editable: true,

//zoomToSelection: false, //disable pan/zoom action on the map for selected features

// showGridHeader: false,

// showGridMenu: false,

dateOptions: {

//set date options at the feature table level

//all date fields will adhere this

datePattern: "EEEE, MMMM d, y"

//define order and visibility of fields. If the fields are not listed in 'outFIelds'

// then they will be hidden when the table starts.

outFields: ["factype", "facname", "organiz", "capacity", "curcapacity", "hoursoper",

"daysoper", "opsstatus", "opendate", "imageurl", "pocname", "pocphone"

fieldInfos: [

{

alias: 'Facility Type',

{

alias: 'Open Hours',

{

format: {

}

{

alias: 'Open Days',

{

alias: 'Status',

{

alias: 'Last Update',

//this will override FeatureTable.dateOptions

//settings

dateOptions: {

datePattern: 'M/d/y',

}

{

alias: 'More Info',

editable: false

{

alias: 'Phone #',

format: {

}

}, 'myTableNode');

myFeatureTable.startup();

}

});

</script>

</head>

</div>

</div>

</body>

</html>

EvelynHernandez

Maybe if u show ur code in jsfiddle we can see what is going wrong.

But remember that u need to do the query every time when u select a new item (or when u change ur map extent), so u will have to make a listener that allows to perform the query every time u make a selection or change the map extent.

For example, in my case i had to make a table that refreshes the result every time i change the map extent, so i applied a listener on the map, like:

map.on('extent-change', ()=>{ getInfoByExtent((map.extent), (myresultcallback)=>{do something with the callback that i got } });

My query is:

function getInfoByExtent(extent, callback){

var qTask = new esri.tasks.QueryTask(mylayer);

var q= new esri.tasks.Query();

q.where = "1=1";

q.returnGeometry = true;

q.outFields=["*"];

q.geometry = extent;

q.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;

qTask.execute(q, (featureSet)=>{

callback(featureSet.features);

}, (Errorq)=>{

console.log(Errorq,"Error doing query by extent");

return 0;

});

}

RichardMoussopo

that is exactly the logic I am going to use now but the only issue is that the table is not refreshing at all. I am using myFeatureTable.grid.refresh(); but nothing happens the table keeps the same result set from the first query.

EvelynHernandez

Why u just dont show it at startup (hide it with css) and then when u make a selection u show the table with the selected data making a query with geometry?

And if the user click on something else that is not the map or the table itself u hide it again?

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.