cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Goodmanngl
Frequent Visitor

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

Hello Everyone,

 

I'm trying to develop a custom visual using the ArcGIS for Javascript API (@arcgis/core - npm (npmjs.com)). As well as using a number of external packages installed within the node_modules folder, this API relies on external 'assets' stored within the pbiviz /assets folder. These assets include a wide variety of file types such as .json, .png, .js, .css, .jpeg etc.

 

When uploading the visual to the developer server using 'pbiviz start' unfortuately the files located in the '/assets' folder do not appear to be uploaded to the developer server as part of the webpack bundle, resulting in many errors like the following:

 

GET https://app.powerbi.com/......./assets/esri/t9n/basemaps.json net::ERR_FAILED

 

The visual is looking for these files but cannot find them on the localhost.

 

Do you know of any way of ensuring that external assets (such as .png etc.) stored in the custom visual /assets folder (e.g. the same location where the icon.png is stored by default) are also included in the visual when uploaded to the developer server for debugging?

 

Thanks!

 

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

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 pbicvsupport@microsoft.com for support.

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

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

4 REPLIES 4
dm-p
Super User
Super User

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 pbicvsupport@microsoft.com for support.

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

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Goodmanngl
Frequent Visitor

Daniel,

 

Thank you very much, that has provided plenty of ideas and potential solutions. Really useful to know how the webpack works too. Appreciate the detailed response!

Goodmanngl
Frequent Visitor

Liang,

 

Thank you for your reply, unfortunately this refers to the ArcGIS for PowerBI pre-built data visualisation. Unfortunately this is only available in an online environment, I am working in an offline environment using ArcGIS server/portal.

 

My question is regarding developing a custom visual, which i am building myself, using the ArcGIS JavaScript API, and more specifically being able to publish not only the visual, but the assets stored within the /assets folder to the webpack developer server when debugging using pbiviz start.

V-lianl-msft
Community Support
Community Support

Hi @Goodmanngl ,

 

See if this can help you:

https://doc.arcgis.com/en/power-bi/get-started/enable-cors.htm 

 

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
August 1 episode 9_no_dates 768x460.jpg

The Power BI Community Show

Watch the playback when Priya Sathy and Charles Webb discuss Datamarts! Kelly also shares Power BI Community updates.

Power BI Dev Camp Session 24 without aka link and time 768x460.jpg

Ted's Dev Camp - July 28, 2022

Watch Session 24 of Ted's Dev Camp along with past sessions!

Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.