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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
marcobaciga
Helper I
Helper I

set value field in report powerbi by custom visual

Hi,

I must in m y custom visual to send a value like filter in each visual object in my report powerbi when i click a icon.

Is it possible?

 

Thank you

 

Marco

 

1 ACCEPTED SOLUTION

This code snippet is going to address the issue:

let selectionIds = [];

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[0], 0)
    .createSelectionId()
);

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[1], 0)
    .createSelectionId()
);

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[0], 1)
    .createSelectionId()
);

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[1], 1)
    .createSelectionId()
);

selectionIds.forEach((selectionId) => {
    this.selectionManager.select(selectionId, true)
});

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

15 REPLIES 15
v-viig
Community Champion
Community Champion

There're three ways to filter/select values:

 

Please let me know if you have any questions.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Thank you @v-viig,

I have see this link Handling Visual Selection but i dont understand.

I have two categories in my custom visual and when i click i have to filter this two values.

Do you have a code for example?

 

 

Thanks

 

Marco Baciga,

BI Consultant@24Consulting

 

Could you please sahre your capabilities.json?

 

As far as I understand the requirement, you sould use this code snippet to create a SelectionId for each category:

let dataViews = options.dataViews // options: VisualUpdateOptions
let categorical = dataViews[0].categorical;

let categoryIndex: number = 0; // Index of category
let i: number = 0; // this is index of your value in the category

let selectionId = host.createSelectionIdBuilder()
    .withCategory(categorical.categories[categoryIndex], i)
    .createSelectionId();

After that, you should use selectionManager.select method to select categories:

this.selectionManager.select(selectionId, true).then((ids: ISelectionId[]) => {
    //called when setting the selection has been completed successfully
});

Please let me know if you have any questions.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Thank you @v-viig,

i try your code and it runs.

I have tried to pass the array selectionId in selectionManager.select but it doesnt run.

 

I write my code

 

let selectionId = [];

selectionId [0] = host.createSelectionIdBuilder()
    .withCategory(categorical.categories[0], 0)

   .withCategory(categorical.categories[1], 0)
    .createSelectionId();

 

selectionId [1] = host.createSelectionIdBuilder()
    .withCategory(categorical.categories[0],1)

   .withCategory(categorical.categories[1], 1)
    .createSelectionId();

 

this.selectionManager.select(selectionId, true).then((ids: ISelectionId[]) => {
    //called when setting the selection has been completed successfully
});

 

Where is wrong?

 

Thank you

 

Marco Baciga@24COnsulting

BI COnsultant

This code snippet is going to address the issue:

let selectionIds = [];

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[0], 0)
    .createSelectionId()
);

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[1], 0)
    .createSelectionId()
);

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[0], 1)
    .createSelectionId()
);

selectionIds.push(host.createSelectionIdBuilder()
    .withCategory(categorical.categories[1], 1)
    .createSelectionId()
);

selectionIds.forEach((selectionId) => {
    this.selectionManager.select(selectionId, true)
});

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

I tried this snippet under Power BI API 2.1, it works fine for the first row, then it continues to work only for that row, so I can deselect it, select again, etc. And another control (e.g. Donut chart) displays selected value highlighted while I would expect all other values filtered out and only selected one displayed. Then if I select another row, Donut chart displays "Can't display the visual" error.
Even if I deselect that another row and select the 1st row back, I still get that error.

Under API 1.13 this snippet has no effect.

So what I want to know is how can I filter out unselected rows, not just highlight selected ones, so my slicer to work like HierarchySlicer or Sample Slicer.

Is the only way to achieve this is to use Interactivity Service?

 

Here is how I did this. First I added a check box for each of options.dataViews[0].categorical.categories[0].values both to control and this.checkboxes list so that i in snippet below represents row index and then when user checks or clears any checkbox, I clear selection and add each row index to it.

