How to access/view web links without opening an external browser in vDesigner 2.0?

We can use the web-view element to instantly open a web page within an app by simply tapping a link. This feature offers a fast web view experience with limited browsing functionalities, seamlessly integrated as a sub-process of the app.

Here’s a detailed guide on how to configure this element:

  1. Add a Web View Element: Start by dropping the ‘Web View’ element onto the Designer’s canvas from the ‘Elements’ pane.

  2. Configure the Web View Element: Select the element and in its properties, add the desired URL that you want to display on the screen.

  3. Points to Note for the Web View Element:

  • Callback property:
    a. This is a function that allows interaction with the external application to fetch data.
    b. Example: You have a callback function that requests the latest news articles from a news API when the user opens the web view.

  • Success URL:
    a. The URL to display after a successful task related to the web view, such as completing a form or submitting data.
    b. Example: After successfully submitting a form in the web view, the user is redirected to a “thank you” page.

  • Failure URL:
    a. The URL to display after a task related to the web view fails, such as a form submission error.
    b. Example: If there’s an error in submitting a form, the user is redirected to an error page with a message.

  • Output Location:
    a. An entity or element to store data fetched from the external application by the callback function.
    b. Example: Data fetched from an API is stored in a variable called “responseData” to be displayed in the web view.

  • Query Parameter:
    a. Query parameters are additional pieces of information that can be appended to a URL to modify or customize the content that is returned by web server.
    2. They are used to pass data to a web server as part of a URL, typically in the form of key-value pairs.
    3. For example, consider the URL https://example.com/search?q=term. Here, q is the query parameter key, and term is the value. This URL might be used to search for a specific term (term) on the example.com website.

  • Button Bar:
    a. A bar with buttons for navigating within the web view.
    b. Example: The button bar has “Back” and “Forward” buttons for navigating between pages.

JS Disabled Option in Data Properties:

  • Disabling JavaScript in a web view can be crucial for security reasons, as it prevents potentially harmful or malicious scripts from running within the web view.

  • You can check this option if you want to show the basic HTML content without any dynamic JavaScript functionality. For example, you may use it to navigate to a different page when a link is clicked.

  • However, if you need to perform more advanced tasks, such as making an API call or interacting with external services within the web page, you should un-select this option to enable JavaScript functionality. Disabling JavaScript ensures that potentially harmful or malicious scripts cannot run within the web view, maintaining a higher level of security.

By following these steps, you can seamlessly access and view web links within vDesigner 2.0 without the need for an external browser as shown in the video below:

Video URL: web_view_demo

Hi @harman_singh, how does the web view understand that the particular form submission has resulted in an error. Is it through status codes like 404/500 or something else?