|
|
__ NOTOC__The user-interface of each of the Data View Toolset web parts is made of display controls.
Some of the display controls are generic therefore available in all Data View Toolset web parts, while others are available only in specific web parts. The generic display-controls are:
| Control | Description | | Info & Headers | Displays several levels of configurable web part headers as well as version information. | | Menu bar | Displays top and bottom menu bars with configurable menus. | | Paging | A navigation control used together with data display control such as Table or List to allow user navigate between data pages. | | Tabs | Enables grouping the displayed data into configurable tabs. | | Groups | Enables grouping the displayed data into configurable accordion sections..
| | Table | A content-display control that displays your data using a grid UI.
| | List | A content-display control showing your data in an inbox-style responsive layout.
| | Folders | Used with the Table/List controls to optionally allow display and navigation in sub-folders. | | Filter | Dynamic filter control, enabling you to filter the connected list by various columns. In addition, end-user can add additional columns to the filter control by drag&drop the required column to the filter control area.
| | Conditional Formatting | This control enables you to configure conditional formatting rules based on column values. These rules apply to various controls that display content: table, list, org. chart and calendar.
|
The controls that are available only in specific web parts are: | Control | Description | | Picture gallery controls | Available only in the Picture Gallery web part. A set of controls displaying pictures in various layouts such as Camera slideshow, Photopile and Gallery. | | Org. chart controls | Available only in the Org. Chart web part. A set of controls that display hierarchical organization structure with many configurable properties. | | Persona card | Available only in the Org. Chart web part.
Used to display users' persona cards (when getting user information such as user profiles). | | Calendar controls | Available only in the Calendar Plus web part. The calendar control displays aggregated events from various data sources in a great-looking Calendar display (Month/week/day/agenda etc.)
| | Custom control | Available only in the Data View Plus web part.
This control enables creating a fully-customized template using html, css and knockout to implement the exact layout you require. |
The following sections provide details on each of the generic controls' functionality and configurable properties. Info & Headers control This control is displayed by default at the top part of the web part, and serves for several tasks:
 | Clicking this toggle-button will switch the web part between advanced/simple modes. In Edit mode you have two configuration modes: - Simple mode (Default)
In this mode the web part offers the most common configuration options, making it simpler to configure. The set of displayed controls and their display order is fixed, you cannot add additional controls - Advanced mode
This mode allows much deeper level of configuration; you can remove or add additional controls, change their order, and have many additional configuration properties for each of the controls. | |  Configure template | In Simple mode, clicking this button will open a settings page enabling the admin to configure which controls should be visible to users: | |  License Info & Headers | Clicking this button will open a settings page where you can see your installed app's version & license details, as well as to update the web part's displayed headers: | The Menu bar control displays top & bottom menu bars with configurable actions that you can add. These actions can be applied on multiple selected items.
Example: This is the default top menu bar which includes 2 actions: Select all items and Delete selected.
This control includes the following properties:
| Property | Description | | Top actions | Here you can add, delete and update menus that appear on the top menu bar. | | Bottom actions | Here you can add, delete and update menus that appear on the bottom menu bar. | Adding menu actions using the script editor When clicking an existing actions' "..." icon to edit the action, you will see the Script editor popup window:
 This popup enables you to add custom actions by writing your own custom knockout code. While implementing your required action, you can use parameters that enable you to access the required context. To learn more about each such parameter, click the parameter’s info icon in this popup. When adding a custom action you should select an icon for your action and provide a tooltip. You can then write your own code as mentioned above or use the available snippets under the “Global actions” menu: When selecting one of these snippets, its knockout code will appear in the editor. Of course, you can customize this code to match your exact requirements. Paging control A paging control splits your displayed view into several pages, useful when you have large list of items. . Example:
