Merge branch 'main' into pooja/add-custom-code-snippets

Author: PoojaB26

docs/marketplace/creators-hub/submission-criteria.md

@@ -203,10 +203,30 @@ A seamless and positive test experience is crucial for users to evaluate your Fl
 
 #### 4.1 Functional Run Mode Link
 
-- **Criteria:** The provided Run Mode link must be active and correctly load a working demo of your project.
-- **Why it Matters:** The Run Mode link is the primary way users can interact with your project before purchasing. A broken or inaccessible link creates a significant barrier.
-- **What To Do:**
-    - **Double-check your link:** Before submitting, test the link multiple times to confirm it showcases the experience you want potential buyers to have.
+- **Criteria:** The provided Run Mode link must be active and correctly load a working demo of your project. For mobile-only features or utility libraries that cannot be demonstrated in Run Mode's web environment, you must provide alternative demonstration methods.
+- **Why it Matters:** The Run Mode link is the primary way users can interact with your project before purchasing. A broken, inaccessible, or non-demonstrative link creates a significant barrier to understanding the item's value.
+- **What To Do:**
+    - **For Standard Web-Compatible Items:**
+        - Double-check your link before submitting to confirm it showcases the experience you want potential buyers to have.
+        - Test the link multiple times to ensure consistent functionality.
+    - **For Mobile-Only Features:**
+        - Create a dedicated demonstration page in your project that explains the mobile-only functionality.
+        - Include screenshots, videos, or mockups showing how the feature works on mobile devices.
+        - Clearly indicate which features are mobile-only and why they cannot be demonstrated in Run Mode.
+        - Optionally, provide a published FlutterFlow web deploy link that can be used instead of the Run Mode URL.
+    - **For Utility Libraries (e.g., Analytics, Background Services):**
+        - Create a demonstration page that explains the library's functionality.
+        - Show configuration options and expected outcomes.
+        - Include visual aids like flowcharts or diagrams to explain the library's operation.
+        - Provide example code or configuration snippets.
+        - Consider adding debug/test outputs that demonstrate the library is working.
+    - **Documentation:**
+        - Regardless of the type of item, ensure your documentation clearly explains how to implement and test the functionality in a real mobile environment.
+        - Include troubleshooting guides and common implementation scenarios.
+
+:::tip
+For items that cannot be fully demonstrated in Run Mode, focus on creating a clear, informative demonstration page that helps users understand the value and implementation of your item. Visual aids, clear explanations, and comprehensive documentation are key to helping users make informed decisions.
+:::
 
 #### 4.2 User Sign-In (Anonymous Auth)
 
@@ -251,7 +271,7 @@ Building a solid app template goes beyond surface-level design. It's about creat
 #### 5.2 No Pixel Overflow
 
 - **Criteria:** Ensure your UI elements are positioned and sized correctly to avoid content overflowing its container, leading to visual glitches / cut off content.
-- **Why It Matters:** Pixel overflows are a sign of UI inconsistencies that can negatively impact the user experience, especially on different screen sizes. Pixel overflow issues can occur in Test Mode when there’s a hardcoded pixel value and not enough space on the screen to render that exact value.
+- **Why It Matters:** Pixel overflows are a sign of UI inconsistencies that can negatively impact the user experience, especially on different screen sizes. Pixel overflow issues can occur in Test Mode when there's a hardcoded pixel value and not enough space on the screen to render that exact value.
 - **What To Do:**
     - **Preview pixel overflows:** Toggle the pixel overflow icon in the top-right of the canvas to see if there are any overflow issues.
     - **Leverage FlutterFlow's layout tools:** Use Expanded and Flex values to help prevent layout issues. Make `Columns` or `Rows` scrollable to prevent overflows. Use auto-sizing text or text clipping where it makes sense. Remove hard-coded width and height where it makes sense.

docs/resources/control-flow/backend-logic/api/rest-api.md

