website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Components

web-view

6min

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 Jigx app.

Configuration options

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



The core structure includes: uri

isTrackingTransparencyRequired - If true tracking transparency permission modal will be shown before opening the url

height - The height of the web view

content - HTML to render

The isScrollable property - if set to false - allows you to display the component in full screen

It is a property of the jig, not the component itself.

Document image


Examples and code snippets 

Web-view example (URL)

Document image


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: =@ctx.datasources.web-view.url
      isTrackingTransparencyRequired: true


Web-view example (HTML Content)

Document image


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. Please note: If your HTML content does not render as expected (e.g. font too small etc.) embed the meta HTML tag from below example into your HTML content that you are passing into the content option.

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>


See also

  • Developer reference
  • Related examples (Github)



Updated 19 Sep 2023
Did this page help you?
PREVIOUS
video-player
NEXT
widgets
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Examples and code snippets
Web-view example (URL)
Web-view example (HTML Content)
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service