ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Dashboard control
  • Overview of the Dashboard control
  • Creating a Dashboard control
  • Characteristics of Dashboard controls
  • Add a widget to a Dashboard control
  • Define or modify the display options of a widget
  • Configuring a Dashboard control in the editor
  • Defining the size of cells
  • Defining the size and position of widgets
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview of the Dashboard control
Software arrays are an important part of an application: they bring together the key elements that enable managers 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:
  • WEBDEV - Server codeWEBDEV - Browser code In WEBDEV, it's an internal page.
Creating a Dashboard control
To create a Dashboard control:
  1. On the "Creation" tab, in the "Containers" group, click "Dashboard".
  2. Click where the control will be created in the window or page.To view the characteristics of the control, select "Description" in the context menu.
Note: The dimensions of the field created are optimized to occupy the space available at the position indicated.. If the field size doesn't suit you, use the Ctrl + Z key combination: the field will return to its default size.
Characteristics of Dashboard controls
The characteristics of a Dashboard control are described in the "Details" and "Content" tabs of the control description window ("Description" in the context menu).
"Detail" tab: Dimensions and layout of thearray field
The "Details" tab allows you to specify the following options:
  • Variable width of Widgets: In this case, it is possible to define the number of columns in the Dashboard control and the height of the cells..
  • Variable number of Widgets: In this case, you can define the cell size (width and height in pixels)..
  • Fixed width and number of Widgets . In this case, you can 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 vice versa.
  • the margins between the different widgets displayed in the Dashboard control.
WEBDEV - Server codeWEBDEV - Browser code "Detail" tab: Position of contextual menu
The context menu of Dashboard control allows the Web user to:
  • Switch to edit mode. Edit mode allows the user to change the order of widgets, modify their size, etc. These options can be configured using the DashMode function..
  • Restore initial configuration.
The context menu of the Dashboard control opens via a button in the control. It is possible to:
  • specify the button to use (option "Button"). 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 of the button description window). If the "None" button is selected, the context menu will not appear.
    Note: If you do not want to program the context menu, you can make it invisible with the Visible property..
  • specify the position of the button that will open the context menu (option "Position"). This button can be positioned at the top left, top right, bottom left or bottom right of Dashboard control.
"Detail" tab: User modification
These are the options in the Dashboard control:
  • Compact Widgets: This option automatically rearranges the Widgets in the Dashboard control when a Widget is deleted by the end user..
  • Remember configuration of Widgets: This option automatically saves the user-defined Dashboard control configuration when the window (or page) is closed.. This configuration will be automatically re-displayed during the next opening of window (or page).
"Contents" tab: Definition of Widgets in theDashboard array
The "Content" tab is used to define the widgets found in the Dashboard control.
You can also define or add widgets programmatically with DashAddWidget.
A widget corresponds to:
  • 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 the control description, click "Add".
  2. In the window that appears:
    • WEBDEV - Server codeWEBDEV - Browser code select the internal pages that will be added as widget and validate.
    Note: Only windows or internal pages without parameters can be added under the editor in the Dashboard control array.. To add an internal window or an internal page with parameters, the additions must be performed through 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 widget.
Remarks:
  • 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 programmatically.
  • 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 a 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. On the right-hand side 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 will be able to make it visible via the context 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 control description window. 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 widget size 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 widget caption. This label is important: it will appear in the context menu (FAA) to enable the user to display the Widget..
Note: You can also define the position and size of Widgets directly in the editor..
Configuring a Dashboard control in the editor

Defining the size of 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 has sizing handles.
    • Position the mouse cursor on one of the widget sides. The cursor turns into an arrow.
    • Click and drag until the cell reaches the desired 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" in the context menu of the 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 cursor turns into an arrow.
      • Click and drag until the cell reaches the desired 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 on the keyboard.
    • Select "End the edit" in the context 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 version required
  • Version 19
This page is also available for…
Comments
video webdev dasboard
https://youtu.be/QTpZ8oxXCxM
amarildo
29 Nov. 2018
video Dashboard WinDev Mobile
https://youtu.be/KVErsG4aJ0E
amarildo
29 Nov. 2018
video windev dashboard
https://youtu.be/fh78EqJPxxU
amarildo
28 Nov. 2018

Last update: 09/30/2024

Send a report | Local help