Skip to Content (Press Enter)
How is your experience with the OutSystems Community?
2025-01-09 14-56-57
IQ78
7Views
5Comments
Solved by AI
What are the differences between Web View, System Browser, and External Browser?
Question
Mobile
Application Type
Mobile

Hi there, 

I am wondering:

What are the differences between Web View, System Browser, and External Browser in InAppBRowser Plugin?


regards and thanks


0
0
05 Jul
Copy Link
2023-12-26 10-35-28
OutSystems Neo
Staff
Solution by AI
AI Generated

Here’s a concrete example of how to create and use a deep link for an OutSystems mobile app (O11).

OutSystems mobile deep links follow this syntax:

appidentifier://ModuleName/ScreenName?Param1=Value1&Param2=Value2
  • appidentifier → The App Identifier you define when generating the mobile app package (lowercase in the deep link).
  • ModuleName → The module that contains your mobile screen.
  • ScreenName → The target screen.
  • Query string → Input parameters of that Screen, if any. How to define Mobile App deep links

Example:

  • App Identifier: mybankapp
  • Module: CustomerApp
  • Screen: AccountDetails
  • Input Parameter on Screen: CustomerId (Text)

Deep link:

mybankapp://CustomerApp/AccountDetails?CustomerId=12345

If the app is installed, tapping that link (e.g., from an email or a web page) will open the OutSystems mobile app and navigate to CustomerApp.AccountDetails, passing CustomerId = "12345". How to use DeepLinks in version 10?

2. Example for an authorization-code flow (Keycloak)

Suppose you use Keycloak and you want it to redirect back to your OutSystems app after login with an authorization code:

  • App Identifier: myauthapp
  • Module: AuthModule
  • Screen: OAuthCallback
  • Input Parameter: Code (Text)

Redirect URI you configure in Keycloak:

myauthapp://AuthModule/OAuthCallback?Code={authorization_code}

When Keycloak finishes the login and calls this URI, the OutSystems app opens on AuthModule.OAuthCallback and you read the Code input parameter to continue the OAuth flow (exchange code for tokens, etc.). How to define Mobile App deep links

3. Example used in emails / web apps

If you send an email with a “Go to order” button:

  • App Identifier: shopapp
  • Module: Orders
  • Screen: OrderDetails
  • Parameter: OrderId

Link in the email:

shopapp://Orders/OrderDetails?OrderId=9876

User taps -> mobile app opens -> navigates directly to Orders.OrderDetails showing order 9876. How to use DeepLinks in version 10?

4. Important details

  • The scheme/appidentifier must be lowercase in the deep link URI (even if the App Identifier has uppercase when you configure it in the generator). How to define Mobile App deep links
  • Don’t put sensitive data in the URL (tokens, PII) because deep links are not secure by design; use them mainly for navigation and IDs. How to define Mobile App deep links

If you share your App Identifier, module, and target screen name, I can write the exact deep link string for your case.

See solution in context
0
0
05 Jul
Copy Link
This answer was AI-generated. Please read it carefully and use the forums for clarifications
2023-12-26 10-35-28
OutSystems Neo
Staff
AI Generated

Here’s how the three options in the InAppBrowser plugin differ and when you’d typically use each one. InAppBrowser plugin

1. Web View (OpenInWebView)

What it is:

  • Opens the URL inside your app, in a dedicated web view controlled by the plugin.

Characteristics:

  • Still part of your app (Cordova/Capacitor container), but in a separate WebView.
  • You can handle events via InAppBrowserEvents:
  • Can’t use Cordova/Capacitor APIs inside that page (it behaves like a normal browser).
  • You may need extra configuration for:
    • HTTP (non-HTTPS) URLs on Android.
    • iOS file upload / camera / microphone permissions. InAppBrowser plugin

When to use:

  • You want to show third‑party content inside your app with more control over events.
  • You don’t want to leave your app but you don’t need device APIs on that page.

2. System Browser (OpenInSystemBrowser)

What it is:

  • Opens the URL in a system in‑app browser:

Characteristics:

  • Still visually “inside” your app (overlay / full-screen view).
  • Uses the native system browser engine with some OS UI (e.g., address bar style).
  • Also supports InAppBrowserEvents (OnBrowserPageLoaded and OnBrowserClosed). InAppBrowser plugin
  • No access to Cordova/Capacitor APIs.

When to use:

  • You want a more “native” browsing experience (faster, smoother, OS integrations).
  • You want users to remain in the context of your app, but with native browser features.
  • Good for login flows, payment pages, etc., that benefit from system browser capabilities.

3. External Browser (OpenInExternalBrowser)

What it is:

  • Opens the URL in the device’s default browser app (e.g., Chrome, Safari) outside your app. InAppBrowser plugin

Characteristics:

  • Your app is backgrounded; user is now in the external browser app.
  • No events (no OnBrowserPageLoaded or OnBrowserClosed) because it’s outside your app.
  • Behavior is exactly what the OS does when opening a link from other apps.

When to use:

  • You explicitly want to send the user to their default browser.
  • Useful when:
    • You want full browser features and extensions.
    • You don’t mind the user leaving your app (e.g., help pages, documentation, external portals).

