### Starting BLE Device Scan (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/ble-actions.md

Trigger the bluetoothStartScan action to initiate a scan for nearby BLE devices. The results are streamed via onDataStream and stored in ensemble.storage.devices.

```YAML
Button:
    label: Device scan
    onTap:
        bluetoothStartScan:
        onDataStream: |
            ensemble.storage.devices = event.data
```

--------------------------------

### Example YAML View Definition with File Actions

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/upload-files.md

Defines a screen layout using YAML, demonstrating the usage of `pickFiles` and `uploadFiles` actions within button `onTap` events. Includes examples of showing/hiding a loading indicator and displaying upload results.

```yaml
View:\n  # Optional - style the screen\n  styles:\n    scrollableView: true\n\n  # Optional - set the header for the screen\n  header:\n    title: "Action: uploadFiles"\n\n  # Specify the body of the screen\n  body:\n    Column:\n      styles: { gap: 16, padding: 24 }\n      children:\n        - Markdown:\n            text: |\n              Use the `uploadFiles`  action  upload files to specify `uploadApi`.\n\n              Then use the `onComplete`  properties to execute other actions when upload is successful.\n\n        - Button:\n            label: Pick Files\n            onTap:\n              pickFiles:\n                id: picker\n\n        - Button:\n            label: Upload Picked files\n            onTap:\n              executeCode:\n                body: |\n                  //@code\n                  loading.visible = true;\n\n                onComplete:\n                  uploadFiles:\n                    id: fileUploader\n                    files: ${picker.files}\n                    uploadApi: fileUploadApi\n                    inputs:\n                      url: https://en09cdal5asztm.x.pipedream.net\n                    onComplete: |\n                      //@code\n                      loading.visible = false;\n                    onError: |\n                      //@code\n\n                      loading.visible = false;\n                    maxFileSize: 100\n                    overMaxFileSizeMessage: Please select files less than 100kb\n\n        - Markdown:\n            text: ${fileUploader.body}\n\n        - Progress:\n            display: circular\n            id: loading\n            visible: false\n\n        - Divider\n\n        - Markdown:\n            text: |\n              Chain multiple file actions to pick files and upload them in one go\n              - Using `pickFiles` to pick file based on platform picker\n              - Using `uploadFiles` to upload selected files from file picker\n\n        - Button:\n            label: Pick & Upload\n            onTap:\n              pickFiles:\n                id: filePicker\n                onComplete:\n                  uploadFiles:\n                    files: ${filePicker.files}\n                    uploadApi: fileUploadApi\n                    inputs:\n                      url: https://en09cdal5asztm.x.pipedream.net\n                    onComplete: |\n                      //@code\n                      ensemble.debug('File uploaded');\n\n        - Divider:\n\n        - Markdown:\n            text: |\n              `pickFiles`  also comes with option such as:\n\n                - `allowMultiple` : To allow muliple file selection from gallery picker default (false)\n                - `allowCompression` : It will allow media to apply the default OS compression (default True)\n                - `allowedExtensions` : To filter file picking based on extensions like jpg, png, pdf...\n\n              `uploadFiles`  also comes with option such as:\n\n                - `files` : Pass the files that needs to upload e.g ${filePicker.files}\n\n                - `fieldName` : Field name that your server is expecting. (default files).\n\n                - `maxFileSize`: File size that is allowed in kb (default 100 mb), If multiple is allow then sum of all files\n                - `overMaxFileSizeMessage`: Error message to show when selected files size is above maxFileSize.\n\n        - Row:\n            styles: { mainAxis: spaceBetween, crossAxis: center }\n            children:\n              - Button:\n                  label: Multiple Images\n                  onTap:\n                    pickFiles:\n                      id: images\n                      allowMultiple: true\n                      allowCompression: false\n                      allowedExtensions:\n                        - jpg\n                        - png\n\n              - Text:\n                  text: ${images.files.length}\n        - Button:
```

--------------------------------

### Example Slidable Widget Configuration (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/widgets/slidable.mdx

This YAML snippet demonstrates how to configure a Slidable widget with start and end drawers. It shows how to set properties like direction, motion types, dismissible behavior with thresholds and durations, and define actions within the end drawer including icon, label, background color, and tap callback (onTap). The example also includes a basic child widget.

```YAML
Slidable:
  styles:
    direction: horizontal
    closeOnScroll: true
    dragStartBehavior: start
    useTextDirection: true
  startDrawer:
    options:
      extentRatio: 0.001 # we can keep the extent ratio small so that dismissible action looks smooth
      openThreshold: 0.25
      motion: behind
    dismissible:
      dismissThreshold: 0.75
      dismissalDurationMs: 300
      resizeDurationMs: 300
      motion: inversedDrawer
      onDismissed:
        showToast:
          message: Item dismissed
  endDrawer:
    children:
      - icon: star
        label: Favorite
        backgroundColor: yellow
        onTap:
          showToast:
            message: Added to favorites
  child:
    Container:
      padding: 16
      child:
        Text: "Swipe me left or right"
```

--------------------------------

### Installing Dependencies with pnpm (Shell)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/CONTRIBUTIONS.md

This command is used to install all necessary project dependencies listed in the package.json file using the pnpm package manager.

```Shell
pnpm i
```

--------------------------------

