Locked value for filter in Metabase embedding

Hi,

I would like to embed metabase in our backoffice platform, but we can't provide the same filtered value for every view. For different users, we would like to lock a value for every table. It would be nice to have the locked value differently for the same question. Is it possible?

Best regards,
BP

Hi @brunolnetto
Yes, that's possible: https://www.metabase.com/docs/latest/administration-guide/13-embedding.html

I am a junior in web development. Hence, I do not know how to embed the *.js and *.html in an app or webpage. Can you give me some tips on how to deal with it?

@brunolnetto Have a look at the reference examples: https://www.metabase.com/docs/latest/administration-guide/13-embedding.html#reference-applications
If that is still too much coding for you, then you'll need to ask help from a more senior developer.

Although I am certain it will work, my comrades are skeptical about my certainty. The steps below ilustrate the rationale. You can assure the provided solution:

To embbed a dashboard on a web application, it is necessary to:

  1. Paste the iframe on respective div, span or paragraph I am dealing with;
  2. Paste the logical snippet on the respective *.js;

@brunolnetto There's no js file. It's just an iframe. But somewhere in your code, you'll need to generate the token for each user.
But your questions makes me think that this will be a very big task for you. I cannot help you with your implementation, but I can say that there's thousands of companies that is using Metabase like that.

I didn't questioned its usability, I am aware Metabase is very popular. I find the solution a delight.

The mentioned *.js snippet is ilustrated below, take a look. In case there is a locked parameter, the GUI allows me to provide the locked parameter on params key. My question regards How does it go on code, which I am not familiar with.

@brunolnetto That's NodeJS - it's an example. Click the select-boxes in the upper right to change to different languages.

Since I have absolutely no idea what your application is coded in, then it's hard to tell what you should do, but JWT is a standard, so search the internet for jwt <your-code-language> example and I'm sure you'll find something.
Then you simply insert an iframe with the URL generated with a JWT.

Is there a MVP for the code provided on the section "Embbed the dashboard in an application"? I found the URL https://link.medium.com/qIhRGsOxYkb , but I can't see the code provided by Metabase anywhere.

@brunolnetto I don't understand.
Have you looked at the reference applications that I already linked to?
https://github.com/metabase/embedding-reference-apps

Your linked article is for the Enterprise Edition, which allows FullApp embedding:
https://www.metabase.com/docs/latest/enterprise-guide/full-app-embedding.html

Let's start over.

  1. Which code is your application created in?
  2. What exactly are you trying to do?

Since I am not familiar to web dev but have to guide my comrades on embbeding, I require some help. I generated the following html and js files. Finally, I removed METABASE_SITE_URL and METABASE_SECRET_KEY for safety. The error I face is below and I didn't find some help on internet to solve it.

Uncaught Error: Module name "jsonwebtoken" has not been loaded yet for context: _. Use require([])

<!DOCTYPE html>
<html lang="en">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <head>
        <title> Metabase analysis </title>
        <script src="scripts/require.js"> </script>
        <link rel="stylesheet" href="main.css">
    </head>
    <iframe
        id="show_backoffice_reports"
        src="{{iframeUrl}}"
        frameborder="0"
        width="800"
        height="600"
        allowtransparency
    ></iframe>
    <body>
        <div> Oi! </div>
        <script src="app.js"> </script>
        <noscript>You need to enable JavaScript to view the full site.</noscript>
    </body>
</html>

'use strict'

var jwt = require("jsonwebtoken");

var METABASE_SITE_URL;
var METABASE_SECRET_KEY;

var payload = {
    resource: { dashboard: 1 },
    params: {},
    exp: Math.round(Date.now() / 1000) + (10 * 60) // 10 minute expiration
};

var token = jwt.sign(payload, METABASE_SECRET_KEY);

var iframe_mesa = document.getElementById("show_backoffice_reports");
iframe_mesa.src = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";

@brunolnetto I don't think I can help you if you're not familiar with web development. It will take some knowledge to use signed embedding. There are plenty of resources on the internet if you are trying to learn web development, but that's outside the scope of this forum or Metabase in general.

Bob Dylan would say "How many forums must a man read to solve its issue?!"

I followed your suggestion: the required step was to setup a package.json and install node_modules with required jsonwebtoken. BUT when I open the html file, there is no dashboard available, although there is no log error on console. I beg you to consult some developer of yours, please.