Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago
Solved

Support other visuals' selection in custom slicer

Hi, I have the following task.

Table DATA has columns: Date, Type, Company, Object, Device, Actual. Table DATES has only one column Date (the table is DISTINCT(DATA[Date]) in DAX). I need to draw chart for some days (two on the picture) before selected date. So I put default slicer visual (top center) to select DATES[Date] and create measure (center) to get max value. After that I try to make custom slicer visual (right) to select required days for chart visual (bottom right) from DATA[Date] using defined measure.

Used code:

// ISelectionManager creation in visual constructor
this.selectionManager = options.host.createSelectionManager();

// ISelectionManager usage in visual update
const selection: ISelectionId[] = [];
// ... filling selection ...
this.selectionManager.select(selection);

Question A. Is there any simplier approach?

When I try to select specific item in default matrix visual (left) that last selection is cancelled.

Question B. How can I support selection made in other visuals (default or custom) in my custom slicer visual?

I saw Sample Slicer project but there is too much code with insufficient description.

Question C. Does "Sample Slicer" contain information that I need? Where should I watch?

 

Need Help
Tutorial Requests

13 Replies

    • Anonymous's avatar
      Anonymous
      Not applicable
      7 years ago

      Thank you, v-evelk 

       

      Before I had received your answer I decided to build custom chart visual and filter dates programmaticaly there. After I had completed I returned to topic problem.

       

      I describe steps to achieve the goal. It may be useful to someone.

      1) Install powerbi-models using following command in project folder.

       

      npm install --save powerbi-models

      2) Add link to pbiviz.json.

       

      "externalJS": [
    "node_modules/powerbi-models/dist/models.js"
  ]

      3) Add link to tsconfig.json.

       

       

      "files": [
    "node_modules/powerbi-models/dist/models-noexports.d.ts"
  ]

      4) Add following code to update method. (The date to be selected should be under first (zero index) category.)

       

       

       

                          const conditions: IAdvancedFilterCondition[] = [
                        {
                            operator: "GreaterThanOrEqual",
                            value: new Date(startMillis) // First date.
                        },
                        {
                            operator: "LessThanOrEqual",
                            value: new Date(endMillis) // Last date.
                        }
                    ];
                    const categories: DataViewCategoricalColumn =
                        options.dataViews[0].categorical.categories[0];
                    const target: IFilterColumnTarget = {
                        table: categories.source.queryName.substr(
                            0, categories.source.queryName.indexOf('.')),
                        column: categories.source.displayName
                    };
                    const filter: IAdvancedFilter =
                        new window['powerbi-models']
                            .AdvancedFilter(target, "And", conditions);
                    this.visualHost.applyJsonFilter(
                        filter, "general", "filter", FilterAction.merge
                    );

       

       

    • Anonymous's avatar
      Anonymous
      Not applicable
      7 years ago

      v-evelk, additional question. How can one support others' selection in custom matrix visual? I see 

      IFilterKeyHierarchyTarget but how to fill it and how to set conditions for all levels of hierarchy? This topic tells that only one filter can be applied.
      • v-evelk's avatar
        v-evelk
        Microsoft Employee
        7 years ago

        I am not sure about matrix. If it uses selectionManger, you can try to use selectionManager with the second parameter as 'true' to enable multi-selection.

         

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

         

        Regarding IFilterKeyHierarchyTarget I will ask our engineers and provide info here later.

         

        Kind Regards,

         

        Evgenii Elkin,
        Software Engineer
        Microsoft Power BI Custom Visuals
        [email protected]