Popup 

Automatic popup 

The Lizmap Web Client Automatic popup displays a table showing the columns of the attribute table in two columns Field and Value, as shown below:

Campo	Valor
id	1
nome	Nome
descrição	Este objeto …
foto	:-)

Pode modificar as informações apresentadas através do QGIS e também mostrar imagens ou links.

Ocultar ou renomear uma coluna 

Aviso

This is working only using Lizmap or Auto popup. The QGIS popup follows the QGIS maptip.

You need to use the Layer Properties ‣ Fields tab in QGIS:

to hide a column in the popup, uncheck the corresponding WMS checkbox. The WMS column is on the right of the table. This will hide the field in QGIS Server from any WMS requests.
to rename a column, you should use the alias column. But to edit this column, add it from the tab Layer Properties ‣ Attributes Form.

Utilização de formatos média: imagens, documentos, etc.

If you want to use some media in your popup (pictures, PDF documents…) in your popup, you must use the Media directory.

For a given feature, using a path in your field starting by media/, Lizmap will display:

the image itself for jpeg or png files
the content for txt or HTML files
a link to any other file extension

Veja também

Chapter Media for more details on the usage of documents of the directory media in the popups.

Utilização de links externos 

Também pode utilizar, num campo, links web completos para uma página ou imagem específica:

a imagem referida será apresentada, em vez do link
o link web será mostrado de forma clicável

Lizmap HTML popup 

Introdução 

If the simple table display does not suit your needs, you can write a popup template. To do so, you should know some HTML format. See e.g.: https://www.w3schools.com/html/

Aviso

When you use the Lizmap HTML mode, the previous configuration to rename a field does not work anymore: you have to configure what is displayed and how through the template. Managing media is also possible, but you have to configure it as well.

Implementação 

Pode editar o modelo popup com o botão Configurar no plugin Lizmap. Clicando no mesmo, será apresentada uma janela com duas áreas de texto:

uma área onde pode digitar o seu texto
uma área apenas de leitura, mostrando uma visualização prévia do seu modelo

Pode digitar texto simples, mas sugerimos que escreva em formato HTML para dar uma formatação adequada. Por exemplo, pode adicionar parágrafos, cabeçalhos, etc .:

<h3>A Title</h3>
<p>An example of paragraph</p>

O comportamento é o seguinte:

se o conteúdo das duas áreas estiver vazio, será apresentada uma tabela simples na popup (modelo padrão)
se o conteúdo não estiver vazio, o seu conteúdo será utilizado como um modelo para a popup

Lizmap Web Client will replace automatically a variable, identified by the name of a field, with its content. To add the content of a column to a popup, you should use the name of the column precede by a dollar sign ($), all surrounded by curly brackets ({}).

For instance:

<h3>A Title</h3>
<p>An example of paragraph</p>
<p>A name: <b>{$name}</b></p>
<p>Description: {$description}</p>

Nota

Se configurou um alias para um campo, deve utilizar esse alias em vez do nome, entre parênteses retos

Também pode utilizar os valores das colunas como parâmetros para atribuir estilo ao texto. Como exemplo, para utilizar a cor de uma linha de autocarro como uma cor de fundo:

<p style="background-color:{$color}">
<b>LINE</b> : {$ref} - {$name}
<p/>

Utilização de média e links externos 

Pode utilizar o recurso média referido no conteúdo da tabela, mesmo se utilizar um modelo. Para fazer isso, deve utilizar a coluna de média, tendo em conta o fato de que o Lizmap Web Client substitui automaticamente o caminho relativo do tipo /media/myfile.jpg pelo URL completo do ficheiro, acessível através da interface web.

Também pode utilizar URLs completos apontando para as páginas ou imagens alojadas noutro servidor.

Um exemplo de um modelo de manipulação de média e um link externo:

 <p style="font-size:0.8em;">A Title</p>
 <p>The name is {$name}</p>
<p>
   A sample image<br/>
   <img src="{$image_column}" style="">
 </p>

 <p><a href="{$website}" target="_blank">Web link</a></p>

 <p><img src="https://www.3liz.com/images/logo-lizmap.png"/></p>

Veja também

Chapter Media for more details on the use of documents in the directory media.

Relações de um para vários 

It is possible to display multiple objects (photos, documents) for each geographical feature. To do so, you have to configure both the QGIS project and the Lizmap config.

No projeto QGIS:

Use 2 separate layers to store the main features and the pictures. For example trees and tree_pictures. The child layer must contain a field referencing the parent layer id.
Configure aliases and field types in Layer Properties -> Fields. Use Photo for the field which will contains the relative path to pictures.
Add a relation in QGIS project properties between the main layer trees and the child layer tree_pictures in Project properties -> Relations.
Add data to the layers. You should use relative path to store the pictures path. Theses paths must refer to a project media subdirectory, for example: media/photos/feature_1_a.jpg

No plugin Lizmap:

In the Layers tab, activate popup for both layers. You can configure source of the popup if you need specific layouts
For the parent layer, activate the option Display relative children under each object (use relations)
Optionally, add the two layers in the Attribute table tab
Optionally, you can activate editing for the two layers, to allow the web users to create new features and upload pictures
Guarde e publique seu projeto com a configuração do Lizmap

In Lizmap Web Client:

If relative children popup are defined as Automatic, this button will be visible in the feature’s popup at the top of related objects. Click it to compact all related objects in one table with search, sort and paging capabilities.

Mostrar subordinados em formato compacto 

É possível altera a forma como os elementos subordinados são apresentados e fazê-las parecer uma tabela. Para isso, é necessário adaptar o HTML de camada subordinada e utilizar algumas classes para manipulação do código.

«lizmap_merged»: É necessário atribuir esta classe à tabela
lizmapPopupHeader: Se desejar uma apresentação melhorada dos cabeçalhos, é necessário colocar esta classe no “<tr>” que os contém
lizmapPopupHidden: Esta classe permite ocultar alguns dos elementos subordinados que se pretendem ocultar quando utilizados como subordinados embora sendo ainda possível visualizá-los se se apresentar a popup como uma Popup principal

Aqui está um exemplo:

<table class="lizmap_merged">
 <tr class="lizmapPopupHeader">
     <th class="lizmapPopupHidden"><center> Idu </center></th>
     <th> <center> Type </center> </th>
     <th> <center> Surface</center> </th>
  </tr>
  <tr>
     <td class="lizmapPopupHidden"><center>[% "idu" %]</center></td>
     <td><center>[% "typezone" %]</center></td>
     <td><center>[% "surface" %]</center></td>
  </tr>
</table>