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

Making runtime featureLayers register as datasources for select widget

Jeff.Thompson@arlingtontx.gov_arlingtontx

I am loading my map layers at runtime through a custom widget. Everything is configured as desired in Developer Edition 1.12. Now, I am upgrading to 1.14 primarily for the access to the Select Widget and the Add to Table Data Action.

Adding a data layer with the OOTB Add Data widget will make the layer selectable in the Select Widget, but layers loaded from my custom widget are not available in the Select Widget.

How can I get the Select Widget to recognize the added data? Bonus points, if the Map Layers Widget will also show the Add To Table option.

@Wei_Ying Would creating a client side data source be picked up by the Select Widget? https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/client-side-output Can a single widget have multiple output datasources?

Looking through the code for the Add Data Widget I found these lines.

const dataSourcesChangeMessage = new DataSourcesChangeMessage(widgetId, DataSourcesChangeType.Create, dataSources)
MessageManager.getInstance().publishMessage(dataSourcesChangeMessage)

Could publishing a message similar to this trigger the Select Widget to find the layers?

Find more posts tagged with

Accepted answers

Jeff.Thompson@arlingtontx.gov_arlingtontx

The DataSourcesChange message did not work, but I got something functional with the JimuMapView.addRemoveDataOnMap() method.

setTimeout(() => {
				console.log(mapLayer.sourceJSON)
				const data: DataSourceJson = {
					id: 'custom_' + layerGroup.layers[i].id,
					layerId: `${mapLayer.sourceJSON["id"]}`,
					itemId: layerGroup.layers[i].id,
					url: layerGroup.layers[i].url,
					type: 'FEATURE_LAYER',
					geometryType: mapLayer.sourceJSON["geometryType"],
					label: mapLayer.title,
					portalUrl: 'url'
				}
				const dataJson = Immutable(data)
				const dataSourceOptions = {
					id: layerGroup.layers[i].id,
					layer: mapLayer,
					dataSourceJson: dataJson
				}
				
				console.log(dataSourceOptions)
				const dataSource = DataSourceManager.getInstance().createDataSource(dataSourceOptions)
				dataSource.then((source) => {
					
						console.log(source)
						const sourceId = source.id
						const addMapData: AddToMapData = {
							mapWidgetId: 'widget_9',
							messageWidgetId: 'widget_33',
							jimuMapViewId: jimuMapView.id,
							dataSourceId: sourceId,
							type: ActionType.MessageAction,
							title: 'Add Data',
							dataChangeType: DataChangeType.Create,
							dataChangeStatus: DataChangeStatus.Fulfilled
						}
						console.log(addMapData)
						mapDatas[sourceId] = addMapData
						
					
					setTimeout(() => {
						jimuMapView.addOrRemoveDataOnMap(mapDatas)
					}, 50)
				})

}, 3000)

YueyangLi

@JeffreyThompson2 You can generate multiple output data sources in your widget. If you do not know the number and schema of the data sources your widget needs to generate in your settings, I recommend you look through the Add Data widget.

Please see the createDataSourcesByDataOptions method in the add-data/src/runtime/utils.ts.

1. Prepare the FeatureLayerDataSourceConstructorOptions. Pass the layer to let the created data source query via it. The layer can be client-side or server-side Maps SDK feature layer. Pass the dataSourceJson to let the data source manager know the definition of the data source, including id, type, label, url, itemId, portalUrl, layerId (e.g. '0', '1') and geometryType (e.g. 'esriGeometryPoint', 'esriGeometryPolyline').

2. Create data sources by DataSourceManager.getInstance().createDataSource(options).

3. Publish the message you mentioned above if you want the add-to-map, pan-to, and zoom-to message actions of the map widget (also need to declare your widget publish messages in the manifest, by adding "publishMessages": ["DATA_SOURCES_CHANGE"]). If you only need data actions, you do not need to do it.

All comments

YueyangLi

@SerjStol, if your layers are from the same feature service/map service, you can create a feature service/map service data source and then add it to the map, like what the Add data widget is doing.

If your layers are from multiple service, you can create a group layer item and then create a group layer data source based on it.

To create group layer/map service/feature service data source, you need to 1. change the type of the data source json 2. add the url (the service url), the portalUrl and itemId if you have, and 3. remove the Maps SDK layer (the data source will create one when needed).

