Actions
Take Screenshot

takeScreenshot

takeScreenshot action allows you to capture a screenshot of read-only widgets using its widgetId. The screenshot is saved to the gallery on mobile platforms or downloaded directly on the web, while also providing the image bytes for further use. It's an efficient solution for exporting visual content in high quality.

Properties

PropertyTypeDescription
widgetIdstringThe ID of the target widget to be captured as a screenshot.
onSuccessactionAction to be excecuted on successful screenshot capture.
onErroractionAction to be excecuted on error during screenshot capture.

Event Data

When the onSuccess action is executed, the following data is available under event.data:

  • imageBytes: Provides bytes of the screenshot.
  • size: Provides total size of image in bytes, e.g. if screenshot has size of 1KB then size will return 1024.
  • dimensions: Provides dimentions of the image as dimensions.width and dimensions.height

When the onError action is executed, the following data is available under event.data:

  • error: Error message describing the issue.

Example

View:
  styles:
    scrollableView: true
  header:
    title: "Action: takeScreenshot"
 
  Column:
    styles:
      gap: 16
      padding: 24
    children:
      - Column:
          id: section1
          styles:
            gap: 16
          children:
            - Button:
                label: Test Button 1
            - Button:
                label: Test Button 2
        # Take Screenshot using `takeScreenshot` action
      - Button:
          label: Take Screenshot
          onTap:
            takeScreenshot:
              widgetId: ${section1}
              onSuccess:
                executeCode:
                  body: |
                    console.log(event.data.imageBytes)
                    console.log(event.data.size)
                    console.log(event.data.dimensions)
 
        # Take Screenshot using ensemble object in JavaScript `ensemble.takeScreenshot`
      - Button:
          label: Take Screenshot with JS
          onTap:  
             executeCode:
                body: |
                   ensemble.takeScreenshot({widgetId: section1})

complete example here (opens in a new tab)