Hi,
As per the best practices of creating a dashboard it is recommended that a dashboard should have panels which are visible on 1 screen or maximum 2 screens and it is not recommended to have too many panels. So if you have requirement of having 45+ panels into 1 dashboard then you should break in into multiple parts for example 3-4 parts and load only portion which is visible on screen. The same approach is followed by any other webapp/website like Linkedin, facebooketc wherein they only load the part which is being currently viewed and when a person scrolls down then the other part is loaded.
- So, divide the dashboard into 3 or n number of small dashboards based on the size of the dashboard and load them when the dashboard is appeared on the screen. This way we can decrease the time of rendering and make user experience better.
Below is the sample code of how you can achieve this. We have provided a HTML code sample which contains CSS, JS and HTML.
NOTE : This is just reference. Using this we have tried to explain like how we have divided 1 dashboard into multiple dashboards and on scroll when that part of the dashboard becomes visible then only we are rendering one dashboard after another.
Hence instead of trying to load all the 40+ panels in a single shot which is causing issue, we only load what a person is viewing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Frames</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous"></script>
<style>
body {
height: 100vh;
}
.dynamic-frame {
display: none;
}
</style>
</head>
<body>
<script>
$(function () {
letallIframes = [‘<dashboardLink1>’ ,’ <dashboardLink2>’,...] //Add the urls of the dashboards that are opened in new tab.
functioncreateDynamicFrames() {
for (let i = 1; i <= allIframes.length; i++) {
letframeId = 'frame' + i;
letframeDiv = $('<div>', { id: frameId, class: 'dynamic-frame' });
letiframe = $('<iframe>', { width: '100%', height: 800 });
frameDiv.append(iframe);
$('body').append(frameDiv);
}
}
createDynamicFrames();
letnumberOfFramesLoaded = 0;
functionloadFrame() {
$(`#frame${numberOfFramesLoaded + 1} iframe`).attr('src', allIframes[numberOfFramesLoaded]);
$(`#frame${numberOfFramesLoaded + 1}`).fadeIn();
numberOfFramesLoaded++;
}
function handleScroll() {
letscrollPosition = $(window).scrollTop();
letloadAfterScroll = $('#frame1').outerHeight();
if (scrollPosition + $(window).height() >= loadAfterScroll * numberOfFramesLoaded) {
loadFrame();
}
}
$(window).on('scroll', handleScroll);
handleScroll();
});
</script>
</body>
</html>
Thank you,
Helical Insight.