Your data source JSON may like:

{
  id: 'ds1',
  sourceLabel: 'the data source name',
  type: DataSourceTypes.FeatureService, // MapService, or GroupLayer,
  url: 'https://xyz/FeatureServer', // group layer should not have the url
  itemId: 'xyz',
  portalUrl: 'https://xyz.arcgis.com'
}

SerjStol

Thanks @YueyangLi , publishing a message worked for me leveraging message actions. Layer added to map and layer list, panned and zoomed after actions were configured. However, my hosted feature layer has multiple layers within it, but my code only adds the first layer. I see in Add Data widget I can add the whole hosted feature layer and multiple layers are grouped together. Do I just need to iterate through all layers and create multiple FeatureLayer objects via the url rather than itemid, and how do i group them like Add Data Widget? I am currently adding a Feature Layer using portal item ID, fetching data source JSON and then creating a data source and publishing a message.

// Function to create the DataSource JSON
const fetchDataSourceJson = async (dsId: string, layer: FeatureLayer): Promise<IMDataSourceJson> => {
    try {
        const dsJson = await dataSourceJsonCreator.createDataSourceJsonByJSAPILayer(dsId, layer);
        console.log('DataSource JSON:', dsJson);
        return dsJson;
    } catch (error) {
        throw new Error(`Failed to fetch DataSource JSON: ${error}`);
    }
}
 
// Function to create the DataSource
const createDataSource = async (dsId: string, layer: FeatureLayer): Promise<DataSource> => {
    try {
        const dsJson = await fetchDataSourceJson(dsId, layer);
        const dsOptions: FeatureLayerDataSourceConstructorOptions = {
            id: dsId,
            dataSourceJson: dsJson
        }
        console.log('DataSource Constructor Options:', dsOptions);
        const dataSource = await DataSourceManager.getInstance().createDataSource(dsOptions);
 
        // Ensure the data source is fully initialized
        if (dataSource.isDataSourceSet && !dataSource.areChildDataSourcesCreated()) {
            await dataSource.childDataSourcesReady();
        }
 
        return dataSource;
    } catch (error) {
        throw new Error(`Failed to create DataSource: ${error}`);
    }
}
 
// Main function to create the DataSource by Layer and publish the message
export async function createDataSourceByLayer(
    itemId: string,
    widgetId: string
): Promise<DataSource> {
 
    try {
        const layer = new FeatureLayer({
            portalItem: {
                id: itemId
            },
            id: `incidentFl_${itemId}` 
        });
 
        
        // Wait for the layer to load to ensure all properties are available
        await layer.load();
 
        // Construct the DataSource ID
        const dsid = `incidentDs_${layer.id}`;
 
        // Create the DataSource
        const dataSource = await createDataSource(dsid, layer);
 
        // Publish message
        const dataSourcesChangeMessage = new DataSourcesChangeMessage(
            widgetId,
            DataSourcesChangeType.Create,
            [dataSource]
        );
        MessageManager.getInstance().publishMessage(dataSourcesChangeMessage);
 
        return dataSource;
 
    } catch (error) {
        console.error(`Error in createDataSourceByLayer: ${error}`);
        throw error;
    }
}

YueyangLi

Hi @JustinWade , the map widget can only uses map data source, I assume your output data source is a feature layer.

To add the layer data source to map widget, you can use the DataActionList component to add it to the map in the runtime (need the end users to click the 'Add to map' button, please see add data widget).

If you want to add the layer automatically as soon as it is created. Try the message actions. Add '"publishMessages": ["DATA_SOURCES_CHANGE"]' to your widget's manifest.json and publish the message when your layer data source is created. Please note, the builder users need to configure the message action before publishing the app.

const dataSourcesChangeMessage = new DataSourcesChangeMessage(widgetId, DataSourcesChangeType.Create, dataSources)
MessageManager.getInstance().publishMessage(dataSourcesChangeMessage)

JustinWade

Hi Jeffrey, I am working on a custom widget and I want to be able to create an output data source that is compatible with Map Widget. I have successfully created an output data source. When navigating to the settings panel for Table and Chart widgets, I am able to see my output data source and select it. But when selecting Map Widget -> Select Map -> Select data I do not see the output data source in this menu.

Do you have any thoughts on how to get the output data source to show up in the Map Widget?

MohammedHilal_K

