Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
perezrd5
Frequent Visitor

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();
});

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

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

pbicvsupport@microsoft.com

View solution in original post

5 REPLIES 5
v-viig
Community Champion
Community Champion

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

pbicvsupport@microsoft.com

 

 

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);
});
}

v-viig
Community Champion
Community Champion

Looks like such functionality is already covered by AltClick (code).

Can you confirm that AltClick  works in thew same way that you described for Shift +  Click?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

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

v-viig
Community Champion
Community Champion

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

pbicvsupport@microsoft.com

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.