topic Re: Custom visuals ItemFlagsSelection formatting settings in Developer

Custom visuals ItemFlagsSelection formatting settings

Vil — Sat, 01 Jun 2024 08:34:17 GMT

I'm trying to use flags selection in my Power BI Custom Visual. In settings.ts I have defined the formatting setting like this:

An it matches this one in cababilities.json

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?

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Mon, 03 Jun 2024 02:10:34 GMT

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

Re: Custom visuals ItemFlagsSelection formatting settings

Vil — Mon, 03 Jun 2024 05:49:19 GMT

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?

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Fri, 07 Jun 2024 05:44:24 GMT

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

Re: Custom visuals ItemFlagsSelection formatting settings

Vil — Fri, 07 Jun 2024 10:02:21 GMT

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!

Re: Custom visuals ItemFlagsSelection formatting settings

EscritórioDados — Fri, 26 Jul 2024 22:40:58 GMT

I tried many configurations, but none of them worked. The problem for me is that I don't know how to show the checkbox as checked when it appears for the first time. If I can solve this, using the update function will be easy. I have spent many hours on this, but it never works.

Re: Custom visuals ItemFlagsSelection formatting settings

Vil — Sat, 27 Jul 2024 08:48:56 GMT

Thanks @EscritórioDados for the try. I spent also countless hours trying to solve it, but in the end, I had to proceed with a workaround. It's a shame these are so poorly documented. Another formatting setting type, "FieldPicker," is also similar that I just cannot get to work.

Re: Custom visuals ItemFlagsSelection formatting settings

EscritórioDados — Sat, 27 Jul 2024 16:32:54 GMT

I tried with another fields to store de values. But the checkbox needs value equals to zero to be checked and it's impossible to know wich item is clicked.
The itemFlagsSelection returns zero if the item is checked. The value of the group return the first item. It's impossible to know where the user have clicked.

Re: Custom visuals ItemFlagsSelection formatting settings

dm-p — Sun, 28 Jul 2024 23:03:55 GMT

Hi @Vil,

I had similar challenges with the FieldPicker type, so I contacted MS for support (as they don't monitor these forums). They confirmed that it is unsupported, is included in the typings due to an oversight, and would be removed from the API in a subsequent version. While this is annoying, I got some closure on what I was trying to do (although I don't have any other workaround for what I want).

Due to your thread, I reviewed the ItemFlagsSelection implementation. I couldn't get it to work as expected, and I'd suggest you do the same as me - contact MS at pbicvsupport@microsoft.com for confirmation on how it should work with a suitable example, as the documentation is unclear. They may also confirm the above, which will again be annoying, but you will know that your workaround may be how you have to do it.

From my own perspective, I think for this to work how we would want, this needs a CompositeSlice (like FontControl or MarginPadding) where the individual properties (left, right, top, bottom) can be accessed and assigned.

Good luck,

Daniel

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Fri, 02 Aug 2024 14:16:43 GMT

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.

Re: Custom visuals ItemFlagsSelection formatting settings

Vil — Tue, 30 Jul 2024 10:33:09 GMT

Hi @dm-p,

Thanks for the hint. I'll do that.

Have a good one!

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Tue, 30 Jul 2024 10:38:59 GMT

Please, look at my reply. There's an explanation how to make it work.

Re: Custom visuals ItemFlagsSelection formatting settings

EscritórioDados — Tue, 30 Jul 2024 13:26:16 GMT

v-asoronov
Microsoft Employee

I 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?

Alexandre

Re: Custom visuals ItemFlagsSelection formatting settings

Vil — Tue, 30 Jul 2024 13:35:51 GMT

Thanks @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!

Re: Custom visuals ItemFlagsSelection formatting settings

EscritórioDados — Tue, 30 Jul 2024 16:08:24 GMT

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?

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Fri, 02 Aug 2024 11:24:15 GMT

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.

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Fri, 02 Aug 2024 14:18:27 GMT

Hello @Vil , I created the GitHub example as you suggested and also modified my example. Please, read above.

Re: Custom visuals ItemFlagsSelection formatting settings

Vil — Mon, 05 Aug 2024 05:36:33 GMT

Hello @Anonymous,

Thank you! Example was a big help and I finally got it to working. I'll mark this as accepted solution.

Once again thanks!

Re: Custom visuals ItemFlagsSelection formatting settings

Anonymous — Wed, 21 Aug 2024 09:10:15 GMT

@Vil @EscritórioDados @Anonymous @dm-p , hello again! The issue is fixed and published in powerbi-visuals-utils-formattingmodel@6.0.3. Please, update the package and try it out!

Here's the bug explained, if you want to learn.