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 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 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
type: jig.document
title: PDF Document Type (Dynamic Data)
description: Example of PDF Financial Report
icon: document
badge: 1

placeholders:
  - when: [email protected]
    title: No data to display
  
source:
  documentType: PDF
  uri:  [email protected]-dynamic[type='PDF'].url
type: jig.document
title: PDF Document Type (Dynamic Data)
description: Example of PDF Financial Report
icon: document
badge: 1

placeholders:
  - when: =@ctx.system.isOffline
    title: No data to display
  
source:
  documentType: PDF
  uri:  =@ctx.datasources.documents-dynamic[type='PDF'].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
type: jig.document
title: HTML Document Type (Dynamic Data)
description: Example of Business Offers via HTML url
icon: document
badge: 1

placeholders:
  - when: [email protected]
    title: No data to display

source:
  documentType: HTML
  uri:  [email protected]-dynamic[type='HTML'].url
type: jig.document
title: HTML Document Type (Dynamic Data)
description: Example of Business Offers via HTML url
icon: document
badge: 1

placeholders:
  - when: =@ctx.system.isOffline
    title: No data to display

source:
  documentType: HTML
  uri:  =@ctx.datasources.documents-dynamic[type='HTML'].url
﻿
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 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
name: jig-html-content-listener
title: jig-html-listener
category: business
tabs:
  home:
    jigId: document-htmlcontent-listener
    icon: home-apps-logo
name: jig-html-content-listener
title: jig-html-listener
category: business
tabs:
  home:
    jigId: document-htmlcontent-listener
    icon: home-apps-logo
﻿
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 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.