private onCheckBoxChange() {
    this.selectionManager.clear();
    for (let i = 0; i < this.checkBoxes.length; i++) {
        const checkBox = this.checkBoxes[i];
        if (checkBox.checked) {
            for (let category of this.updateOptions.dataViews[0].categorical.categories) {
                const selectionId = this.selectionIdBuidler
                    .withCategory(category, i)
                    .createSelectionId();
                this.selectionManager.select(selectionId, true);
            }
        }
    }
}

  selectionManager and selectionIdBuilder are created in constructor

constructor(options: VisualConstructorOptions) {
    this.selectionManager = options.host.createSelectionManager();
    this.selectionIdBuidler = options.host.createSelectionIdBuilder();
    ...
}

and the checkboxes in update method

public update(options: VisualUpdateOptions) {
    ...
    const values = options.dataViews[0].categorical.categories[0].values;
    for (let i in values) {
        const value = values[i];

        const checkBox = document.createElement("input");
        checkBox.type = "checkbox";
        checkBox.addEventListener("change", () => this.onCheckBoxChange());
        this.checkBoxes.push(checkBox);
        ...
    }
    ...
}

 

v-viig
Community Champion
Community Champion

Do you want to imlement a Slicer to filter data out?

 

If so, please use JSON Filter.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

I just want to implement the same behavior as SampleSlicer has in the bottom part: show list of possible values, where some of them can be checked and all unchecked filtered out.

Is JSON filter suitable for this task? I though it is primarily intended to be used for range filters and I need to use something different that allows to select discrete values..

v-viig
Community Champion
Community Champion

Yes, JSON Filter can be used to filter data. In your case you shoould use BasicFilter.

You can find details in powerbi-models documentation.

 

const basicFilter: models.IBasicFilter = {
  target: {
    table: "Products",
    column: "Version"
  },
  operator: "In",
  values: [
    1,
    2,
    3,
    4
  ]
};

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

What confuses me is that data I need to filter contains 5 string (and some more numeric) columns and 25-30000 rows. Primary key is those 5 string columns and user can select up to 15000 rows to display. And If I choose to use JSON Filter, I would probably need to use IAdvancedFilter with 5 'in' conditions each of which 'values' field contains up to 15000 elements string array. Would it be the best way to filter from performance standpoint?

 

Upd: I went ahead and attempted to implemented advanced filter with 5 'in' conditions and figured out that it doesn't support this type of condition. And basic filter can filter only one category..

Upd2: And advanced filter as well

v-viig
Community Champion
Community Champion

Correct. There's no way to filter by two or more columns at the same time.

 

Such a feature is landing soon (most likey by end of this year).

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

No way. I can't wait that long. HierarchySlicer can already do this and I probably can filter in the same way it does. How does it do this?

v-viig
Community Champion
Community Champion

Hierarchy Slicer is on legacy API so far but it will be converted to PBI Custom Visuals API soon once multi column filtering API is released.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi v-viig

 

I tried cross-filte by cross-select as below.

 

--------------------------

let rowSelection: ISelectionId = this.visualHost.createSelectionIdBuilder()
                .withTable(this.dataView.table, rowIndex)
                .createSelectionId(); 
await this.selectionManager.select(rowSelection, true).then(result => {
            console.log(result);
        });
-------------------------------
 
result is just like below
-------------------------
  1. [t]
    1. 0: t
      1. dataMap:
        1. {"identityIndex":0}: [{…}]
        2. [[Prototype]]: Object
      2. deepestNodeLevelInPath: -1
      3. key: "{\"{\\\"identityIndex\\\":0}\":[{\"identityIndex\":0}]}[]"
      4. measures: []
      5. nodeIsCollapsed: null
      6. [[Prototype]]: Object
    2. length: 1
    3. [[Prototype]]: Array(0)--------------------------------
 
But this didn't cross-select the passed selectionID row in other visuals of the page.
What could be the reason. Any specific config setting in tsconfig, capabilities.json or webpack.config
Please advise.
 

Thanks in advance,

Lasantha

Thanks @v-viig,

it is run.

 

Marco Baciga

BI Consulting@24 Consulting

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

July Newsletter

Fabric Community Update - July 2024

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

Top Solution Authors
Top Kudoed Authors