topic Re: Checkbox tree in settings in ArcGIS Web AppBuilder Questions

Checkbox tree in settings

AndrewTerwiel — Tue, 14 Jul 2015 23:47:33 GMT

I've been trying to create a checkbox tree in my settings for a widget.

The checkbox tree docs are here: http://thejekels.com/dojo/cbtree_AMD.html

To get the data into the tree I'm using the code below. The data array is not what I'll be using in the end product. The problem I'm having is that the data property of the store is always null. The _jsonData property of the store object has the array in it though. Can anyone see what I'm doing wrong?

var data = [{ id: "earth", name: "The earth", type: "planet", population: "7 billion" }];

//var data = result;

var store = new ItemFileWriteStore({ data: data });

var model = new ForestStoreModel({

store: store,

query: { id: "earth" },

rootLabel: "Layers",

checkedRoot: true

});

var tree = new Tree({

model: model,

id: "MenuTree",

branchIcons: true,

branchReadOnly: false,

checkBoxes: true,

nodeIcons: true

});

Message was edited by: Andrew Terwiel

I think I need to call fetch() on the store before using it in the model.

Message was edited by: Andrew Terwiel

I've made some progress. The following code will display a rudimentary tree, as shown. The checkboxes don't show for some reason and I can't get the parent-child hierarchy to display.

var layers = {};

layers.label = 'name';

layers.identifier = 'name';

layers.items = [

{ name: "Family", type: "root" },

{ name: "Abe", type: "parent", parent: ["root"], hair: "Brown" },

{ name: "Jacqueline", type: "parent", parent: ["root"], hair: "Brown" },

{ name: "Homer", type: "parent", parent: ["Abe"], hair: "none" },

{ name: "Marge", type: "parent", parent: ["Jacqueline"], hair: "blue" },

{ name: "Bart", type: "child", parent: ["Homer", "Marge"], hair: "blond" },

{ name: "Lisa", type: "child", parent: ["Homer", "Marge"], hair: "blond" },

{ name: "Maggie", type: "child", parent: ["Homer", "Marge"], hair: "blond" }

];

var store = new ItemFileWriteStore({ data: layers });

var model = new ForestStoreModel({

store: store

});

var tree = new Tree({

model: model,

id: "MenuTree"

});

connect.connect(tree, "onCheckBoxClick", model, that._checkBoxClicked);

tree.placeAt(that.checkboxTreeDiv);

Re: ItemFileWriteStore data = null

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:29:45 GMT

Andrew,

