diff --git a/Capabilities/Capabilities.md b/Capabilities/Capabilities.md index eeded536..7722dce2 100644 --- a/Capabilities/Capabilities.md +++ b/Capabilities/Capabilities.md @@ -88,4 +88,10 @@ Types refer to what the property will be. See below for more information about t } ``` -[Learn more about objects](Objects.md) \ No newline at end of file +[Learn more about objects](Objects.md) + +##Handle partial highlighting - `supportsHighlight` + +By default this value is set to false which means your "Values" will be automatically filtered when something on the page is selected which will in turn update your visual to display just the selected value. If you want display the full data, but just highlight the selected items you need to set `supportsHighlight` to true in your capabilities.json. + +[Learn more about highlighting](Highlighting.md) diff --git a/Capabilities/Highlighting.md b/Capabilities/Highlighting.md new file mode 100644 index 00000000..c0fb1f60 --- /dev/null +++ b/Capabilities/Highlighting.md @@ -0,0 +1,13 @@ +#Highlighting + +By default whenever an element is selected the `values` array in the `dataView` object will be filtered to just the selected values. This will cause all other visuals on the page to display just the selected data. + +![highlight dataview default behavior](images/highlightDataView.png) + +##supportsHighlight + +If you set the `supportsHighlight` property in your capabilities.json to true you will receive the full unfiltered `vaules` array along with a `highlights` array. The `highlights` array will be the same length as the values array and any non-selected values will be set to `null`. With this property enabled it is the visual's responsiblity to highlight the appropriate data by comparing the `values` array to the `highlights` array. + +![highlight dataview supportsHighlight](images/highlightDataViewSupports.png) + +In the example above you'll notice that the one bar that is selected is the only value in the highlights array. It is also important to note there could be multiple selections and partial highlight (where the corresponding numeric value in the values and highlights arrays will be present but different) \ No newline at end of file diff --git a/Capabilities/images/highlightDataView.png b/Capabilities/images/highlightDataView.png new file mode 100644 index 00000000..aaa415f7 Binary files /dev/null and b/Capabilities/images/highlightDataView.png differ diff --git a/Capabilities/images/highlightDataViewSupports.png b/Capabilities/images/highlightDataViewSupports.png new file mode 100644 index 00000000..32e25ad5 Binary files /dev/null and b/Capabilities/images/highlightDataViewSupports.png differ diff --git a/Readme.md b/Readme.md index 7ccc2b45..3ecb67a7 100644 --- a/Readme.md +++ b/Readme.md @@ -42,6 +42,7 @@ In this tutorial, you will be building a simple bar chart. The source code is lo * [Data Roles](Capabilities/Capabilities.md#define-the-data-fields-your-visual-expects---dataroles) * [Data View Mappings](Capabilities/DataViewMappings.md) * [Objects](Capabilities/Objects.md) + * [Highlighting](Capabilities/Highlighting.md) * [Visual Documentation](Visual/Visual.md) * [Visual/IVisual Api](Visual/IVisualApi.md) * [Handling Selection in Visuals](Visual/Selection.md)