Tag Archives: PBIVIZ
Power BI Custom Visual Sorting
Sorting can be used for defining an order direction for your Custom Visual. There are 3 different ways using which you or a user using your visual can sort your visual. They are as follows: Default Sorting: This is the easiest sorting option and gives users the ability to sort the visual by any field used in the visual. The following code needs to be added to the capabilities.json file. “sorting”: { “default”: { } } After this the user will get the below sorting option: Implicit Sorting: Implicit Sorting can be used for pre-defining your sorting order in your capabilities.json file. Here, the user cannot manually change the sorting order. This can be done with the following code block where direction 1 is ascending and 2 is descending. Role is the data mapping name for which you would like to define your sorting. “sorting”: { “implicit”: { “clauses”: [ { “role”: “category”, “direction”: 1 } ] } } Custom Sorting: Custom sorting can be used for defining sorting in your visual.ts file and not in the capabilities.json file. Since you are defining your sorting order in your code, you can use various different logics to define your sorting(For example, you can define a formatting toggle option in the format pane that will sort the visual when turned on). A simple codeblock that can be used for sorting your datapoints in ascending order is as follows. sort((obj2, obj1) => { if (obj2.category< obj1.category) return -1 else return 1; }); With so many options available, it is pretty easy create a visual just the way the user wants.
PBIVIZ Single Line Toggle Format Option Tip
We can add various Visual Formatting Options while developing a Power BI Custom Visual. One of them is the Toggle feature which is useful for adding or removing particular abilities to your visual or perform any similar boolean operations. The json bit for the toggle option looks like this. By default when you add a toggle option, the option is available under a dropdown. To access the toggle option you will always have to click on the dropdown arrow. There is a neat little trick that can make you access the toggle button directly rather than clicking on the dropdown button every time. You only need to change the required toggle property name to “show”. Note: The object name for the toggle option needs to be changed to “show” in the visual.ts file as well. Your toggle option should look like this now!