Data View Plus Filter Provider configuration
Data View Plus web part can be configured to provide column values of the selected item to the Shared Filter web part.
This enables connecting it (through the Shared Filter web part) to other Data View web parts on the page, configured as Filter Consumers.
example:
In the screenshot below we have an “HR Organization Browser” modern page, which has been implemented using 3 Data View web parts on a modern page.
Employees – shows all the company’s employees.
Employee card – shows the selected employee’s picture and selected properties in custom layout.
Employee Evaluation & Tasks – shows the selected employee’s evaluations and tasks.
The "Employees" web part on the top acts as a "Filter Provider", filtering the 2 web parts below it which display the selected employee's details.
Configuring Data View Plus as a Filter Provider is done in the following steps:
1. Add the Shared Filter web part to the page
- Add the required custom column/s
- hide the Shared Filter web part
2. Configure the Data View Plus web part as Filter Provider
- Click the "Shared Filter configuration" button, the following settings page will appear:
- In the "Filter Provider" section, add mappings between the Shared Filter custom columns created in step 1. above, and the Data View Plus web part's selected item column/s.
3. Configure the filtered web parts as Filter Consumers
- Connect each of the web parts that you want to be filtered by the selected items in the Data View Plusweb part, by mapping their relevant data source columns to the custom columns created in step 1. above.
This step is described in details in the "Shared Filter Configuration" article.
Data View Plus display configuration
As described in the
Configuring web part display page, the display configuration is all about selecting which controls you want to have and then configuring each of these controls.
By default, when you add the Data View Plus web part to the page and connect you see the following controls:
These controls are generic controls (available in all Data View Toolset web parts), refer to "
Display controls" page to learn how to configure them. To switch to Custom control, click the "Switch to advanced mode" button
(1) and then click the List control and select the Custom control
(2):
Custom control configuration
Clicking the Custom control's gear icon on the right, you'll see the following settings toolpane:
In the "Custom control content" textbox you can see the deafult control's html code. This code includes data binding tokens, which enable including dynamic data from the data source.
Click the "edit template" link to open the Template editor:
Here you can fully customize the custom display template using standard html and knckout code.
You can also use one of the available HTML snippets as a starting point:
After you select one of the snippets, update the column names inside the snippet to match the column names you have in your list, and if needed update the html code to match your exact required layout.