Power BI Custom Visuals binding to Report Calendar

[andres777]

Hi Dev friends,

I'm writing my first Custom Visual this week in Power BI using the new v3 of "powerbi-visuals-api".

It's a Calendar Datepicker that allows a selection of a single date, defaults to yesterday
and usies a control I purchased from a vendor.

I got most things to work and the calendar is showing in the test report (nice),

but I'm on the last step and I need help binding the user selected date to the rest of the data in the report...

so it will filter data using my Calendar table's DATE field. (that I pass as a Grouping argument)

Most of the code I've seen online are for D3 graphs / Charts, and the slicers I found use the old libraries

which we should not try to use.

Inside my visual.ts I have the normal sections :

• import declarations
• export class Visual implements IVisual
• constructor(options: VisualConstructorOptions)
• public update(options: VisualUpdateOptions)
• parseSettings
• enumerateObjectInstances

I need some help (or point me in the right direction) to take that user selected 'date'

and make power bi report filter all other visuals, like a normal slicer.

What do you suggest ?

Note : I already have the "supportsSynchronizingFilterState": true  option inside capabilities.json to enable calendar sync, that part is working, since I have a single element I'm filtering from.

Attached a picture of the control I'm using ... (displayed from inside a Report on Power BI service)

datepicker control for PBI custom visual

My users want it to default to yesterday when they open the report... ( I created a ts formula for that)

the Today button is not enabled (as requested by them)

Thanks for all,

Andres

[andres777]

The help found so far is this recent document...

https://docs.microsoft.com/en-us/power-bi/developer/visuals/filter-api

and

Sample:

https://github.com/microsoft/powerbi-visuals-streamgraph/blob/master/src/visual.ts#L552-L556

I was trying to use the BasicFilter, with applyJasonFilter

but ended up using Advanced Filter passing both start and end dates to be the same.

converted dates with ....   value: start.toISOString().

            let advancedFilter = new AdvancedFilter(this.filterTarget, "And", [{
                operator: "GreaterThanOrEqual",
                value: start.toISOString()
            }, {
                operator: "LessThan",
                value: end.toISOString()
            }])

            //applyJsonFilter(filter: powerbi.IFilter | powerbi.IFilter[], objectName: string, propertyName: string, action: powerbi.FilterAction): void
            this.host.applyJsonFilter(advancedFilter, "general", "filter", powerbi.FilterAction.merge);

Thanks Ilfat Galief from Microsoft for your help.