Hi all,
We talked in another topic about it being a cool feature if we could dynamically change the view to full-size and back again. see:
I have developed a simple way to dynamically change the width without having to change the ERPNext codebase. I have packed this feature into an ERPNext app and released it on GitHub. see:
App preview:
Normal size view:
Full size view:
Cheers!
This looks great! Looking forward to testing it out
Don’t forget that Gantt chart view has been completely reworked in develop so you may want to check how your app works there too.
Great work by the way
Thanks for the hint, i’ll check this
Update: it works fine 
This is working great! I have embedded dashboards from Metabase and this gives me a lot more space to work with.
Thank you, I am glad you like it 
@joelios this is brilliant. I look forward to testing it out next week.
There have been a few discussions on Github about the need for a full width view in ERPNext as most desktop monitors are now at least 1920 x 1200. Calendar views would greatly benefit from 100% width as well. It would be better practice to include an additional @media (min-width: 1200px) within the base CSS but your solution is great.
@System19
Thanks
You’re absolutly right
But i’ve tried to set up a soloution without any local changes on the frappe/erpnext codebase…
Cheers
Here’s a screenshot of what I have so far:
To do this, I followed this guide: How I created this Sales KPI Dashboard
The only thing I did different is that I’m hosting it on Google Cloud and am using port 3000 instead of 80. I then copied the dashboard HTML, put it into an ERPNext webpage and created an icon for the page by modifying desktop.py in config. I called the icon “Sales Dashboard”. I used this for reference: Add desktop icon to link my custom html page
I understand your reasons for wanting to separate it from the codebase. Actually managing to acheive this makes your solution very clever. Unfortunately ERPNext is just a part time hobby for me outside of work hours. I would like to find more time to actually add a global @media (min-width: 1200px) CSS setting to the codebase (and maybe increase the font size a little when greater than 1200px).
@Malcolm_Wilson Very cool . Great to see third party integration like this being implemented by more and more developers. Thanks for sharing the screenshot and info on how to achieve this.
Hello,
After pasting the code all I am getting is just the same web blank page.
I am running this on my Local Instances before moving it to our Live Instance
Metabase: 127.0.0.1:3000
ERPNext: 127.0.0.1:89
Any help please
Can you attach a screenshot of the code you entered into the webpage?
Dear @Malcolm_Wilson,
Where did you get the script you uploaded as i extracted my script from “View Page Source” or am i copying the wrong HTML?
i then used the same script you posted and i noticed that the Frame actually worked but the page is empty and not showing my dashboard also see screenshot:
When you’re in Metabase, go to the share option for the dashboard and copy the public embed code.
Thank You for your response
. I saw this and done that but i needed to do this first;
Insert this code snippet in your server code to generate the signed embedding URL
Python
import jwt
METABASE_SITE_URL = “http://34.235.103.42:3000”
METABASE_SECRET_KEY = “da64be44a1bf50168e32ccca1582b787e75ebca28ff5cd5aa700abd5d9ae2490”
payload = {
“resource”: {“dashboard”: 1},
“params”: {
}
}
token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm=“HS256”)
iframeUrl = METABASE_SITE_URL + “/embed/dashboard/” + token + “#bordered=true&titled=true”
Before this;
But my issue is that how do i locate my SERVER CODE to know where to paste … When it comes to things like Server i am always careful so as not to crash the whole Server. Any help on this Please
Thank You @Malcolm_Wilson for your response
. I saw this and done that but i needed to do this first;
Insert this code snippet in your server code to generate the signed embedding URL
Python
You’ll need to install PyJWT via pip ‘pip install PyJWT’ or your project packages file
import jwt
METABASE_SITE_URL = “http://34.235.103.42:3000”
METABASE_SECRET_KEY = “da64be44a1bf50168e32ccca1582b787e75ebca28ff5cd5aa700abd5d9ae2490”
payload = {
“resource”: {“dashboard”: 1},
“params”: {
}
}
token = jwt.encode(payload, METABASE_SECRET_KEY, algorithm=“HS256”)
iframeUrl = METABASE_SITE_URL + “/embed/dashboard/” + token + “#bordered=true&titled=true”
Before this;
But my issue is that how do i locate my SERVER CODE to know where to paste … When it comes to things like Server i am always careful so as not to crash the whole Server. Any help on this Please
Hello
How do I install this wonderful addon?
Thanks