Hi @YueyangLi @QunSun @JeffreyThompson2 @Wei_Ying

In the scenario related to DataSource, is there an effective way to switch WebMaps with a DataSource reference at runtime?

Currently, I am changing the WebMap using the following code:
jimuMapView.view.map = newWebMap;

However, with this approach, I am unable to access DataActions such as "Export" and "Add to Table." I have more than 5 WebMaps, and based on certain conditions, I need to switch between them with the DataSource reference. Could you suggest any ideas on how to achieve this?

YueyangLi

@MohammedHilal_K I was able to reproduce the issue and have logged it. Thank you for raising this issue!

MohammedHilal_K

@YueyangLi
I am referring to the attribute info popup. The DataActions (export & add to table) are working fine, but when we directly click on the map service, the attribute info popup does not display. I have observed this issue even with the out-of-the-box ‘AddData’ widget as well

YueyangLi

@MohammedHilal_K Are you referring to the data action popup? Most data actions (such as export and add to table) are available only for data sources that support queries. Map service data sources do not support queries in ExB.

MohammedHilal_K

Hi@JeffreyThompson2 @QunSun @YueyangLi @Wei_Ying

When I add a map service in the above context, the popup does not appear. However, the popup works for feature layers and groups. Any help on this?
Note: If the same map service is configured in Map widget while initial load, that time pop up works.

Jeff.Thompson@arlingtontx.gov_arlingtontx

https://community.esri.com/t5/experience-builder-custom-widgets/add-remove-layers-2-0/ta-p/1540096

I dealt with this problem by building a re-ordering function inside a setTimeout() function.

MohammedHilal_K

@JeffreyThompson2 @QunSun

In my custom widget, I'm trying to add multiple layers to the map using the jimuMapView.addOrRemoveDataOnMap(mapData) method. I'm looping through an array and passing mapData to addOrRemoveDataOnMap(). However, the layers are not maintaining the order that I provide.

For example, if the order in my array is [layer1, layer2, layer3], the layers are added to the map in an inconsistent order, like [layer2, layer1, layer3]. Additionally, addOrRemoveDataOnMap does not return a promise, which means I can't use await to control the sequence.

Any suggestions on how to address this issue?

Note: I've also tried passing the complete array to addOrRemoveDataOnMap(mapDatas), but I'm still facing the same issue.

Jeff.Thompson@arlingtontx.gov_arlingtontx

https://community.esri.com/t5/arcgis-experience-builder-questions/loss-of-runtime-created-datasource-functionality/m-p/1541505#M15032

This is a documented bug in Experience Builder 1.15. It is not a problem in 1.14.

QunSun

Hi @MohammedHilal_K ,

Are there any errors in the browser console? Which data actions are missing? Is it only zoom to and pan to that are missing, or are they all missing? It would be great if you could upload a screenshot of the data actions.

MohammedHilal_K

hi @YueyangLi
I followed your suggestion and it is working fine. I could able to get the data actions like zoom to , pan to etc. But the thing is I need to reorder the layer, the polygon has to go bottom and point on top and line on bottom. When I reorder he layer using view.map.reorder(), am losing the data actions. any help on that?

YueyangLi

@JeffreyThompson2, sorry for the late reply.

The DataSourcesChange is a message action, that must be configured in the widget settings (builder).

If you want an action to add the new layer data source to the map widget in runtime, you can use the DataActionList component like AddData widget. The select widget can use the new layer data source after doing that. The component will calculate the supported data actions based on the added widgets and show a dropdown list.

I'm glad you have found a workaround. But if you want to use the DataActionList and have other issues, you can reply there.

Jeff.Thompson@arlingtontx.gov_arlingtontx

The DataSourcesChange message did not work, but I got something functional with the JimuMapView.addRemoveDataOnMap() method.

