Combo Widget with Multiselect- Ability to click on item

[Landpoint]

Hello,

I am looking over the documentation and can not seem to find an answer to this.
I have a case where in the Event Editor configuration, I would like to make the items that show up as "pills" in the multiselect combo widget be clickable and take my user to another page in my app.

Case example, I provide a list of customers that can be added to an event.
The user can multi select each of them. but If they click on the text of the customer name for example, I would like to take the user to a new page in my SPA for that customer, or even launch an additional modal to view quick information about that customer.

I see the decclaration for the extraWidgets as:

 extraWidgets: [
                            {
                                type: 'combo',
                                editable: false,
                                multiSelect: true,
                                valueField: 'id',
                                displayField: 'name',
                                name: 'equipment',
                                label: 'Equipment',
                                items: []
                            }
                            ]

I looked and saw that there was a click event in Common.Widget.Combo, but I am unsure how to bind that in this declarative context. Any help would be appreciated.

[pmiklashevich]

I've modified "examples/tasks/app.js" for example:

extraWidgets : [{
    type        : 'combo',
    name        : 'color',
    label       : 'Color',
    items       : colors.map(color => [color.toLowerCase(), color]),
    listItemTpl : data => `<div data-link="https://www.google.com/search?q=${data.value}" class="color-item ${data.value}"></div>${data.text}`,
    index       : 1,
    dataset     : { eventType : 'employee' },
    editable    : false,
    picker      : {
        listeners : {
            item : ({ source : picker, record, item, event }) => {
                // See the docs for browser support: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
                if (event.target instanceof HTMLElement && event.target.closest('div.color-item')) {
                    window.open(event.target.dataset.link);
                }
            }
        }
    }
}]

Is that what you're looking for?

Best,
Pavel

[Landpoint]

Hi,

Thanks for the reply.
Well, that fires an event on the drop down list when an item is selected to be added to the list:
When I click on an item that has already been added to the list and is displayed as a Pill, there is no event fired.

I am looking to be able to click on the already selected and rendered pill item and raise an event

[pmiklashevich]

In our concept it's "chip" instead of "pill". Please see chipView config for details.

extraWidgets : [{
    type        : 'combo',
    name        : 'color',
    label       : 'Color',
    items       : colors.map(color => [color.toLowerCase(), color]),
    listItemTpl : data => `<div class="color-item ${data.value}"></div>${data.text}`,
    index       : 1,
    dataset     : { eventType : 'employee' },
    editable    : false,
    multiSelect : true,
    chipView    : {
        itemTpl   : data => `<div class="color-item ${data.value}"></div>${data.text}`,
        listeners : {
            item : ({ source : chip, record, item, event }) => {
                console.log(event.target.closest('div.color-item'));
            }
        }
    }
}]

[Landpoint]

Perfect yes!
Exactly what I was looking for!

Thanks!

[Landpoint]

I am just now getting to fully work with this portion of the tool.

1. What I am not seeing is any reference to the scheduled event in the arguments passed.
I have looked through all 4 parameters (chip, record, item, and event) and just can not find any reference to the scheduled event itself. What I am trying to do is on click, open a modal dialog with detailed information about the chip item that was clicked on...In my case, we have time estimated assigned to each item.

2. Additionally, When I created my items that are shown in the editor's dropdown I added some additional fields to the objects, however, those values are getting set to undefined when I try to reference them. The field names are visible in the following observer location inside the "record" argument you gave in your example:
Chip
data
__ob__
myfield1: undefined
myfield2: undefined
myfield3: undefined

chip.png (34.65 KiB) Viewed 2460 times

[johan.isaksson]

Hi,

1. You will have to walk upwards the widget hierarchy from the chip to get to the event editor itself to reach the record being edited. I think this will get you what you need:

chip.owner.owner.record

2. As for this one, I am not sure how to proceed. If I add some custom data to the "chip" it is reachable from the listener (a slightly modified version of what Pavel shared above):

 extraWidgets : [{
                type        : 'combo',
                name        : 'color',
                label       : 'Color',
                items       : [{ value : 'red', text: 'Red', extra : 'Hello' }],
                listItemTpl : data => `<div class="color-item ${data.value}"></div>${data.text}`,
                index       : 1,
                editable    : false,
                multiSelect : true,
                chipView    : {
                    itemTpl   : data => `<div class="color-item ${data.value}"></div>${data.text}`,
                    listeners : {
                        item : ({ source : chip, record, item, event }) => {
                            // this work...
                            console.log(record.extra);
                        }
                    }
                }
            }]

I think we need to see a snippet of code to be able to help with that

[Landpoint]

I will give that a try