topic Re: how to view/add client side feature layer into table widget ? in Experience Builder Custom Widgets

how to view/add client side feature layer into table widget ?

mohannainar1 — Mon, 16 Dec 2024 12:23:38 GMT

I created new feature layer from client side and added into map in experience builder developer edition.

Now I want to see the layer in table widget.

In web app builder, once we add the layer programmatically the attribute information will be displayed automatically. Not sure how to implement in experience builder

const activeViewChangeHandler = (jmv: JimuMapView) => {

if (jmv) {

setJimuMapView(jmv)

jmv.view.when(() => {

console.log("Map loaded");

setIsMapLoaded(true);

setLoading(false);

// Add sample graphic

const ptGraphic = new Graphic({

geometry: {

type: "point",

longitude: -118.805,

latitude: 34.027

attributes: {

Name: "Sample Point",

Description: "This is a sample description"

}

});

const layer = new FeatureLayer({

source: [ptGraphic],

fields: [{

alias: "ObjectID",

type: "oid"

}, {

alias: "Place",

type: "string"

},{

alias: "Description",

type: "string"

}],

objectIdField: "ObjectID",

geometryType: "point"

});

layer.title = "Sample Layer";

jmv.view.map.add(layer);

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Mon, 16 Dec 2024 13:32:26 GMT

You will first need to convert your layer to a datasource and then register it with the framework. The method I have used for framework registration has been removed in Developer Edition 1.16, so I do not currently have the complete code for the process. Take a look at these two posts and you should be able to stitch together the complete answer.

https://community.esri.com/t5/arcgis-experience-builder-questions/loss-of-renderer-with-runtime-created-data-source/m-p/1539934#M14949

https://community.esri.com/t5/arcgis-experience-builder-questions/confusion-in-how-to-manage-data-sources-in-1-16/m-p/1566622#M16427

Re: how to view/add client side feature layer into table widget ?

mohannainar1 — Tue, 17 Dec 2024 11:06:37 GMT

I refered the first link as suggested by you and it worked in Developer edition 1.16. The same logic I tried in 1.14 it did not work and not throwing any error message. The reason I am using 1.14 is my Portal version is 11.3.

const layer = new FeatureLayer({

source: [ptGraphic],

fields: [{

alias: "ObjectID",

type: "oid"

}, {

alias: "Place",

type: "string"

},{

alias: "Description",

type: "string"

}],

objectIdField: "ObjectID",

geometryType: "point"

});

layer.title = "Sample Layer";

layer.id = "sampleLayer";

const dataSourceManager = DataSourceManager.getInstance();

const dataSourceId = "dataSource_1";

//const layerInfo = jmv.view.map.allLayers.items[39]

//const dataSourceId = "dataSource_1";

const data: DataSourceJson = {

id: 'sample layer',

layerId: layer.id,

type: DataSourceTypes.FeatureLayer,

label: layer.title,

}

const dataJson = Immutable(data)

const dataSourceOptions = {

id: 'Sample client side layer',

layer: layer,

dataSourceJson: dataJson,

}

//const jimuLayerView = await jimuMapView.addLayerAndCreateJimuLayerView(layer, dataSource);

dataSourceManager.createDataSource(dataSourceOptions).then((source) => {

const sourceId = source.id

const addMapData = {

jimuMapViewId: jmv.id,

dataSourceId: sourceId,

dataChangeType: DataChangeType.Create,

dataChangeStatus: DataChangeStatus.Fulfilled

}

jmv.view.map.add(layer)

jmv.createJimuLayerView(layer, jmv.id, 0, source, true)

//let mapDatas = { sourceId: addMapData }

//jmv.view.map.addOrRemoveDataOnMap(mapDatas)

}).catch((error) => {

console.error('Error creating DataSource:', error);

});

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Fri, 20 Dec 2024 21:24:34 GMT

I just started making a 1.16 compatible datasource today. It looks like this block of code will make a datasource from a FeatureLayer and add it to a map. I think it should work in 1.14 and 1.16, but I have not tested in 1.14.

Edit: Tested. This code does not work in 1.14. The addLayerAndCreateJimuLayerView() method is not available.

const fetchDataSourceJson = async (dsId: string, layer: object) : Promise<IMDataSourceJson> => { const dsJson = await dataSourceJsonCreator.createDataSourceJsonByJSAPILayer(dsId, layer) console.log(dsJson) return dsJson } const createDataSource = async (dsId: string, layer: object) : Promise<DataSource> => { const dsJson = await fetchDataSourceJson(dsId, layer) const dsOptions: FeatureLayerDataSourceConstructorOptions = { id: dsId, dataSourceJson: dsJson } console.log(dsOptions) return DataSourceManager.getInstance().createDataSource(dsOptions) } const makeLayerView = async layer => { const dataSource = await createDataSource(layer.id, layer) const layerView = await jimuMapView.addLayerAndCreateJimuLayerView(layer, dataSource) console.log(layerView) } //call function makeLayerView(featureLayer)

Re: how to view/add client side feature layer into table widget ?

ericsamson_tract — Mon, 03 Feb 2025 19:39:01 GMT

hey Jeff, do you mind including your imports? I can't for the life of me figure out where to import dataSourceJsonCreator or FeatureLayerDataSourceConstructorOptions from. I tried jimu-core and jimu-arcgis and a few other things, just can't get it working. Thanks!

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Mon, 03 Feb 2025 19:54:22 GMT

import { React, AllWidgetProps, DataSourceManager, type IMDataSourceJson, type DataSource } from 'jimu-core' import { JimuMapViewComponent, JimuMapView, MapViewManager } from 'jimu-arcgis' import { dataSourceJsonCreator, type FeatureLayerDataSourceConstructorOptions } from 'jimu-core/data-source'

They created a 'jimu-core/data-source' module with the 1.16 release.

Re: how to view/add client side feature layer into table widget ?

KenBuja — Mon, 03 Feb 2025 20:38:31 GMT

@JeffreyThompson2Where is this documented?

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Mon, 03 Feb 2025 20:56:27 GMT

https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/data-source-widgets/runtime-data-source-without-saving-to-config

I think this sample widget is as close as we are getting to actual documentation.

Re: how to view/add client side feature layer into table widget ?

ericsamson_tract — Mon, 03 Feb 2025 22:03:50 GMT

Thanks Jeff for all the information! I am however still getting stuck...I am attempting to transform a geojson to a featurelayer and then have that featurelayer be a data source that we can then add to the attribute table. I am able to transform and add to the map fine, and the code you offered above also allows me to click the "add to table" option within the layerlist. However, when I click that I get an error that there is no item id:

No item id. data-source.js:1
Uncaught (in promise) TypeError: Cannot convert undefined or null to object add-to-table.js:1

Here's my relevant code section:

const layer = createFeatureLayerFromGeoJSON({ geojson: geojsonData, title: "Parcels", wkid: 4326, geometryType: 'polygon' }); //jimuMapView.view.map.add(layer); const fetchDataSourceJson = async (dsId: string, layer) : Promise<IMDataSourceJson> => { const dsJson = await dataSourceJsonCreator.createDataSourceJsonByJSAPILayer(dsId, layer) console.log(dsJson) return dsJson } const createDataSource = async (dsId, layer) : Promise<DataSource> => { const dsJson = await fetchDataSourceJson(dsId, layer) const dsOptions: FeatureLayerDataSourceConstructorOptions = { id: dsId, dataSourceJson: dsJson } console.log(dsOptions) return DataSourceManager.getInstance().createDataSource(dsOptions) } const makeLayerView = async layer => { const dataSource = await createDataSource(layer.id, layer) const layerView = await jimuMapView.addLayerAndCreateJimuLayerView(layer, dataSource) console.log(layerView) } makeLayerView(layer)

I am also getting a curious typescript error on the id line within the createdatasource function:
"Object literal may only specify known properties, and 'id' does not exist in type 'FeatureLayerDataSourceConstructorOptions'.ts(2353)"
Which doesn't make sense to me since I am using the same code that ESRI has in their example.

Any leads would be much appreciated.

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Tue, 04 Feb 2025 13:51:33 GMT

Where is the createFeatureLayerFromGeoJSON() function coming from? I'm not familiar with it.

The issue I see is that you are using layer.id in the createDataSource() function, but the layer object in the createFeatureLayerFromGeoJSON() does not have an id property. Is it created by this function?

Re: how to view/add client side feature layer into table widget ?

ericsamson_tract — Tue, 04 Feb 2025 22:26:17 GMT

That is a custom function I created to transform geojsons users get from an API into a feature layer.

I was actually able to utilize @mohannainar1 code to create a function that adds a datasource to a created featurelayer:

interface AddDataSourceLayerOptions { layer: __esri.FeatureLayer; jimuMapView: JimuMapView; layerId: string; dataSourcePrefix?: string; zoomToLayer?: boolean; layerIndex?: number; label?: string; } async function addDataSourceLayerToMap({ layer, jimuMapView, layerId, zoomToLayer = true, layerIndex = 0, label }: AddDataSourceLayerOptions): Promise<string> { const dataSourceManager = DataSourceManager.getInstance(); const data: DataSourceJson = { id: layerId, layerId: layer.id, type: DataSourceTypes.FeatureLayer, label: label || layer.title }; const dataJson = Immutable(data); const dataSourceOptions = { id: `${layerId}_client`, layer: layer, dataSourceJson: dataJson }; try { const source = await dataSourceManager.createDataSource(dataSourceOptions); jimuMapView.view.map.add(layer); jimuMapView.createJimuLayerView(layer, jimuMapView.id, layerIndex, source, true); if (zoomToLayer) { await layer.when(); if (layer.fullExtent) { await jimuMapView.view.goTo(layer.fullExtent); } } return source.id; } catch (error) { console.error('Error creating DataSource:', error); throw error; } } // then to use it, I have a global variable called: const layerIdCounters = new Map<string, number>(); function getUniqueLayerId(baseId: string): string { const currentCount = layerIdCounters.get(baseId) || 0; const newCount = currentCount + 1; layerIdCounters.set(baseId, newCount); return `${baseId}_${newCount}`; } const uniqueLayerId = getUniqueLayerId('parcels_layer'); console.log('uniqueLayerId:', uniqueLayerId) const sourceId = await addDataSourceLayerToMap({ layer: api_feature_layer, jimuMapView: jimuMapView, layerId: uniqueLayerId, label: 'parcels_api' });

Re: how to view/add client side feature layer into table widget ?

ericsamson_tract — Wed, 05 Feb 2025 17:15:43 GMT

@mohannainar1 @JeffreyThompson2

Any ideas on how to add this datasource to the attribute table widget automatically? I was able to get my attribute table to open when the functions are done by doing the following, but not getting any good documentation of sending it to the attribute table automatically:

getAppStore().dispatch(appActions.widgetStatePropChange( 'widget_60', 'collapse', true ));

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Wed, 05 Feb 2025 20:03:20 GMT

There is the Add To Table Action so there must be a way to trigger it programmatically, but simply don't know what it is. Maybe you can figure it out by digging around in the source code. It's probably somewhere in the Message interface. https://developers.arcgis.com/experience-builder/api-reference/jimu-core/Message/

If you want don't necessarily need the Experience Builder Table Widget. Take a look at the FeatureTable in the API. It should be easier to work with.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html

Re: how to view/add client side feature layer into table widget ?

Vara_PrasadM_S — Thu, 20 Mar 2025 06:47:28 GMT

Hi @JeffreyThompson2 ,

Hope you are doing good. I request you to please guide me on creating datasource for grouplayer with featurelayers added as sub layers. I tried similar approach you suggested above for feature layers but facing errors something like below.

Any help would be highly appreciated. Thanks in advance

Re: how to view/add client side feature layer into table widget ?

JeffreyThompson2 — Thu, 20 Mar 2025 12:26:14 GMT

I don't think the datasource support functions that were added in 1.16 are set up to handle GroupLayers. Back in 1.14, I tried creating datasources from FeatureLayers first and then turning them into GroupLayers, but it broke all the Datasource functionality, or at least the Select Widget. I don't know if that is still a limitation, so maybe try it that way and let us know how it goes.