ERPNext Foundation ERPNext Cloud User Manual Blog Discuss Frappé* Donate

[Tutorial] Creating an embedded Metabase Internal Page

customization
dashboard

#1

This is how to embed Metabase into an internal Frappe page:

  1. Set up Metabase.

  2. Go into Metabase Settings/Admin/Embedding in Other Applications and enable embedding.

  3. Make your dashboard.

  4. Enable sharing of the dashboard

  1. Click on Embed

image

  1. Choose your settings.

  1. Click the code button

image

  1. Copy the Python and Mustache embed code. Don’t forget to PUBLISH the embedded dashboard.

  1. Go into Frappe and make a new Page

  1. Go to your page folder in whatever module you made your new page.

image

  1. Make a .html file and a .py file with the same name as the .js file. In my example, it is called “test_page”

image

  1. Go into the test_page.js file and modify the code to look like this, where “test_page” is the name of your html file without the html extension:

frappe.pages[‘test-page’].on_page_load = function(wrapper) {
var page = frappe.ui.make_app_page({
parent: wrapper,
title: ‘A test page’,
single_column: true
});
$(frappe.render_template(‘test_page’)).appendTo(page.body);
}

  1. Install pyJWT

pip install PyJWT

  1. Paste your python code from Metabase into the .py file and add a print command as shown:
import jwt

METABASE_SITE_URL = "http://localhost:3000"
METABASE_SECRET_KEY = "XXXXXXXX"

payload = {
"resource": {"dashboard": 1},
"params": {
    
}
}
token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm="HS256")

iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token.decode("utf8") + "#theme=night&bordered=true&titled=true"
print(iframeUrl)
  1. Go to your terminal, run python test_page.py and copy the output URL

  2. Remove the print command from the test_page.py file.

  3. Copy the mustache code into the test_page.html file, replace src with your URL from step 15. Modify the length and width as desired.

<p><iframe
src="http://localhost:3000/embed/dashboard/hfgdo8gheorhgorgnlskg#bordered"
frameborder="0"
 width="100%"
 height=2300
allowtransparency
</iframe></p>
  1. Go to your site url (example: http://localhost:8081/desk#test-page)


#2

After embedding it on our site “Powered by metabase” footer will display on bottom of our page???


#3

Yes… to remove branding we should opt for premium embedding which is expensive($3000/Year).


#5

Any idea on how to keep the metabase.jar launched (ON) in production mode.

As everytime it goes down i have to manually execute the command

java -jar metabase.jar


#6

either you can use nohup java -jar metabase.jar & command
or
you can refer below for use metabase as a service