Forum Discussion

darius's avatar
darius
Frequent Visitor
8 years ago

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

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?

 

 

 

 

 

 

 

 

 

3 Replies

  • v-viig's avatar
    v-viig
    Community Champion
    8 years ago

    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

    [email protected]

     

    • darius's avatar
      darius
      Frequent Visitor
      8 years ago

      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's avatar
        v-viig
        Community Champion
        8 years ago

        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

        [email protected]