### Starting Local Development Server with pnpm (Shell)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/CONTRIBUTIONS.md

This command initiates the local development server for the documentation site, typically making it accessible at localhost:3000.

```Shell
pnpm dev
```

--------------------------------

### Starting Local Development Server on Custom Port with pnpm (Shell)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/CONTRIBUTIONS.md

Use this command to start the local development server on a specific port number instead of the default 3000, utilizing pnpm and Next.js.

```Shell
pnpm next dev -p <port_number>
```

--------------------------------

### Notification Handler with Navigation (JavaScript)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/tips-and-tricks/push-notification.md

Provides an example of a notification handler function that logs the notification and returns a payload to trigger navigation to a specific screen, demonstrating how to access notification data and pass inputs.

```js
function handle_notification(notification) {
    console.log(notification);
    
    // Assuming the screen name is in the FCM data section
    var payload = {
        "name": notification['data']['screen'],
        // You can also pass inputs that will be accessible on the destination screen
    };
    
    return payload;
}
```

--------------------------------

### Initializing Bluetooth (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/ble-actions.md

Use the bluetoothInit action to turn on Bluetooth (Android only) and subscribe to a stream of Bluetooth on/off state changes, updating a text widget with the status.

```YAML
Icon:
    name: bluetooth_fill
    library: remix
    onTap:
    bluetoothInit:
        onDataStream: |
        bluetoothStatus.text = event.data;
```

--------------------------------

### Enable Deeplink Module - Register Singleton

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

Uncomment the line that registers the DeferredLinkManager implementation as a singleton using GetIt to make the deeplink service available.

```Dart
      // GetIt.I.registerSingleton<DeferredLinkManager>(DeferredLinkManagerImpl());
```

--------------------------------

### Complete Ensemble UI Page Structure Example

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/screens-and-widgets/screen-structure.md

This example illustrates the typical structure of an Ensemble UI page, including the 'View' root, 'onLoad' action for initial data fetching (like an API call), 'styles' for layout and appearance, 'menu' for navigation components like 'BottomNavBar', and the 'body' containing the main content widgets organized within layout widgets like 'Column'.

```YAML
View:
  onLoad:
      invokeAPI:
        name: getUser
        inputs:
          id: 32GelurbLbd6umj3ULOkAXYSYyq2

  # Set the view to be scrollable
  styles:
    scrollableView: true
menu:
    BottomNavBar:
      styles:
        shadowColor: 0xFFFD451C
      items:
        - icon: home
          label: Home
          page: Home
          selected: true
        - label: Favorite
          icon: favorite
          page: Favorite
        - label: Promos
          icon: loyalty
          page: Promos
        - label: Account
          icon: account_circle
          page: Profile

  # This is the parent widget for all screen content
  body:
    Column:
      styles:
        backgroundGradient:
          colors: [ 0xFFF4D66C, 0xFFFEFAF3, 0xFFFFFFFF ]
          start: topLeft
          end: bottomRight

      children:
        - UserInfo
        - SearchBar
        - Categories
        - NearbyFood
```

--------------------------------

### Initialize Branch SDK - onSuccess Callback

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

This JavaScript snippet is executed when the Branch SDK successfully initializes, logging a confirmation message to the console.

```JavaScript
console.log("BranchSDK:: initialized successfully");
```

--------------------------------

### Example Usage of Audio Actions in Ensemble UI

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/pause-audio.md

This YAML snippet demonstrates how to create a simple audio player interface in Ensemble UI using various audio actions like `playAudio`, `pauseAudio`, `stopAudio`, `resumeAudio`, and `seekAudio`. It shows how to define buttons that trigger these actions and how to reference the audio instance using a unique `id`. It also includes an example of using `onComplete` with `playAudio` to execute code.

```yaml
View:
  header:
    title: Audio Player
  styles:
    scrollableView: true

  body:
    Column:
      styles:
        gap: 16
        padding: 24
      children:
        - Button:
            label: Play Audio
            onTap:
              playAudio:
                id: My Audio
                source: "https://file-examples.com/storage/fe8119f4e865f33329898be/2017/11/file_example_MP3_700KB.mp3"
                volume: 1 # 0 to 1
                balance: 0 # -1 to 1
                position: 2 # in seconds
                onComplete:
                  executeCode:
                    body: |
                      console.log("Audio Played");

        - Button:
            label: Play Audio 2
            onTap:
              playAudio:
                id: My Audio
                source: audio.mp3
                volume: 1 # 0 to 1
                balance: 0 # -1 to 1
                position: 2 # in seconds
                onComplete:
                  executeCode:
                    body: |
                      console.log("Audio Played");

        - Button:
            label: Pause Audio
            onTap:
              pauseAudio:
                id: My Audio

        - Button:
            label: Stop Audio
            onTap:
              stopAudio:
                id: My Audio

        - Button:
            label: Resume Audio
            onTap:
              resumeAudio:
                id: My Audio

        - Button:
            label: Seek Audio at 4 second
            onTap:
              seekAudio:
                id: My Audio
                position: 20 # in seconds
```

--------------------------------

### Example of showDialog action in YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/show-dialog.md

This YAML snippet demonstrates how to use the showDialog action within an EnsembleUI view. It shows examples of displaying a dialog on view load, using an inline widget for the dialog content, and using a custom widget with custom styling options like 'style' and 'verticalOffset'.

