Jig Types

jig.document

5min

This type is being used to display documents connected to your project. The display of the document is provided in different formats:
As a PDF file
As an HTML page - there are 2 different ways to set it up:
Using a URL (website link)
Using HTML
Jig Document Preview
﻿
﻿Examples and code snippets ﻿
The code below is an extract from the full jigx-samples solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full jigx-samples project from GitHub, and follow the instructions in Setting up your solution﻿.
﻿
PDF Document Example
PDF document jig
﻿
This example displays a Document Jig used to display a PDF document. 
Examples:
See the full code sample using static data in GitHub. 
See the full code sample using dynamic data in GitHub.
Using the code below requires data in the database, the jigx.sample solution has the data provided for documents. You can use the documents.csv file in GitHub and upload it via the Data﻿ configuration in ﻿.
document-pdf-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  documents: null
databaseId: default
tables:
  documents: null
﻿
HTML Document Example (URL)
HTML Document jig
﻿
In this example a Document Jig is used to display an HTML document/page.
Examples:
See the full code sample using static data in GitHub.
See the full code sample using dynamic data in GitHub.
Using the code below requires data in the database, the jigx.sample solution has the data provided for documents. You can use the documents.csv file in GitHub and upload it via the Data﻿ configuration in ﻿.
document-html-dd.jigx
datasources
default.jigx
index.jigx
|
databaseId: default
tables:
  documents: null
databaseId: default
tables:
  documents: null
﻿
HTML Document Example (Content)
You can also use this Jig type to pass raw HTML into the webview (without linked CSS, JS etc.).
If your HTML content does not render as expected (e.g. font too small etc.) embed this HTML tag into your HTML content that you are passing into the uri option.
HTML
|
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
﻿
HTML Document jig
﻿
In this example a Document Jig is used to display raw HTML content.
Examples:
See the full code sample in GitHub.
document-html-content.jigx
index.jigx
|
title: HTML Document Type (Content)
type: jig.document

source:
  documentType: HTML
  content: |
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body style="margin: 0;text-align: center;">
         <img src="https://www.jigx.com/wp-content/uploads/2023/05/MSGraph01.png" alt="Jigx website screenshot"
        style="max-width: 100vw; height: 100vh; ">
        </body>
      </html>
title: HTML Document Type (Content)
type: jig.document

source:
  documentType: HTML
  content: |
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body style="margin: 0;text-align: center;">
         <img src="https://www.jigx.com/wp-content/uploads/2023/05/MSGraph01.png" alt="Jigx website screenshot"
        style="max-width: 100vw; height: 100vh; ">
        </body>
      </html>
﻿
HTML Document Example (Content with Message Listener)
You can also use this Jig type to pass raw HTML into the web view (without linked CSS, JS etc.).

HTML Document jig
﻿
In this example a Document Jig is used to display raw HTML content.

We also added a message listener via Javascript called linkTapped().

The HMTL can pass in a value into the message listener and the message then gets passed on as JSON to the Jigx app.

The JSON object is then available in state using @ctx.jig.state.data

You can even access all properties of your object using @ctx.jig.state.data.[yourproperty]

When the Jig gets focussed, we reset the state in this example.
This code example is not in the jigx.samples solution in GitHub.
﻿
document-htmlcontent-listener.jigx
index.jigx
|
title: "=$boolean(@ctx.jig.state.data) ? @ctx.jig.state.data.message : 'Tap on the link'"
type: jig.document

onFocus: 
  type: action.reset-state
  options:
    state: =@ctx.jig.state.data

source: 
  documentType: HTML
  isTrackingTransparencyRequired: false
  content: |
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script language="javascript">
          function linkTapped(val)
          {
            window.ReactNativeWebView.postMessage(JSON.stringify({message : val}));
          }
        </script>
      </head>
      <body>
        <a href="javascript:linkTapped('Hello World')">Tap me</a>
      </body>
    </html>
title: "=$boolean(@ctx.jig.state.data) ? @ctx.jig.state.data.message : 'Tap on the link'"
type: jig.document

onFocus: 
  type: action.reset-state
  options:
    state: =@ctx.jig.state.data

source: 
  documentType: HTML
  isTrackingTransparencyRequired: false
  content: |
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script language="javascript">
          function linkTapped(val)
          {
            window.ReactNativeWebView.postMessage(JSON.stringify({message : val}));
          }
        </script>
      </head>
      <body>
        <a href="javascript:linkTapped('Hello World')">Tap me</a>
      </body>
    </html>
﻿
﻿
﻿

Updated 19 Sep 2023

Did this page help you?

TABLE OF CONTENTS

Examples and code snippets

PDF Document Example

HTML Document Example (URL)

HTML Document Example (Content)

HTML Document Example (Content with Message Listener)

jig.document

﻿Examples and code snippets ﻿

PDF Document Example

HTML Document Example (URL)

HTML Document Example (Content)

HTML Document Example (Content with Message Listener)

﻿

Examples and code snippets