microsoft/powerbi-visuals-chicletslicer

Repo for Power BI Chiclet Slicer custom visual

PowerBI-visuals-ChicletSlicer

Use this slicer to display image and/or text buttons that act as an in-canvas filter. Define additional properties for the layout & selection to customize this slicer to meet your specific needs

Overview

The Chiclet Slicer was inspired by the great slicer control found in Excel since 2010, but with much greater customization options. Chiclet are a slicers made of buttons, that can also be arranged horizontally for a very efficient real estate use, or arranged as a matrix for a super compact form. Chiclet slicer also supports cross highlighting. That's not all - they can even contain images!

See also Chiclet Slicer at Microsoft Office store

ChicletSlicer has 3 bucket fields: Category, Values and Images.

1. Category - Field with a list of categories for each "chiclet" item. String values
2. Values - Field with values for Category field. This field use just for cross filtering with other visuals.
3. Image - Field with a list of images for each "chiclet" item. Values of this field can be presented in "base64 image" format or it can be just external link to image.

Selection

You can select any chiclet item for data filtering and also you can use multi selection. For cleaning of selection you should click to "Сlear" button on the right top corner of a visual.

Search

You can filter a list of chiclets items by category using string search. For activation of search field you should click to "search" in options of the visual. After that you can input search string and data will be filtered immediately.

Settings of ChicletSlicer

General options

• Orientation: An order of "chiclets" list building. Can be vertical or horizontal
• Columns: Amount of ChicletSlicer columns.
• Rows: Amount of ChicletSlicer rows.
• Show disabled: Setting which regulate where will be displayed disabled chiclets items. This setting has 3 selection values:
  • Inplace: Disabled chiclets will be located in a their original positions.
  • Bottom: Disabled chiclets will be located in a bottom of the list.
  • Hide: Disabled chiclets will be hide from list.
• Multiple selection:
  • If this option is turned on you will be able to select chiclets without Ctrl button. (It will be usefull for multiple selection on mobile devices)
  • If this option is turned off you have to use Ctrl button for multiple selection.
• Forced selection: This setting forcibly select first item and doesn't allow to unselect any chiclet item

Chiclets options

• Text size: Size of text for chiclet item.
• Height: Height of chicklet item.
• Width: Width of chiclet item.
• Background: Background color of all ChicletSlicer.
• Transparency: Transparency of ChicletSlicer background.
• Selected Color: Background color of selected chiclet item.
• Hover color: Text color when you hover to chiclet item.
• Unselected color: Background color of unselected chicklet items.
• Disabled color: Color of disabled chicklet item.
• Outline color: Color for outline of chiclet item.
• Outline weight: Thickness of chiclet item outline.
• Text color: Color of chiclet item text.
• Padding: Indent around chiclet item.
• Outline style: Style of outline. This settins has 3 selection values:
  • Rounded: Round outline edges
  • Cut: Semicircular outline edges
  • Square: Square outline edges

Images options

• Image split: Height of Image for chiclet item
• Round: Shows image as rounded
• Stretch image: Stretch image to full chiclet item width
• Bottom image:
  • If this option is turned on image will be in the bottom of chiclet item, under the text
  • If this option is turned off image will be in the top of chiclet item, above the text

powerbi-visuals-chicletslicer's Issues

Does not allow Local Images to be used

Trying to use file:///C:/Users/Jeff/Desktop/Moon.png for example will not pull the images from my desktop. I believe since this is using a browser to pull the image URLs that technically this should work the same as opening an image file in my browser.

I am not able to wrap the text in the slicer

The text within the chiclets is very big, so i am trying to text wrap the same. But i am not able to do it. Can you please help me with this?

Allow image from a Measure

To better serve the dynamic nature of slicers please allow the image to be provided from a measure in a table. I create custom SVGs based on filtered data and currently this is a large limiting factor.

The slicer accepts the svg's populated from a calculated column but not from a measure.

Does not work an the Aug Preview of Power BI Report Server

Printing issue

Hi