setTimeout(() => {
				console.log(mapLayer.sourceJSON)
				const data: DataSourceJson = {
					id: 'custom_' + layerGroup.layers[i].id,
					layerId: `${mapLayer.sourceJSON["id"]}`,
					itemId: layerGroup.layers[i].id,
					url: layerGroup.layers[i].url,
					type: 'FEATURE_LAYER',
					geometryType: mapLayer.sourceJSON["geometryType"],
					label: mapLayer.title,
					portalUrl: 'url'
				}
				const dataJson = Immutable(data)
				const dataSourceOptions = {
					id: layerGroup.layers[i].id,
					layer: mapLayer,
					dataSourceJson: dataJson
				}
				
				console.log(dataSourceOptions)
				const dataSource = DataSourceManager.getInstance().createDataSource(dataSourceOptions)
				dataSource.then((source) => {
					
						console.log(source)
						const sourceId = source.id
						const addMapData: AddToMapData = {
							mapWidgetId: 'widget_9',
							messageWidgetId: 'widget_33',
							jimuMapViewId: jimuMapView.id,
							dataSourceId: sourceId,
							type: ActionType.MessageAction,
							title: 'Add Data',
							dataChangeType: DataChangeType.Create,
							dataChangeStatus: DataChangeStatus.Fulfilled
						}
						console.log(addMapData)
						mapDatas[sourceId] = addMapData
						
					
					setTimeout(() => {
						jimuMapView.addOrRemoveDataOnMap(mapDatas)
					}, 50)
				})

}, 3000)

Jeff.Thompson@arlingtontx.gov_arlingtontx

Thanks to your suggestions I have a block of code that completes without error and the DataSourceManager indicates that the layers have been accepted as valid datasources. However, the Select Widget still does not acknowledge them and the full list of data actions is not visible.

mapLayer = new FeatureLayer({
				url: layerGroup.layers[i].url,
				id: layerGroup.layers[i].id
})




setTimeout(() => {
				console.log(mapLayer.sourceJSON)
				const data: DataSourceJson = {
					id: 'custom_' + layerGroup.layers[i].id,
					itemId: layerGroup.layers[i].id,
					url: layerGroup.layers[i].url,
					type: 'FEATURE_LAYER',
					geometryType: mapLayer.sourceJSON["geometryType"],
					label: mapLayer.title
				}
				const dataJson = Immutable(data)
				const dataSourceOptions = {
					id: layerGroup.layers[i].id,
					layer: mapLayer,
					dataSourceJson: dataJson
				}
				
				console.log(dataSourceOptions)
				const dataSource = DataSourceManager.getInstance().createDataSource(dataSourceOptions)
				dataSource.then((source) => {
					//map layers widget
					const messageLayer = new DataSourcesChangeMessage('widget_30', DataSourcesChangeType.Create, [source])
					MessageManager.getInstance().publishMessage(messageLayer)
					//select widget
					const message = new DataSourcesChangeMessage('widget_63', DataSourcesChangeType.Create, [source])
					MessageManager.getInstance().publishMessage(message)
				})
				console.log(DataSourceManager.getInstance())
}, 3000)

Console log of DataSourceManager.GetInstance()

The only actions I am getting are the same ones I saw adding the layers to the map using the JS SDK methods.

I have added the publishMessgaes statement to my manifest.json.

{
  "name": "add-remove-layers",
  "type": "widget",
  "version": "1.11.0",
  "dependency":  ["jimu-arcgis"],
  "exbVersion": "1.11.0",
  "author": "Jeffrey Thompson",
  "description": "Loads or removes sets of data by groups or individual layers",
  "copyright": "City of Arlington",
  "license": "",
  "properties": {},
  "translatedLocales": [
    "en"
  ],
  "defaultSize": {
    "width": 800,
    "height": 500
  },
  "publishMessages":  ["DATA_SOURCES_CHANGE"]
}

What am I missing? @YueyangLi @Wei_Ying @TonghuiMing

YueyangLi

Please see the createDataSourcesByDataOptions method in the add-data/src/runtime/utils.ts.

2. Create data sources by DataSourceManager.getInstance().createDataSource(options).

Jeff.Thompson@arlingtontx.gov_arlingtontx

I've thought about and researched this question the best that I can over the past month and I keep coming back to the same issue. I need to take the REST endpoint of a FeatureLayer and have it be recognized by Experience Builder as a valid datasource. I know Experience Builder is capable of this, but I don't know how to do it.

I've looked at the sever/client side data source widget samples, but they presuppose an already existing datasource to create from. https://github.com/Esri/arcgis-experience-builder-sdk-resources/tree/master/widgets/server-side-output

My widget would also need to output an arbitrary number of datasources which presumably the Add Data Widget is capable of, but is not shown in any code samples.

Wei_Ying

@TonghuiMing any comment on this question?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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