```yaml
View:
  header:
    title: Dialog
  onLoad:
    showDialog:
      widget: MyStartingDialog

  body:
    Column:
      styles: { margin: 10, gap: 5 }
      children:
        # use inline widget
        - Text:
            text: Your dialog can also be an inline widget
        - Button:
            label: Show Dialog
            onTap:
              showDialog:
                widget:
                  Text:
                    text: This dialog declares the widget inline and uses the default style.

        - Spacer:
            styles:
              size: 20

        # use custom styling
        - Text:
            text: You can customize the dialog style
        - Button:
            label: Show Custom Dialog
            onTap:
              showDialog:
                widget: MyCustomDialog
                options:
                  # no default style - zero margin/padding, no background color
                  style: none
                  # move it up half way between the top and the center of the screen
                  verticalOffset: -0.5
```

--------------------------------

### Example of navigating to a modal screen in EnsembleUI YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/navigate-back.md

This YAML snippet defines a simple EnsembleUI view with a button. Tapping the button triggers the navigateModalScreen action, opening a new screen named 'Action: navigateBackModal' as a modal overlay. This setup demonstrates a scenario where navigateBack would typically be used from the modal screen to return to this view.

```yaml
View:
  title: "Action: navigateBack"
  styles:
    scrollableView: true

  Column:
    styles: { gap: 16, padding: 24 }
    children:
      - Markdown:
          text: You can open a new screen above the current one and use "navigateScreen" to navigate back to this main screen.
      - Button:
          label: Show Detail Page
          onTap:
            navigateModalScreen:
              name: "Action: navigateBackModal"
```

--------------------------------

### Initialize Branch SDK - onLinkReceived Callback

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

This JavaScript snippet handles incoming Branch links after initialization, logging the received link data to the console.

```JavaScript
console.log("BranchSDK:: Branch Link Received: " + event.data.link);
```

--------------------------------

### Uncomment Auth Module Initialization (Dart)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/authentication/auth0.md

Locates and uncomments the line that initializes the authentication module implementation. This ensures the module is set up correctly when the application starts.

```Dart
// AuthModuleImpl().init();
```

--------------------------------

### Test Android Deep Link via ADB Shell

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deeplink.md

Executes an Android intent using the ADB shell to simulate clicking a deep link URL, allowing developers to test the deep linking setup on a connected device or emulator.

```shell
adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d [https://example.com](https://example.com/)
```

--------------------------------

### Adding Camera and Microphone Permissions (iOS)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deploy/1-prepare-app.md

Adds the necessary keys and strings to the iOS Info.plist file to request camera and microphone access from the user. Replace the example strings with your specific reasons.

```xml
<key>NSCameraUsageDescription</key>
<string>e.g. your reason for requesting camera access</string>

<key>NSMicrophoneUsageDescription</key>
<string>e.g. your reason for requesting microphone access</string>
```

--------------------------------

### Using Default Icon Library in YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/widgets/icon2.md

Shows how to define an icon using the default library. Although specifying 'library: default' is optional, this example explicitly includes it for clarity.

```yaml
- Icon:
    name: alarm
    library: default
```

--------------------------------

### Set MoEngage User Name (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/log_events.md

Example YAML configuration for setting the user's name in the MoEngage profile using the setUserName operation. Includes an onSuccess callback example.

```yaml
logEvent:
  provider: moengage
  operation: setUserName
  value: "John Smith"
  onSuccess: |
    //@code
    console.log("User name updated")
```

--------------------------------

### Example API Response Payload (JSON)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/concepts/item-template.md

Shows a sample JSON payload structure returned from the randomuser.me API, which is used as the data source for the subsequent Ensemble UI example demonstrating API data binding.

```json
{
  "results": [
    {
      "name": {
        "title": "Mrs",
        "first": "Lya",
        "last": "Brun"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/9.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/9.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/9.jpg"
      }
    }
  ]
}
```

--------------------------------

### YAML Examples: navigateScreen Action

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/navigate-screen.md

This YAML snippet shows various ways to use the `navigateScreen` action within a button's `onTap` property in an Ensemble View definition. It includes examples for simple navigation, passing inputs using expressions, and using the `clearAllScreens` and `replaceCurrentScreen` options. It also shows how to trigger navigation from an `executeCode` block.