I am over the chiclet slicer, my users find it extremely useful when they are picking out granular detail from an overview. It's clear, compact and almost perfect.

Except they want to print... And when they print, the chiclet sliver come out scrolled to the top and they can't see what they selected.

Is there something I can do with the slicer to avoid this? Is there a workaround?

Thanks in advace!

Colour formatting options for individual chiclets

Show disabled not working

In a Power BI report I have a slicer with months and they keep disappearing instead of just showing as disabled. I have tried every option but it always hides the unavailable ones.

Not working with Bookmarks

When using bookmarks, the status of buttons on the visuals do not change, even when values on report does, leading to misreading info.

"Sync Slicers" Feb 2018 Feature

Love this slicer.

Any idea about whether it can be included with the February PowerBi desktop release of "Sync Slicers" allowing it to apply across multiple pages ?

Chiclet Slicer behavior not in line with standard slicer

Normally when a Slicer does not have any options selected Power BI displays all data without filtering. With the Chiclet slicer this behavior is reversed and only specifically selected data is shown with no data shown if no selections are made, this should be changed to match normal slicer behavior or an option to default "no selection" behavior to "all".

ChicletSlicer doen't work in Power BI Report Server January 2021

Hello,

In PBI RS (January 2021) ChicletSlicer is hidden if users sign in with chrome and edge but in firefox it works. Do you know why this happens?

Thank you in advance.

Regards,
Nicolas Calvo

Ignoring Page Level Filters

The slicer is ignoring page level filters. it is showing all items instead of the ones filtered out by the page level filter. The regular slicer also ignores page level filters. If this is by design please allow visual level filters so we can filter our slicers.

When will this version be deployed?

This alert has been visible for three months. The repository says 2.0.5.0 so when will it be pushed to AppSource or otherwise made avalable?

2 different images selected/unselected or different bakcground color for each chiclet

Hi guys, I need your help!

The company that I work for has several brands and stores, so I need at least 4 chiclets that when they are selected, each one has a different background color (when unselected will become grey, same behavior for all of them).

Another solution could be different images for selected/unselected(circular chiclets with one or two letters). This will be a great solution, because we are looking for an Outlook Style. At this moment I can't get circular chiclets, there isn't an option for that.

I hope you can help me!

Thanks!
Martín

Selecting all or none chiclets

I am wondering if it is intended behaviour of this slicer-visual that when I select all chiclets, the filtering behaviour is exactly the same as unselecting all chiclets (having none of the chiclets selected). Intuitively I would expect no related information to be shown in my visuals when no chiclets are selected and have all related information shown when all chiclets are selected.
Is it possible to make such an adjustment. Including a default setting which chiclets should be selected ?

Enable chicklet controls at all times

When the Chicklet visual is filtered such that there are no Cateogries to pick from, the ability to modify the Chicklet properties (size, columns, colors, image split etc) is no longer available.

Is this the intended behavior?

This is frustrating because we must either temporarily change the Category and/or filtering of the visual to something with data in order to modify chicklet settings. This seems contrary to most other visuals, which allow you to modify properties regardless of whether or not there is currently data shown.

Visual rendering error

Visual disappears after a few minutes on the Power BI Service page, it always has to reload to appear again...

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Question: Displaying the count within the box

Hi,

I'm new to power bi. I would like to know how easy it is to display the count of the field placed in the "fields".

Regards,
Joe

Poor performance

Will this visual ever be updated?

https://microsoft.github.io/PowerBI-visuals/docs/how-to-guide/performance-tips/

Like for example aligning this to the new custom visual API.

Load times are way much higher than normal slicers.
This can now be seen in the new Performance Analyzer tab but also in the Chrome dev tools profiling.

Does not honor Bookmark option for DATA = True

Do this:

1. Add a standard slicer to a page
2. Add a Chiclet Slicer to a page and configure it
3. Make sure that all slicers are CLEARED, and add a Bookmark.
4. For the Bookmark, set the Data option ON, all others OFF. Set the All Visuals option ON.
5. Test it out by selecting a value from the standard slicer, and a value from the Chicklet slicer.
6. Now activate the Bookmark (I do it through a button on all pages)

