Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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();
});
Solved! Go to Solution.
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
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
Hi, @v-viig--
No, Alt+Click works just the same as ctrl+click. For fun, I tried compiling a version where I replaced the altKey reference to shiftKey, and it still does not select the range. It's individual chiclets, select or deselect. In fact now, the focus doesn't shift to the next chiclet selected. Rather, any chiclet selected remains selected until it is deselected.
My code is here. I've highlighted the spot in question, as you did, but the entire file is the one I'm using to compile.
I really appreciate your help so far, and I hope you can help me close this one out soon.
Best,
Doug
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
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
16 | |
2 | |
2 | |
1 | |
1 |