Setting/Getting Structure, JavaScript Programming Example of Setting/Getting Structure

Name: JavaScript Programming Example of Setting/Getting Structure - Webix
Rating: 4.8 (47 reviews)

Home
Examples
Setting/Getting Structure

JavaScript Programming Example of Setting/Getting Structure

With the programming example below you can easily set or get structure pivot configuration object. Don't hesitate to use our free coding samples.

JS Code

webix.ready(function() { 
    webix.CustomScroll.init();

  webix.ui({
    cols: [
      {
        view: "pivot",
        id: "pivot",
        structure: {
          rows: ["form", "name"],
          columns: ["year"],
          values: [{ name: "oil", operation: ["min", "sum"] }],
        },
        url: "https://cdn.webix.com/demodata/pivot.json",
      },
      { view: "resizer" },
      {
        type: "clean",
        rows: [
          { template: "Click to load structure", type: "header" },
          {
            view: "list",
            id: "structures",
            data: structures,
            template: "#label#",
            width: 250,
            select: true,
          },
          { view: "textarea", readonly: true, id: "result" },
          {
            view: "toolbar",
            cols: [{ view: "button", id: "get", label: "Get structure" }],
          },
        ],
      },
    ],
  });

  $$("structures").attachEvent("onItemClick", function(id) {
    var str = webix.copy(this.getItem(id).structure);
    $$("pivot").setStructure(str);
  });

  $$("get").attachEvent("onItemClick", function() {
    var str = $$("pivot").getStructure();
    $$("result").setValue(JSON.stringify(str, 0, 1));
  });
});

HTML Code

<script>
const structures = [
{
  label: "GDP/Oil by forms/countries/years",
  structure: {
      rows: ["form", "name"],
      columns: ["year"],
      values: [
          { name: "gdp", operation: "sum" },
          { name: "oil", operation: "sum" },
      ],
      filters: [],
  },
},
{
  label: "Oil by forms/continents",
  structure: {
      rows: ["form"],
      columns: ["continent"],
      values: [{ name: "oil", operation: "max" }],
      filters: [{ name: "name" }],
  },
},
{
  label: "Balance by years/forms/continents",
  structure: {
      rows: ["year"],
      columns: ["form", "continent"],
      values: [{ name: "balance", operation: "sum" }],
      filters: [{ name: "name" }],
  },
},
{
  label: "Balance, GDP, Oil by years/forms",
  structure: {
      rows: ["year"],
      columns: ["form"],
      values: [
          { name: "balance", operation: "max" },
          { name: "gdp", operation: "max" },
          { name: "oil", operation: "max" },
      ],
      filters: [{ name: "name" }],
  },
},
{
  label: "Balance, GDP, Oil by countries/years",
  structure: {
      rows: ["name"],
      columns: ["year"],
      values: [
          { name: "balance", operation: "max" },
          { name: "gdp", operation: "max" },
          { name: "oil", operation: "max" },
      ],
      filters: [{ name: "form" }],
  },
},
];
</script>

Do you need to set/get structure in Pivot?

Download Webix UI Framework

Study Pivot Documentation

Check out Pivot Widget Features