Drilldowns from Custom Widgets

Steps to enable drilldowns from custom widgets:

- Set up a drilldown from parent widget to the child widget using the drilldown menu option.

- Call drilldownProxy.trigger(...) within the custom widget code to trigger the drilldown flow based on your condition:

drilldownProxy.trigger('drilldown', {}, 26124);

where 26124 is the widget id of the parent widget (can be obtained via inspect element or via code), {} is the object you want to pass in for drilldowns (for keys into the next drilldown).

https://www.loom.com/share/6e5aaa5a2f74475181b06ba1e0d14393

Example custom widget code:

<div id="trigger">Trigger Drilldown!</div>
<script>
var trigger = document.getElementById('trigger');
trigger.addEventListener('click', function(ev){
drilldownProxy.trigger('drilldown', {}, 26124);
});
</script>

Example 2:

layer.on('click', function (e) {
  L.DomEvent.stopPropagation(e);
  var widgetId = $(e.originalEvent.currentTarget).parents(".widget").attr('data-id'); //Getting Widget Id
  var data = {"State": e.target.feature.properties.name}; // Create Value of State to pass into the drilldown flow.
  drilldownProxy.trigger('drilldown', data, widgetId, data);
});

Jay August 23, 2021 16:19

Custom widget drilldowns with multiple different widgets to drill into:

If you need to go from Widget A —> B in one case, but Widget A —> C in another case within the same widget:

- Create the appropriate links/clickable elements in your custom HTML.

- In your Drilldowns setting, setup multiple drillldowns. Set the “When Clicked” to a field in the associated dataset.

- Create the drilldownProxy; the second parameter with a json that contains the attribute pointing to the element set in the drilldown.

Example screenshot recording: http://recordit.co/YsJEf5qh6F