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?

Improve this question
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
    Commented Aug 19, 2020 at 9:55

2 Answers 2

Reset to default
2

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

Improve this answer
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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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