Tabs control The Tabs control enables grouping the displayed data into configurable tabs. Example: the following picture shows aggregated events (displayed by the List control), grouped by their location:
This control includes the following properties:
Groups control Same as the Tabs control, the Groups control groups the displayed data by a selected column. The grouped data is displayed inside collapsible groups. Example:
the following picture shows aggregated events (displayed by the List control), grouped by their location:
It includes the following properties:
Table control The Table control displays data from the data-source using a grid layout. Example:
the following picture shows aggregated tasks displayed by the Table control:
As you can see in the picture above, the Table control can also display Item-actions.
These actions are customizable same as the menu control actions. The Table control includes the following properties:
| Property | Description | | Display fields | By default the Table control displays all the columns from the data source. If you wish to display only selected columns, click the "Add Columns..." to selected the exact columns to be displayed in the grid. | | Item click | Select the required behavior when user clicks an item in the displayed table: - Select item (default)
in this option a checkbox is selected for each item in the grid, enabling users to select items. - View item
When user clicks an item, a view item popup will show up. - Call item Click action
Use this option to select an item-action to be triggered when user clicks and item. - None
Nothing happens when user clicks an item. | | Allow text wrap | Switch this toggle to On if you wish to allow text to be wrapped to prevent horizontal scrollbar when table text is very long. | | Item actions | 
The Table control enables displaying up to 4 item actions (Action #1 - Action #4), and configure the Item Click action which can be triggered when user clicks an item (according to 'Item click' property value). Configuring an item action is done by clicking the "..." icon - this will pen the Script editor. You can use any custom knockout code, or select one of the available Item actions code snippets. | | Maximum table height | If you wish to have a fixed table height, type the requested height (pixels).
This will create a vertical scrollbar if needed, and will lock the table headers so they will always remain visible, also when the user scrolls down the table view. |
List control The List control displays data from the data-source using a responsive layout which is more suitable for hand-held devices. Example:
the following picture shows aggregated events displayed by the List control:
As you can see in the picture above, the List control can also display Item-actions.
These actions are customizable same as the menu control actions. The List control includes the following properties:
| Property | Description | | Display fields | By default the Table control displays all the columns from the data source. If you wish to display only selected columns, click the "Add Columns..." to selected the exact columns to be displayed in the grid. | | Item click | Select the required behavior when user clicks an item in the displayed table: - Select item (default)
in this option a checkbox is selected for each item in the grid, enabling users to select items. - View item
When user clicks an item, a view item popup will show up. - Call item Click action
Use this option to select an item-action to be triggered when user clicks and item. - None
Nothing happens when user clicks an item. | | Allow text wrap | Switch this toggle to On if you wish to allow text to be wrapped to prevent horizontal scrollbar when table text is very long. | | Item actions |
The Table control enables displaying up to 4 item actions (Action #1 - Action #4), and configure the Item Click action which can be triggered when user clicks an item (according to 'Item click' property value). Configuring an item action is done by clicking the "..." icon - this will pen the Script editor. You can use any custom knockout code, or select one of the available Item actions code snippets. | | Maximum table height
| If you wish to have a fixed table height, type the requested height(pixels). |
Filter control The Filter control displays a custom filtering form, enabling end-user to filter the displayed data be selected filters. How does it work? At design-time, you simply add the Filter control and place it above the data-display controls on which you want the filter to be applied. Example:
the following picture shows A Filter control, configured to display 2 filters: City and Budget. The Filter control was added above the Table control:
So now any selected filter will be applied to the Table control. In the following picture the table control displays only items where "City" column's value equals "Toronto":
Filter control run-time features The Filter control includes the following end-user features: -
Typed, selection and textual filters
All filters behave both as typed filters, selection filters and text filters.
typed filters - according to the column type it will display the right picker.
example: a Date range filter will show a calendar picker enabling you to select a date span (from/to):
selection filters - Every filter (regardless of its type) enables end-users to select a value from all displayed values for this column.
example: in the following picture the "Budget" filter is connected to the "Budget" column which is of type Number. When clicking its selection icon it shows all available values for this column.
textual filters - Every filter filters its connected column based on typed text, so you can type part of any string/value to filter the connected column by it.
-
Add session filters
In addition to the filters added by the site owner in design-time, end-users can add additional filters for their current session (so other users will not see these added filters).
To add a session filter simply drag the column header you want to filter by from the Table control to the Filter control area.
example:
In the following picture the "WorkPhone" column header in the Table control is selected and dragged over to the Filter control area:
Next, dropping it over the Filter control area will add it as a filter to the control:
-
Save filter
By clicking the "Save" icon, end-users can save their current filter, so next time they view the same web part it will show the saved filter.
example:
The following picture shows the Org. Chart web part with the Filter control at the top:
The end-user wants to see only the Marketing department sub-tree, so he chose "Marketing" in the Department filter. By clicking the "save" icon, this filter will be saved for this user, so next time he views the web part it will show that filter by default.
to reset the filter simply click the "reset" icon  .
Filter control configuration In edit mode the Filter control displays additional buttons:
To remove an existing filter click the filter's "remove filter" button  .
To add additional filter, click the "add filter" button  .
Save a default filter for all users If you set some filter values and click the "save filter" button  , a prompt will be displayed offering you to choose between saving this configured filter criteria for all users, or as your personal saved filter.
Filter control properties The Filter control includes the following properties:
| Property | Description | | Show free text filter | Switch to "On" to have a free text search box displayed. This search box is not connected to any specific column, searching a free text will search in all data source columns.
| Allow users to save default filter
| Switch to "On" to have a "save" button, enabling end-users to save their own default filter. | | Filter Fields | You can add filters from the tool pane by clicking "Add columns..", as well as reorder the filters in the web part. | | Free text filter placeholder | Place holder to be displayed in the free text box. | | Search in field placeholder | Place holder to be displayed in the filters. | | Hide from users | "On" = hide the Filter control from end-users.
This options is needed when you want to setup a filter for all users and prevent them from changing this filter. |
Conditional Formatting control The Conditional Formatting (CF) control enables you to configure conditional formatting rules based on column values.
These rules apply to various controls that display data: table, list, org. chart and calendar.
You can optionally also display a legend by configuring the control properties. Example:
the following picture shows a Table control where items with "Budget" column: value higher than $15,000 appear highlighted with yellow background, and a "dollar" icon displayed:
CF configuration Switching the page to edit mode you will see the Conditional Formatting control where you can add conditional formatting rules:
To add a new rule, click the "Add" button, a new empty rule will be added:
Now edit the rule from left to right: | Property | Description | Icon & colors
| Click the  icon to open the "Icon & colors" popup:
Here you can select an icon and fore/back colors for the highlighted items. | | Label
| Give the rule a desceptive name, type it in the label textbox.
The label will be displayed in the legend control. Rules with no label and without an icon/colors will not show up in the legend. | | Format | You can apply your format to the entire item or specific columns.
Formats applied to entire item are supported by most data-display controls (table, list, calendar, org. chart)
Formats applied to specific column are displayed in the view item popup, and supported by the table control. | | Select | Switch to "On" to make items that comply with the rule automatically selected.
Controls that support selecting items, such as list and table, will show these items as selected.
| | Highlight | Switch to "On" to mark items complying with the rule as SharePoint-highlighted.
SharePoint marks highlighted items in modern lists by adding a vertical line on the left side:
Controls that support highlighting items, such as list and table, will mark these items as highlighted.
Organization chart controls will render highlighted items as assistants.
| | New | Switch to "On" to mark items that comply with the rule as new items, same way SharePoint marks new items in modern lists. Controls that support new items, such as list and table, will mark these items as new. | | Conditions | Click the "no conditions" button to open the condition editor:
Click "new conditions" to configure a condition for your rule, for example: in the picture below we configured a conditions based on the "Budget" column value: You can add additional conditions to this rule. When done - click "Save & Close". |
When finished configuring the conditional formatting rule, you should see it applied immediatelly on the displayed data: 
CF control properties
The Conditional Formating control includes the following properties:
|
|
|
|
|
|
|
|
|
|
|
Details
|
|
Last modified at:
|
5/31/2022 4:26 AM
|
|
Last modified by:
|
Nimrod Geva
|
|
Type:
|
User-guide
|
|
Rating:
|
|
|
Article has been viewed 1384 times.
|
|