PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

  • Overview of the Dashboard control
  • Creating a Dashboard control
  • Characteristics of the Dashboard control
  • Add a Widget to a Dashboard control
  • Define or modify the display options of Widget
  • Configuring a Dashboard control in the editor
  • Defining the size of the cells
  • Defining the size and position of Widgets
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of the Dashboard control
The software dashboards are important elements of an application: They group the key elements allowing the executives to make decisions.
The Dashboard control allows you to easily create dashboards that can be customized and adapted by the end user. The user can for example move the different dashboard elements, decide which elements will be visible, ...
The elements displayed in the Dashboard control are Widgets. These Widgets can be moved, hidden and resized by the end user.
A Widget can be easily created:
  • WINDEVAndroidiPhone/iPad In WINDEV and WINDEV Mobile, it's an internal window.
  • Versions 20 and later
    WEBDEV - Server codeWEBDEV - Browser code In WEBDEV, it's an internal page.
    New in version 20
    WEBDEV - Server codeWEBDEV - Browser code In WEBDEV, it's an internal page.
    WEBDEV - Server codeWEBDEV - Browser code In WEBDEV, it's an internal page.
Versions 20 and later
WEBDEV - Server codeWindows This feature is now available for the WEBDEV sites.
WEBDEV - Server codeLinux This feature is now available for WEBDEV sites in Linux.
WEBDEV - Browser code This feature is now available in browser code.
New in version 20
WEBDEV - Server codeWindows This feature is now available for the WEBDEV sites.
WEBDEV - Server codeLinux This feature is now available for WEBDEV sites in Linux.
WEBDEV - Browser code This feature is now available in browser code.
WEBDEV - Server codeWindows This feature is now available for the WEBDEV sites.
WEBDEV - Server codeLinux This feature is now available for WEBDEV sites in Linux.
WEBDEV - Browser code This feature is now available in browser code.
Versions 22 and later
Android This feature is now available for the Android applications.
iPhone/iPad This feature is now available for the iPhone/iPad applications.
New in version 22
Android This feature is now available for the Android applications.
iPhone/iPad This feature is now available for the iPhone/iPad applications.
Android This feature is now available for the Android applications.
iPhone/iPad This feature is now available for the iPhone/iPad applications.
Creating a Dashboard control
To create a Dashboard control:
  1. On the "Creation" pane, in the "Containers" group, click "Dashboard".
  2. Click the position where the control will be created in the window or page.
To display the control characteristics, select "Description" from the popup menu of control.
Versions 20 and later
Note: The dimensions of created control are optimized in order to occupy the available space at the specified position. If the control size does not suit your, press [CTRL Z]: the default control size will be restored.
New in version 20
Note: The dimensions of created control are optimized in order to occupy the available space at the specified position. If the control size does not suit your, press [CTRL Z]: the default control size will be restored.
Note: The dimensions of created control are optimized in order to occupy the available space at the specified position. If the control size does not suit your, press [CTRL Z]: the default control size will be restored.
Characteristics of the Dashboard control
The characteristics of a Dashboard control are described in the "Details" and "Content" tabs of the description window of control ("Description" from the popup menu).
"Details" tab: Dimensions and overview of Dashboard control
The "Details" tab is used to specify:
  • whether the width of Widgets is variable. In this case, you have the ability to define the number of columns found in the Dashboard control as well as the height of cells.
  • whether the number of Widgets is variable. In this case, you have the ability to define the size of cells (width and height in pixels).
  • whether the width and the number of Widgets are fixed. In this case, you have the ability to define the number of columns and the size of the cells. The "Adapt" buttons are used to adapt the number of columns according to the size of cells (and conversely).
  • the margins between the different Widgets displayed in the Dashboard control.
Versions 20 and later
WEBDEV - Server codeWEBDEV - Browser code "Details" tab: Position of popup menu
The popup menu of the Dashboard control allows the Web user to:
  • Switch to edit mode. The edit mode allows the user to change the order of widgets, to modify their size, ... The available options can be configured by DashMode.
  • Restore the initial configuration.
