Loading a dashboard in the same filter state as a user left it

All the Luzmo dashboards are interactive. A user can filter not only via the filter items on the dashboard but also using the charts. If you would like to re-apply the filters that your user applied the next time the dashboard is loaded by them, you can do this in the following way:

Retrieve the active filters using the getFilters method or changedFilters event
Save these on your end, e.g. in a database
Translate the filters to initialization filters to be added to the embed token
Load the dashboard using the embed token with initialization filters

1. Retrieve the active filters using the getFilters method or changedFilters event

You can make use of getFilters to get the active filters in a dashboard.

Alternatively, you can make use of the changedFilters event to listen to filter changes in an embedded dashboard.

This could also be useful when you have for example elements in your application that should be filtered to how the dashboard is being filtered (e.g. when your user selects something in a chart and the rest of the dashboard filters accordingly).

2. Save these on your end

Save the output of the getFilters or changedFilters on your end (either in a database or you can save the output locally) together with the unique username of the user. The next time the user wants to load the dashboard you can retrieve these and add them to the embed token to load the dashboard as explained in the next sections.

3. Add the filters as initialization filters to the embed token

There are four types of filters in the response of getFilters or changedFilters, these can be identified by the 'origin' property:

origin: filterFromVizItem: this is a runtime filter on a non-filter object, i.e. a chart
origin: filterFromFilterItem: this is a runtime filter on a filter object
origin: itemFilter: this is a filter which was set on an object (filter or non-filter) when designing the dashboard, also called chart filter
origin: global: this is a dashboard filter. Watch here to discover the dashboard filter overview.

filterFromVizItem

The following image shows an example of a filterFromVizItem: To load the same dashboard the next time the user wants to see the dashboard in the same state, i.e. filtered to "Female" by having it selected in the Bar chart, you can translate the output from thet getFilters method / changedFilters event (as displayed in above image) to the following initialization filter:

{
		"clause": "where",
		"origin": "initialization",
		"chart_id": "044d068e-9795-455f-9754-f05fdfa3c901", // properties - itemId
		"expression": "? in ?", // expression
		"column_id": "6b4da502-ab37-446f-a036-abdd07ef05df", // parameters - columnId
		"securable_id": "d1e7f9f8-d50c-459f-932e-b796e1fd3778", // parameters - datasetId
		"value": [
			"Female"
		] // second element in parameters
}

filterFromFilterItem

The following image shows an example of a filterFromFilterItem: To load the same dashboard the next time the user wants to see the dashboard in the same state, i.e. filtered to "Low" by having it selected in the Search and Select filter, you can translate the output from thet getFilters method / changedFilters event (as displayed in above image) to the following initialization filter:

{
		"clause": "where",
		"origin": "initialization",
		"chart_id": "10e88535-8384-4dc0-962c-a3811d6b8b01", // properties - itemId
		"expression": "? in ?", // expression
		"value": [
			"Low"
		] // second element in parameters
}

As you may notice, for an initialization filter on a filter object, it is not needed to specify the securable_id or column_id in the filters parameter. This is because a filter object can have multiple columns, coming from different datasets.

The dynamic initialization filter options for 'Date pickers' are shown in this Academy article, for 'Search&Select' & 'Slicer' filters in this Academy article and the 'Slider' initialization filter possibilities are shown here!

itemFilter

The following image shows an example of a filterFromFilterItem:

As this filter is set on the dashboard when desiging it (as seen on the left side of the image), we don't need to add it as an initialization filter as it is already saved in the dashboard definition.

global

The following image shows an example of a filterFromVizItem:

There are two types of global filters:

Static filters, the Age > 10 in above example
Parameterizable filters, the Segment eq segment (fx) in above example

As these filters are set on the dashboard when desiging it (as seen on the left side of the image), we don't need to add it as an initialization filter as it is already saved in the dashboard definition.

For the parameterizable filter you could opt to provide the parameter value from the response of getFilters or changedFilters, or you could get the value from our autherization layer.
In case you did like to use the value from the response of getFilters or changedFilters, you would do so by providing the following parameter_overrides in your request for the embed token:

parameter_overrides: {
    segment : "High"  // parameter name extracted from parameters - parameter - name "metadata.segment" & value extracted from parameters - value
}

For security reasons, we advise you to fill in your parameter values for multitenancy filtering from your authorization layer at all times.

4. Load the dashboard using the embed token with initialization filters

Above initialization filters should be added to the request for the embed token, check out the filters in the following example. You can also find more info about how to add initialization filters to an embed token in this article

Code example (node.js)

const Luzmo = require('@luzmo/nodejs-sdk');
var client = new Luzmo({
    api_key: '< Your API key >',
    api_token: '< Your API token >'
  });

let promise = client.create('authorization', {
  type: 'embed',
  username: '12345678',
  suborganization: 'Burrito Co.',
  name: 'Embed user',
  email: 'embed_user@example.com',
  access: {
			collections: [
			{
			id: '<collection ID>',
			inheritRights: 'use'
							 }
					]
			}, 
  role: 'viewer',
  filters: [
    {
      clause: 'where',
      origin: 'initialization',
      chart_id: '< item id of a filter object contained in the dashboard >',
      expression: '? = ?',
      value: '< value to be applied to the expression >'
    },
    {
      clause: 'where',
      origin: 'initialization',
      chart_id: '< chart id of a chart object contained in the dashboard >',
      expression: '? = ?',
      column_id: '< id of the column to apply the filter to (usually the category) >',
      securable_id: '< id of the dataset that the column belongs to >',
      value: [
        '< value to be applied to the expression >'
      ]
    },
  ],
  parameter_overrides: {
    "< parameter name >": ["< value to apply >"]
  }
});

promise.then(function(result){
  // return result.id and result.token to the client
})

As a result, you will receive a temporary embed authorization token from Luzmo. This is a JSON object with an id/token combination:

{ 
  "type": "embed",
  "id": "< the authorization key >",
  "token": "< the authorization token >",
  "user_id": "< the embed user id >," // This will stay the same for consecutive embed authorization requests, 
                                    // and it is used on our end to manage user-specific content such as alerts
  ...
}

The second step is to use this embed token to embed the dashboard in your frontend, which is explained in our next article.

A fully functional single file HTML example can also be found in our GitHub repository.

Need more information?

Do you still have questions? Let us know how we can help.

Send us feedback!