Provide and consume data source in widget

Apps created by Web AppBuilder is a map centric app, all widgets have a map reference and can read data from map. From version 2.5, we introduce a new concept: data source, which is a new kind of data that widget can use. There are two ways to generate data source: configure in extra data source and generate from widget. The generated data sources are stored in app config and all of the widget can use them. To find how to config extra data source, you can read the Attribute topic in our help pages.

In this section, we’ll focus on how to provide/consume data source in widget. Data source is a new communication way between widgets. There are two sample widgets to demonstrate how to do this in widget: samplewidgets/DataSourceProvider and samplewidgets/DataSourceConsumer

To provide data source in a widget, you should override getDataSources() function in your widget Setting.js. The function should return the data sources that your widget will provide, but you can return a promise that resolves the data sources as well. The data source is an object that has the follow properties:



The data source id. This id does not contain “widgets~<widget id>~”




The label of data source


The dataSchema of data source, see Datasource configuration.

When a user adds a widget that can provide data source, the other widget that can consume data source can use the data source provided by the widget. Please note that this is just a data source definition, there is no actual data. To provide the actual data, the data provider widget needs to call this.updateDataSourceData() to update data in widget runtime. Function updateDataSourceData has 2 parameters: the data source id and the data, the data is an object that has features property.

To consume the data, the widget needs to config how to consume the data in widget setting page and then overrides the onDataSourceDataUpdate function to listen to the data source change. To read the data that updated before the widget loaded, you can use DataSourceManager.getInstance().getData(dataSourceId) to get the data. There a data source selection dijit can help you to config data source in widget setting page: jimu.js/dijit/DataSource.