Including External Assets in Custom Visual (/Assets folder ArcGIS API)

Hi Goodmanngl,

Visuals use webpack to ensure that all necessary files are added to the build. You can see the configuration for Power BI visuals here, and there's also a further external config file here. Nothing outside of the standard files is imported automatically and what does get imported depends on how you reference it in your code. You can see the internal structure of your visual by visiting https://localhost:8080/webpack-dev-server/ when your dev server is running to confirm this.

CSS

With less/CSS files, these are loaded using the css and less loaders, so can be packaged in with your project by either importing them in the visual.less file, so that they are included, or you can add them to the top of any of your source files as a reference, to make sure that it's included.

I'm not sure of your library's CSS path, but I'm currently using Fluent UI in one of my visual projects. If I want to include its stylesheet, I can either add this to my visual.less:

@import (less) 'node_modules/office-ui-fabric-core/dist/css/fabric.min.css';

Or put this in my visual.ts:

...
import 'core-js/stable';
import './../style/visual.less';
import powerbi from 'powerbi-visuals-api';
import 'office-ui-fabric-core/dist/css/fabric.min.css';   /* I can import my CSS here instead */

Next time my visual is reloaded, the stylesheet will get loaded with the visual.

Images

Images are a little trickier. Much like with CSS, the supplied configuration will only load images referenced in your code. These files use the base-64-inline loader, meaning that any referenced images are 'compiled' down to base 64 representations rather than being referenced as an internal URL.

So, what this means is that if, say I need a local image for my CSS, I can reference it like this in my .less file:

.visual-header-image.logo {
    background-image: url('../assets/logo_single_colour.svg');
}

But the packaged visual sees this as:

visual-header-image.logo {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGL... /* this goes on for a while */
    ...
}

The challenge this creates is that you aren't easily able to reference your images by a relative URL within your code at run-time.

If all you need to do is load them to make them visible to the visual's stylesheets then the CSS approach above may be all you need.

If, however, you need to have them referencable within your code, you'll need to add something like url-loader to the webpack config. A manual configuration is not supported by powerbi-visuals-tools. The team provides a version that you can put together yourself, but this requires you to set up a lot of the dev dependencies manually, too (such as certificate). If you want specific assistance with this, I would contact the team at [email protected] for support.

Anyway, I hope this provides you with some ideas. Good luck!

Daniel