```yaml
View:
  title: "Action: navigateScreen"
  styles:
    scrollableView: true

  Column:
    styles: { gap: 16, padding: 24 }
    children:
      - Markdown:
          text: You can navigate to another screen using action `navigateScreen`
      - Button:
          label: Navigate to Home
          onTap:
            navigateScreen:
              name: Home

      - Markdown:
          text: You can navigateScreen from code blocks using `ensemble.navigateScreen('ScreenName');`.
      - Button:
          label: Navigate to Home using code
          onTap:
            executeCode:
              body: |
                //@code
                ensemble.navigateScreen('Home');

      - Divider

      - Markdown:
          text: |
            #### Pass inputs
            You have the option of passing inputs to the target screen.

      - TextInput:
          id: messageInput
          label: Message to pass
          value: Hello there

      - Button:
          label: Navigate and pass inputs
          onTap:
            navigateScreen:
              name: "Action: navigateScreen inputs demo"
              inputs:
                message: ${messageInput.value}

      - Button:
          label: Navigate and pass inputs using code
          onTap:
            executeCode:
              body: |
                //@code
                ensemble.navigateScreen({
                  "name": "Action: navigateScreen inputs demo",
                  "inputs":  {
                    "message": messageInput.value
                  }
                });

      - Divider

      - Markdown:
          text: |
            #### options: clearAllScreens
            By default, Ensemble retains your previous screens. On browser, user can press back button and get the previous view.

            When you need to remove all the previous screens from the history stack, as in a logout scenario, use `clearAllScreens: true`.

      - Button:
          label: Navigate and clear all screen history
          onTap:
            navigateScreen:
              name: Home
              options:
                clearAllScreens: true

      - Divider

      - Markdown:
          text: |
            #### options: replaceCurrentScreen
            Sometimes when navigating to a new screen, you may not want the user to go back to the current screen. An example is after logging in, hitting back should not take the user back to the login screen. Use the flag `replaceCurrentScreen: true` to remove the current screen from the history stack.

      - Button:
          label: Navigate to new screen and replace the current screen
          onTap:
            navigateScreen:
              name: Home
              options:
                replaceCurrentScreen: true

```

--------------------------------

### Example MoEngage Notification Handler with Navigation (JavaScript)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/moengage/configuration.mdx

Provides a complete example of a notification handler function that logs the received notification and returns a navigation payload to direct the user to a specific screen based on data in the notification.

```JavaScript
function handle_notification(notification) {
    console.log("Received notification:", notification);
    
    // Assuming the screen name is in the data section
    var payload = {
        "name": notification['data']['screen'],
        // You can also pass inputs that will be accessible on the destination screen using \`notificationPayload.*\`
    };
    
    return payload;
}
```

--------------------------------

### Example View Structure with Haptic Buttons (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/invoke-haptic.md

This YAML snippet shows the structure of a view containing three buttons, each demonstrating a different method for triggering haptic feedback or related actions.

```yaml
View:
  header:
    title: Haptic
  Column:
    styles: { gap: 16, padding: 24 }
    children:
      - Button:
          label: Using Action
          onTap:
            invokeHaptic:
              type: lightImpact
              onComplete: |
                //@code
                console.log("Haptic completed")
      - Button:
          label: Using JavaScript
          onTap: |
            //@code
            invokeHaptic({type: lightImpact})
      - Button:
          label: Using methods
          onTapHaptic: lightImpact
          onTap: |
            //@code
            console.log("Button Press")
```

--------------------------------

### Connecting to BLE Device (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/ble-actions.md

Use the bluetoothConnect action to establish a connection to a specific BLE device using its ID. It includes streams for connection status and data received from the device.

```YAML
Button:
    label: Connect
    onTap: 
        bluetoothConnect:
        deviceId: ${device.deviceId}
        timeout: 60
        onConnectionStream: |
            status.text = event.data.status;
        onDataStream: |
            ensemble.storage.services = event.data;
```

--------------------------------

### Create Branch Deeplink - onSuccess Callback

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

This JavaScript snippet is executed upon successful creation of a Branch deep link, logging the resulting link URL to the console.

```JavaScript
console.log("BranchSDK:: Link created successfully: " + event.data.result);
```

--------------------------------

### getLocation Action Example in YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/get-location.md

A YAML example demonstrating how to use the `getLocation` action within an Ensemble View. It shows how to configure recurring location updates with a distance filter and define callbacks for successful location retrieval and error handling.

```YAML
View:
  # Optional - style the screen
  styles:
    scrollableView: true

  # Optional - set the header for the screen
  header:
    title: "Action: getLocation"

  # Specify the body of the screen
  body:
    Column:
      styles:
        padding: 24
        gap: 8
      children:
        - Text:
            text: Get location via Action
            styles:
              font: subtitle
        - Markdown:
            text: Use `getLocation` Action to get the location, with the option to continuously get location change updates.
        - Button:
            label: Listen for location changes
            onTap:
              getLocation:
                options:
                  recurring: true # while on this page, location changes will continue to execute onLocationReceived
                  recurringDistanceFilter: 50 # only dispatch if the new location is more than 50 meters away from the previous location
                onLocationReceived: |-
                  //@code
                  status.text = 'Lat: ' + latitude + ', Lng: ' + longitude;
                onError: |-
                  //@code
                  status.text = reason;
        - Text:
            id: status
```

--------------------------------

### Initialize Branch SDK - onError Callback

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

This JavaScript snippet is triggered if the Branch SDK fails to initialize, logging the error details to the console.

```JavaScript
console.log("BranchSDK:: Failed to initialize" + event.error);
```

--------------------------------

### Adding iOS Bluetooth Usage Description (plist)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/ble-actions.md

Add the NSBluetoothAlwaysUsageDescription key to your iOS Info.plist file to provide a user-facing explanation for why the app requires Bluetooth access.

```plist
    <key>NSBluetoothAlwaysUsageDescription</key>
    <string>This app needs Bluetooth to function</string>
```

--------------------------------

### Specify Button Icons using Shorthand YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/tips-and-tricks/specifying-icons.md

Demonstrates the shorthand syntax for specifying library icons for the startingIcon and endingIcon properties of a Button component.

```YAML
Button:
    startingIcon: wifi
    endingIcon: addressBook fontAwesome
```

