Custom visuals ItemFlagsSelection formatting settings

[Vil]

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?

 

[EscritórioDados]

I has use the steps that @v-asoronov 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?

[v-asoronov]

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.

[v-asoronov · Accepted solution]

Hello @Vil , @v-shex-msft , @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.

[v-asoronov]

@Vil @EscritórioDados @v-shex-msft @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.

[EscritórioDados]

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

[Vil]

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

[v-asoronov]

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

[Vil]

Hello @v-asoronov, 

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

Once again thanks!

[Vil]

Hello @v-shex-msft,

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?

[v-shex-msft]

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

[Vil]

Hello @v-shex-msft ,

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!

[EscritórioDados]

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.

[Vil]

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.

[dm-p]

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

[Vil]

Hi @dm-p,

Thanks for the hint. I'll do that. 

Have a good one!

[v-asoronov]

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

[EscritórioDados]

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.

[v-shex-msft]

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