Skip to main content
Announcements
Live today at 11 AM ET. Get your questions about Qlik Connect answered, or just listen in. SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
BenjaminGroff
Contributor III
Contributor III

Dynamically Add / Remove Items in Custom Array Property

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:
 
BenjaminGroff_0-1637270360407.png

 

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: {
       ...
    }
}
Labels (3)
1 Solution

Accepted Solutions
BenjaminGroff
Contributor III
Contributor III
Author

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!

View solution in original post

1 Reply
BenjaminGroff
Contributor III
Contributor III
Author

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!