BT and BF documentation update

docs/volkovlabs-dynamictext-panel/external.mdx

@@ -599,3 +599,91 @@ import("/public/loadTailwindFromCDN.js").then(
   }
 );
 ```
+
+### Mapbox GL
+
+This is another great example of external resource usage in the Business Text Plugin. The idea comes from [Josiah Solomon](https://github.com/yosiasz).
+
+Follow the below outlined steps to display [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/) on your Grafana dashboard.
+
+<Image
+  title="The Mapbox map displayed using Business Text on the dashboard."
+  src="/img/plugins/volkovlabs-dynamictext-panel/mapboxgl.png"
+/>
+
+#### Content
+
+```html
+<div id="map" />
+```
+
+Use the following for the **JavaScript**->**After Content Ready**:
+
+```js
+import("https://cdn.jsdelivr.net/npm/[email protected]/+esm").then(
+  ({ default: mapboxGl }) => {
+    console.log("mapboxgl", mapboxGl);
+
+    mapboxGl.accessToken = "TOKEN";
+    const map = new mapboxGl.Map({
+      // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
+      style: "mapbox://styles/mapbox/light-v11",
+      center: [-74.0066, 40.7135],
+      zoom: 15.5,
+      pitch: 45,
+      bearing: -17.6,
+      container: "map",
+      antialias: true,
+    });
+
+    map.on("style.load", () => {
+      // Insert the layer beneath any symbol layer.
+      const layers = map.getStyle().layers;
+      const labelLayerId = layers.find(
+        (layer) => layer.type === "symbol" && layer.layout["text-field"]
+      ).id;
+
+      // The 'building' layer in the Mapbox Streets
+      // vector tileset contains building height data
+      // from OpenStreetMap.
+      map.addLayer(
+        {
+          id: "add-3d-buildings",
+          source: "composite",
+          "source-layer": "building",
+          filter: ["==", "extrude", "true"],
+          type: "fill-extrusion",
+          minzoom: 15,
+          paint: {
+            "fill-extrusion-color": "#aaa",
+
+            // Use an 'interpolate' expression to
+            // add a smooth transition effect to
+            // the buildings as the user zooms in.
+            "fill-extrusion-height": [
+              "interpolate",
+              ["linear"],
+              ["zoom"],
+              15,
+              0,
+              15.05,
+              ["get", "height"],
+            ],
+            "fill-extrusion-base": [
+              "interpolate",
+              ["linear"],
+              ["zoom"],
+              15,
+              0,
+              15.05,
+              ["get", "min_height"],
+            ],
+            "fill-extrusion-opacity": 0.6,
+          },
+        },
+        labelLayerId
+      );
+    });
+  }
+);
+```

docs/volkovlabs-form-panel/data-flow.mdx

@@ -33,11 +33,22 @@ The query is short for the native Grafana query. Any initial request carries dat
 
 This method was created to allow leveraging the existing Grafana data extraction mechanism. To make it work, map every Data Manipulation form element to the appropriate data frame field.
 
+:::info Version
+
+Since version 4.2.0. the `Query Field` and `Field Name` fields have been relocated from the `Elements` section to the `Initial Fields` options section.
+
+:::
+
 <Image
-  title="Configure the Initial Request for Query."
+  title="Configure the Initial Request for Query. "
   src="/img/plugins/volkovlabs-form-panel/query.png"
 />
 
+<Image
+  title="New location of `Query Field` fields."
+  src="/img/plugins/volkovlabs-form-panel/query-new.png"
+/>
+
 ### Data source
 
 Do not confuse this data source with the one you can select on the left-hand side. This is a different parameter located in the **Update Request** section and is visible when the **Data source** type is selected.
@@ -51,6 +62,11 @@ The **Initial Payload Request** is a mandatory piece of code that needs to conta
   src="/img/plugins/volkovlabs-form-panel/ds-all.png"
 />
 
+<Image
+  title="Steps to configure the Initial Request for Data Source. New location of `Field Name` fields."
+  src="/img/plugins/volkovlabs-form-panel/ds-all-new.png"
+/>
+
 ### REST API
 
 The **REST API** type works with an external API server. When specifying the API URL, you can use global and dashboard variables. Header parameters are available as separate options.

docs/volkovlabs-form-panel/form-elements.mdx

@@ -76,6 +76,17 @@ Element types have specific options. For instance, the Code Editor type in addit
   src="/img/plugins/volkovlabs-form-panel/add-form-element.png"
 />
 
+:::info Version
+
+Since version 4.2.0. the `Query Field` and `Field Name` fields have been relocated from the `Elements` section to the `Initial Fields` options section.
+
+:::
+
+<Image
+  title="New location of `Query Field` fields."
+  src="/img/plugins/volkovlabs-form-panel/query-new.png"
+/>
+
 ## Move a form element
 
 :::info Version
@@ -529,9 +540,23 @@ Using the **Field name** parameter for **Data Source** and the **Query Field** f
   src="/img/blog/2023-10-10-form-panel-3.2.1/field-name-ds.png"
 />
 
+The `Field Name` option for each Form Element is located under the code editor when the data source option is enabled. Specify a field name for appropriate form element from the data source response.
+
+<Image
+  title="Steps to configure the Initial Request for Data Source. New location of `Field Name` fields."
+  src="/img/plugins/volkovlabs-form-panel/ds-all-new.png"
+/>
+
 ### Query
 
 <Image
   title="Explicitly specify the field-to-form element mapping for Query using Query Field."
   src="/img/blog/2023-10-10-form-panel-3.2.1/field-name-query.png"
 />
+
+The `Query Field` option for each Form Element is located under the code editor when the Query option is enabled. Specify a field name for appropriate form element from the Query response.
+
+<Image
+  title="Explicitly specify the field-to-form element mapping for Query using Query Field. New location of Query Field fields since version 4.2.0"
+  src="/img/plugins/volkovlabs-form-panel/query-new.png"
+/>