As a "SLICER" I have expectation that the Chiclet slicer will get 'cleared' just like the standard slicer does when activating the Bookmark.

It does NOT.

Chiclet Slicer v1.4.5: Property "Show Disabled" not working?

Hi

I use the chicletSlicer.1.4.5.0.pbiviz in Power BI Desktop (optimized for Power BI Report Server June 2017), and connect to a SSAS Tabular model.

The slicer has a property "Show Disabled" with options "Inplace", "Bottom", "Hide"
Can it be that this propery has no effect? Always all Dim-items are available in the slicer, independet whether they have corresponding Facts-items or not.

When i connect the same SSAS Tabular model with Excel 2013, and add a slicer there, unused Dim-items are disabled.

Greetings, Stolzi

Internet Explorer Issue

I know that Internet Explorer (IE) is not supported anymore, but many people are still using it as the default browser and there are a lot of requests on various projects that Power BI reports should work on IE.

So, there is a problem in Internet Explorer if the chiclet height is lower than 20. I tried to use the smallest possible Text size (8 pt) and the smallest Height (16) in order to be able to display multiple years in the same screen. In Chrome, MS Edge and Firefox it is displayed correctly. However, in Internet Explorer the text is shifted and it does not fit anymore the chiclet (Chrome is in the left, IE is in the right, outline color is white):

Background and border toggle/transparency

Please consider adding the ability to disable backgrounds and borders, so that only the button text or image is visible.

In my use case, I have 2 icons: light & dark theme.
There's currently no way to make this visual seamless while switching between the two "themes" (colour functions on visuals).

Not filtering data properly

I have a new issue with this slicer - which I love, btw.

We have a Yes/No toggle using this slicer on 100% of our reports currently. No is the default value. It had been working beautifully until 10/23 when the users began to report to me that when they click Yes - all that happens is that the "Yes" side of the toggle is selected. The data on the report does not change. Then when they click "No" - the toggle changes & the data changes to reflect the "Yes" data set. This is causing chaos in our reporting and I am removing the chicklet slicer in a matter of minutes to ensure the data is correct.

On the powerbi store - I have seen a few other comments along these lines - that the slicer does not select the correct data. Wanted to make sure you were seeing these things.

If there is a way I can be of assistance in resolving this - please do let me know. I would much prefer this option rather than the check-box that I am moving back to.

it's empty when I put data in Category and values. It works before. I don't know why

Issue with Chiclet Slicer on PowerBI Embedded

Hi,
I have been facing a bug for the past few days with the chiclet slicer.
I use it across my dashboards and it works perfectly on the Desktop version. But once my reports are shared online, I have been noticing (and other users of my dashboards have been noticing the same) that the chiclet slicers are not working properly: when I open the dashboard "online", I see the first toogle selected, but the data isn't filtered accordingly. Can you help me?

Thanks,
Loredana

Taking a long time to load the images when reports are embedded to Sharepoint

Hey, I am using images stored on SharePoint to be displayed in Chicklet slicer. They doesn't show up on Power BI desktop but they do show up properly on Power BI service.
The problems I am facing are:
When I am loading the report on to Power Point, the images are not displaying in the PPT.
When I embedded the report on to share point iframe, it is taking a lot of time to load the report. When I debug, I see that the images are taking a lot of time to load.
Is there a way to solve this?

Forced Selection Does not work when you hide the slicer

Hi

as describe in the title: when I hide the chicklet slicer in the power bi report it, the forced selection stops working at least when you switch from one user to the other (based on RLS).

For Example, let assume we have two users one have a role on the US and another have a role on the UK (off course one user might have multiple roles)

I was using the forced selection to force the first role of a user but this only work when its not hidden.

is it possible to fix that?

chiclet slicer running very slow

chiclet slicer is taking too much time to load in the report after applying filters, is there any solution or any way to fix it??

ChicletSlicer is not rendering