--------------------------------

### Importing Accordion Documentation Dependencies (Dart)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/widgets/accordion.mdx

Imports the necessary Markdown snippets for base and box styles, and the EnsemblePreview component used to display interactive examples of the Accordion widget within the documentation page.

```Dart
import BaseStyles from "./_snippets/base-styles.md";
import BoxStyles from "./_snippets/box-styles.md";
import { EnsemblePreview } from "../../components/ensemble-preview";
```

--------------------------------

### Enable Deeplink Module - Import

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

To enable the deeplink module in Ensemble, uncomment the import statement for the deferred link manager in the generated modules file.

```Dart
// import 'package:ensemble_deeplink/deferred_link_manager.dart';
```

--------------------------------

### Show MoEngage In-App Message (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/log_events.md

Example YAML configuration to trigger the display of an in-app message from MoEngage using the showInApp operation.

```yaml
logEvent:
  provider: moengage
  operation: showInApp
```

--------------------------------

### EnsembleUI GET API without Authentication (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/apis/define-api.md

This example demonstrates defining a simple GET API call in EnsembleUI for a public endpoint that does not require authentication. Only the `uri` and `method` properties are necessary.

```yaml
API:
  getUser:
    uri: https://dummyjson.com/users/1
    method: GET
```

--------------------------------

### Adding Location Permission (iOS)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deploy/1-prepare-app.md

Adds the necessary key and string to the iOS Info.plist file to request 'When In Use' location access from the user. Replace the example string with your specific reason.

```xml
<key>NSLocationWhenInUseUsageDescription</key>
<string>e.g. This app needs access to your location to ....</string>
```

--------------------------------

### Subscribing to BLE Characteristic (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/ble-actions.md

Call bluetoothSubscribeCharacteristic to start listening for value updates from a specific characteristic identified by its ID. Received data is available via onDataStream.

```YAML
Button:
    label: Subscribe
    onTap:  
        bluetoothSubscribeCharacteristic:
        id: ${characteristic.id}
        onDataStream: |
            data.text = event.data
```

--------------------------------

### Specify Button Icons using Verbose YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/tips-and-tricks/specifying-icons.md

Shows the verbose syntax for specifying library icons on a Button, allowing additional properties like name, library, size, and color.

```YAML
Button:
    endingIcon:
        name: addressBook
        library: fontAwesome
        size: 50
        color: red
```

--------------------------------

### Enable Deeplink Module - Set Flag

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deep-link/setup-deferred-deeplink.md

Change the `useDeeplink` static constant to `true` in the generated modules file to activate the deeplink functionality within the Ensemble application.

```Dart
  static const useDeeplink = false;
```

--------------------------------

### Accessing Notification Data in View (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/tips-and-tricks/push-notification.md

Shows an example of an Ensemble View definition that accesses and displays data passed from the notification payload using the built-in 'notificationPayload' variable.

```yaml
View:
  body:
    Text:
      text: |-
        Notification redirected me here:
        Notification title: ${notificationPayload.title}
        Notification body: ${notificationPayload.body}
        Notification payload: ${notificationPayload.data.hello}
```

--------------------------------

### Example Screen with File Picking and Upload (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/upload-files.md

This YAML configuration defines a screen layout using Ensemble UI components. It includes buttons that trigger `pickFiles` and `uploadFiles` actions, demonstrating how to select files, upload them to a specified API, and manage UI state like a loading indicator based on action completion or error.

```YAML
View:
  # Optional - style the screen
  styles:
    scrollableView: true

  # Optional - set the header for the screen
  header:
    title: "Action: uploadFiles"

  # Specify the body of the screen
  body:
    Column:
      styles: { gap: 16, padding: 24 }
      children:
        - Markdown:
            text: |
              Use the `uploadFiles`  action  upload files to specify `uploadApi`.

              Then use the `onComplete`  properties to execute other actions when upload is successful.

        - Button:
            label: Pick Files
            onTap:
              pickFiles:
                id: picker

        - Button:
            label: Upload Picked files
            onTap:
              executeCode:
                body: |
                  //@code
                  loading.visible = true;

                onComplete:
                  uploadFiles:
                    id: fileUploader
                    files: ${picker.files}
                    uploadApi: fileUploadApi
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    onComplete: |
                      //@code
                      loading.visible = false;
                    onError: |
                      //@code

                      loading.visible = false;
                    maxFileSize: 100
                    overMaxFileSizeMessage: Please select files less than 100kb

        - Markdown:
            text: ${fileUploader.body}

        - Progress:
            display: circular
            id: loading
            visible: false

        - Divider

        - Markdown:
            text: |
              Chain multiple file actions to pick files and upload them in one go
              - Using `pickFiles` to pick file based on platform picker
              - Using `uploadFiles` to upload selected files from file picker

        - Button:
            label: Pick & Upload
            onTap:
              pickFiles:
                id: filePicker
                onComplete:
                  uploadFiles:
                    files: ${filePicker.files}
                    uploadApi: fileUploadApi
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    onComplete: |
                      //@code
                      ensemble.debug('File uploaded');

        - Divider:

        - Markdown:
            text: |
              `pickFiles`  also comes with option such as:

                - `allowMultiple` : To allow muliple file selection from gallery picker default (false)
                - `allowCompression` : It will allow media to apply the default OS compression (default True)
                - `allowedExtensions` : To filter file picking based on extensions like jpg, png, pdf...

              `uploadFiles`  also comes with option such as:

                - `files` : Pass the files that needs to upload e.g ${filePicker.files}

                - `fieldName` : Field name that your server is expecting. (default files).

                - `maxFileSize`: File size that is allowed in kb (default 100 mb), If multiple is allow then sum of all files
                - `overMaxFileSizeMessage`: Error message to show when selected files size is above maxFileSize.

        - Row:
            styles: { mainAxis: spaceBetween, crossAxis: center }
            children:
              - Button:
                  label: Multiple Images
                  onTap:
                    pickFiles:
                      id: images
                      allowMultiple: true
                      allowCompression: false
                      allowedExtensions:
                        - jpg
                        - png

              - Text:
                  text: ${images.files.length}
        - Button:
```

