Forum Discussion
Custom visuals ItemFlagsSelection formatting settings
I'm trying to use flags selection in my Power BI Custom Visual. In settings.ts I have defined the formatting setting like this:
It appears in formatting pane like this (as it should):
Issue is that when I select let's say "Left" and "Right" the later one is only saved to options.dataViews[0].metadata.objects. Any help how to work with flag selections? How can I get each selected value?
Hello Vil , Anonymous , EscritórioDados , dm-p , PowerBI custom visuals developer is here.
This reply is edited.
There are 2 components to work with flags - ItemFlagsSelection and AutoFlagsSelection. AutoFlagsSelection needs you only to specify default value and enumeration values in capabilities.json. ItemFlagsSelection needs you to specify enumeration values in formatting settings card, but in capabilities.json you may just leave empty array.
But it seems that there's a bug with ItemFlagsSelection. It gives correct value in dataView, but does not display which flags are enabled, instead it resets all of them as if nothing is checked. On contrary AutoFlagsSelection works as expected, so I suggest you to use it. Here's public repo with simple example how to use AutoFlagsSelection.
Also, I'll provide necessary steps below.
1. Specify enumeration values in capabilities.json
2. Create AutoFlagsSelection slice with default value. I'm using defaut value as empty string so no flags are checked.
3. Get the value from formattingSettings. It's represented as Number and each bit corresponds to the single flag. If the number is equal to zero, then no flags are enabled. It's a good practice to use TypeScript enums and check values that are comming from PowerBI.
18 Replies
Hello Vil , Anonymous , EscritórioDados , dm-p , PowerBI custom visuals developer is here.
This reply is edited.
There are 2 components to work with flags - ItemFlagsSelection and AutoFlagsSelection. AutoFlagsSelection needs you only to specify default value and enumeration values in capabilities.json. ItemFlagsSelection needs you to specify enumeration values in formatting settings card, but in capabilities.json you may just leave empty array.
But it seems that there's a bug with ItemFlagsSelection. It gives correct value in dataView, but does not display which flags are enabled, instead it resets all of them as if nothing is checked. On contrary AutoFlagsSelection works as expected, so I suggest you to use it. Here's public repo with simple example how to use AutoFlagsSelection.
Also, I'll provide necessary steps below.
1. Specify enumeration values in capabilities.json
2. Create AutoFlagsSelection slice with default value. I'm using defaut value as empty string so no flags are checked.
3. Get the value from formattingSettings. It's represented as Number and each bit corresponds to the single flag. If the number is equal to zero, then no flags are enabled. It's a good practice to use TypeScript enums and check values that are comming from PowerBI.
Vil EscritórioDados Anonymous dm-p , hello again! The issue is fixed and published in [email protected]. Please, update the package and try it out!
Here's the bug explained, if you want to learn.
v-asoronov
Microsoft EmployeeI tried and the same thing happens. It only keeps the items marked until you change the formatting or visual panel, cleaning everything afterwards.
I put code in the visual update to try to mark it, but the previous box returns to the original value on its own, marking only one. I can only keep one.I sent the email because of this. Would it be possible to put a simple example on github?
AlexandreThanks Anonymous for the insights!
However, I did not succeed in my testing either. I was planning to do more thorough testing at a later time. In the meantime, GitHub example that EscritórioDados mentioned would be appreciated!
Thanks!
Hi Vil ,
Can you please share some more detail information about this issue? They should help us clarify your scenario and test to troubleshoot.
How to Get Your Question Answered Quickly
Regards,
Xiaoxin Sheng
Hello Anonymous,
Thanks for the reply. I created a simple project for this here. In settings.ts I have defined ItemFlagsSelection like this:
class DataPointCardSettings extends FormattingSettingsCard { borderOptions: powerbi.IEnumMember[] = [ { value: 0, displayName: "Top" }, { value: 1, displayName: "Bottom" }, { value: 2, displayName: "Left" }, { value: 3, displayName: "Right" }, ]; border = new formattingSettings.ItemFlagsSelection({ name: "border", displayName: "Border", value: null, items: this.borderOptions, }); name: string = "dataPoint"; displayName: string = "Border"; slices: Array<FormattingSettingsSlice> = [this.border]; }and it match this capabilities.json
"objects": { "dataPoint": { "properties": { "border": { "type": { "enumeration": [] } } } } },In visual.ts there is just log and show the selected formatting settings value. It is not working as it should? It's showing only last value that I select and not all selected, if there are many. So any help how should I use ItemFlagsSelection?
HI Vil,
Perhaps you can refer to the official document 'Adding custom formatting options' part if help for your scenario:
Add formatting options to a Power BI custom visual - Power BI | Microsoft Learn
Regards,
Xiaoxin Sheng
Hello Anonymous ,
Thanks for keeping this discussion active. I have readed documentation many times but there is no example of the flagsSector. I have many other kind of formattings settings in my visual and they are working fine. This flagSelector is just something I cannot get to work.
I found a workaround but I'm not happy with it. But let's see, I'll hope someone finds the answer!
I has use the steps that Anonymous post, didn't work correctly.
The checkbox was unchecked automatically after I have click in it.I try a lot of thechnics to maintain the item state, using update method. Nothing works.
I would like to see one full example with only the ItemFlagsSelection in a card on formatting pane. Parts of codes doesn't resolve the trouble, because never works when I put into files of project on VSCode and test in app.powebi.com.
Is difficul to do this?
Hello EscritórioDados Vil , here’s public repo where you can see how to work with AutoFlagsSelection.
After tinkering with ItemFlagsSelection I think that there’s a bug with TypeScript definition of ItemFlagsSelection and another bug how it’s displayed in formatting pane.What I mean is that the value is passed into dataView successfully, but it’s not displayed in formatting pane. Instead all flags/checkbox items in formatting pane are reset.This does not happen with AutoFlagsSelection. Please try the example and provide a feedback.
