jig.document

the document jig 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 some properties are common to all jig types, see common jig type properties docid\ avbkakpprdhkz8i8istkf for a list and their configuration options core structure title provide the name of the screen if you do not want to show a title in a jig 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 jig yaml with an expression icon the icon will be displayed on the widget # of this jig 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 https //community jigx com/t/tips tricks use placeholders/78 https //community jigx com/t/tips tricks use placeholders/78 tips and tricks use a placeholder for a placeholder example 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 https //github com/jigx com/jigx samples/tree/main/quickstart/jigx samples https //github com/jigx com/jigx samples/tree/main/quickstart/jigx samples github, and follow the instructions in setting up your solution docid 1gfew7grpvkfxon tsymp 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 "https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jig types/jig document/static data/document pdf sd jigx see the full code sample using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jig types/jig document/dynamic data/document pdf dd jigx 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 https //github com/jigx com/jigx samples/blob/main/quickstart/csv/documents csv and upload it via the data # configuration in jigx management document pdf dd jigx 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 datasources datasources documents dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/documents query | select id, '$ name', '$ description', '$ type', '$ url' from \[default/documents] default jigx databaseid default tables documents null index jigx name jig doc pdf title jig doc examples category business tabs home jigid document pdf dd icon home apps logo 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 https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jig types/jig document/static data/document html url sd jigx see the full code sample using dynamic data in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jig types/jig document/dynamic data/document html url dd jigx 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 https //github com/jigx com/jigx samples/blob/main/quickstart/csv/documents csv and upload it via the data # configuration in jigx management document html dd jigx 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 datasources datasources document dynamic type datasource sqlite options provider data provider dynamic entities \ entity default/documents query | select id, '$ name', '$ description', '$ type', '$ url' from \[default/documents] default jigx databaseid default tables documents null index jigx name jig doc html title jig doc examples category business tabs home jigid document html dd icon home apps logo 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, embed this html tag in your html content that you are passing into the uri option html document jig in this example a jig document is used to display raw html content examples see the full code sample in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jig types/jig document/static data/document html content jigx document html content 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> index jigx name jig html content title jig html content category business tabs home jigid document html content icon home apps logo 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 jigx app 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 jig 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 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> index jigx 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) https //github com/jigx com/jigx samples/tree/main/quickstart/jigx samples/jigs/jig types/jig composite