[App] ERPNext Full-Size View for all (e.g. Reports, Gant Charts, etc)

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!

21 Likes

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

1 Like

Thanks for the hint, i’ll check this

Update: it works fine :wink:

This is working great! I have embedded dashboards from Metabase and this gives me a lot more space to work with.

1 Like

Thank you, I am glad you like it :slight_smile:

@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.

@Malcolm_Wilson Could you share of how embedded dashboards from Metabase?

1 Like

@System19
Thanks :slight_smile:

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

https://discuss.frappe.io/uploads/default/original/3X/6/f/6f679f334518a59855038dbeba9f5a263c541cc8.jpg

11 Likes

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 :slight_smile: . 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.

1 Like

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?

1 Like

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:

1 Like

When you’re in Metabase, go to the share option for the dashboard and copy the public embed code.

2 Likes

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

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

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