Experience page dashboard dynamic theme

Help
,
1

Hello,

For the Experience page dashboard, I can only see a toggle button for light and dark theme. Is there an option to be able to set this when making a request to the experience endpoint?
Hoping there is something similar to the way embedding dashboards work.

3

Using the UI to create a dashboard page, no, you can only select “light” or “dark” directly.

However, when creating a dashboard page, what is really happening behind the scenes is a regular experience page being created with a body that uses the element helper to insert a dashboard.

So, as a workaround, you can do the following:

  1. In the UI, create a custom experience page.
  2. For the body of the page, use the {{element}} helper directly.
  3. Insert your variable for the theme as passed to the page through the pageData argument when rendering the page with an Endpoint Reply Node.

So, assuming the pageData argument includes the following (throwing a context variable in here for further demonstration) …

{
  "theme": "dark"
  "deviceId": "aaaabbbbccccddddeeeeffff"
}

… you could pass both to your experience page and render the dashboard with those variables as follows:

{{element
  'dashboard'
  dashboardId='11112222333344445555666'
  theme=pageData.theme
  ctx=(obj deviceId-0=pageData.deviceId)
}}

All that said, I’m going to file a feature request to allow for controlling the dashboard theme programmatically to the UI, but until we have that out, you can use the workaround described above.

4

Excellent, this is working for me. I also noticed body didn’t have a margin style to overwrite the user agent stylesheet. If anyone else comes across this just append the style before the element:

<style>
body {
  margin: 0px;
}
</style>

{{element
  'dashboard'
  dashboardId=request.params.id
  theme=request.query.theme
}}