Blox formatting for PDF download

[Priscillareagan]

Hi there,

I am developing a dashboard with multiple Blox (6) in a page that requires it to look like it is one table. The reason behind this is the nature if required layout and the way data is modelled.

I was able to achieve something close to this by adjusting the margins, padding and spacing in the CSS script. But when I download it as pdf something weird is going on causing spaces after every blox. The first 2 blox are fine but the rest have these gaps in between them. Attaching the dashboard script and CSS script. 

Any. help here is much appreciated.

Thanks in advance.

[DRay]

Hello @Priscillareagan,

While we look into this, can you tell us what version of Sisense you are using?

Thank you.

[Priscillareagan]

We are currently on Version: L2023.11.0.298. Thanks Dray. 

[DRay]

Hello @Priscillareagan,

Thank you. Do you have an open support ticket for this? If so I will reach out to support and see if I can get you an update.

[Priscillareagan]

Hello again,

Yes, we have a support ticket open for this. Here is the link: https://community.sisense.com/t5/support-portal/bd-p/SupportPortal?page=casedetails&caseId=500Pk0000...

Thanks,

Priscilla.

[rapidbisupport]

Hi @Priscillareagan ,

I'd love to learn more about the hard requirement, as it feels like you're solving an issue caused by another issue here.

In any case I have a few notes:

• using widgetready event on the dashboard will fire for widget in widgets - so it looks like you're repeating your jQuery a few times (you're running it every time an individual widget becomes ready).
• I'm not sure on the timing aspect, but the widget may not be 'dom ready' by the time you use jQuery to change the style of elements - this will mean that it won't trigger.
• For jQuery to be able to change elements they need to already be rendered by the time you attempt to run it.
• The headless browser that prints PDF doesn't seem to always work the way we expect and is sometimes funny with dashboard scripts.

I have a dashboard script solution for you to try here:

prism.on('dashboardloaded', () => {
    const elem = document.createElement('style')
    elem.innerText = `
    .z-s-t {
        height: 0px !important;
        width: 0px !important;
    }
    .w-t {
        height: 0px !important;
        width: 0px !important;
    }
    .ui-resizable-handle.ui-resizable-e {
        height: 0px !important;
        width: 0px !important;
    }
    .ui-resizable-handle.ui-resizable-s {
        height: 0px !important;
        width: 0px !important;
    }
    .widget-body.slf-widget-text-primary {
        padding: 0px !important;
    }
    `
    document.head.appendChild(elem)
})

 The idea here is that by injecting a style to the header when the dashboard is first loaded - we apply the styles once (not per widget) and proactively (before the elements are created).

We use prism.on('dashboardloaded', ...) as this seems to play more nicely with the PDF than dashboard.on('initialized', ...) - but I have no actual idea why.

Please note that this will affect all widgets on the dashboard, so if your aggregate BloX table isn't the only 'widget' on the dashboard, this may cause the other widgets to appear weird. We can adjust CSS to select only the components you're interested in but would require changes.

Let me know how you go?

Thanks,

Daniel

RAPID BI

[email protected]

RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

[DRay]

Hi @Priscillareagan,

Did the solution offered by support or @rapidbisupport help you? 

If so, please click the 'Accept as Solution' button so that other users with the same questions can find the answer faster. If not, please let us know so that we can continue to help.

Thank you.

[Priscillareagan · Accepted solution]

Hi,

Thank you @rapidbisupport and @DRay for following up on this. Unfortunately, the above did not fix the issue. However, I was able to reach the desired outcome by with CSS formatting and adjusting widget sizes with PDF edit mode.

Thanks again,

Priscilla.

[DRay]

Thank you for following up. I'm glad you got it working!