3 Replies Latest reply: Nov 21, 2014 5:45 AM by Karl Fredberg RSS

    Items array input?

    Karl Fredberg

      Is it possible to create a custom array input in the layout definition like uses : dimension or measures?

          • Re: Re: Items array input?
            Karl Fredberg

            That's not what I was looking. Let me try to explain better.

             

            In Qlik Sense a want to use an array of items with a buttom "Add item" and be able to remove items just like the dimension component.

             

            initialProperties : {
              version : 1.0,
              ...
              },
              definition : {
              type : "items",
              component : "accordion"
            
          • Re: Items array input?
            Karl Fredberg

            I figured out an solution, not sure if it's the right way but it's a start

             

            define(["jquery"], function($) {
            
                return {
                    initialProperties : {
                        version: 1.0
                        
                    },
                    definition : {
                        type : "items",
                        component : "accordion",
                        items : { 
                            itemsList:     {
                                type: "array",
                                translation: "Items",
                                ref: "kfItemsList",
                                min: 1,
                                allowAdd: true,
                                allowRemove: true,
                                allowMove: true,
                                addTranslation: "Add Items",
                                grouped: true,
                                items: {
                                    itemType: {
                                        type: "string",
                                        component: "dropdown",
                                        ref: "kfType",
                                        translation: "Item type",
                                        options: [{
                                            value: "A",
                                            label: "A-type"
                                        }, {
                                            value: "B",
                                            label: "B-type"
                                        }, {
                                            value: "C",
                                            label: "C-Type"
                                        }],
                                        show: true,
                                        defaultValue: "A"
                                    }
                                }
                            }
                        }
                    },
                    paint: function ($element, layout) {
                        console.log(layout);
                        var html = '';
            
                        $.each(layout.kfItemsList, function(key, value) {
                                html += '<div>Item: '+ (key+1) + ' Item type: ' + value.kfType +'</div>'
                                console.log(value);
                            });
            
                        $element.html(html);
                    }
                }
            });