This sample demonstrates how to edit using the TableList widget. In this example, two FeatureLayer tables are displayed in this widget. One table is saved within a WebMap, while the other is added dynamically in the app by calling the fromPortalItem method and passing in the item of the associated hosted table.
The widget takes a map property which contains a collection of tables. The tables are read as a collection of layers. In order for the widget to recognize if a table is valid, the feature layer's isTable property must return true.
If a table is loaded dynamically, it must first be loaded and added to the map's tables collection. The following snippet shows how this is handled.
Layer.fromPortalItem({
portalItem: {
// autocasts new PortalItem()
id: "6aa49be79248400ebd28f1d0c6af3f9f" // loads a feature layer table from AGO portal item
}
}).then(function(layer) {
layer.load().then(function() {
// Must first load the layer and then check if it's a table
if (layer.isTable) {
webmap.tables.add(layer); // add this table to the map's tables collection
}
});
});When instantiating the widget, pass in a valid Map. In this case, we are setting it to a WebMap containing a feature layer table.
const tableList = new TableList({
// Two tables should display, the first one is stored within the webmap,
//ie. Chicago public health statistics. The other is dynamically loaded
//from the portal item, ie. Chicago Covid daily cases deaths and hospitalizations.
map: webmap, // get access to the map which has the collection of tables
listItemCreatedFunction: createActions // call createActions function to set ActionToggle and ActionButton
});