Dynamically Add / Remove Items in Custom Array Property

[BenjaminGroff]

Hi,

I am creating a new custom visualization extension and working on the properties panel. My goal right now is to recreate the functionality of the Data section within the default pivot table properties panel (see image).

Within the section there are 3 array components, dimensions (rows), columns, and measures. Whenever a measure item is created, a "Values" item is added to column array to represent all of the measures. I need to recreate this functionality within my properties panel.

Whenever an item is added to the measures array I need to check if the "Values" item exists within the columns array and if it does not, add it. Whenever an item is removed from the measures array I need to check if there are any more items, and if there are not and all the measures have been removed I need to delete the "Values" item from the columns array.

I also need a "remove:" listener option for the array component, just as there is an "add:" listener.

Is this possible to recreate and does anyone have any ideas on how to accomplish this?

Any help will be greatly appreciated, thank you in advance!

Pivot Table Example:

My Code:

dimList: {

    type: 'array',

    ref: 'dimListItems',

    itemTitleRef: 'dimLabel',

    allowAdd: true,

    allowRemove: true,

    allowMove: true,

    addTranslation: 'Add',

    items: {

       ...

   }

}

colList: {

    type: 'array',

    ref: 'colListItems',

    itemTitleRef: 'colLabel',

    allowAdd: true,

    allowRemove: true,

    allowMove: true,

    addTranslation: 'Add',

    items: {

       ...

   }

}

measureList: {

    type: 'array',

    ref: 'measureListItems',

    itemTitleRef: 'measureLabel',

    allowAdd: true,

    allowRemove: true,

    allowMove: true,

    addTranslation: 'Add',

    add: function(a) {

       //Check the length of this array and if there are items then add "values" item to column list section 

    },

    items: {

       ...

    }

}

[BenjaminGroff · Accepted solution]

Hi all,

I found a solution to my question for anyone that might be having the same issue.

First, there are a couple different functional listeners that I have found for the properties panel. They are show, change, add, and remove. All of these can be used within a component for the properties panel, just add it in as an additional field.

However I am still looking for an order change listener for the array component. I need it to fire whenever the user moves or changes the order of the items array in the properties panel. If anyone has any suggestions it would be greatly appreciated.

Second, the solution for making adding and removing items from an array component in the properties panel is to access it through the backend api in the paint method. Whenever changes are made I have my extension throw a flag and repaint. Here is my code within the paint method:

//----------------------------------------------//

//used for setting backend properties

let zthis = this;

//if they hit reset styling button

if (flag == true) {

    // gets backend properties

    this.backendApi.getProperties().then(function(reply) {

        //resets all styling options using reply

        reply.styling.qHeaderFontSize = 13;

        reply.styling.qHeaderFontColor = 11;

        reply.styling.qContentFontSize = 13;

        reply.styling.qContentFontColor = 11;

        reply.styling.qHighlightRows = false;

        // sets properties

        zthis.backendApi.setProperties(reply);

        console.log("reset styling");

  });

  //turns flag off

  flag = false;

}

//----------------------------------------------//

When you call the backend api you can manipulate the reply object however you need to as if it was an object that you created. From there you can use the setProperties() method to apply all of the changes that you made. You do need to assign "this" to a new variable though in order to apply the patches to the app.

I hope this helps anyone who might need it!