Form widgets - Photos, Info widgets (#696)

Author: alex-cit

src/.vitepress/sidebar/en.js

@@ -70,7 +70,7 @@ export default {
            { text: 'Numbers', link: '/layer/numbers/' },
            { text: 'Checkbox', link: '/layer/checkbox/' },
            { text: 'QR Code', link: '/layer/qr-code/' },
-           { text: 'Selecting Single or Multiple Values', link: '/layer/value-select/' },
+           { text: 'Selecting a Single or Multiple Values', link: '/layer/value-select/' },
            { text: 'Photos', link: '/layer/photos/' },
            { text: 'Informational Widgets', link: '/layer/info-widgets/' },
         ] },

src/gis/features/index.md

@@ -19,7 +19,7 @@ In [Creating a Project in QGIS](../../tutorials/creating-a-project-in-qgis/) you
 
 ## Survey layers
 Vector layers can be used as survey layers in your <MainPlatformName /> project. You can apply styles and set up the forms to make your field survey easier. 
-The same applies for non-spatial layers that can be used on their own to add new data or linked to a spatial layer, e.g. when linking multiple [photos](../../layer/photos/#how-to-attach-multiple-photos-to-features) or [records](../../layer/one-to-n-relations/). They can be also used in [value relation](../../layer/value-select/#value-relation) widgets.
+The same applies for non-spatial layers that can be used on their own to add new data or linked to a spatial layer, e.g. when linking multiple [photos](../../layer/photos/#how-to-attach-multiple-photos-to-one-feature) or [records](../../layer/one-to-n-relations/). They can be also used in [value relation](../../layer/value-select/#value-relation) widgets.
 
 Making changes in the data schema of layers can lead to issues in the synchronisation process. Be careful to [**deploy the revised project properly**](../../manage/deploy-new-project/). Design the data schema carefully when creating a layer to avoid the need to change it later.
 

src/layer/form-widgets/index.md

@@ -36,5 +36,5 @@ Here is an overview of widgets that are commonly used both in QGIS and the <Mobi
 |Value Map   |[Drop-down menu with predefined values](../value-select/#value-map) |![Mergin Maps mobile app value map field form](./mobile-form-valuemap-preview.jpg "Mergin Maps mobile app value map field form")   |
 |Value Relation   |[Drop-down menu with values from another table](../value-select/#value-relation) |![Mergin Maps mobile app value relation field form](./mobile-form-value-relation-preview.jpg "Mergin Maps mobile app value relation field form")   |
 |Attachment   |[Photos from device's camera or gallery](../photos) | ![Mergin Maps mobile app attachment field form](./mobile-form-photo-preview.jpg "Mergin Maps mobile app attachment field form")  ![Mergin Maps mobile app attachment field form](./mobile-form-photo-preview2.jpg "Mergin Maps mobile app attachment field form")  |
-|Relations - Gallery |[Multiple photos from device's camera or gallery](../photos/#how-to-attach-multiple-photos-to-features) | ![Mergin Maps mobile app multiple photos attributes form](./mobile-form-multiple-photo-preview.jpg "Mergin Maps mobile app multiple photos attributes form") |
+|Relations - Gallery |[Multiple photos from device's camera or gallery](../photos/#how-to-attach-multiple-photos-to-one-feature) | ![Mergin Maps mobile app multiple photos attributes form](./mobile-form-multiple-photo-preview.jpg "Mergin Maps mobile app multiple photos attributes form") |
 | Text and HTML Widgets |[Informational Widgets](../info-widgets/) | ![Mergin Maps mobile app HTML and Text widgets in attributes form](./mobile-form-info-widgets.webp "Mergin Maps mobile app HTML and Text widgets in attributes form") |

src/layer/info-widgets/index.md

@@ -1,8 +1,17 @@
 # Informational Widgets
 [[toc]]
 
-## Display instructions in the form using Text and HTML widget
-Sometimes, you may want to include instructions or tips for surveyors in your forms. <QGIS link="" text="QGIS" /> offers Text and HTML widgets that can be used for this purpose. Your text instructions can include [expressions and field values](#using-expressions-in-text-and-html-widgets) as well. The HTML widget supports various [HTML tags](https://doc.qt.io/qt-6/richtext-html-subset.html#supported-tags), so it can be also used, for instance, to display [online images](#using-html-widget-to-display-online-images-and-other-online-resources).
+<QGISHelp ver="latest" link="/user_manual/working_with_vector/vector_properties.html#other-widgets" text="QGIS" /> also offers widgets that can be added to the form to display values or text, but are not connected to a specific field of the layer. <MainPlatformName /> supports the HTML, Text and [Spacer](../form-layout/#spacer-widget) widget. 
+
+HTML and Text widgets can be used, e.g., to [display instructions](#text-and-html-widget) in the form. The HTML widget supports various [HTML tags](https://doc.qt.io/qt-6/richtext-html-subset.html#supported-tags), so it can be also used, for instance, to display [online images](#using-html-widget-to-display-online-images-and-other-online-resources) or [open local files](#using-html-widget-to-open-local-files).
+
+|<div style="width:150px"> Widget </div> |Preview in the <MobileAppNameShort />|
+|:---:|:---:|
+[Text and HTML Widgets](#text-and-html-widget) | ![Mergin Maps mobile app HTML and Text widgets in attributes form](../form-widgets/mobile-form-info-widgets.webp "Mergin Maps mobile app HTML and Text widgets in attributes form")  |
+
+
+## Text and HTML widget
+The **Text** and **HTML widgets** provide an option to include instructions or tips for surveyors in your attributes forms. These text instructions can include [expressions and field values](#using-expressions-in-text-and-html-widgets) as well. 
 
 These widgets can be found in **Available Widgets** in the **Other Widgets** section when using the [Drag and Drop Designer](../form-layout/#qgis-drag-and-drop-designer).
 ![QGIS HTML and Text Widget](./qgis-form-html-text-widget.jpg "QGIS HTML and Text Widget")
@@ -16,15 +25,15 @@ If you prefer your text to be formatted, you may do so in the **HTML** widget. H
 ...and this is how the Text and HTML widgets look like in the form in QGIS (left) and in the mobile app (right).
 ![Text and HTML widgets in QGIS and in Mergin Maps mobile app](./qgis-form-text-html.jpg "Text and HTML widgets in QGIS and in Mergin Maps mobile app")
 
-## Using expressions in Text and HTML widgets
+### Using expressions in Text and HTML widgets
 Expressions and variables can be used both in the Text and the HTML widget.
 
-![QGIS Configure Text Widget Expression Builder](./qgis-text-widget-expression.gif "QGIS Configure Text Widget Expression Builder")
-
-:::tip
+:::tip Example project available
 Clone <MerginMapsProject id="documentation/form_cascade" /> to follow this example.
 :::
 
+![QGIS Configure Text Widget Expression Builder](./qgis-text-widget-expression.gif "QGIS Configure Text Widget Expression Builder")
+
 1. When configuring the Text or HTML widget, click on the **Expression Builder** button
 2. Enter the expression that will be used in your text and click **OK**.
 
@@ -33,6 +42,7 @@ Clone <MerginMapsProject id="documentation/form_cascade" /> to follow this examp
 3. Click on the **+** button to add the expression to the text.
 
    Here, we configured the widget with this text:
+   
    `Make sure the number plate [% "VRP" %] is visible in the photo.`
 
    In this case, `VRP` is the name of a field aliased as `Vehicle Registration Plate` in the form.
@@ -42,7 +52,7 @@ Clone <MerginMapsProject id="documentation/form_cascade" /> to follow this examp
 ... and this is how it works during the field survey. `[% "VRP" %]` expression displays the current value of the `Vehicle Registration Plate` field.
 ![Mergin Maps mobile app text widget with variable](./mobile-text-widget-expression.jpg "Mergin Maps mobile app text widget with variable")
 
-## Using HTML widget to display online images and other online resources
+## Display online images and other online resources using HTML widget {#using-html-widget-to-display-online-images-and-other-online-resources}
 The **HTML widget** can be also used to display online images in the mobile app or open online resources, such as PDF files, videos or websites, in the browser of your device.
 
 ::: tip
@@ -73,7 +83,7 @@ QGIS may not display the preview of the online image if you use QGIS 3.36 or hig
 :::
 
 
-## Using HTML widget to open local files
+## Open local files using HTML widget {#using-html-widget-to-open-local-files}
 The HTML widget can also be used to open local files: for instance, a locally stored PDF file can be opened from within the form during the survey.
 
 ::: tip
@@ -97,16 +107,3 @@ Local files can be displayed in the form also using [default values](../open-fil
 
 In the <MerginMapsProject id="documentation/forms-display-images-and-files" /> project, you can explore and compare both alternatives.
 :::
-
-## Spacer widget
-<Badge text="since QGIS 3.30" type="tip"/>
-The Spacer widget can be useful if you want to have some space between the fields in your form or add a horizontal line. 
-
-It can be found in *Available Widgets* in the *Other Widgets* section when using the [Drag and Drop Designer](../form-layout/#qgis-drag-and-drop-designer).
-![QGIS forms Spacer Widget](./qgis-form-spacer-widget.jpg "QGIS Spacer Widget")
-
-When adding the spacer widget to the form, there is an option to check the **Draw horizontal line** option. Otherwise, a vertical space will be added to the form.
-![QGIS Spacer Widget configuration](./qgis-configure-spacer-widget.jpg "QGIS Spacer Widget configuration")
-
-And this how the spacer widget looks like in the form in QGIS (left) and in the mobile app (right).
-![Spacer widget in QGIS and mobile app form](./spacer-widget-forms.jpg "Spacer widget in QGIS and mobile app form")