web-view

This component displays a web page from a URL, content from a datasource, or custom HTML.

Use jig.document when you need a full-screen web page or message passing from HTML content.

Configuration options

Some properties are common to all components, see Common component properties for the properties and their configuration options.

Core structure

uri

The source to be displayed in the web-view, for example, a URL.

Other options

content

HTML to render in the web-view.

height

The height of the web-view.

isEditable

If set to true, the web-view content becomes editable. This works only with content, not with a uri. Use it in a [jig.fullscreen](/spaces/HcPzbms3kZejTmFd500V/pages/pJexnDt2gmKLRExld1M7).

isTrackingTransparencyRequired

If set to true, Jigx shows the tracking transparency permission modal before opening the URL. The default is true.

allowInAppRedirect

If set to true, Jigx intercepts links tapped inside the web-view and handles them in-app. The default is false.

Link handling

By default, links keep the existing web-view behavior and load inside the web-view.

Set allowInAppRedirect: true to intercept link taps and handle them outside the embedded page.

Jigx deeplinks open inside the app. This includes app.jigx.com/... links and supported custom-scheme links.
Cross-solution Jigx deeplinks switch to the target solution, then open the target jig.
http and https links open in the in-app browser.
mailto:, tel:, and similar schemes open in the system app.
If the target solution is not assigned to the user, Jigx shows Solution is not available and keeps the current web-view open.

allowInAppRedirect is off by default. Set it only when you want Jigx to handle links outside the embedded page.

Considerations

Use component.web-view in jig.fullscreen when the content should fill the screen.
isEditable works with content only. It does not work with uri.

Examples and code snippets

Web-view example (URL)

In this example, we open a target URL in the web-view component.

If the target URL is tracking data (e.g., cookies etc.), you are required by Apple to ask for user consent using the isTrackingTransparencyRequired option. It will ask for user consent the first time any web view in your solution tries to open a target URL.

Examples: See the full example using static data on GitHub. See the full example using dynamic data in GitHub.

Datasource: See the full datasource for static data on GitHub. See the full datasource for dynamic data in GitHub.

type: jig.default
title: Web view

children:
  - type: component.web-view
    options:
      uri: =@ctx.datasources.web-view.url
      isTrackingTransparencyRequired: true
      height: 1000

type: jig.default
title: Web view

children:
  - type: component.web-view
    options:
      uri: =@ctx.datasources.web-view-dynamic.uri
      isTrackingTransparencyRequired: true
      height: 1000

datasources:
  web-view-dynamic:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/links
      query: |
        SELECT
          '$.uri',
          '$.category'
        FROM [default/links] 
        WHERE '$.category' = "web-view"

Web-view example (In-app redirects)

Enable allowInAppRedirect when links inside the web-view should open in Jigx, in the in-app browser, or in the system app instead of replacing the current page in the web-view.

web-view-in-app-redirect.jigx

title: WebView Link Navigation
type: jig.full-screen

component:
  type: component.web-view
  options:
    allowInAppRedirect: true
    height: 900
    isEditable: false
    content: |
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Link navigation test</title>
        </head>
        <body>
          <h1>Link navigation test</h1>
          <p>
            <a href="https://app.jigx.com/app/solution/44b928dd-7fb8-457b-a5de-e6f990e3dd3b/jig/tags-dynamic?title=TestTitle">
              Open a jig
            </a>
          </p>
          <p>
            <a href="https://app.jigx.com/app/solution/9d9a9ff6-6430-453c-89b0-871f41f6054a">
              Open a solution
            </a>
          </p>
          <p>
            <a href="https://www.jigx.com">Open a website</a>
          </p>
          <p>
            <a href="mailto:support@example.com">Send an email</a>
          </p>
          <p>
            <a href="tel:+1234567890">Call support</a>
          </p>
        </body>
      </html>

Expected behavior:

Jigx deeplinks open inside the app.
Cross-solution links switch solution first when the user has access.
Web links open in the in-app browser.
Email and phone links open the system app.
Unassigned solution links show Solution is not available.

Web-view example (HTML Content)

In this example, we are passing raw HTML content to the web-view component. This can either be inline content (see example below) or content from a datasource. If your HTML content does not render as expected (e.g. font too small etc.) embed the meta HTML tag used in the example below in your HTML content.

web-view-raw

title: Web-View
type: jig.default

children:
  - type: component.web-view
    options:
      content: |
        <html>
          <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
          </head>
          <body>
            Hello World
          </body>
        </html>

Editable web-view content (Fullscreen)

In this example, the web-view component is used to make notes on a job. It is configured in a jig.full-screen to display content from a datasource. The isEditable property is set to true, allowing the text in the web-view to be edited. An execute-entity action ensures the updated HTML is saved to the database.

title: Notes
type: jig.full-screen
icon: notes-add

# Add the web-view component using the content property. 
# Set the isEditable property to true,
# to allow the HTML in the view to be edited by tapping the component.     
component: 
  type: component.web-view
  instanceId: edit-notes
  options:
    isEditable: true
    # Add HTML to the content, the HTML will be editable when tapped.
    content: |
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Notes</title>
        <p><i>Add your notes here</i></p> 
# Configure an action to save the edited HTML to the database.       
actions:
    - children:
        - type: action.execute-entity
          options:
            title: Save notes
            provider: DATA_PROVIDER_DYNAMIC
            entity: default/jobs
            method: update
            goBack: stay
            data:
              id: =@ctx.datasources.work-notes.id
              job-notes: =@ctx.components.edit-notes.state.content
            # Confirm that the notes were saved successfully.  
            onSuccess:  
              type: action.info-modal
              options:
                modal:
                  element: 
                    type: icon
                    icon: check-2-alternate
                    color: positive
                  title: Notes added successfully
                  buttonText: Exit

datasources:
  work-notes: 
    type: datasource.sqlite
    options:
      isDocument: true
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/jobs
      query: 
        SELECT id,
         '$.job-notes',
         '$.job-number'
        FROM [default/jobs] 
        WHERE '$.job-number' =@jobNo
      queryParameters:
        jobNo: A1

Previousvideo-player NextUse template

Last updated 1 month ago

Was this helpful?