Class: module:FeaturesTable

module:FeaturesTable()

new module:FeaturesTable()

Allows to display a compact list of vector layer features labels

By default, the display expression is used: Layer properties → Display tab → Display name.

Additional elements can be added to the template to display additional fields. It can be QGIS expressions.

Source:
Fires:
Example

Example of use

<lizmap-features-table
     draggable="yes"
     sortingOrder="asc"
     sortingField="libsquart"
     withGeometry="1"
     expressionFilter="quartmno = 'HO'"
     uniqueField="id"
     layerId="subdistrict_24ceec66_e7fe_46a2_b57a_af5c50389649"
     layerTitle="child sub-districts"
     (optional) data-show-highlighted-feature-geometry="true"
     (optional) data-center-to-highlighted-feature-geometry="true"
     (optional) data-max-features="100"
     (optional) data-active-item-feature-id="5"
>
     <lizmap-field
         data-alias="District's name"
         data-description="Label of district's name"
     >
        "libsquart"
     </lizmap-field>
</lizmap-features-table>

Extends

  • HTMLElement

Methods

addDragAndDropCapabilities()

Add drag&drop capabilities to the lizmap-features-table element

A request is sent when the order changes

Source:

buildColumns(properties) → {TemplateResult}

Build the columns of the table

Parameters:
Name Type Description
properties object

Object containing the properties of the feature
Source:
Returns:

The columns of the table

Type
TemplateResult

buildDisplayExpressionColumn(properties) → {TemplateResult}

Initialize tab with the first column "display_expression"

Parameters:
Name Type Description
properties object

Object containing the properties of the feature
Source:
Returns:

The first column of the table

Type
TemplateResult

buildLabels() → {TemplateResult}

Initialize the labels of the table

Source:
Returns:

The labels of the table

Type
TemplateResult

displayFeaturePopup(feature)

Get the feature popup HTML content and display it

Parameters:
Name Type Description
feature object

WFS feature
Source:

getFeatureById(featureId) → {object|null}

Get the feature corresponding to the given feature ID

Parameters:
Name Type Description
featureId number

WFS Feature ID
Source:
Returns:

WFS Feature

Type
object | null

isAdditionalFieldsEmpty() → {boolean}

Check if the additionalFields property is empty

Source:
Returns:

True if the additionalFields property is empty

Type
boolean

isGeneralLabelExisting() → {boolean}

Check if the general label "display_expression" is existing

Source:
Returns:

True if the general label "display_expression" is existing

Type
boolean

(async) load()

Load features from the layer and configured filter

Source:

onItemClick(event, featureId)

Display a popup when a feature item is clicked

Parameters:
Name Type Description
event Event

Click event on a feature item
featureId number

WFS feature ID
Source:

render()

Render component from the template using Lit

Source:

toggleFeatureDetail()

Toggle the display of the active feature details

Source:

verifyFields(listField) → {Array.<object>}

Verify if there's no fields with the same alias or expression

Parameters:
Name Type Description
listField Array.<object>

List of fields
Source:
Returns:
  • List of verified fields
Type
Array.<object>

Events

featuresTableItemDragged

When the user has dropped an item in a new position

Properties:
Name Type Description
type string

features.table.item.dragged
itemFeatureId string

The vector feature ID
itemOldLineId string

The original line ID before dropping the item
itemNewLineId string

The new line ID after dropping the item in a new position
Source:
Example
lizMap.mainEventDispatcher.addListener((lizmapEvent) => {
        // Log the lizmap-features-table web component HTML element ID
        console.log(`lizmap-features-table item dragged, ID = ${lizmapEvent.elementId}`);
    },
    ['features.table.item.dragged']
);

featuresTableItemHighlighted

When the user has selected an item and highlighted it

Properties:
Name Type Description
type string

features.table.item.highlighted
elementId string

The element ID
itemFeatureId string

The feature ID of the selected item
itemLayerId string

The layer ID of the selected item
Source:
Example
lizMap.mainEventDispatcher.addListener((lizmapEvent) => {
        // Log the lizmap-features-table web component HTML element ID
        console.log(`lizmap-features-table item highlighted, ID = ${lizmapEvent.elementId}`);
    },
    ['features.table.item.highlighted']
);

featuresTableRendered

When the table has been successfully displayed. The event carries the lizmap-features-table HTML element ID

Properties:
Name Type Description
type string

features.table.rendered
elementId string

HTML element ID
itemLayerId string

The layer ID of the selected item
Source:
Example
lizMap.mainEventDispatcher.addListener((lizmapEvent) => {
        // Log the lizmap-features-table web component HTML element ID
        console.log(`lizmap-features-table rendered, ID = ${lizmapEvent.elementId}`);
    },
    ['features.table.rendered']
);