The popup menu of Dashboard control is opened from a button positioned on the Dashboard control. You can:
  • specify the button to use. By default, a button is created when creating the Dashboard control. It is possible to use another button found in the page. This button must be associated with the "Open the Dashboard menu" action ("General" tab in the description window of button). If the "None" button is selected, the popup menu will not be proposed.
    Note: If you don't want to propose the popup menu by programming, it can be made invisible by ..Visible.
  • specify the position of button that will open the popup menu. This button can be positioned at the top left, top right, bottom left or bottom right of Dashboard control.
New in version 20
WEBDEV - Server codeWEBDEV - Browser code "Details" tab: Position of popup menu
The popup menu of the Dashboard control allows the Web user to:
  • Switch to edit mode. The edit mode allows the user to change the order of widgets, to modify their size, ... The available options can be configured by DashMode.
  • Restore the initial configuration.
The popup menu of Dashboard control is opened from a button positioned on the Dashboard control. You can:
  • specify the button to use. By default, a button is created when creating the Dashboard control. It is possible to use another button found in the page. This button must be associated with the "Open the Dashboard menu" action ("General" tab in the description window of button). If the "None" button is selected, the popup menu will not be proposed.
    Note: If you don't want to propose the popup menu by programming, it can be made invisible by ..Visible.
  • specify the position of button that will open the popup menu. This button can be positioned at the top left, top right, bottom left or bottom right of Dashboard control.
WEBDEV - Server codeWEBDEV - Browser code "Details" tab: Position of popup menu
The popup menu of the Dashboard control allows the Web user to:
  • Switch to edit mode. The edit mode allows the user to change the order of widgets, to modify their size, ... The available options can be configured by DashMode.
  • Restore the initial configuration.
The popup menu of Dashboard control is opened from a button positioned on the Dashboard control. You can:
  • specify the button to use. By default, a button is created when creating the Dashboard control. It is possible to use another button found in the page. This button must be associated with the "Open the Dashboard menu" action ("General" tab in the description window of button). If the "None" button is selected, the popup menu will not be proposed.
    Note: If you don't want to propose the popup menu by programming, it can be made invisible by ..Visible.
  • specify the position of button that will open the popup menu. This button can be positioned at the top left, top right, bottom left or bottom right of Dashboard control.
"Details" tab: Modification by the user
In the Dashboard control, you have the ability to:
  • Compact the Widgets: This option is used to automatically reorganize the Widgets in the Dashboard control when a Widget is deleted by the end user.
  • Store the configuration of Widgets: This option is used to automatically save the configuration of the Dashboard control performed by the user when closing the window or page. This configuration will be automatically re-displayed during the next opening of window (or page).
    WINDEVWINDEV MobileAndroidiPhone/iPad Note: The user can configure his Dashboard via the popup menu of AAFs (Automatic Application Features). See AAF of Dashboard control for more details.
  • WINDEV Permanent edit mode: This option is used to propose the Dashboard control in edit mode directly during its display. The user will be able to move, resize or hide the widgets directly.
"Content" tab: Defining the Widgets found in the Dashboard control
The "Content" tab is used to define the Widgets found in the Dashboard control.
You also have the ability to define these Widgets or to add some by programming by using DashAddWidget.
A Widget corresponds to:
  • WINDEVAndroidiPhone/iPad an internal window.
  • Versions 20 and later
    WEBDEV - Server codeWEBDEV - Browser code an internal page.
    New in version 20
    WEBDEV - Server codeWEBDEV - Browser code an internal page.
    WEBDEV - Server codeWEBDEV - Browser code an internal page.
The "Content" tab is used to:

Add a Widget to a Dashboard control

To add a Widget into a Dashboard control:
  1. In the "Content" tab of control description, click the "Add" button.
  2. In the window that is displayed:
    • WINDEVAndroidiPhone/iPad select the internal window(s) to add as Widget and validate.
    • Versions 20 and later
      WEBDEV - Server codeWEBDEV - Browser code select the internal pages that must be added as Widget and validate.
      New in version 20
      WEBDEV - Server codeWEBDEV - Browser code select the internal pages that must be added as Widget and validate.
      WEBDEV - Server codeWEBDEV - Browser code select the internal pages that must be added as Widget and validate.
    Note: Only the internal windows or pages without parameter can be added into the Dashboard control in the editor. To add an internal window or an internal page with parameters, the additions must be performed by programming with DashAddWidget.
  3. The internal windows or pages appear in the list of Widgets displayed in the Dashboard control. The display options can be defined for each Widget. These options correspond to the initial display of the Widget.
