Forum Discussion

andres777's avatar
andres777
Advocate III
6 years ago

Power BI Custom Visuals binding to Report Calendar

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

Need Help

1 Reply

  • andres777's avatar
    andres777
    Advocate III
    6 years ago

    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.