@@ -569,38 +569,70 @@ Learn more about **[JSONPath](https://www.rfc-editor.org/rfc/rfc9535.html)** and
 :::
 
 ### Adding JSON Path
+You can effortlessly define and manage **JSON Paths** for your API calls in FlutterFlow to parse and extract the data you need. Once added you can [use](#using-json-path) them as **Predefined Path** while accessing the **JSON Body**.
 
-To add JSON path:
+First, [create and test](../api/create-test-api-calls.md) your API call. Inside the **JSON Paths** section, click **+ Add JSON Path**, enter your **JSON Path**, and assign it a name. If the expression is valid, a preview of the response appears under **Response Preview**. Click the **Preview** icon to see the full response. If the response contains a list of items, the **Is List** option will be enabled automatically.
 
-1. First, [create and test](../api/create-test-api-calls.md) your API call.
-
-2. Inside the **JSON Paths** section, click on the **+ Add JSON Path**.
-3. Enter your **JSON Path** and give it a **Name**.
-4. If you entered the valid expression, you'll see the starting part of the response under the **Response Preview** column. To see the complete response, click on the **Preview** icon.
-5. If the returned response is a list of items, by default, **Is List** will be checked; however, if you want to convert the response into the list explicitly, checkmark it.
-6. We also recommend all the possible JSON paths (under the **Recommended** tab) that might include what you are looking for.
-
-   1. To add the recommended JSON path, checkmark the **Selected**, open the **Selected** tab, 
-   and give it a name.
-
-<div class="video-container"><iframe src="https://www.loom.
-com/embed/fb4f0f0cbdc64ecface05622a8b8cc37?sid=e82499c7-b581-4d62-a197-037ee31a14b0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+Under the **Recommended** section, you'll find suggested JSON paths that might contain the data you need.
 
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/mJBbGANYmn6SrtrByAYf?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
 
 
 ### Using JSON Path
 
-While accessing values from an API Call, you can either enter the custom JSON path or use the already created JSON path.
-
-To use the already added JSON path:
+While accessing values from an API Call, you can either enter the custom JSON path or use the [predefined JSON path](#adding-json-path).
 
-1. Select your API response.
-2. Set the **API response Options** to **JSON Body**.
-3. Set the **Available Options** to **JSON Path**.
-4. Set the **JSON Path Name** to the one that you created earlier.
+To use a predefined JSON Path, first, select your API response. Then, set the **API Response Options** to **JSON Body** and the **Available Options** to **JSON Path** or **Predefined Path**. Finally, specify the JSON Path Name or select from the predefined JSON Path to map the extracted data for use in your app.
 
-<div class="video-container"><iframe src="https://www.loom.
-com/embed/502ffe547e64486c937e74c02b28fd3a?sid=21233fb9-9782-4e2f-b04a-a888d784f62f" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/gfbboO0ju21x2LhkksMy?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
 
 
 ## Advanced Settings
@@ -739,3 +771,23 @@ If you prefer watching a video tutorial, here's the one for you:
 <div class="video-container"><iframe src="https://www.youtube.
 com/embed/L5qj2f9skt4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 :::
+
+
+## FAQs
+<details>
+<summary>
+Why is my Predefined Path not showing any options?
+</summary>
+<p>
+This often happens if you added the Predefined Path but forgot to save the API call in FlutterFlow. Ensure you click Save after making any changes to your API call so FlutterFlow can properly recognize and display your predefined paths.
+</p>
+</details>
+
+<details>
+<summary>
+Why am I getting a “Current variable is not valid” error?
+</summary>
+<p>
+This error typically indicates that the widget isn’t receiving the data type it expects. For example, passing a list of colors directly to a text widget will trigger the error. In such cases, convert or supply the data as a string (or another compatible type) so the widget can properly display it.
+</p>
+</details>

docs/resources/ui/components/component-lifecycle.md

@@ -217,7 +217,7 @@ call the **Update Component State** action to toggle the value of `isFavourite`.
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/Y96decdgYWVll3SP9Jk8?embed&show_copy_link=true"
+        src="https://demo.arcade.software/4tEsyMFyCxEP1tWQcPVh?embed&show_copy_link=true"
         title="Get Component State"
         style={{
             position: 'absolute',