Components

web-view

5min

This component is used to display the web page from a specified URL.
You can also use the jig.document﻿ type to display web pages in full-screen mode or pass messages from your HTML content via JavaScript to the .
﻿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.
isTrackingTransparencyRequired
If set to true tracking transparency permission modal is shown before opening the URL. The default setting is true.
Consideration
 The isScrollable property is a property of the  and not of the web-view component.  If set to false the web-view component is displayed in full screen.
﻿
﻿
﻿Examples and code snippets ﻿
Web-view with 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. 
web-view (static)
web-view (dynamic)
datasources (static)
datasources (dynamic)
type: jig.default
title: Web view
isScrollable: false

children:
  - type: component.web-view
    options:
      uri: [email protected]-view.url
      isTrackingTransparencyRequired: true
type: jig.default
title: Web view
isScrollable: false

children:
  - type: component.web-view
    options:
      uri: =@ctx.datasources.web-view.url
      isTrackingTransparencyRequired: true
﻿
Web-view with 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>
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>
﻿
﻿

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.
isTrackingTransparencyRequired	If set to true tracking transparency permission modal is shown before opening the URL. The default setting is true.