Skip Ribbon Commands
Skip to main content
Sign In

Customer Service: 1-855-594-9266

canada flag

Display controls

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 contol 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 configrable 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:

 

 

 

 

Menu bar control

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 canadd, 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 iconin 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:

Property Description
Group by
Select the column by which you want to group the displayed data into tabs.
Title

Optional title that can be displayed above the tabs, can also be a dynamic formula, using the formula editor.

Tab text This property includes a knockout statement that defines how the tabs' captions will be rendered.
By default, the tabs' captions are rendered as capitlized captions with the number of items in each tab. You can change that and add any required logic by using the formula editor.
Render as tabs This property switches between 2 display formats of the tabs.
Large captions This property swithces between 2 common font display sizes for the tabs.
 

 

Groups control

Same as the Tabs control, the Groups control groups the displayed data by a selected column. The grouped data is displayed inside collapsable groups.

Example:
the following picture shows aggregated events (displayed by the List control), grouped by their location:


It includes the following properties:


Property

Description

Group by

Select the column by which you want to group the displayed data into collapsible groups.

Title

Optional title that can be displayed above the tabs, can also be a dynamic formula, using the formula editor.

Group text This property includes a knockout statement that defines how the groups' captions will be rendered.
By default, the groups' captions are rendered as capitlized captions with the number of items in each group. You can change that and add any required logic byusing the formula editor.
Groups behaviour

You can select the way groups are expanded/collapased:

  • Default - All groups are expanded by default, you can expand/collapse seperately.
  • Accordion - By default the 1st group is expanded, and you can expand only one group at a time.
  • Collapsed - All groups are collapsed by default, you can expand/collapse seperately.  
Fixed group height In case you want the each group to have a fixed height (so you won't have a scrollbar in the page), type the requested height. 
Group actions
Here you can add custom actions that will appear in each group's header area.
Example:  the following screenshot shows 2 actions in each tabs: Select all items and Export to Excel. This way you can create actions that will apply only to items under a selected group.
Adding/updating custom actions is done by using the script editor.


 

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 behaviour 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 showup.
  • 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 horizintal 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).
 

List control

The List control displays data from the data-source using a responsive layout which is more suitible 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 behaviour 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 showup.
  • 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 horizintal 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 fiters: 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 appropate 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

Add/remove filters

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 diplayed 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 toolpane 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 Formating control

The Conditional Formating (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 formating 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 condiitons" 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 additinal 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:

Property

Description

Click legend to filter  Switch to "On" to make the conditional formatting rules legend clickable. When clicking a rule's legend it will filter the didplayed data acordingly.
Show legend on top
Show the conditional formating legend above the displayed data.
Show legend on botttom

Show the conditional formating legend below the displayed data.

Show legend on left

Show the conditional formating legend left to the displayed data.

Show legend on right

Show the conditional formating legend right to the displayed data.

 


 

Details
Last modified at: 12/7/2020 11:20 AM
Last modified by: Nimrod Geva
Type: User-guide
Rating:
Article has been viewed 368 times.

Also in this category

Powered by KWizCom WikiPlus