Embedded SDK : add native filters to URL

[Phonom]

Hi,
I needed to pre-filter my embedded dashboard with native filters to display the desired data directly without restricting the data with RLS (the user can always change it afterwards). We can pass native filters to the URL, and I only add the "native_filters" key to DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY to make it work.

diff --git a/node_modules/@superset-ui/embedded-sdk/dist/index.d.ts b/node_modules/@superset-ui/embedded-sdk/dist/index.d.ts
index b8bf5ad..8668403 100644
--- a/node_modules/@superset-ui/embedded-sdk/dist/index.d.ts
+++ b/node_modules/@superset-ui/embedded-sdk/dist/index.d.ts
@@ -9,9 +9,10 @@ export declare type UiConfigType = {
     hideTab?: boolean;
     hideChartControls?: boolean;
     filters?: {
-        [key: string]: boolean | undefined;
+        [key: string]: boolean | string | undefined;
         visible?: boolean;
         expanded?: boolean;
+        native?: string;
     };
 };
 export declare type EmbedDashboardParams = {
diff --git a/node_modules/@superset-ui/embedded-sdk/lib/const.js b/node_modules/@superset-ui/embedded-sdk/lib/const.js
index c35b125..c8e93bd 100644
--- a/node_modules/@superset-ui/embedded-sdk/lib/const.js
+++ b/node_modules/@superset-ui/embedded-sdk/lib/const.js
@@ -27,6 +27,7 @@ const IFRAME_COMMS_MESSAGE_TYPE = "__embedded_comms__";
 exports.IFRAME_COMMS_MESSAGE_TYPE = IFRAME_COMMS_MESSAGE_TYPE;
 const DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY = {
   visible: "show_filters",
-  expanded: "expand_filters"
+  expanded: "expand_filters",
+  native: "native_filters"
 };
 exports.DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY = DASHBOARD_UI_FILTER_CONFIG_URL_PARAM_KEY;

And then it can be use with something like this (for exemple):

embedDashboard({
      id: "abc123",  // given by the Superset embedding UI
      supersetDomain: "https://superset.example.com",
      mountPoint: document.getElementById("my-superset-container"), // html element in which iframe render
      fetchGuestToken: () => fetchGuestTokenFromBackend(),
      dashboardUiConfig: { filters : {native: `(NATIVE_FILTER-<id>:(__cache:(label:'<value>',validateMessage:!f,validateStatus:!f,value:!('<value>')),extraFormData:(filters:!((col:station_code,op:IN,val:!('<value>')))),filterState:(label:'<value>',validateMessage:!f,validateStatus:!f,value:!('<value>')),id:NATIVE_FILTER-<id>,ownState:()))` }}
    });

And it will generate the embedded URL with the chosen native filter. It may be useful for someone else ?

[vioao]

This is so useful. I've been looking at it.

[jeremiah-keyvalue]

is this merged ?

[darrylhebbes]

Good luck finding the NATIVE_FILTER-<id> id

[jeremiahmanuel]

You can find it in the json metdata ....... for those might need this

[darrylhebbes]

I got it working, thanks

[ayeshaamreen-25]

It's not working for me, I'm getting the generic dashboards only and in the url the filter is given as undefined= (NATIVE_FILTER-<id>:(__cache:(label:'<value>',validateMessage:!f,validateStatus:!f,value:!('<value>')),extraFormData:(filters:!((col:station_code,op:IN,val:!('<value>')))),filterState:(label:'<value>',validateMessage:!f,validateStatus:!f,value:!('<value>')),id:NATIVE_FILTER-<id>,ownState:()))

Does anyone know what might be going wrong?