--------------------------------

### Navigating to Screen with Back Action (Ensemble YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/screens-and-widgets/navigation.md

Shows how to use `navigateScreen` and specify an action (`onNavigateBack`) to execute when the user navigates back from the target screen. In this example, a toast message is displayed upon returning.

```YAML
- Button:
    label: View details
    onTap:
      navigateScreen:
        name: ProductDetails
        inputs:
          productId: ${product.id}
        onNavigateBack:
          showToast:
            message: You just returned from product detail screen.
```

--------------------------------

### EnsembleUI GET API with API Key Parameter (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/apis/define-api.md

This example illustrates how to pass an API key as a query parameter. The key is added to the `parameters` section, with the parameter name specified by the API provider.

```yaml
API:
  getUser:
    uri: https://dummyjson.com/users/1
    method: GET
    parameters:
      apiKey: "<<add key here>>"
```

--------------------------------

### Serving Ensemble App Files with Python Flask

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/host-on-your-server.mdx

This Python Flask code provides a basic example of a server that can serve the static files downloaded from Ensemble Studio, such as YAML definitions, JSON configurations, and resource files. It includes routes for handling file requests, path normalization for security, and basic error handling.

```python
from flask import Flask, abort, Response
import os

app = Flask(__name__)

BASE_DIR = '<here-put-the-path-of-downloaded-app>'

@app.route('<path:filepath>')

@app.route('/<app>/<path:filepath>')
def serve_file(app, filepath):
    safe_app = os.path.normpath(app)
    safe_filepath = os.path.normpath(filepath)

    full_path = os.path.join(BASE_DIR, safe_app, safe_filepath)

    if not full_path.startswith(os.path.join(BASE_DIR, safe_app)):
        abort(403, "Access denied")

    if os.path.isfile(full_path):
        with open(full_path, 'rb') as f:
            content = f.read()
        return Response(content, mimetype='text/plain; charset=utf-8')
    else:
        abort(404, description="Resource not found")

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5001)

```

--------------------------------

### openCamera with Advanced Options

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/open-camera.md

Illustrates the use of advanced options for openCamera, including assistAngle to guide the user on device angle and assistSpeed to warn the user about speed limits.

```yaml
- Button:
    label: Camera with advance options.
    onTap:
      openCamera:
        options:
          allowGalleryPicker: true
          allowCameraRotate: true
          allowFlashControl: true
          preview: true

          assistAngle:
            minAngle: 80
            maxAngle: 100
            assistAngleMessage: Please try to keep angle approx. 90 degree.

          assistSpeed:
            maxSpeed: 10
            assistSpeedMessage: Please try to speed below 10 km/hr.
```

--------------------------------

### Generate Native Launcher Icons (Bash)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deploy/6-prepare-for-production.md

Runs the necessary commands to fetch the `flutter_launcher_icons` package and then execute the icon generation script based on the configuration in `pubspec.yaml`.

```Bash
flutter pub get
flutter pub run flutter_launcher_icons
```

--------------------------------

### Defining Basic GET API - YAML

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/invoke-API.md

This YAML snippet defines a simple GET API named 'getPeople'. It specifies the URI for fetching random user data and sets the HTTP method to GET. This definition can then be referenced by the 'invokeAPI' action.

```YAML
API:
  getPeople:
    uri: https://randomuser.me/api/?results=8
    method: GET
```

--------------------------------

### Showing Dialogs with Inputs and Options (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/show-dialog.md

Demonstrates how to use the showDialog action within an Ensemble UI View. It shows how to display MyStartingDialog on load and MyCustomDialog via a button tap, passing input parameters (name) and customizing dialog options like style and vertical offset. It also includes an onDialogDismiss callback.

```yaml
View:
  header:
    title: Dialog
  onLoad:
    showDialog:
      widget: MyStartingDialog
  body:
    Column:
      styles: { margin: 10, gap: 5 }
      children:
		- Text:
            text: You can customize the dialog style and provide inputs as well
        - Button:
            label: Show Custom Dialog
            onTap:
              showDialog:
                widget:
                  MyCustomDialog:
                    inputs:
                      name: Peter
                options:
                  # no default style - zero margin/padding, no background color
                  style: none
                  # move it up half way between the top and the center of the screen
                  verticalOffset: -0.5

                onDialogDismiss: |-
                  //@code
                  console.log("dialog dismissed");

MyCustomDialog:
  inputs:
    - name
  body:
    Column:
      styles:
        gap: 10
        backgroundColor: 0xffD7BFA8
        borderRadius: 10
        margin: 20
        padding: 20
      children:
        - Text:
            text: |-
              Hi ${name}
              This dialog set its own margin/padding and background color.

              It also offset the dialog position vertically.

```

