Import libraries in custom html

Hello,

I have a dashboard that only uses custom html blocks, and some of them uses the sames libraries, like bootstrap, charts libraries.

Is there someway to import all of them once for my entire dashboard ?

1 Like

There is not a way to manage custom HTML block dependencies across multiple blocks. The custom HTML block runs inside an iframe that is independently scoped from the main page and all other iframes on the page.

Two additional comments based on your initial question:

  1. Custom HTML blocks are significantly less performant than other block types because of what I described above. A dashboard made up only of (many) custom HTML blocks will have some significant performance issues.
  2. I’m curious what you are doing in these blocks if you’d care to share. The custom HTML block is sort of a “bleeding edge” feature, and new, first-class blocks may get added to the roadmap based on what our users build within them.

Thanks for the answer,

We have been using only custom HTML blocks because we have a multi-language application, and the default blocks doesn’t allow making this kind of customizations.

We’re building charts with

G2Plot - https://g2plot.antv.vision/zh
Plotly - https://plotly.com/

And using bootstrap-table to create better views with tables.

Thanks for the information. Internationalization is a feature that has come up a few times now; can you give me a specific example of a block you would like to have used and why that’s not possible given your requirements? For example, is there some text that is displayed by default in a block whose label cannot be overridden?

Hey,

We’re using Custom HTML Blocks mostly because our application is multi-language, so it’s way easier to maintain and update blocks using them.

We have other components like gauges with limits, charts with zoom and slider functionality, even tables we use custom html to customize more our application.

It would be really helpful if the dashboards could use something similar as the experience, like components and layouts.

I will talk with my teammates about which functionalities we are missing on the default blocks to explain better our needs.

Hello @Dylan_Schuster, how are you ?

My teammates and I brought some examples of blocks that we would like to see in the platform.

  • A way to control the queries in the block or in the code (Custom HTML), now if we want different aggregations or durations, we need to create direferents queries to the same attribute. This would be a life changing update; :smiley:

  • The component “Gauge: Dial” could have as a base for orientation, not only left to right, but also a middle, like in cases with negative numbers, making the 0 the center of the gauge.

  • Multi-language/internationalization in the default blocks, for the titles and the last updated format.

  • A Scatter chart default.

  • A heatmap chart default.

  • A Datatable component, that can integrate with APIs and have some formatters (something like bootstrap-table).

  • A way to open modals outside the block.

  • More possibilities of agregations, like the last 120/150 days.

1 Like

Thanks for the feedback @Thiago_Andrey_Zils . Taking your recommendations one by one …

  • A way to control the queries in the block or in the code (Custom HTML), now if we want different aggregations or durations, we need to create direferents queries to the same attribute. This would be a life changing update; :smiley:

I think I understand what you mean here; something sort of like what is in the top right corner of a Time Series Graph, except handled in the code for the Custom HTML Block? (As in, you build the UI to change the query values.) I’ll log that as a feature request.

In the meantime, you do have a couple workaround here …

  • Instead of utilizing the query builder in the block configuration, you could instead utilize Experience Endpoints to build a data API and using JavaScript’s Fetch API to make the requests from within the block instead. Bear in mind that you’ll need to take measures to authenticate the requests if you do not want the data to be publicly available.
  • If you’re not building this dashboard for consumption within an application experience or public dashboards, you can use the same endpoints that fetch the dashboard block data but just change the request to utilize the aggregation / duration you desire. You should be able to utilize your browser’s network tab to analyze the standard requests and change the properties. (Note, the dashboard data endpoints are private, thus they are not documented and are subject to change.)

The component “Gauge: Dial” could have as a base for orientation, not only left to right, but also a middle, like in cases with negative numbers, making the 0 the center of the gauge.

Gauge Blocks do support custom minimum and maximum values, and those do support negative numbers, which would allow 0 represent the middle of the gauge. Or were you referring to something else? (A screenshot would help if I’m not understanding.)

Multi-language/internationalization in the default blocks, for the titles and the last updated format.

This is a request we’ve gotten before; we’ve wrestled with how to do this vs. falling back to the browser’s default locale setting for things like numbers.

A Scatter chart default.

To confirm, you mean something like this?

A heatmap chart default.

To confirm, you mean a more generic heatmap and not our existing, geography-based Heatmap Block?

A Datatable component, that can integrate with APIs and have some formatters (something like bootstrap-table).

Understood, thanks.

A way to open modals outside the block.

This one I don’t quite understand. Modals outside of the Custom HTML Block? For security reasons we have to run the blocks inside of a sandboxed iframe, so I don’t see this being something we can support.

More possibilities of agregations, like the last 120/150 days.

This would be a significant change as we currently allow 90-day durations for all data queries, but I will pass your request on to the engineering team.

Thanks for the detailed response.

1 Like