Forum Discussion
Add shift-click to Custom Slicer
Hi, Power BI Community--
I'm very new to custom visual development, but I'm at least learning and getting my feet wet. I have downloaded the source code for the Chiclet Slicer, and I would like to see if I can add some additional selection options. Shift-click is top of the list. Second option would be to include range options such as we see in the Date Slicer.
I *think* the code for this comes in this section of the webBehavior.ts file. Can anyone tell me where to start hacking? See code here:
slicers.on("click", (dataPoint: ChicletSlicerDataPoint, index: number) => {
if (!dataPoint.selectable) {
return;
}
(d3.event as MouseEvent).preventDefault();
let settings: ChicletSlicerSettings = this.slicerSettings;
let multiselect: boolean = settings.general.multiselect;
let selectedIndexes: number[] = jQuery.map(
this.dataPoints,
(dataPoint: ChicletSlicerDataPoint, index: number) => {
if (dataPoint.selected) {
return index;
};
});
if (settings.general.forcedSelection && selectedIndexes.length === 1) {
let availableDataPoints: ChicletSlicerDataPoint[] = jQuery.map(
this.dataPoints,
(dataPoint: ChicletSlicerDataPoint, index: number) => {
if (!dataPoint.filtered) {
return dataPoint;
};
});
if (availableDataPoints[index]
&& this.dataPoints[selectedIndexes[0]].identity === availableDataPoints[index].identity) {
return;
}
}
if ((d3.event as MouseEvent).altKey && multiselect) {
let selIndex: number = selectedIndexes.length > 0
? (selectedIndexes[selectedIndexes.length - 1])
: 0;
if (selIndex > index) {
[index, selIndex] = [selIndex, index];
}
selectionHandler.handleClearSelection();
for (let i: number = selIndex; i <= index; i++) {
selectionHandler.handleSelection(this.dataPoints[i], true /* isMultiSelect */);
}
} else if ((((d3.event as MouseEvent).ctrlKey || (d3.event as MouseEvent).metaKey) && !multiselect) || multiselect) {
selectionHandler.handleSelection(dataPoint, true /* isMultiSelect */);
} else {
selectionHandler.handleSelection(dataPoint, false /* isMultiSelect */);
}
this.saveSelection();
});
Hi Doug,
Posting the email reply here for other users.
The code looks good. Combination of Alt + Click (Shift + Click in your case) selects the range of items of Chiclet Slicer.
Could you please clarify how you tested the visual? Did you use pbiviz package or pbiviz start?
If you used pbiviz package you must also change the GUID to bypass our CDN.
If you experienced the issue with pbiviz start we would ask you to share more steps (screenshots or video) to reproduce the issue from our end since the Alt key works well on our end.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
5 Replies
Hi perezrd5,
Your assumption is correct.
Checlet Slicer already handles the click events. Everything what you need to check if click goes with pressed Shift by using this code:
(d3.event as MouseEvent).shiftKey
Please let us know if you have any further questions.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
Hi, v-viig--
This was very helpful, and it got me to where I could get the shift-click to work exactly like ctrl-click in my visual. However, I want shift-click to work for selecting a connected range, as is standard functionality in a lot of web applications. I gather I have to collect the selections as an array under the shift-click event, but I'm lost exactly how to implement it. Is it something like this?
if (d3.event as Mouse Event).shiftKey {
var firstSelectedIndex, lastSelectedIndex, currentIndex;
lis.each(function(dl, i) {
if (dl._selected) {
firstSelectedIndex || (firstSelectedIndex = i);
lastSelectedIndex = i;
}
if (this === node) currentIndex = i;
});
var min = Math.min(firstSelectedIndex, lastSelectedIndex, currentIndex);
var max = Math.max(firstSelectedIndex, lastSelectedIndex, currentIndex);// select all between first and last selected
// when clicked inside a selection
lis.each(function(d, i) {
// preserve state for additive selection
d._selected = (d3.event as Mouse Event).ctrlKey && d._selected) || (i >= min && i <= max);
});
}Looks like such functionality is already covered by Alt + Click (code).
Can you confirm that Alt + Click works in thew same way that you described for Shift + Click?
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