Hello everyone,
happens very often that the Chiclet Slicer is not rendered at all.
This happens only on web version (never on Desktop App) after some minutes I browse the pages of the report.
Everytime I have to reload the page (CTLR+F5) or clear the browser cache to resolve the issue.
Is there any solution ?
Thanks!

Federico

update the AppSource market place meta data

you need to update the market place meta data
https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104380756?tab=Overview

it says "Updated 3/21/2017" but says "Version 1.6.2.0"

as it now has sync slicer functionality, it looks like you have released the latest version, but have not announced it.

set chiclets so ALL are selected rather than just one

we like the chiclet slicer but have noticed in embedded web pages - the page defaults to activate one of the chiclets and then the users have to click that chiclet to activate them all. Is there a way to default the embedded report so show all?

Editing visual using pbiviz

Hi,

I am new to developing visual (or development of any sort) so any help here would be greatly appreciated.

I am hoping to customise this visual for my needs as it does almost everything I want it to do but doesn't allow a few small things;

1. The 'Category' text to wrap if too long. Currently it just adds ... if text is too long.
2. Change of Font - as far as I can see the Category font can not be changed
3. Remove the forced chiclet background colour - currently it allows me to choose different colours but no option to make the background completely transparent.

So the intention is to use this visual and add the above capabilities.

I have set up with all the tools as per the latest guides online however when I try to debug this visual using pbiviz start function, I get various errors