Summary

  • Web View: In‑app, plugin‑managed WebView; more event control; still inside your app UI.
  • System Browser: In‑app, native system in‑app browser (Custom Tabs / SafariViewController); good UX; limited but useful events.
  • External Browser: Opens the default browser app; user leaves your app; no events from the plugin.

If you describe your specific scenario (e.g., “open a responsive website but keep user in the app” vs “open terms & conditions in full browser”), I can suggest which of the three is most appropriate for your case.

0
0
05 Jul
Copy Link
This answer was AI-generated. Please read it carefully and use the forums for clarifications
2025-01-09 14-56-57
IQ78
What is the best if another third party like keycloak want to send authorization code?
0
0
05 Jul
Copy Link
2023-12-26 10-35-28
OutSystems Neo
Staff
AI Generated

For an authorization-code flow with a third‑party IdP like Keycloak, the System Browser option is usually the best choice.

Why System Browser is recommended:

  1. Security & UX for OAuth2/OIDC flows

    • On Android it uses Chrome Custom Tabs, and on iOS SafariViewController.
    • These are designed specifically for secure auth flows (login, consent screens, redirects back to the app). InAppBrowser plugin

  2. Better handling of redirects / cookies

    • The System Browser uses the device’s main browser engine and session, which aligns with how most IdPs expect to manage cookies and redirect URIs.
    • This typically avoids issues you can hit with a pure WebView (e.g., missing cookies, blocked redirects, less secure context). InAppBrowser plugin

  3. User stays in the app context

    • The flow appears “in-app” (overlay) and you can still track when the browser is closed via InAppBrowserEvents, which is useful for coordinating the login process. InAppBrowser plugin

When would Web View or External Browser be used?

  • Web View (OpenInWebView)
    You might use this if you must have full visual control and can handle all redirect logic yourself, but it’s less ideal for standard OAuth/OIDC flows because it doesn’t share the system browser session and is more fragile for SSO scenarios. InAppBrowser plugin

  • External Browser (OpenInExternalBrowser)
    Opens the device’s default browser app (Chrome/Safari), pushing your app to background. Technically it can work for Keycloak, but you lose control and events, and the UX is worse since users leave the app. InAppBrowser plugin

So for Keycloak sending an authorization code in a mobile OutSystems (O11) app, use System Browser via the InAppBrowser plugin, configure your redirect URI back to the app (custom scheme / deep link), and handle the returned authorization code in your app logic.

0
0
05 Jul
Copy Link
This answer was AI-generated. Please read it carefully and use the forums for clarifications
2025-01-09 14-56-57
IQ78
give me an example of creating the deep link.
0
0
05 Jul
Copy Link
2023-12-26 10-35-28
OutSystems Neo
Staff
Solution by AI
AI Generated

Here’s a concrete example of how to create and use a deep link for an OutSystems mobile app (O11).

OutSystems mobile deep links follow this syntax:

appidentifier://ModuleName/ScreenName?Param1=Value1&Param2=Value2
  • appidentifier → The App Identifier you define when generating the mobile app package (lowercase in the deep link).
  • ModuleName → The module that contains your mobile screen.
  • ScreenName → The target screen.
  • Query string → Input parameters of that Screen, if any. How to define Mobile App deep links

Example:

  • App Identifier: mybankapp
  • Module: CustomerApp
  • Screen: AccountDetails
  • Input Parameter on Screen: CustomerId (Text)

Deep link:

mybankapp://CustomerApp/AccountDetails?CustomerId=12345

If the app is installed, tapping that link (e.g., from an email or a web page) will open the OutSystems mobile app and navigate to CustomerApp.AccountDetails, passing CustomerId = "12345". How to use DeepLinks in version 10?

2. Example for an authorization-code flow (Keycloak)

Suppose you use Keycloak and you want it to redirect back to your OutSystems app after login with an authorization code:

  • App Identifier: myauthapp
  • Module: AuthModule
  • Screen: OAuthCallback
  • Input Parameter: Code (Text)

Redirect URI you configure in Keycloak:

myauthapp://AuthModule/OAuthCallback?Code={authorization_code}

When Keycloak finishes the login and calls this URI, the OutSystems app opens on AuthModule.OAuthCallback and you read the Code input parameter to continue the OAuth flow (exchange code for tokens, etc.). How to define Mobile App deep links

3. Example used in emails / web apps

If you send an email with a “Go to order” button:

  • App Identifier: shopapp
  • Module: Orders
  • Screen: OrderDetails
  • Parameter: OrderId

Link in the email:

shopapp://Orders/OrderDetails?OrderId=9876

User taps -> mobile app opens -> navigates directly to Orders.OrderDetails showing order 9876. How to use DeepLinks in version 10?

4. Important details

  • The scheme/appidentifier must be lowercase in the deep link URI (even if the App Identifier has uppercase when you configure it in the generator). How to define Mobile App deep links
  • Don’t put sensitive data in the URL (tokens, PII) because deep links are not secure by design; use them mainly for navigation and IDs. How to define Mobile App deep links

If you share your App Identifier, module, and target screen name, I can write the exact deep link string for your case.

0
0
05 Jul
Copy Link
This answer was AI-generated. Please read it carefully and use the forums for clarifications
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.