jig-header

the jig header component can be used in any type of {{jig}} it serves as a container for specifying headers it cannot be used without a component image docid\ xtqxvdl8yustfjsb jhxe , location docid\ ivhbtftweoxhwlnk2h6ya , or video player docid\ h7boxn9mnb f5xpbfzpkr inside the component the images can be preloaded and cached using the asset folder's images file the images will be displayed even when you are offline for more details, refer to assets docid\ wvkwd9qknxkmbjeot1d0o configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options core structure children specifies which component will be used inside the jig header there are three options image docid 5vxj0pr07qdnzz5f5esdk location docid\ ivhbtftweoxhwlnk2h6ya video player docid\ h7boxn9mnb f5xpbfzpkr height specifies the height of the header small medium actions choose an action from the available list, such as go to to open a different {{jig}} or open url to navigate to a website the selected action appears as a link in the top right corner of the header set the icon property in the action to display the action link as an icon instead of text styles of actions are inherited, for example, disabling the link you can add multiple action links in the header, but ensure they accommodate the {{jig}} title and overall screen design to prevent the {{jig}} title and header action links from overlapping while scrolling, use either one text action or up to three icon actions {{jigx}} does not recommend storing images in {{dynamicdata}} (via any conversion), as the max file size per record is 350k examples and code snippets examples and code snippets jig header with image this example shows a component jig header with property children component image and the difference between the set heights examples see the code samples using static data in github for small and medium headers small header type component jig header options height small children type component image options source uri https //builder jigx com/assets/images/header jpg medium header type component jig header options height medium children type component image options source uri https //builder jigx com/assets/images/header jpg jig header with location location in header this example shows a component jig header with property children component location and the difference between the set heights refer to the location docid\ ivhbtftweoxhwlnk2h6ya component for additional location setup options examples see the code samples using static data in github for small and medium headers location as header(small) header type component jig header options height small children type component location options viewpoint \# center the address in the middle of the screen centerposition middle \# sepcify the address using a datasource address =@ctx datasources sites\[0] address \# zoom in for map clearly zoomlevel 8 \# add endpoint marker icon for the address markers data =@ctx datasources sites\[0] address item type component marker item options address =@ctx datasources sites\[0] address children type component icon options \# determine the color of the marker icon color negative \# define the icon in the datasource icon =@ctx datasources sites\[0] icon location as header(medium) header type component jig header options height medium children type component location options viewpoint \# center the address in the middle of the screen centerposition middle \# sepcify the address using a datasource address =@ctx datasources sites\[0] address \# zoom in for map clearly zoomlevel 8 \# add endpoint marker icon for the address markers data =@ctx datasources sites\[0] address item type component marker item options address =@ctx datasources sites\[0] address children type component icon options \# determine the color of the marker icon color negative \# define the icon in the datasource icon =@ctx datasources sites\[0] icon datasource datasources sites type datasource static options data \ id 1 name empire state building latitude 40 748676182418976 longitude 73 98567513213604 address 20 w 34th st , new york, ny 10001, united states icon landmark empire state \ id 2 name great lawn softball field 6 latitude 40 782091612607864 longitude 73 9655512166898 address 86th st transverse, new york, ny 10024, united states icon stadium 1 building jig header with video player this example shows a component jig header with property children component video player and the difference between the set heights examples see the code samples using static data in github for small and medium headers small header type component jig header options height small children type component video player options url https //cdn pixabay com/video/2023/10/01/183108 870151713 small mp4 title video player autoplay false medium header type component jig header options height medium children type component video player options url https //cdn pixabay com/video/2023/10/01/183108 870151713 small mp4 title video player autoplay false jig header with an action (text link) this example shows a component jig header configured with an action the action displays as a link in the top right corner of the header ensure the action is visible and not obscured by the header image or video the open url action is configured to open the {{jigx}} website small title jig header with action type jig default header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1605712916066 e143c317df72?w=500\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtr8fhbyb2jszw18zw58mhx8mhx8fda%3d \# configure the action applicable to the header \# the action displays as a link in the top right corner of the header actions \ type action go to options title ask a question linkto ai chat children \ type component entity options children \ type component section options title helpful resources children \ type component entity field options label documentation value https //docs jigx com/ \ type component entity field options label community value https //community jigx com/ \ type component entity field options contenttype email label support value support\@jigx com jig header with multiple actions (icons) this example demonstrates a component jig header configured with three open url actions, displayed as icons in the top right corner of the header styling is applied to two of the icons to ensure visibility make sure the actions are not obscured by the header image/video or the {{jig}} title when scrolling the open url actions open various {{jigx}} websites small title jig header (icon actions) type jig default header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1475965894430 b05c9d13568a?w=500\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtj8fhdoaxrljtiwcgf0dgvybmvkjtiwy29sb3ilmjbiywnrz3jvdw5kc3xlbnwwfhwwfhx8ma%3d%3d \# configure multiple actions applicable to the header \# add icons for each action link \# set the style for two of the action icons \# the actions display the icons (not the text) in the top right corner of the header actions \ type action open url options icon contact us customer support chat style \# displays the icon in red or the brand's designated danger color isdanger true title ask a question url https //jigx com/ \ type action open url options \# icon displays in the primary color when no styling is configured icon document title documentation url https //docs jigx com/ \ type action open url options style \# displays the icon in yellow or the brand's designated secodary color issecondary true icon people protester title community url https //community jigx com/ children \ type component entity options children \ type component section options title helpful resources children \ type component entity field options label documentation value https //docs jigx com/ \ type component entity field options label community value https //community jigx com/ \ type component entity field options contenttype email label support value support\@jigx com jig header actions without header children in this example, we use the jig header action to create two actions with icons one to open an info modal and another to go to a different {{jig}} the jig header has no children (such as an image, location, or video player), which allows for greater flexibility in the header jig header action jig header action without children jigx title header with no children type jig default \# add the header and only specify actions header type component jig header options height medium actions \# first action to go to a jig the jig is opened as a modal \ type action go to options title invoice icon accounting invoice linkto monthly invoice ismodal true \# second action opens an info modal showing an avatar \ type action info modal options title "" icon person modal title this is you description =@ctx user displayname buttontext close element type avatar text your self uri =@ctx user avatarurl children \ type component entity options children \ type component field row options children \ type component entity field options label entity field value text monthly invoice jigx title monthly invoicing description provide your details type jig default header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1450101499163 c8848c66ca85?w=900\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8mtr8fgludm9py2luz3xlbnwwfhwwfhx8ma%3d%3d children \ type component section options title details children \ type component form instanceid inputvalues options children \ type component text field instanceid firstname options initialvalue =@ctx user displayname label first name isrequired false \ type component email field instanceid email options initialvalue =@ctx user email label email address \ type component number field instanceid phonenumber options initialvalue =@ctx user phone label phone number actions \ children \ type action action list options title send invoice issequential true actions \ type action generate pdf instanceid generate pdf id options \# provide the html for the pdf file html =@ctx datasources monthly invoice html invoice html filename invoice 1 \ type action execute entity options provider data provider dynamic entity default/documents method create data filename invoice 1 date =$now() file =@ctx actions generate pdf id outputs uri conversions \ property file from local uri to data uri \ type action share options fileuri =@ctx actions generate pdf id outputs uri message global invoice subject invoice for january monthly invoice html jigx type datasource static options data \ id 1 invoice html | \<!doctype html> \<html lang="en"> \<head> \<meta charset="utf 8"> \<meta name="viewport" content="width=device width, initial scale=1 0"> \<title>invoice\</title> \<style> body { font family 'arial', sans serif; margin 0; padding 20px; background color #f6f6f6; } invoice box { max width 800px; margin auto; padding 30px; border 1px solid #eee; box shadow 0 0 10px rgba(0, 0, 0, 0 15); background color #fff; color #555; } invoice box table { width 100%; line height 1 6; text align left; border collapse collapse; } invoice box table td { padding 5px; vertical align top; } invoice box table tr td\ nth child(2) { text align right; } invoice box table tr top table td { padding bottom 20px; } invoice box table tr information table td { padding bottom 40px; } invoice box table tr heading td { background #eee; border bottom 1px solid #ddd; font weight bold; } invoice box table tr details td { padding bottom 20px; } invoice box table tr item td { border bottom 1px solid #eee; } invoice box table tr item last td { border bottom none; } invoice box table tr total td\ nth child(2) { border top 2px solid #eee; font weight bold; } h2, h3 { margin 0; } \</style> \</head> \<body> \<div class="invoice box"> \<table cellpadding="0" cellspacing="0"> \<! invoice header > \<tr class="top"> \<td colspan="2"> \<table> \<tr> \<td class="title"> \<h2>company name\</h2> \</td> \<td> invoice # 12345 created january 1, 2025 due january 31, 2025 \</td> \</tr> \</table> \</td> \</tr> \<! company & customer information > \<tr class="information"> \<td colspan="2"> \<table> \<tr> \<td> company name, inc 12345 street address city, state, zip \</td> \<td> customer name customer company 67890 customer address \</td> \</tr> \</table> \</td> \</tr> \<! payment method details > \<tr class="heading"> \<td>payment method\</td> \<td>check #\</td> \</tr> \<tr class="details"> \<td>check\</td> \<td>1001\</td> \</tr> \<! itemized list of services/products > \<tr class="heading"> \<td>item\</td> \<td>price\</td> \</tr> \<tr class="item"> \<td>website design\</td> \<td>$300 00\</td> \</tr> \<tr class="item"> \<td>hosting (3 months)\</td> \<td>$75 00\</td> \</tr> \<tr class="item last"> \<td>domain registration (1 year)\</td> \<td>$10 00\</td> \</tr> \<! total > \<tr class="total"> \<td>\</td> \<td>total $385 00\</td> \</tr> \</table> \</div> \</body> \</html>