Trouble using the bootstrap-tree-view library in a project

[darius]

Hello

I'm very new to Power BI, typescript, d3 and all that so please go easy on me.

I am trying to create a hierarchical tree which is collapsible and show all it's subcategories (children)

I have managed to push my datapoints into arrays of arrays (nested JSON format) so it can be displayed as a hierarchy

However, I want to use the bootstrap-tree-view library by Gijgo.com to display my data. The Checkbox Tree is exactly the look im going for. See pic below for the demo from GijgoThe troubles I'm having are how to implement this library into my Pbiviz project

I have already installed bootsrap and jquery using npm in the terminal

I also downloaded the bootstrap-tree-view library from npm using "npm i bootstrap-tree-view". The "bootstrap-tree-view" folder appeared in my node_modules folder as it should do. See pic above.

According to the "Getting started" part on https://www.npmjs.com/package/bootstrap-tree-view I should just be able to use jquery to fetch my div I want the tree inside and then use .tree({ dataSource:  ...)}

dataSource is the nested JSON im sending in to the function

I have no idea what I should include in the pbiviz.json file and also if I need some kind of typings for this to work. I've just given up on searching for the solution so I decided to ask here 

Any help or tips at all regarding this issue will help me a lot

I'm very new to all of this with a little experience in typescript and external libraries (First year of computer science, only did the absolute basic stuff)

tl;dr: how can I use a bootstrap custom library in a Power Bi Custom Visual project?

[v-viig]

In most of cases whan you need to do to use Bootstrap is to install via npm, find typings via npm and include all of required JS files into externalJS property of pbiviz.json and also import Bootstrap CSS as less in styles.less if stypes are required.

What exactly issues have you faced? It'd be nice if you can share your custom visual to check it from our side.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[darius]

It seems like there are no typings for the bootstrap package I was trying to use yesterday so I decided to look for an alternative way

I downloaded  "npm-patternfly-bootstrap-treeview"and then got these typings npm i @types/bootstrap-treeview

In my update function is this line, which should display the tree, according to the "Getting started"

$('#tree').treeview({data: this.listToTree(filteredViewModel)})

This is in my visual.less file

@import (less) "node_modules/bootstrap/dist/css/bootstrap.css";
@import (less) "node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.css";

 tsconfig

"files": [
    ".api/v1.12.0/PowerBI-visuals.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "src/settings.ts",
    "src/visual.ts",
    "node_modules/@types/d3/index.d.ts",
    "node_modules/@types/bootstrap-treeview/index.d.ts"
  ]

And this is my externalJS

 "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3/d3.min.js",
    "node_modules/jquery/dist/jquery.js",
    "node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js",

I thought this was enough but when I refresh my visual I get this error message in the console 

Uncaught TypeError: Cannot read property 'fn' of undefined

I'm not sure what is going on right now. I can give you more information if you need it, thought this would be enough for now.

Thanks in advance, I really need this to work

[v-viig]

Power BI creates a copy of window object. Thios might cause issues with some libraries.

Could you please share source code of yourcustom visual to investigate this issue?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com