Conditional popup in QGIS2WEB

Question

I am using QGIS 3.28.5, I installed qgis2web 3.16.0. I created an interactive web map and I included pop-ups. However, I have some fields in the attribute table that are empty (there is no data). Those fields still show up in the pop-up, as shown below.

Once you export the map, there is this html file that you can edit. I edited it and there are no empty fields anymore HOWEVER you can do that only AFTER you exported the map. I want to make those changes BEFORE I create the map because I want to apply those changes to future projects too.

Does anyone have any idea how can I achieve this?

I tried by making changes in the qgis2web.js file but nothing seems to work.

---

This is how I manually made the changes. I just modified this part of the code for EVERY attribute. And it works just fine. This file is actually the HTML output. The file that you open in your browser to see the map.

Answer 1

Reach the path C:\Users\Utente\AppData\Roaming\QGIS\QGIS3\profiles\default\python\plugins\qgis2web and edit the file leafletScriptStrings.py modifying def popFuncsScript(table): as follows. Close and reopen QGIS, open your project and export it with Leaflet, you will notice that the code I added will appear in every layer, excluding rows with no data. ATTENTION: make a backup of the original file before editing it

def popFuncsScript(table):
    popFuncs = """
            var popupContent = %s;
            layer.bindPopup(popupContent, {maxHeight: 400});
            
            var popup = layer.getPopup();
            var content = popup.getContent();
            var updatedContent = removeEmptyRowsFromPopupContent(content);
            popup.setContent(updatedContent);
            }

            function removeEmptyRowsFromPopupContent(content) {
              var tempDiv = document.createElement('div');
              tempDiv.innerHTML = content;

              var rows = tempDiv.querySelectorAll('tr');

              for (var i = 0; i < rows.length; i++) {
                var td = rows[i].querySelector('td');

                if (td && td.innerHTML.trim() === '') {
                  rows[i].parentNode.removeChild(rows[i]);
                }
              }

              return tempDiv.innerHTML;""" % table
    return popFuncs