diff --git a/docs/user-guide/adding-widgets.md b/docs/user-guide/adding-widgets.md index 0eb326695c4..2d7b3cddadf 100644 --- a/docs/user-guide/adding-widgets.md +++ b/docs/user-guide/adding-widgets.md @@ -18,7 +18,9 @@ In particular, it is possible to choose between: * **Map** -Creating *Chart*, *Text*, *Table* and *Counter* widgets the procedure is almost the same as that described for [create widgets in maps](widgets.md#widgets). The only minor differences are the following: +* **Filter Selector** + +Creating *Chart*, *Text*, *Table*, *Counter* and *Filter Selector* widgets the procedure is almost the same as that described for [create widgets in maps](widgets.md#widgets). The only minor differences are the following: * In dashboards as soon as the user selects the widget type, a panel appears to select the layer from which the widget will be created. [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) allows you to choose between CSW, WMS and WMTS GeoSolutions Services, present by default, or by accessing WMS, WFS, CSW, WMTS and TMS Remote Services as explained in the [Managing Remote Services](catalog.md#managing-remote-services) section diff --git a/docs/user-guide/img/adding-widgets/list-legend.jpg b/docs/user-guide/img/adding-widgets/list-legend.jpg index c75c0848248..97c0442b024 100644 Binary files a/docs/user-guide/img/adding-widgets/list-legend.jpg and b/docs/user-guide/img/adding-widgets/list-legend.jpg differ diff --git a/docs/user-guide/img/adding-widgets/widgets-panel.jpg b/docs/user-guide/img/adding-widgets/widgets-panel.jpg index db861684c19..2c0176effcd 100644 Binary files a/docs/user-guide/img/adding-widgets/widgets-panel.jpg and b/docs/user-guide/img/adding-widgets/widgets-panel.jpg differ diff --git a/docs/user-guide/img/button/connect-button.jpg b/docs/user-guide/img/button/connect-button.jpg new file mode 100644 index 00000000000..c84bd9d4f1d Binary files /dev/null and b/docs/user-guide/img/button/connect-button.jpg differ diff --git a/docs/user-guide/img/button/widgets.jpg b/docs/user-guide/img/button/widgets.jpg index 8f4f662ffa9..5344da9138d 100644 Binary files a/docs/user-guide/img/button/widgets.jpg and b/docs/user-guide/img/button/widgets.jpg differ diff --git a/docs/user-guide/img/widgets/connection-different-data-source.mp4 b/docs/user-guide/img/widgets/connection-different-data-source.mp4 new file mode 100644 index 00000000000..8a23b9e30be Binary files /dev/null and b/docs/user-guide/img/widgets/connection-different-data-source.mp4 differ diff --git a/docs/user-guide/img/widgets/connection-same-data-source.jpg b/docs/user-guide/img/widgets/connection-same-data-source.jpg new file mode 100644 index 00000000000..d58bac2959c Binary files /dev/null and b/docs/user-guide/img/widgets/connection-same-data-source.jpg differ diff --git a/docs/user-guide/img/widgets/features-data_tab.jpg b/docs/user-guide/img/widgets/features-data_tab.jpg new file mode 100644 index 00000000000..b47c336a41d Binary files /dev/null and b/docs/user-guide/img/widgets/features-data_tab.jpg differ diff --git a/docs/user-guide/img/widgets/filter-ex.mp4 b/docs/user-guide/img/widgets/filter-ex.mp4 new file mode 100644 index 00000000000..54cb61779c7 Binary files /dev/null and b/docs/user-guide/img/widgets/filter-ex.mp4 differ diff --git a/docs/user-guide/img/widgets/filter-info.jpg b/docs/user-guide/img/widgets/filter-info.jpg new file mode 100644 index 00000000000..b9cba34d956 Binary files /dev/null and b/docs/user-guide/img/widgets/filter-info.jpg differ diff --git a/docs/user-guide/img/widgets/filter-list-option.jpg b/docs/user-guide/img/widgets/filter-list-option.jpg new file mode 100644 index 00000000000..8b12eb9702c Binary files /dev/null and b/docs/user-guide/img/widgets/filter-list-option.jpg differ diff --git a/docs/user-guide/img/widgets/filter-list.jpg b/docs/user-guide/img/widgets/filter-list.jpg new file mode 100644 index 00000000000..672b79ec4ff Binary files /dev/null and b/docs/user-guide/img/widgets/filter-list.jpg differ diff --git a/docs/user-guide/img/widgets/filter-selector-options.jpg b/docs/user-guide/img/widgets/filter-selector-options.jpg new file mode 100644 index 00000000000..9afb0c9e735 Binary files /dev/null and b/docs/user-guide/img/widgets/filter-selector-options.jpg differ diff --git a/docs/user-guide/img/widgets/interactions-tab.jpg b/docs/user-guide/img/widgets/interactions-tab.jpg new file mode 100644 index 00000000000..940879155f8 Binary files /dev/null and b/docs/user-guide/img/widgets/interactions-tab.jpg differ diff --git a/docs/user-guide/img/widgets/layout_tab.jpg b/docs/user-guide/img/widgets/layout_tab.jpg new file mode 100644 index 00000000000..9b514841035 Binary files /dev/null and b/docs/user-guide/img/widgets/layout_tab.jpg differ diff --git a/docs/user-guide/img/widgets/map-widgets-panel.jpg b/docs/user-guide/img/widgets/map-widgets-panel.jpg index e2f8ecd8124..fefb97604db 100644 Binary files a/docs/user-guide/img/widgets/map-widgets-panel.jpg and b/docs/user-guide/img/widgets/map-widgets-panel.jpg differ diff --git a/docs/user-guide/img/widgets/style-list-option.jpg b/docs/user-guide/img/widgets/style-list-option.jpg new file mode 100644 index 00000000000..79c8174b2d8 Binary files /dev/null and b/docs/user-guide/img/widgets/style-list-option.jpg differ diff --git a/docs/user-guide/img/widgets/style-list.jpg b/docs/user-guide/img/widgets/style-list.jpg new file mode 100644 index 00000000000..73436541bc6 Binary files /dev/null and b/docs/user-guide/img/widgets/style-list.jpg differ diff --git a/docs/user-guide/img/widgets/styles.jpg b/docs/user-guide/img/widgets/styles.jpg new file mode 100644 index 00000000000..6b4521e173c Binary files /dev/null and b/docs/user-guide/img/widgets/styles.jpg differ diff --git a/docs/user-guide/img/widgets/title-layout.jpg b/docs/user-guide/img/widgets/title-layout.jpg new file mode 100644 index 00000000000..8d32550cd0e Binary files /dev/null and b/docs/user-guide/img/widgets/title-layout.jpg differ diff --git a/docs/user-guide/img/widgets/user-define_data_tab.jpg b/docs/user-guide/img/widgets/user-define_data_tab.jpg new file mode 100644 index 00000000000..ce79bb31c80 Binary files /dev/null and b/docs/user-guide/img/widgets/user-define_data_tab.jpg differ diff --git a/docs/user-guide/img/widgets/variant-items.mp4 b/docs/user-guide/img/widgets/variant-items.mp4 new file mode 100644 index 00000000000..26d0744657f Binary files /dev/null and b/docs/user-guide/img/widgets/variant-items.mp4 differ diff --git a/docs/user-guide/widgets.md b/docs/user-guide/widgets.md index b8220b31992..a91483b4912 100644 --- a/docs/user-guide/widgets.md +++ b/docs/user-guide/widgets.md @@ -20,12 +20,10 @@ Once at least one layer is present in the map (see [Catalog](catalog.md#catalog- From here the user can choose between four different types of widget: * *Chart* - * *Text* - * *Table* - * *Counter* +* *Filter Selector* ### Chart @@ -456,6 +454,163 @@ An example of counter widget could be: +### Filter Selector + +The Filter Selector widget allows the creation of dynamic filters, enabling users to easily interact with the widget’s content, which can in turn be connected to other widgets and to the layers present on the map. + +Once a *Layer* is selected, the following *Filter Selector* options are available to the user: + + + +From the filter configuration page, the user can first perform the following operation: + +* **Edit** the *Filter Title* through the button + +* **Add New Filter** to the current widget through the button + +* **Delete** the selected filter and its configuration from the widget through the button + +#### Data + +For each filter [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) allows users to define the data source. In particular, it is possible to choose between two different **Data Source** modes to select the filter data: + +* **Features** +* **User Defined** + +##### Features + +By selecting Features, the user can retrieve information from an underlying feature layer and customize the selection using the following available options: + + + +* Filter the Layer by clicking the button + +* Select the number of **Values** choosing between `Unique Attribute` or `Attributes` + +* Choose the **Values Attribute** from the available *Features* of the selected layer + +* Select which attribute to use for sorting the filter and specify whether the values should be in **Ascending** or **Descending** order + +* Enter the **Max Number** of features to display + +* Select the **Filter Composition**, choosing between `Match Any Filter(OR)` or `Match All Filter(AND)` + +* Add a **Default Filter** to define a filter that will be applied when no selection is made, using the button + +!!!warning + If the user wants the filter to display nothing when no items are selected, create a Default Filter that always returns no features. + +##### User Defined + +By selecting User Defined as the *Data Source*, the user can create a **List of Filters** or a **List of Styles** to use as items in the dynamic filter widget. + + + +If **Filter List** is selected in the *Type* option, the user can add as many filter items as needed by clicking the button. + + + +In the filter list, the user can: + + + +* Rename an item by clicking on its *Label*. + +* Customize the filter using the button, which opens the [Query Panel](filtering-layers.md#query-panel) + +* *Delete* an item using the button. + +If **Style List** is selected in the *Type* option, the user can add as many styles as needed by clicking the button. + + + +In the style list, the user can: + + + +* Rename a style by clicking on its *Label*. + +* Select the layer style from the available options in the dropdown list. + + + +* *Delete* a style using the button. + +#### Layout + +In this tab, the user can customize the filter layout and preview it in real time. In particular, the user can modify the **Title** and the **Items**. + + + +Once the user chooses to enable the **Title**, it can be customized with the following options: + + + +* Add a **Label** + +* Change the filter **Icon** displayed next to the label + +* Adjust the **Font Size** + +* Select the **Font Weight** and **Font Style** + +* Change the title **Color** using the color picker + +From the **Items**, the user can perform the following actions: + +* Modify the type of user interaction with the items by selecting from the dropdown menu: `Checkbox`, `Button`, `Dropdown`, or `Switch`. + + + +* Choose the selection mode for the items: `Single` or `Multiple`. + +* Select the **Direction** of the items: `Vertical` or `Horizontal`. + +* Set the **Max Height** of the filter box. + +* Enable/Disable the **Show Select All/Clear** option in the filter. + +* Enable/Disable the **Target Message** to indicate whether the filter is connected to layers or widgets. + +* Enable/Disable the **Force Selection** option, ensuring that at least one filter item must be selected. + +#### Interactions + +In the Interactions tab, it is possible to connect the newly created filter to the layers and widgets present on the map. + + + +The filter can be connected to the layer it is derived from data source or to a widget created from the same data source by simply clicking the button next to each layer or widget on the list. + + + +The filter can also be connected to other layers and widgets that do not share the same data source but are present on the map. To do this, first click the button, enable the check to confirm that the filter may be applied to this data source even if it is different from the original, and then connect the filter by clicking the button. + + + +#### Configure Filter Selector Info + +Once the desired settings are done, a click on the button opens the following panel: + + + +The user can: + +* Go back to the chart option with the button + +* Add the widget to the map with the button + +* Add widget **Title** + +* Add widget **Description** + +!!! Note + None of these fields are mandatory, it is possible to save/add the widget to the map without filling them. + +An example of filter selector widget could be: + + + ## Manage existing widgets Once widgets have been created, they will be placed on the bottom right of the map viewer and the *Widgets Tray* appears: