Embedded Webpage Widget/Traceability Diagram Viewer Help

Hey both, I had a similar use case a while back to embed search results on the Dashboard and explored all the options on that same stackoverflow page so can share what we did in the end.

You effectively have 2 options: Use JQuery or create an IFrame and style it with CSS to show only the parts you care about. I wouldn’t recommend the JQuery route because most Collibra page loads include a loading/splash screen which is a nightmare to code around.

I’ve just uploaded the IFrame code for my specific use case here: https://github.com/alvinuseree/Embedding-Search-in-Collibra/blob/main/embedSearch.html

It’s a different use case but the methodology will be the same for you.

Key thing to note is that you’ll need to set the base target of your IFrame to parent so links open in the outer screen and also not to calculate the horizontal margins using pixel values as the Collibra UI uses flexbox with percentages so using pixels for your left and right margins would work for your machine only and not scale for different resolution screens.

What you can do with that code is save it and do a backup restore on your environment then save the file to the images folder which then allows you to reference the html file as part of url you’re embedding. This is effectively an IFrame in an IFrame.

For example
If my instance of Collibra is: https://collibraExample.com
My file is called: embedDiagram.html
Then my url will be: https://collibraExample.com/resources/images/embedDiagram.html

Now, this is very dependent on the Collibra front-end code. If the UI were to change slightly due to an upgrade or something, you’ll need to recalculate everything again. Of course, because Collibra are deploying a host of UI changes this year, I wouldn’t recommend going down the route I’ve mentioned as it isn’t a robust solution.

Off the back of exploring these options, this is what we concluded in the end.

A healthy alternative would be to take an SVG export of the diagram you want to put on your dashboard and upload it to cloud using the method I’ve mentioned and then embed the SVG image as part of your dashboard but also make it a clickable link that directs the user to the interactive diagram. It doesn’t quite do what you want but it is a more robust solution than the JQuery or IFrame one in my opinion.

Cheers!