--------------------------------

### Using onNavigateBack in navigateScreen (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/navigate-screen.md

Demonstrates how to use the `onNavigateBack` event within a `navigateScreen` action to execute code when returning to the screen. Shows a simple debug call as an example.

```yaml
navigateScreen:
  name: "${booking.completion_status == 'confirmed' ? 'ConfirmedTrip' : 'ConfirmTripRequest'}"
  inputs:
    booking: ${booking}
  onNavigateBack: |-
    ensemble.debug("got back")
```

--------------------------------

### Defining Custom Dialog Widgets (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/show-dialog.md

Defines two custom dialog widgets, MyStartingDialog and MyCustomDialog, using Ensemble UI's YAML syntax. MyStartingDialog is a simple welcome dialog, while MyCustomDialog demonstrates custom styling like background color, border radius, margin, and padding.

```yaml
MyStartingDialog:
  body:
    Column:
      styles:
        gap: 10
      children:
        - Text:
            text: Welcome to Ensemble
            styles:
              fontSize: 16
              fontWeight: bold
        - Text:
            text: This dialog pops up when the user first visits the page.
        - Button:
            label: Close dialog
            onTap: closeAllDialogs

MyCustomDialog:
  body:
    Column:
      styles:
        gap: 10
        backgroundColor: 0xffD7BFA8
        borderRadius: 10
        margin: 20
        padding: 20
      children:
        - Text:
            text: |-
              This dialog set its own margin/padding and background color.

              It also offset the dialog position vertically.

```

--------------------------------

### Install APK via ADB

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deploy/4-android-device.md

Use this command to install the built APK file onto a connected Android device using the Android Debug Bridge (ADB) tool.

```Shell
adb install build/app/outputs/flutter-apk/app-release.apk
```

--------------------------------

### Define Auth0 Sign-in Screen (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/authentication/auth0.md

Provides a YAML definition for a screen in Ensemble Studio that includes a SignInWithAuth0 widget. This widget handles the Auth0 authentication flow and defines an action (showToast) to execute upon successful authentication.

```YAML
View:
  body:
    Column:
      styles:
        mainAxis: center
        crossAxis: center
        padding: 40
      children:
        - SignInWithAuth0:
            scheme: flutterdemo
            provider: auth0
            onAuthenticated:
              showToast:
                message: ${auth.user.email}
```

--------------------------------

### Handling Dialog Dismissal (JavaScript)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/show-dialog.md

Provides an example of the JavaScript code executed when a dialog is dismissed, typically used within an `onDialogDismiss` action in the YAML definition. This specific example logs a message to the console.

```javascript
console.log("dialog dismissed");
```

--------------------------------

### Generate Native Splash Screen (Bash)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/deploy/6-prepare-for-production.md

Runs the necessary commands to fetch the `flutter_native_splash` package and then execute the splash screen generation script based on the configuration in `pubspec.yaml`.

```Bash
flutter pub get
flutter pub run flutter_native_splash:create
```

--------------------------------

### Example Ensemble View with File Picking and Uploading

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/device-capabilities/pick-files.md

This YAML snippet defines an Ensemble View with buttons to trigger file picking and uploading actions. It demonstrates handling loading states, chaining actions (pick then upload), and configuring options like multiple file selection, compression, allowed extensions, and file size limits.

```yaml
View:
  # Optional - style the screen
  styles:
    scrollableView: true

  # Specify the body of the screen
  body:
    Column:
      styles: { gap: 16, padding: 24 }
      children:
        - Markdown:
            text: |+
              Use the `uploadFiles`  action  upload files to specify `uploadApi`. 

              Then use the `onComplete`  properties to execute other actions when upload is successful.

        - Button:
            label: Pick Files
            onTap:
              pickFiles:
                id: picker

        - Button:
            label: Upload Picked files
            onTap:
              executeCode:
                body: |+
                  //@code
                  loading.visible = true;

                onComplete:
                  uploadFiles:
                    id: fileUploader
                    files: ${picker.files}
                    uploadApi: fileUploadApi
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    onComplete: |+
                      //@code
                      loading.visible = false;
                    onError: |+
                      //@code

                      loading.visible = false;
                    maxFileSize: 100
                    overMaxFileSizeMessage: Please select files less than 100kb

        - Markdown:
            text: ${fileUploader.body}

        - Progress:
            display: circular
            id: loading
            visible: false

        - Divider

        - Markdown:
            text: |+
              Chain multiple file actions to pick files and upload them in one go
              - Using `pickFiles` to pick file based on platform picker
              - Using `uploadFiles` to upload selected files from file picker

        - Button:
            label: Pick & Upload
            onTap:
              pickFiles:
                id: filePicker
                onComplete:
                  uploadFiles:
                    files: ${filePicker.files}
                    uploadApi: fileUploadApi
                    inputs:
                      url: https://en09cdal5asztm.x.pipedream.net
                    onComplete: |+
                      //@code
                      ensemble.debug('File uploaded');

        - Divider:

        - Markdown:
            text: |+
              `pickFiles`  also comes with option such as:

                - `allowMultiple` : To allow muliple file selection from gallery picker default (false)
                - `allowCompression` : It will allow media to apply the default OS compression (default True)
                - `allowedExtensions` : To filter file picking based on extensions like jpg, png, pdf...

              `uploadFiles`  also comes with option such as:

                - `files` : Pass the files that needs to upload e.g ${filePicker.files}

                - `fieldName` : Field name that your server is expecting. (default files).

                - `maxFileSize`: File size that is allowed in kb (default 100 mb), If multiple is allow then sum of all files
                - `overMaxFileSizeMessage`: Error message to show when selected files size is above maxFileSize.

        - Row:
            styles: { mainAxis: spaceBetween, crossAxis: center }
            children:
              - Button:
                  label: Multiple Images
                  onTap:
                    pickFiles:
                      id: images
                      allowMultiple: true
                      allowCompression: false
                      allowedExtensions:
                        - jpg
                        - png

              - Text:
                  text: ${images.files.length}
        - Button:
            label: Upload Multiple images
            onTap:
              uploadFiles:
                id: imageUploader
                uploadApi: fileUploadApi
                files: ${images.files}
                fieldName: files
                inputs:
                  url: https://en09cdal5asztm.x.pipedream.net
                maxFileSize: 100 # in kb
                overMaxFileSizeMessage: Please select files less than 100kb

        - Markdown:
            text: ${imageUploader.body}
        - Divider

        - Markdown:
            text: |+

```

