Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Next up in the FabCon + SQLCon recap series: The roadmap for Microsoft SQL and Maximizing Developer experiences in Fabric. All sessions are available on-demand after the live show. Register now

Reply
BrentonC
Helper I
Helper I

Storing dict outside of visual.ts

Hello,

I have encoded a heap of images as base64 and stored them in a dict, currently, it is making a mess in my visual.ts file, it's super long. Is there any way I can store these in another file and call the variable when needed? I have been banging my head against the wall for a while.

 

dict.PNG

 

Thank You

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @BrentonC,

  1. Create a file in the relative folder to your visual.ts, e.g. constants.ts.
  2. Cut/paste your dict declaration into this file.
  3. Change private dict to export const dict
  4. In your visual.ts, at the top, add import { dict } from './constants'; (edited for correctness)
  5. You can then access the object as dict anywhere in the visual.ts code (so you may need to remove 'this.' from any instances if you've done that, as it's no longer a property of your Visual class.

Note that you don't have to use these exact names, just make sure everything links together, e.g. the constant name and the file it's sourced from.

Also, the export in front of your const declaration in step 3 is very important, otherwise it's not 'visible' to other files when you try to import it.

If you want to see a pre-canned example within your project (assuming you started with a blank visual), your settings.ts does the same thing with the VisualSettings class declaration, and its subsequent import into visual.ts.

Here's some further reading on ES6 imports and exports.

Good luck!

Daniel





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

Proud to be a Super User!


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




View solution in original post

3 REPLIES 3
dm-p
Super User
Super User

Hi @BrentonC,

  1. Create a file in the relative folder to your visual.ts, e.g. constants.ts.
  2. Cut/paste your dict declaration into this file.
  3. Change private dict to export const dict
  4. In your visual.ts, at the top, add import { dict } from './constants'; (edited for correctness)
  5. You can then access the object as dict anywhere in the visual.ts code (so you may need to remove 'this.' from any instances if you've done that, as it's no longer a property of your Visual class.

Note that you don't have to use these exact names, just make sure everything links together, e.g. the constant name and the file it's sourced from.

Also, the export in front of your const declaration in step 3 is very important, otherwise it's not 'visible' to other files when you try to import it.

If you want to see a pre-canned example within your project (assuming you started with a blank visual), your settings.ts does the same thing with the VisualSettings class declaration, and its subsequent import into visual.ts.

Here's some further reading on ES6 imports and exports.

Good luck!

Daniel





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

Proud to be a Super User!


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




Thank you, it did have an issue with me trying to import './constants.ts' as it did not want the extension on there so './constants' did the job. I am not very familiar with javascript/node.js, best I do some reading up on it and learn the fundamentals. Thank you for the good explanation.

 

Brenton Collins

Glad to hear it's working for you, and thanks for the feedback on the file extension - I'll update the answer with the correct info 🙂





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

Proud to be a Super User!


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




Helpful resources

Announcements
New to Fabric survey Carousel

New to Fabric Survey

If you have recently started exploring Fabric, we'd love to hear how it's going. Your feedback can help with product improvements.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Join our Fabric User Panel

Join our Fabric User Panel

Share feedback directly with Fabric product managers, participate in targeted research studies and influence the Fabric roadmap.

March Power BI Update Carousel

Power BI Community Update - March 2026

Check out the March 2026 Power BI update to learn about new features.