Notes:
  • The order of Widgets in list has no influence on the Widget position in the Dashboard control. This position can be defined in the Widget description.
  • The number associated with the Widget is used to handle it by programming.
  • To modify the background color of your widget, use a cell in your window or internal page. This cell will contain the controls of your window or internal page. The background of cell will be used to color the widget.

Define or modify the display options of Widget

To define or modify the initial display options of a Widget:
  1. Select the Widget to configure in the "Content" tab of the description window of Dashboard control.
  2. In the right section of the screen, specify:
    • the associated internal window or page if necessary.
    • whether the Widget must be visible by default. If the Widget is invisible, a logo is displayed beside the Widget name in the list. the user can make it visible via the popup menu.
    • the initial size and position of the Widget. This position and this size are expressed in cells. The number of cells was defined in the "Details" tab of the description window of the control. If the position or the size is modified for a Widget, the position of the next Widgets is automatically updated.
      Note: The maximum size of the Widget corresponds to the maximum size of the internal window associated with the Widget. For example, if the maximum size of the Widget is set to two cells of 150 pixels in width and one cell of 150 pixels in height, the maximum size of the corresponding internal window must be set to 300 pixels x 150 pixels.
    • the caption of the Widget. This caption is important: it will appear in the popup menu (AAF) to allow the user to display the Widget.
Note: You also have the ability to define the position and size of Widgets in the editor.
Configuring a Dashboard control in the editor

Defining the size of the cells

To define the size and position of Widgets in the editor directly:
  1. Select the Dashboard control.
  2. A border is displayed around the cells found in the Dashboard control.
  3. The first cell proposes sizing handles.
    • Position the mouse cursor on one of the Widget sides. The mouse cursor turns into an arrow.
    • Press the mouse button and move the mouse while keeping the mouse button down until the requested size.
    • The new size applies to all the cells of the Dashboard control.

Defining the size and position of Widgets

To define the size and position of Widgets in the editor directly:
  1. Select the Dashboard control.
  2. Switch to edit mode by using one of the following methods:
    • Click the Dashboard control.
    • Select "Edit the size and position of Widgets" from the popup menu of control.
  3. A yellow border appears around the control. You can:
    • Resize the Widgets found in the Dashboard control:
      • Position the mouse cursor on one of the Widget sides. The mouse cursor turns into an arrow.
      • Press the mouse button and move the mouse while keeping the mouse button down until the requested size.
    • Move the Widgets found in the Dashboard control:
      • Click the Widget.
      • Move the Widget while keeping the mouse button down.
  4. To exit from the edit mode, use one of the following methods:
    • Press the ESC key.
    • Select "End the edit" from the popup menu of the control.
    • Click the window or page.
Related Examples:
WD Dashboard Training (WINDEV): WD Dashboard
[ + ] The "WD Dashboard" example is an educational example for using the Dashboard control.
This example explains how to:
- handle the control in "edit" mode,
- save/load a configuration,
- configure the control (initial configuration, addition/deletion of widgets, ...),
- refresh a widget,
- etc.
WW_Dashboard Training (WEBDEV): WW_Dashboard
[ + ] The "WD Dashboard" example is an educational example for using the Dashboard control.
This example explains how to:
- handle the control in "edit" mode,
- save/load a configuration,
- configure the control (initial configuration, addition/deletion of widgets, ...),
- refresh a widget.
WM CRM Cross-platform examples (WINDEV Mobile): WM CRM
[ + ] WM CRM is a multi-platform project for Android and iOS.
It explains how to develop a CRM application intended to the Android and iPad tablets.
Minimum required version
  • Version 19
This page is also available for…
Comments
Click [Add] to post a comment