Learning how to use Data Sources in Experience Builder

912
2
10-10-2022 08:07 AM
rhughes522
New Contributor III

When using Experience Builder Dev  Edition I am able to create a basic widget and use components from jimu, access the map and a single layer as a Data Source.  What I am really struggling with is how to configure Data Sources in the widget, especially multiple feature layers.  I've been unable to find advanced documentation and am looking through sample widget code and watching seminars.  

Is there a guide to help learn how to create advanced widgets? 

What is the pathway to learn how to use multiple data sources in a widget?

Is there any guide on how to actually populate UI components with data?  The UI components don't describe how they should be populated.  I am seeing that I need to use the state in the widget, but these are just piecemeal things I am gathering from all the online resources.  A single guide would be very useful. 

Most of the descriptions I find online are circular references (ie. the Repeated Data Source section does not actually say what makes a Data Source Repeatable, what does that actually mean?)   How does the List Widget show a Repeated Data Source?  I am very confused by this.  Why would I use it?

Repeated Data source

The data source provided by RepeatedDataSourceProvider is called a repeated data source. All children widgets of the widget that provide a data source will receive the repeated data source. This is similar to React's Context. A widget can access repeated data source by this.props.repeatedDataSource. The repeated data source will get the data source's id, record, and recordIndex. Any widget can provide repeated data source by using RepeatedDataSourceProvider. The List widget in Experience Builder is a good example that provides a repeated data source. To use a repeated data source, add the supportRepeat property in a widget's manifest file.

2 Replies
rhughes522
New Contributor III

I am starting to understand a little more about how to use Data Sources.  I've been working through the posts on having one list filter the next list.  I can see how a Repeatable Data Source is used to render each item in the list, but I don't understand how to use it in Code.  What I am really attempting to do is build a widget with cascading dropdowns to choose a Project from a unique dropdown list, and then choose a Site from a unique list filtered by the selected Project.  My thought is that I need to use a filtered Data View then post data edits to the original DataSource, but I really have no clue how it's supposed to be built.

Are there any advanced tutorials available for developing widgets with Filtered Data Views?  

I've built apps using the jsapi 4.x before, but Experience Builder has me thinking that I am missing some critical pieces of understanding.  I have all of the sample widgets to inspect for best practices.... 

I am going back and forth between trying to use the Settings and establishing Data Sources, vs just accessing the layers from the MapView and populating Select Dropdowns.  I really need to talk to people about how it works.  Does Esri support offer Experience Builder support?

0 Kudos
rhughes522
New Contributor III

The Experience Builder Dev Edition is a great piece of software and I really enjoy how Data Sources can be configured with Multiple Data Views at the top level of the app and shared between widgets.  I think I just need to spend more time looking through sample code and the api docs to really learn how to utilize it all in my own widget.  Good Times ahead! 

0 Kudos