1

I recently got aware that you can now create a custom HTML widget by which you can replace the regular attribute form when you click the Identify features button in QGIS.

As far as I can see it is a mix of a few code languages like HTML, JavaScript and PyQGIS (QGIS expressions).

How do you know what languages that you possibly mix? I need to know because I usually are searching the internet for help.

How can I open hyperlinks in combination with QGIS expressions that i am using? I cannot find the proper function or write the right syntax.

Here is the code as it looks now...

  <html>
    <head>
      <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <title>Materialize Sandbox</title>
    </head>

    <style> 

body { 
background-color: white!important; 
font-family: sans-serif;
width: 50px;
} 

table { 
border-collapse: collapse; 
} 

th { 
font-size: 7px;
padding: 2px;
padding-top: 10px;
background: whitesmoke;
color:red;
text-align: left;
}


tr { 
border: 2px solid white; 
} 

tr:nth-child (odd) {
background:grey!important;
}

td { 
font-size: 12px;
white-space: nowrap; 
padding: 5px; 
}

td.h2{
font-size: 10px; 
float: left!important;
font-weight: bold;
background:grey;
}

td.bold { 
font-size: 12px; 
font-weight: bold; 
} 

td.gap { 
background-color:white; 
padding:1px; 
} 
.table tr:nth-child(odd){ 
background: #b8d1f3;
}

.table tr:nth-child(even){
background: #dae5f4;
}

</style>

<table class="table">
<th><h1><script>document.write(expression.evaluate("'Lokalplan'  || ' '  || plannr"));</script>
</h1></th>
<th></th>

<tr><td class="bold">Plannavn:</td><td><script>document.write(expression.evaluate("\"plannavn\""));</script></td></tr>
<tr><td class="bold">Anvendelse generel:</td><td><script>document.write(expression.evaluate("CASE when \"anvendelsegenerel\" is null then 'Anvendelse ikke reguleret' ELSE \"anvendelsegenerel\" end"));</script></td></tr>
<tr><td class="bold">Zonestatus:</td><td><script>document.write(expression.evaluate("CASE when \"zonestatus\" = 'Byzone' then \"zonestatus\" else 'Landzone' END"));</script></td></tr> 
<tr><td class="bold">Dato vedtaget:</td><td><script>document.write(expression.evaluate("substr( \"datovedt\" ,7,2)  || '.'  ||   substr( \"datovedt\" ,5,2)  || '.' || substr( \"datovedt\" ,1,4) "));</script></td></tr>
<tr><td class="bold">Dato offentliggjort:</td><td><script>document.write(expression.evaluate("substr( \"datoikraft\" ,7,2)  || '.'  ||   substr( \"datoikraft\" ,5,2)  || '.' || substr( \"datoikraft\" ,1,4) "));</script></td></tr>
<tr><td class="bold">Link til lokalplan:</td><td><script>webbrowser.open(expression.evaluate("\"URL\""));</script></td></tr> 
</table>


             </html>

It is especially the latter part of the code that is tricking me.

What I want is to make QGIS able to open a hyperlink from the HTML table row. Example below:

<tr><td class="bold">Link til lokalplan:</td><td><script>webbrowser.open(expression.evaluate("\"URL""));</script></td></tr>

Though, I cannot find a proper script or command that opens the URL. webbrowser.open does not work, apparently.

Can anybody help out?

1
  • You need to focus on one question per 'question' at the moment you have two. Also just quickly scanning your html , you seem to be missing some body tags
    – nmtoken
    Aug 19, 2020 at 9:55

2 Answers 2

1

There is a built-in webbrowser. Since you are displaying HTML, you can create a clickable link

<script>document.write("<A HREF='" + expression.evaluate("\"URL\"") + "'>" + expression.evaluate("\"URL\"")) + "</A>";</script>

enter image description here

enter image description here

0

You could use JavaScript to load a custom URL:

<script type='text/javascript'>
    let layer = expression.evaluate("lower(@layer_name)");
    window.location.replace("http:/host.domain.tld/"+layer+"/");
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.