update docs

docs/Building_Diagrams/Forms.md

@@ -42,11 +42,13 @@ To create forms inside editor, we utilize user tasks within the BPMN file.
 Upon creating a new BPMN file, open it to access the editor.
 
 **Initiating the Form Editor**
+
 - In the editor, proceed to the "Web form" section. Navigate to the "Web form" section. If starting from scratch, launch the editor and name your file (e.g., "demo"). After saving, it will automatically generate three essential files for us: a schema, UI settings, and some example data.
 
 ![Form Editor](images/Form_editor.png)
 
 **Understanding the Three Core Files**
+
 - **JSON Schema**: This file describes the form. It allows you to define titles, property names, and more. As you make changes in this file, they will reflect in the form preview window. This schema outlines the properties or data points you aim to collect.
   ![Form Editor](images/Form_editor1.png)
 
@@ -64,7 +66,6 @@ For instance, you can set the UI widget correctly for each element, ensuring it
 
 ![Form Editor](images/Form_editor4.png)
 
-
 ## SpiffArena react-jsonschema-form enhancements
 
 SpiffArena has enhanced the capabilities of react-jsonschema-form to provide users with more dynamic and flexible form-building options.
@@ -181,11 +182,19 @@ But in some other case where you actually want to have fields laid out horizonta
 Example form schema:
 
     {
+      "title": "Side by side",
+      "description": "A simple form demonstrating side-by-side layout of fields",
+      "type": "object",
+      "properties": {
         "firstName": {
-        "type": "string",
+          "type": "string"
         },
-      lastName": {
-        "type": "string",
+        "lastName": {
+          "type": "string"
+        },
+        "notes": {
+          "type": "string"
+        }
       }
     }
 
@@ -204,13 +213,16 @@ But in some other case where you actually want to have fields laid out horizonta
             "md": 2,
             "lg": 4
           }
+        },
+        {
+          "notes": {}
         }
       ]
     }
 
-In this case, we are saying that we want firstName and lastName in the same row, since there is only one "row" in the UI layout (one element of the array).
+In this case, we are saying that we want firstName and lastName in the same row, since they are both in the first element of the ui:layout array.
 We are saying that firstName should take up 4 columns when a large display is used.
-The lastName also takes up 4 columns, which fills up the whole row, which has 8 columns available for large displays.
+The lastName also takes up 4 columns, so the two of them together fill up the whole row, which has 8 columns available for large displays.
 Medium displays have 5 columns available and small displays have 4.
 If you just specific a uiSchema like this, it will figure out the column widths for you:
 
@@ -278,6 +290,7 @@ To incorporate the markdown widget into your rjsf form, follow these steps:
 ```json
 "ui:widget": "markdown"
 ```
+
 ![rsjf markdown](images/rsjf_markdown.png)
 
 ### Numeric Range Field