Not sure if this will help but here is a JS Sample app that uses the cbtree.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>The CheckBox Tree with Observable Store</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script type="text/javascript">
    var dojoConfig = {
      packages: [
        {
          name: "cbtree",
          location: location.pathname.replace(/\/[^/]+$/, '') + "/cbtree"
        }
      ]
    };
  </script>
  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
        "dojo/ready",
        "dojo/store/Memory",
        "dojo/store/Observable",
        "cbtree/Tree", // Checkbox tree
        "cbtree/model/TreeStoreModel" // ObjectStoreModel
        ], function (ready, Memory, Observable, Tree, ObjectStoreModel) {

      var data = [
        {
          id: "earth",
          name: "The earth",
          type: "planet",
          population: "6 billion"
        },
        {
          id: "AF",
          name: "Africa",
          type: "continent",
          population: "900 million",
          area: "30,221,532 sq km",
          timezone: "-1 UTC to +4 UTC",
          parent: "earth"
        },
        {
          id: "EG",
          name: "Egypt",
          type: "country",
          parent: "AF"
        },
        {
          id: "KE",
          name: "Kenya",
          type: "country",
          parent: "AF"
        },
        {
          id: "Nairobi",
          name: "Nairobi",
          type: "city",
          parent: "KE"
        },
        {
          id: "Mombasa",
          name: "Mombasa",
          type: "city",
          parent: "KE"
        },
        {
          id: "SD",
          name: "Sudan",
          type: "country",
          parent: "AF"
        },
        {
          id: "Khartoum",
          name: "Khartoum",
          type: "city",
          parent: "SD"
        },
        {
          id: "AS",
          name: "Asia",
          type: "continent",
          parent: "earth"
        },
        {
          id: "CN",
          name: "China",
          type: "country",
          parent: "AS"
        },
        {
          id: "IN",
          name: "India",
          type: "country",
          parent: "AS"
        },
        {
          id: "RU",
          name: "Russia",
          type: "country",
          parent: "AS"
        },
        {
          id: "MN",
          name: "Mongolia",
          type: "country",
          parent: "AS"
        },
        {
          id: "OC",
          name: "Oceania",
          type: "continent",
          population: "21 million",
          parent: "earth"
        },
        {
          id: "AU",
          name: "Australia",
          type: "country",
          population: "21 million",
          parent: "OC"
        },
        {
          id: "EU",
          name: "Europe",
          type: "continent",
          parent: "earth"
        },
        {
          id: "DE",
          name: "Germany",
          type: "country",
          parent: "EU"
        },
        {
          id: "FR",
          name: "France",
          type: "country",
          parent: "EU"
        },
        {
          id: "ES",
          name: "Spain",
          type: "country",
          parent: "EU"
        },
        {
          id: "IT",
          name: "Italy",
          type: "country",
          parent: "EU"
        },
        {
          id: "NA",
          name: "North America",
          type: "continent",
          parent: "earth"
        },
        {
          id: "MX",
          name: "Mexico",
          type: "country",
          population: "108 million",
          area: "1,972,550 sq km",
          parent: "NA"
        },
        {
          id: "Mexico City",
          name: "Mexico City",
          type: "city",
          population: "19 million",
          timezone: "-6 UTC",
          parent: "MX"
        },
        {
          id: "Guadalajara",
          name: "Guadalajara",
          type: "city",
          population: "4 million",
          timezone: "-6 UTC",
          parent: "MX"
        },
        {
          id: "CA",
          name: "Canada",
          type: "country",
          population: "33 million",
          area: "9,984,670 sq km",
          parent: "NA"
        },
        {
          id: "Ottawa",
          name: "Ottawa",
          type: "city",
          population: "0.9 million",
          timezone: "-5 UTC",
          parent: "CA"
        },
        {
          id: "Toronto",
          name: "Toronto",
          type: "city",
          population: "2.5 million",
          timezone: "-5 UTC",
          parent: "CA"
        },
        {
          id: "US",
          name: "United States of America",
          type: "country",
          parent: "NA"
        },
        {
          id: "SA",
          name: "South America",
          type: "continent",
          parent: "earth"
        },
        {
          id: "BR",
          name: "Brazil",
          type: "country",
          population: "186 million",
          parent: "SA"
        },
        {
          id: "AR",
          name: "Argentina",
          type: "country",
          population: "40 million",
          parent: "SA"
        }
            ];

      var store = Observable(new Memory({
        data: data
      }));
      var model = new ObjectStoreModel({
        store: store,
        query: {
          id: "earth"
        },
        rootLabel: "The Earth",
        checkedRoot: true
      });
      ready(function () {
        var tree = new Tree({
          model: model,
          id: "tree01"
        }, "CheckboxTree");
        tree.startup();
      });
    });
  </script>
</head>

<body class="claro">
  <h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
  <p>
    A basic CheckBox Tree using an <u>observable</u> dojo/store Memory Store.
  </p>
  <div id="CheckboxTree">
  </div>
</body>

</html>

Re: Checkbox tree in settings

AndrewTerwiel — Mon, 20 Jul 2015 04:51:01 GMT

Hi Robert,

I've tried some of the demos here: cbtree/demos/store at master · pjekel/cbtree · GitHub

Couldn't get them to work though. Searching Stackoverflow and Geonet for discussions about the cbtree is a joyless experience. I think maybe one question was posted on Stackoverflow. I'm coming to the conclusion that this is not a well used and tested object.

Re: Checkbox tree in settings

RobertScheitlin__GISP — Mon, 20 Jul 2015 10:44:23 GMT

Andrew,

The sample I provided above is based on the cbtree samples but I have tested it and made sure that it works with the JS APIs dojo and does not require dojo to be installed on your local machine.

Re: Checkbox tree in settings

AndrewTerwiel — Mon, 20 Jul 2015 21:20:22 GMT

Hi Robert,

Thanks for you help. The problem I have with the sample is that I'm getting

these errors:

- GET http://localhost:62919/setting/cbtree/Tree 404 (Not Found)

- Uncaught Error: xhrFailed

I believe the path to cbtree/Tree is correct, so I can't see why I get that

error.

On Mon, Jul 20, 2015 at 10:45 PM, Robert Scheitlin, GISP <geonet@esri.com>

Re: Checkbox tree in settings

RobertScheitlin__GISP — Tue, 21 Jul 2015 15:13:54 GMT

Andrew,

So do you have the whole cbtree library in your widget setting folder?

Re: Checkbox tree in settings

RobertScheitlin__GISP — Tue, 21 Jul 2015 18:45:39 GMT

Andrew,

Here is a help link for using third party libraries:

Use other JavaScript libraries—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: Checkbox tree in settings

AndrewTerwiel — Mon, 03 Aug 2015 23:18:30 GMT

Thanks, Robert. I ended up altering the init.js file like so:

dojoConfig = {

parseOnLoad: false,

async: true,

tlmSiblingOfDojo: false,

has: {

'extend-esri': 1

packages : [{ // this is the package I added

name : "cbtree",

location : window.path + "libs/cbtree"

}]

};