Jig Types

jig.document

6min

The document 
﻿ type is used to display documents connected to your solution. The display of the document is provided in the following formats:
PDF file
HTML page - set up using:
 A URL (website link)
HTML
Jig Document Preview
﻿
Configuration options
Core structure
﻿
title
Provide the name of the screen. If you do not want to show a title in a 
﻿ use title: ' ' or add an expression.
source
Select from PDF or HTML content.
Other options
﻿
description
The general description of the document.
badge
Enhance your widget with a customizable badges, for instance show the number of the number of documents. Add the badge property to the 
﻿ YAML with an expression.
icon
The icon will be displayed on the widget﻿ of this 
﻿. Start typing the name of the icon to invoke the available list in IntelliSene. See Jigx icons﻿ for information on worknig with icons.
placeholders
Create a placeholder to show when there is no data to use yet. See tips and tricks -use a placeholder for a placeholder example.
﻿Examples and code snippets ﻿
﻿
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 jig.document is used to display an HTML 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-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 
﻿ 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, embed this HTML tag in 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 jig.document 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)
HTML Document jig
﻿
In this example a jig.document is used to display raw HTML content. A message listener was added via JavaScript called linkTapped(). The HMTL can pass a value into the message listener and the message then gets passed on as JSON to the 
﻿ . The JSON object is then available in the state expression using @ctx.jig.state.data. All properties of your object can be accesed using @ctx.jig.state.data.[yourproperty].

When the 
﻿ gets focus, the state is reset 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: [email protected]

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>
﻿
See Also
﻿Jigs (screens)﻿﻿
﻿Related examples (Github)﻿
﻿

Core structure
title	Provide the name of the screen. If you do not want to show a title in a use title: ' ' or add an expression.
source	Select from PDF or HTML content.

Other options
description	The general description of the document.
badge	Enhance your widget with a customizable badges, for instance show the number of the number of documents. Add the badge property to the YAML with an expression.
icon	The icon will be displayed on the widget of this . Start typing the name of the icon to invoke the available list in IntelliSene. See Jigx icons for information on worknig with icons.
placeholders	Create a placeholder to show when there is no data to use yet. See tips and tricks -use a placeholder for a placeholder example.