Refresh components in Oracle Jet 8.0

Perevertkin M A

I can't refresh treemap from on-value-changed in oj-select-single

Please help.

I have:

• oj-select-single
• oj-treemap

I want to refresh a tree component when a value in a selectchanges.

I used .ojTreemap("refresh") but nothing happened

Example:

demo.html

<div id="componentDemoContent" style="width: 1px; min-width: 100%;">
     <div id="treemap-container">
       <oj-select-single id="whSelect"
           data="[[whList]]"
           on-value-changed="[[changeWhHandler]]">
     </oj-select-single>
      <oj-treemap
       id="treemap1"
       animation-on-display="auto"
       animation-on-data-change="auto"
       data="[[treemapData]]">
       <template slot="nodeTemplate">
        <oj-treemap-node
         label="[[$current.data.label]]"
         value="[[$current.data.population]]">
        </oj-treemap-node>
       </template>
      </oj-treemap>
     </div>
    </div>

demo.js

 require(["require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojattributegrouphandler", "text!../cookbook/dataVisualizations/treeView/resources/usaMeanIncomeSubregion.json", "ojs/ojarraytreedataprovider", "ojs/ojarraydataprovider", "ojs/ojknockout", "ojs/ojtreemap", 'ojs/ojknockout',
    'ojs/ojselectsingle'], function (require, exports, ko, ojbootstrap_1, ojattributegrouphandler_1, jsonData, ArrayTreeDataProvider,ArrayDataProvider) {
   "use strict";
    
   class TreemapModel {
     constructor() {
       this.handler = new ojattributegrouphandler_1.ColorAttributeGroupHandler();
       this.data =  [{
            "label": "United States",
              "population": 301461533,
              "meanIncome": 51425
       },{
           "label": "Mexico",
            "population": 301461533,
            "meanIncome": 51425
           }];
       this.treemapData = ko.observableArray();
       this.whs = [{label : "value1", value: "value1"},{label : "value2", value: "value2"}];
       this.changeWhHandler = (event) =>{
         this.data =  [{
                  "label": "United States",
                 "population": 301461533,
                  "meanIncome": 51425
          }];
         this.treemapData = new ArrayTreeDataProvider(this.data, {
         keyAttributes: "label",
         childrenAttribute: "nodes",
       }); 
        $("#treemap1").ojTreemap("refresh");
       };
       
       
       this.whList = new ArrayDataProvider(this.whs, {
          keyAttributes: "value",
        });
       this.treemapData = new ArrayTreeDataProvider(this.data, {
         keyAttributes: "label",
         childrenAttribute: "nodes",
       });

     }
   }
   ojbootstrap_1.whenDocumentReady().then(() => {
     ko.applyBindings(new TreemapModel(), document.getElementById("treemap-container"));

   });
 });

John 'JB' Brock-Oracle

Hi, this may sound really simple, but try changing this

data="[[whlist]]"

to be

data="{{whlist}}"

the first syntax with the square braces is representing readonly binding (one-way) and the second is what you would use when you expect the component to also push the new value back to the observable so that it can update something else.

The other thing that I see you doing, is a common mistake when working with Knockout observables. Instead of updating the previously defined observable for treemapData, you are redefining it and that will cause it to no longer be an observable so the treemap component won't refresh.

Change this line

this.treemapData = new ArrayTreeDataProvider(this.data, { ... }

to be

this.treemapData(new ArrayTreeDataProvider(this.data, { ... } );

That will "update" the existing observable instead of replacing it.

John 'JB' Brock-Oracle

As a quick follow, you should never have call refresh on modern JET components unless you are changing child DOM elements of a component like oj-filmstrip, or some component that doesn't support the option API. There are very few of those components left in v8+ though.

Perevertkin M A

https://community.oracle.com/tech/developers/discussion/comment/16798127#Comment_16798127

https://community.oracle.com/tech/developers/discussion/comment/16798126#Comment_16798126

It's work. Thanks a lot.