PS C:\users\admin.as\chiclet> pbiviz start
warn For better development experience, we strongly recommend converting the visual to es2015 modu
warn https://microsoft.github.io/PowerBI-visuals/docs/latest/how-to-guide/migrating-to-powerbi-vis
error Could not find sourceFile: '.api/v1.13.0/PowerBI-visuals.d.ts' in ["C:/Users/admin.as/AppData
odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.d.ts","C:/Users/admin.as/AppData/Roaming
owerbi-visuals-tools/node_modules/typescript/lib/lib.es5.d.ts","C:/Users/admin.as/AppData/Roaming/npm
bi-visuals-tools/node_modules/typescript/lib/lib.dom.d.ts","C:/Users/admin.as/AppData/Roaming/npm/nod
isuals-tools/node_modules/typescript/lib/lib.webworker.importscripts.d.ts","C:/Users/admin.as/AppData
odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.scripthost.d.ts","src/chicletSlicerProps
.ts","src/interfaces.ts","src/tableView.ts","src/webBehavior.ts","src/chicletSlicer.ts","C:/users/adm
precompile/visualPlugin.ts"].
error undefined
error ENOENT: no such file or directory, open 'C:\users\admin.as\chiclet.tmp\build\visual.js.map'

I then used to pbiviz update function after which pbiviz gave me the following errors

PS C:\users\admin.as\chiclet> pbiviz start
warn For better development experience, we strongly recommend converting the visual to es2015 modu
warn https://microsoft.github.io/PowerBI-visuals/docs/latest/how-to-guide/migrating-to-powerbi-vis
error Could not find sourceFile: '.api/v1.13.0/PowerBI-visuals.d.ts' in ["C:/Users/admin.as/AppData
odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.d.ts","C:/Users/admin.as/AppData/Roaming
owerbi-visuals-tools/node_modules/typescript/lib/lib.es5.d.ts","C:/Users/admin.as/AppData/Roaming/npm
bi-visuals-tools/node_modules/typescript/lib/lib.dom.d.ts","C:/Users/admin.as/AppData/Roaming/npm/nod
isuals-tools/node_modules/typescript/lib/lib.webworker.importscripts.d.ts","C:/Users/admin.as/AppData
odules/powerbi-visuals-tools/node_modules/typescript/lib/lib.scripthost.d.ts","src/chicletSlicerProps
.ts","src/interfaces.ts","src/tableView.ts","src/webBehavior.ts","src/chicletSlicer.ts","C:/users/adm
precompile/visualPlugin.ts"].
error undefined
error ENOENT: no such file or directory, open 'C:\users\admin.as\chiclet.tmp\build\visual.js.map'

I then tried the following - npm install jquery -p

After which, pbiviz start did "work" however now I am at the point where the visual is blank.

Please would someone able to advise how best to achieve what I am looking to do?

Many thanks

Random error on the slicer

Hi,
Since a week i have a random error on my report wich worked fine before :

regards

Filter background showing white line randomly

In the Power BI Report we have more than 10 chiclet slicers and among them few slicers showing white line in the background randomly if any value get selected.

This issue has observed on power BI ipad version

Please find the attached screen shot of the slicers.

Cannot Use with Custom Theme

Writing this issue based on the conversation in this thread as well as my own experience.

To Summarize:
Putting the following code in a custom theme.json file will not correctly update all of the visual settings of the Chiclet Slicer.

"ChicletSlicer1448559807354" : {
			"*": {
				"general": [{
					"orientation": "Horizontal"
				}],
				"header": [{
					"show":  false
				}],
				"rows": [{
					"height": 55,
					"width": 55
				}],
				"border": [{
					"show": true
				}]
			}
		}

From the thread and my own testing, only "border": [{ "show": true}] works.

@EugeneElkin Commented in the thread saying:

There are some limitations regarding applying of themes for Chiclet slicer because it still uses API 1.13 and there is specific reason why we cannot update it to API 2.x for a while

Is he correct? What is this "specific reason"? Is the API upgrade somewhere on the project roadmap? If I / someone wrote a patch would a pull request be reviewed and possibly accepted?

Chiclet Slicer isn't working anymore in Power BI App - Version September 2019

Hello everyone,

Problem description:

If you view the chiclet slicer on tablet or mobile devices (in Power BI APP) the slicer is not rendered, when an item is pre-selected or if you select an item and switch pages by bookmarks (since the latest update from September 2019). Report was built in Power BI RS Version.

I would be glad to get a response concerning this topic.

Best regards
Christian

PS: It seems like its a common issue -> https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104380756?src=cismktblog&tab=Reviews

Add a tooltip feature so that chiclet text that is wider than the chiclet can be displayed.

This is similar to the issue raised regarding word wrapping. However, we have some users who would prefer that the height of each button/chiclet remain consistent if the text is wider than the button. So if word wrap existed and were turned off, it would be beneficial to allow the text to appear in a tooltip. So if multiple list members have long text with similar starting text, a user can differentiate between them by hovering over them with the mouse cursor.

Need an Option For a Select ALL Button

The Chiclet Slicer needs an option to turn on a select all button much like the regular slicer button has.

v1.4.9: Not filtering data properly on PBIRS on-premises March 2018

Hi

On Power BI Report Server on-premises March 2018, the Chiclet Slicer doesn't work properly
I have a report with a Table and a Chiclet slicer.

• The Chiclet Slicer has DimDate Year as the category.
• Pre-selected is the current year 2018
• Forced selection = On
• The report is connected to SSAS 2014 Tabular model

In Power BI Desktop Optimized for PBIRS March 2018, everything is OK, the data in the table is filtered.
Problem: When I publish the report to PBIRS March 2018, and initially load the report, the data is NOT FILTERED, the data is the sum of ALL years

• When I select another tab (on the bottom navigation), and go back to the first tab, the data is correct filtered, data is only the sum of the year 2018
• When I initially load the report (to have again the wrong unfiltered state) and press the Refresh button, the filter is applied, data is only the sum of the year 2018

Conclusion

• It looks like that the saved preselection of the Chiclet Slicer items is not applied on initial load of a PBI report.
• I already had the same problem with version 1.4.8
• It was correctly working on PBIRS June 2017 and Chiclet Slicer 1.4.0

Another problem with v 1.4.0

• I can change the pre-selection in PBI Desktop (as an example I change the year from 2017 to 2018), but when I publish the report to PBIRS March 2018, the slicer still has the year 2017 as preselection (filtering is well working here).
• That means v 1.4.0 isn't a workaround for us.

Is this problem already known? Does it give a workaround?

Greetings
Roli Kreis

Dropdown Support

Is there any plan to provide dropdown view support?
Your Forced selection feature and dropdown view will together make a great set of combination.

Chiclet filter no longer working on Published Power BI

The filtering of Chiclet works when using the Power BI Desktop, but once I publish it none of the Chiclet Slicer filter based on a Matrix Table selection. I have already deleted the dataset/report and republished the PBIX files and this did not fix the issues. This issues just started recently (within the past 3-4 days). Before that everything was working correctly. Does not matter which browser is used (Chrome, IE11, Edge). Other user also experience the same issue viewing my dashboard.

Accessibility -- Unable to interact with visual using keyboard only.

Unable to interact with visual without using the mouse.

No attempt to interact with the visual using the keyboard produced any result. Tried all keyboard shortcuts in the CTRL + ? menu. This is true in Embedded, Service, and Desktop.

The plan is to use this visual in Power BI Embedded (not publish to web) on a public facing website, but this visual needs to be accessible to those who may only use keyboards.

Format Text in Non-Selected Chiclets

Great visual, however, I would like to propose the following enhancement:

• To be able to format text color for each of the Chiclet coloroptions.

F.i. if I format my selected chiclet black and the text white (or any other light color), I can't leave the non-selected chiclet white, because the text would be unreadable. I would apppreciate if I could format that to black (or any other color).

Basically: for each of the Chiclet coloroptions (Unselected and Disabled) I'd like coloroptions for text and hover.

Many thanks in advance...

Chiclet Slicer with Text and Images Horizontal Orientation not working

I am trying to display the images and Text Horizontally in Chiclet slicer, could you please advise how to achieve this feature.

Version Details

Chiclet slicer doesn't behave like other slicers with apply all slicers and clear all slicers buttons

https://learn.microsoft.com/en-us/power-bi/create-reports/buttons-apply-all-clear-all-slicers?tabs=powerbi-desktop
https://powerbi.microsoft.com/en-us/blog/deep-dive-into-the-new-apply-all-slicers-and-clear-all-slicers-buttons/

With "Apply all slicers" button on the page, slicers:

1. Allow selections, and visually show the selections, but selections do not impact other visuals
2. An icon indicator shows on slicer header to indicate a pending selection.
3. Selections are applied when the "Apply all slicers" button is clicked.
4. Clear selections on the slicer is applied immediately, and not pending until "Apply all slicers" button is clicked.

The chiclet slicer:

1. Allows selections, but does not visually show the selections, but selections do not impact other visuals.
2. No icon indicator shows on the chiclet header to indicate a pending selection.
3. Selections are applied when the "Apply all slicers" button is clicked.
4. Clear selections on the slicer is not applied immediately, and pending until "Apply all slicers" button is clicked.

With "Clear all slicers" button on the page, slicers:

1. Are all cleared when the "Clear all slicers" button is clicked.
2. If "Apply all slicers" button is also on the page, the "Clear all slicers" button click is applied immediately, and not pending until "Apply all slicers" button is clicked.

The chiclet slicer:

1. Are not cleared when the "Clear all slicers" button is clicked.

Better formatting for selected Chiclet

The visual is fantastic. I was just wondering if it is possible to add better formatting options for the selected chiclet; that is for the selected text font and colour and selected outline colour.
I have guidelines on how dashboard buttons should look, and the required selected button colour is dark. This makes it is hard to see the text when the chiclet is selected. I would like to change the text colour to white when a chiclet is selected. Also, I would appreciate it if we could change the outline colour as well, for the visual appeal of it.
If you could add these options, that would be amazing.

Slicer API not working

setSlicerState is not working (in Power BI Embedded)

is it because this is not a real "slicer" type? (naming reveals the visual.type is ChicletSlicer1448559807354)

also, would it support setting the state by the Values and not the Category field? this would be very useful

Bookmarking/link possibility missing

It would be nice to have a link functionality to another dashboard or bookmark when selecting items in slicer.

best regards.

Terje