{"id":4330,"date":"2018-11-06T07:30:21","date_gmt":"2018-11-06T06:30:21","guid":{"rendered":"https:\/\/www.opengis.ch\/?p=4330"},"modified":"2020-04-29T16:05:12","modified_gmt":"2020-04-29T14:05:12","slug":"qml-widgets-qgis","status":"publish","type":"post","link":"https:\/\/www.opengis.ch\/it\/2018\/11\/06\/qml-widgets-qgis\/","title":{"rendered":"The new QML widgets in QGIS – When widgets get unbridled"},"content":{"rendered":"

Individuality is the definition of freedom. And freedom is the fundamental requirement of man\u2019s mind. QGIS possibly cannot give you all the freedom you require in life. But at least a lot of freedom in how you manage your work. QGIS 3.4.0 LTR was released last week and it comes loaded with features supporting big freedom in the configuration of your projects.  Let’s focus on the QML Widget. QML is the smart casual look of widgets. With the help of some simple code, you will be able to visualize your data in the attribute form like never before. You can display beautiful charts, complex JSON data, and fancy colored unicorns. <\/b><\/em><\/p>\n

How it’s done<\/h1>\n

Let’s start with an example. In the Attribute Form<\/em> configuration in the Layer Properties<\/em> you have first to activate the drag and drop designer<\/em>. Not only can you drag the field- <\/em>and relation-items<\/em> from the available widget list<\/em> to the form layout list<\/em>, but also a QML Widget<\/strong><\/em>. When you drop this item, it creates an “instance” of a QML Widget<\/em>. This means, you can drag and drop as many QML Widgets<\/em> as you like to have on your form and configure each of them individually.<\/p>\n

QML (Qt Modelling Language) is a user interface specification and programming language. It allows developers and designers alike to create highly performant, fluidly animated and visually appealing applications. QML offers a highly readable, declarative, JSON-like syntax with support for imperative JavaScript expressions combined with dynamic property bindings. Source: Qt documentation<\/a><\/em><\/p><\/blockquote>\n

It’s a bit like an HTML page on the attribute form but very well integrated with Qt.
\nOn dropping the item, the configuration dialog pops up. After closing you can come back to it by double-clicking the item in the form layout list, like you do it with containers and tabs. If your don’t know QML that much yet, the default snippets from the drop-down can create an example of a rectangle, a pie chart or a bar chart. This could help you to create your own widget. On the right you can see a preview of your widget in real time. There are powerful layout possibilities to design it according to your ideas. For more information about it see the QML layout part of the Qt documentation<\/a>.
\n\"\"<\/a>
\nBut a chart makes no sense if there is no data. Of course, you can enter the data directly into your QML code, but most likely you need the data of the features to be visualized. This brings us to expressions<\/strong><\/em>. You can use them like you are used to in Default Values<\/em>, Constraints<\/em> and Display Messages<\/em>. You’ll find the well-known expression builder widget in this configuration as well.<\/p>\n

Using expressions<\/h2>\n

So let’s assume we want to visualize who holds what share of a forest. These forests are owned by the country (national), the canton (cantonal) or private. To keep it simple we have three attributes for that: national_share<\/code>,cantonal_share<\/code> and private_share<\/code>.
\nAfter creating the default pie chart you will find this snippet in the QML code text area:<\/p>\n

PieSeries {\n    id: pieSeries\n    PieSlice { label: \"First slice\"; value: 25 }\n    PieSlice { label: \"Second slice\"; value: 45 }\n    PieSlice { label: \"Third slice\"; value: 30 }\n}<\/pre>\n
Let’s set the field expressions into the PieSlice-values<\/em>. Just select them in the expression widget and add them with the +<\/code> into the chart.
\n\"\"<\/a>
\nAs you can see the expressions in the code are wrapped inside expression.evaluate(\"<expression>\")<\/code>. This means there are no limits in using expressions.
\nYou are open to use more complex expressions like e.g. for the title property of the pie chart:<\/p>\n
title: expression.evaluate(\"CASE WHEN @layer_name LIKE \\\"forest\\\" THEN \\\"Forest\\\" ELSE @layer_name END\")<\/pre>\n
Or in case the task with forest shares would be solved with relations to other layers by filling up a model with the children and the children’s share. This is possible by using expressions with the help of the expression functionrelation_aggregate<\/code>.
\nMore information about expressions can be found in the QGIS Documentation<\/a>.
\nBack to our example. The result will look like this on the attribute form. It visualizes the share values in the pie chart.
\n\"\"<\/a>
\nThe visualization is not (yet) updated in real time when the values change. But this would be a nice thing to have in the future… If you would like to support this, please contact us<\/a>.<\/p>\n
And that’s it<\/h1>\n
I hope you liked reading and you will enjoy using it to make beautiful widgets and forms. If you have questions or inputs, feel free to add a comment.
\n… and in case you still asking where the promised unicorns are. Well you have to wait for the part 2 of this article \ud83d\ude09
\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Individuality is the definition of freedom. And freedom is the fundamental requirement of man\u2019s mind. QGIS possibly cannot give you all the freedom you require in life. But at least a lot of freedom in how you manage your work. QGIS 3.4.0 LTR was released last week and it comes […]<\/p>\n","protected":false},"author":6,"featured_media":4777,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6,15,17,19],"tags":[125],"class_list":["post-4330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gis","category-qgis","category-qml","category-scripts","tag-qgis-org"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2018\/11\/pie_chart.png?fit=1067%2C521&ssl=1","jetpack-related-posts":[{"id":4365,"url":"https:\/\/www.opengis.ch\/it\/2018\/11\/13\/visualize-postgres-json-data-in-qml-widgets\/","url_meta":{"origin":4330,"position":0},"title":"Visualize Postgres JSON data in QML widgets","author":"Dave Signer","date":"13 Novembre 2018","format":false,"excerpt":"As promised some time ago in\u00a0\"The new QML widgets in QGIS \u2013 When widgets get unbridled\" we still owe you some fancy unicorns, but first let's have a look at another nice feature that has been introduced in QGIS 3.4 LTR,\u00a0 the reading of PostgreSQL JSON and JSONB types. With\u2026","rel":"","context":"In "GIS"","block_context":{"text":"GIS","link":"https:\/\/www.opengis.ch\/it\/category\/gis\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2018\/11\/blog_qml_qml_fancy-1.gif?fit=889%2C375&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2018\/11\/blog_qml_qml_fancy-1.gif?fit=889%2C375&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2018\/11\/blog_qml_qml_fancy-1.gif?fit=889%2C375&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2018\/11\/blog_qml_qml_fancy-1.gif?fit=889%2C375&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":11735,"url":"https:\/\/www.opengis.ch\/it\/2020\/10\/20\/qfield-1-7-rockies-hits-the-stage\/","url_meta":{"origin":4330,"position":1},"title":"QField 1.7 Rockies hits the stage","author":"Dave Signer","date":"20 Ottobre 2020","format":false,"excerpt":"QField 1.7 Rockies hits the stage! Be ready for the cold weather with a smooth coordinate search, value relation filters, all new data-driven QML & HTML widgets, enhanced geometry editing functionalities and an expandable legend.","rel":"","context":"In "Android QGIS"","block_context":{"text":"Android QGIS","link":"https:\/\/www.opengis.ch\/it\/category\/gis\/qfield\/android-qgis\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2020\/10\/qml_land_trans.png?fit=1200%2C643&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2020\/10\/qml_land_trans.png?fit=1200%2C643&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2020\/10\/qml_land_trans.png?fit=1200%2C643&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2020\/10\/qml_land_trans.png?fit=1200%2C643&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2020\/10\/qml_land_trans.png?fit=1200%2C643&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":8308,"url":"https:\/\/www.opengis.ch\/it\/2019\/12\/12\/qgis-on-the-road-episode-4\/","url_meta":{"origin":4330,"position":2},"title":"QGIS on the Road: Episode IV – A New Hope","author":"Marco Bernasocchi","date":"12 Dicembre 2019","format":false,"excerpt":"Maya is coming back with a lot of new ideas, demanding more QGIS power. Since she has received plenty of great feedback on honey from hives located at certain spots, she wants to have full overview over the whole area now.","rel":"","context":"In "QGIS on the road"","block_context":{"text":"QGIS on the road","link":"https:\/\/www.opengis.ch\/it\/category\/events\/qgis-on-the-road\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_04.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_04.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_04.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_04.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_04.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":8305,"url":"https:\/\/www.opengis.ch\/it\/2019\/12\/10\/qgis-on-the-road-episode-3\/","url_meta":{"origin":4330,"position":3},"title":"QGIS on the Road: Episode III – Attack of the Destructor","author":"Marco Bernasocchi","date":"10 Dicembre 2019","format":false,"excerpt":"After Maya realizes that many of her beehives have been infected by severe diseases she needs to act quickly to get an overview of the situation. She grabs some friends and tablets and launches QField to map the situation. After assessing the results with advanced configuration of the attribute table\u2026","rel":"","context":"In "QGIS on the road"","block_context":{"text":"QGIS on the road","link":"https:\/\/www.opengis.ch\/it\/category\/events\/qgis-on-the-road\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_03.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_03.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_03.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_03.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2019\/12\/episode_03.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":14471,"url":"https:\/\/www.opengis.ch\/it\/2024\/06\/18\/supercharge-your-fieldwork-with-qfields-project-and-app-wide-plugins\/","url_meta":{"origin":4330,"position":4},"title":"Supercharge your fieldwork with QField’s project and app-wide plugins","author":"Mathieu","date":"18 Giugno 2024","format":false,"excerpt":"Imagine digitizing photos of spotted birds onto a vector point layer with a single tap? Now you can, thanks to QField\u2019s new plugin framework. Find all the details in our latest blog post!","rel":"","context":"In "QField"","block_context":{"text":"QField","link":"https:\/\/www.opengis.ch\/it\/category\/gis\/qfield\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2024\/06\/qfield-bird-plugin.gif?fit=640%2C360&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2024\/06\/qfield-bird-plugin.gif?fit=640%2C360&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2024\/06\/qfield-bird-plugin.gif?fit=640%2C360&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":12165,"url":"https:\/\/www.opengis.ch\/it\/2021\/06\/08\/qfieldcloud-now-opensource-happy-10-years-of-field-mapping-with-qgis\/","url_meta":{"origin":4330,"position":5},"title":"QFieldCloud now opensource – Happy 10 Years of field mapping with QGIS","author":"Marco Bernasocchi","date":"8 Giugno 2021","format":false,"excerpt":"Today, on QField's 10th anniversary, we're extremely proud to publish the results of over 18 months of development and give you the source code of QFieldCloud to go and make your awesome adaptations, solutions, and hopefully contributions :) If you want to quickly try it out, head to\u00a0https:\/\/qfield.cloud where our\u2026","rel":"","context":"In "QField"","block_context":{"text":"QField","link":"https:\/\/www.opengis.ch\/it\/category\/gis\/qfield\/"},"img":{"alt_text":"QField git history","src":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2021\/06\/qfield-git-history.png?fit=660%2C280&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2021\/06\/qfield-git-history.png?fit=660%2C280&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.opengis.ch\/wp-content\/uploads\/2021\/06\/qfield-git-history.png?fit=660%2C280&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_shortlink":"https:\/\/wp.me\/pbdBtI-17Q","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/posts\/4330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/comments?post=4330"}],"version-history":[{"count":1,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/posts\/4330\/revisions"}],"predecessor-version":[{"id":4779,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/posts\/4330\/revisions\/4779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/media\/4777"}],"wp:attachment":[{"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/media?parent=4330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/categories?post=4330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.opengis.ch\/it\/wp-json\/wp\/v2\/tags?post=4330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}