--------------------------------

### Calling navigateModalScreen from JavaScript Code Block

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/navigate-modal-screen.md

This JavaScript code, intended for use within an EnsembleUI executeCode block, shows how to programmatically call the ensemble.navigateModalScreen function. It includes examples for navigating without inputs and a commented-out example showing how to pass inputs.

```javascript
// no inputs
ensemble.navigateModalScreen('Actions & events');
//with inputs
//ensemble.navigateModalScreen({name: 'Actions & events',inputs:{input1: 'abc', input2: 'ced'}} );
```

--------------------------------

### Filling array elements with fill JavaScript

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/javascript-reference/Map-and-Array.md

The `fill()` method changes all elements in an array to a static `value`, from an optional `start` index to an optional `end` index. It takes the `value` and optional `start` and `end` indices. It modifies the original array and returns the modified array.

```javascript
var array = [1, 2, 3, 4];
console.log(array.fill(0, 2, 4)); // [1, 2, 0, 0]
console.log(array.fill(5, 1)); // [1, 5, 5, 5]
console.log(array.fill(6)); // [6, 6, 6, 6]
```

--------------------------------

### Defining Basic Custom Dialog Widgets (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/actions/show-dialog.md

Defines two custom dialog widgets, 'MyStartingDialog' and 'MyCustomDialog', demonstrating basic structure, styles, and content using Column, Text, and Button widgets. 'MyCustomDialog' shows how to apply specific styles like background color, border radius, margin, and padding.

```yaml
MyStartingDialog:
  body:
    Column:
      styles:
        gap: 10
      children:
        - Text:
            text: Welcome to Ensemble
            styles:
              fontSize: 16
              fontWeight: bold
        - Text:
            text: This dialog pops up when the user first visits the page.
        - Button:
            label: Close dialog
            onTap: closeAllDialogs

MyCustomDialog:
  body:
    Column:
      styles:
        gap: 10
        backgroundColor: 0xffD7BFA8
        borderRadius: 10
        margin: 20
        padding: 20
      children:
        - Text:
            text: |-
              This dialog set its own margin/padding and background color.

              It also offset the dialog position vertically.
```

--------------------------------

### Using slice JavaScript

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/javascript-reference/Map-and-Array.md

The `slice()` method returns a shallow copy of a portion of an array into a new array object selected from `start` to `end` (end not included). It takes optional `start` and `end` indices. The original array is not modified, and it returns a new array containing the extracted elements.

```javascript
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
console.log(citrus); // ['Orange', 'Lemon']
```

--------------------------------

### Accessing API Response Body by Name (Basic GET)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/apis/access-api-response.md

This snippet demonstrates how to invoke a simple GET API and access its response body data using the API name (`getUser`). The Ensemble runtime evaluates the expression `${getUser.body.firstName}` to display the first name from the response.

```yaml
View:
  onLoad:
    invokeAPI:
      name: getUser
  body:
    Column:
      styles:
        padding: 40
      children:
        - Text:
            text: ${getUser.body.firstName}
API:
  getUser:
    uri: https://dummyjson.com/users/1
    method: GET
```

--------------------------------

### Examples of Different Style Types in Ensemble Theme (YAML)

Source: https://github.com/ensembleui/ensemble_docs/blob/main/pages/theme-and-styling/theme.md

This snippet provides examples of defining different types of styles within the 'Styles' section of an Ensemble theme, including ID-based styles using '#', styles applied to a specific widget type, and styles defined as a reusable class using '.'.

```YAML
Light:
 Styles:
  # ID-based style
  '#heading':
    fontSize: 24
    fontWeight: bold

  # Widget type style
  Button:
    backgroundColor: ${Colors.primary}
    color: white

  # Style class
  .error:
    color: red
```