Embedded dashboard: waarom wordt het afgekapt of tonen scrollbars?

Samenvatting

ThoughtSpot voorkomt dubbele scrollbars in embedded Liveboards met fullHeight en laadt grafieken vanaf SDK 1.52.0 tijdens het scrollen.

ThoughtSpot en fullHeight: wat er gebeurt

ThoughtSpot geeft een embedded Liveboard standaard de hoogte mee die je aan de iframe toewijst. Daardoor blijft het dashboard binnen de iframe scrollen, terwijl de webpagina zelf ook scrollt. Het resultaat is een tweede scrollbar of een dashboard waarvan de onderkant buiten beeld valt.

Met `fullHeight: true` op `LiveboardEmbed` of `AppEmbed` groeit de iframe mee met de hoogte van het Liveboard. De hostpagina houdt daardoor één scrollbar over. Vanaf Visual Embed SDK 1.52.0 laden grafieken bovendien pas wanneer ze tijdens het scrollen in beeld komen. De werking is gecontroleerd met SDK 1.53.1 en ThoughtSpot Cloud 26.10.0.cl.

Waarom ThoughtSpot-embeds belangrijk zijn

De iframe-hoogte hangt niet alleen van ThoughtSpot af. Een bovenliggend element met een vaste hoogte en `overflow: auto` kan de iframe alsnog afknippen, ook nadat je `fullHeight` activeert. Ook een vaste instelling zoals `frameParams: { height: '600px' }` veroorzaakt een tweede scrollgebied op pagina’s die zelf al scrollen.

Lazy loading heeft daarnaast gevolgen voor de belasting van het warehouse. Zonder deze instelling laden alle visualisaties op een volledig Liveboard tegelijk, wat meerdere warehouse-query’s veroorzaakt. CSS-variabelen laten teams fonts en kleuren aanpassen aan hun eigen ontwerp.

Bij de beoordeling van embedded analytics verdienen drie vragen aandacht: past de iframe zich aan de inhoud aan, laden grafieken tijdens het scrollen en ondersteunt de tool de eigen fonts en kleuren zonder maatwerkcode?

Concrete takeaway voor ThoughtSpot-gebruikers

Activeer `fullHeight: true` en controleer daarna de CSS van elk bovenliggend element op vaste hoogtes en `overflow: auto`. Test vervolgens een Liveboard met meerdere visualisaties: zo zie je meteen of de iframe correct meegroeit en of lazy loading het aantal gelijktijdige warehouse-query’s beperkt.