Actions
Open URL

openUrl

openUrl action allows users to open external URLs or web links directly from the app, facilitating seamless integration with external content and enhancing the user's browsing experience within the application.

Properties

PropertyTypeDescription
urlstringThe URL to open
openInExternalAppbooleanOpen URL in an external app

Example

  1. This one is simple example related to how one can make use of openUrl to open given url inside browser or an external browser app in android or ios.
View:
  header:
    title: "Action: openUrl"
  styles:
    scrollableView: true
 
  body:
    Column:
      styles: { gap: 16, padding: 24 }
      children:
        - Form:
            styles: { mainAxis: center }
            children:
              - TextInput:
                  id: uri
                  value: "https://ensembleui.com"
              - Row:
                  styles: { gap: 8 }
                  children:
                    - Button:
                        label: Open Url in place
                        onTap:
                          openUrl:
                            url: ${uri.value}

You can use openInExternalApp property, this will open the url in the right app based on the url scheme in native apps. For browser, it doesn't matter

- Button:
    label: Open Url in external app
    onTap:
      openUrl:
        url: ${uri.value}
        openInExternalApp: true
  1. In this example we will open the default email app depending on the device or OS like on Windows its Mail.
			- TextInput:
				id: email
				value: 'mailto: khurram.mahmood@gmail.com'
			- Button:
				label: Open Url
				onTap:
					openUrl:
						url: ${email.value}

To learn more about how to use openUrl action, check out the Ensemble Kitchen Sink (opens in a new tab) example.