info-modal

the info modal is a pop up window that provides additional information or context without navigating away from the current screen it is used to display additional information and offer guidance or instructions the modal appears as a temporary overlay on top of the current screen, dimming the background to focus your attention on the modal content the info modal includes interactive elements like buttons, images, icons, or links 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 modal modal contains the properties that will determine the button and content in the modal instanceid the unique identifier for the info modal that can be referenced in other jigs title provide a short title for display at the top of the info modal you can use text, an expression or a datasource to set the title other options buttontext give the button a label by providing short text the button displays as a link if an action like onconfirm is configured the button displays as a button description provide the text description or instructions for the user to follow this creates the content in the info modal you can use text, an expression or a datasource this can have multiple lines element the following elements can be added to the modal \ type specify either an icon , image , avatar \ when image is specified a uri is required \ use color to change the icon color, available colors are positive, negative, primary, warning the default color is primary if no color is specificed \ when using an avatar you can specifiy text or use a uri to show in the avatar icon add an icon to the info modal, for example a dollar icon the icon apprears on the center of the modal a list of icons are available see jigx icons https //docs jigx com/jigx icons for more information this property relates to the action button at the bottom of the screen ishidden when set to true the info modal (button at the bottom of the screen) is hidden on a jig actions onconfirmed the action is triggered when the button is pressed use intellisense (ctrl+space) to see the list of available actions action to execute when the info modal button is pressed \ if the action is not defined, the info modal will be closed \ if defined, the info modal closes after the action is executed \ the button will have primary action style considerations the info modal only has one action (button) if the action on the button is not defined, the info modal closes automatically and no action is performed expressions can be used in the info modal properties to provide the required values the info modal can be used in the onfocus , onrefresh , and onpress events the info modal is available in the default, composite, list and document jigs an info modal action can be used in an action list a jig can have multiple info modals configured in the info modal the buttontext displays as a link, if the onconfirmed event is added the link visually changes to a button consider the confirm docid\ published gujcefxioyjoisjme4d1y action, which also provides a modal with two buttons, allowing you to cancel or proceed examples and code snippets info modal with avatar in this example, the info modal is configured on an action when the button is pressed the info modal opens and displays an avatar the avatar uri property is used to set the avatar image the buttontext is configured to close the info modal example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal avatar jigx info modal avatar jigx title info modal avatar description tap the button to view the info modal type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1557683316 973673baf926?q=80\&w=1129\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d children \ type component entity options children \ type component entity field options label name value jane smith actions \ children \ type action info modal options title avatar modal title avatar buttontext close description this info modal contains an avatar with avatar image and text element type avatar text av uri https //images unsplash com/photo 1546961329 78bef0414d7c?ixlib=rb 1 2 1\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=774\&q=80 info modal with icon in this example, the info modal is configured on an action when the button is pressed the info modal opens and displays a location icon the color property is set to use the primary color the buttontext is configured to close the info modal example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal icon jigx info modal icon jigx title info modal with icon description tap the button to view the info modal type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1619468129361 605ebea04b44?q=80\&w=1171\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d children \ type component entity options children \ type component entity field options label address value 24 west street, houston, texas actions \ children \ type action info modal options title icon modal title location buttontext close description this info modal contains a location icon with color element type icon icon maps pin color primary info modal with image tapping on the action button opens the info modal showing an image of thialand the image property uses resizemode ensuring it is contained in the modal the buttontext allows you to close the modal example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal image jigx info modal image jigx title info modal with image description tap the button to view the info modal type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1508615121316 fe792af62a63?q=80\&w=1170\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d children \ type component entity options children \ type component entity field options label holiday destination value thailand actions \ children \ type action info modal options title image modal title thailand buttontext close description welcome to your holiday destination! element type image resizemode contain uri https //images unsplash com/photo 1502085671122 2d218cd434e6?q=80\&w=1226\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d info modal in calendar jig in this example the info modal is used four places in the jig in the onfocus event to show what type of calendar it is the info modal uses the element type image the buttontext closes the info modal in the onrefresh event to notify the user that the calendar is refreshing the info modal uses the title , and the buttontext closes the info modal in the action to allow the info modal to inform users that events are subject to change, the element uses type icon with a color negative in the onpress event to show informaton about the event that has been pressed the info modal's description property provides a text message to users, the avatar uri provides an image and the buttontext allows you close the info modal example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal calendar jigx info modal calendar jigx title info modal in a calendar type jig calendar icon calendar onfocus type action info modal options modal element type image uri https //i ytimg com/vi/au5emejgi88/maxresdefault jpg title global team calendar buttontext view onrefresh type action info modal options modal title calendar is refreshing buttontext close actions \ children \ type action info modal options title events warning modal title events listed here are subject to change description events listed here rely on the input from others and may not have been updated reliably we are notto be held liable for any changes or inconvenience caused buttontext ok element type icon icon calendar color negative datasources story type datasource static options data \ description updated the team on your progress for the week from =$frommillis($tomillis($now()) + 3600000) location main boardroom title team weekly sync to =$frommillis($tomillis($now()) + 3600000 + 1800000) active false \ description updated the team on your progress for the week from $frommillis($tomillis($now()) + 7200000) location break area title social meal to $frommillis($tomillis($now()) + 7200000 + 3600000) active false data =@ctx datasources story item type component event options title =@ctx current item title description =@ctx current item description from =@ctx current item from to =@ctx current item to onpress type action info modal options modal title events and times can change description events listed here rely on the input from others and may not have been updated reliably buttontext ok element type avatar text cd uri https //cdn1 iconfinder com/data/icons/managers 15/488/untitled 5 512 png info modal in default jig this example shows the info modal when the submit action button is pressed the icon element property is used with color warning the description property provides the text content, and the buttontext is used for the text on the button an onconfirm event is used to add a go back action to the button notice how the button has visually changed from a link to a button you can add an action list to the onconfirm and add an execute entity to submit the data from the form to the data store example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal default jigx info modal default jigx title info modal on a default jig type jig default onfocus type action reset state options state =@ctx jig components default form state data actions \ children \ type action info modal options title sumbit modal title verification buttontext submit description once you submit this form, your details are verifed with a third party a progress mail is sent within a week of submision element type icon icon double exclamation mark 1 formatting color warning onconfirmed type action execute entity options provider data provider dynamic entity default/employees method create data employee photo =@ctx components employee photo state value employee first name =@ctx components employee first name state value employee surname =@ctx components employee surname state value employee date of birth =@ctx components employee date of birth state value employee email =@ctx components employee email state value employee phone number =@ctx components employee phone number state value employee position =@ctx components employee position state value employee startwork =@ctx components employee startwork state value children \ type component form instanceid default form options isdiscardchangesalertenabled false children \ type component avatar field instanceid employee photo options initialvalue =@ctx datasources employee detail dynamic\[0] photo label photo \ type component section options title personal information children \ type component text field instanceid employee first name options initialvalue =@ctx datasources employee detail dynamic\[0] firstname label first name \ type component text field instanceid employee surname options initialvalue =@ctx datasources employee detail dynamic\[0] lastname label surname \ type component date picker instanceid employee date of birth options initialvalue =@ctx datasources employee detail dynamic\[0] birthdate label date of birth \ type component email field instanceid employee email options initialvalue =@ctx datasources employee detail dynamic\[0] email label email icon email \ type component number field instanceid employee phone number options initialvalue =@ctx datasources employee detail dynamic\[0] phone label phone number icon phone \ type component section options title business information children \ type component text field instanceid employee position options initialvalue =@ctx datasources employee detail dynamic\[0] position label position \ type component date picker instanceid employee startwork options initialvalue =@ctx datasources employee detail dynamic\[0] employee startwork label date of starting work employee detail dynamic jigx type datasource sqlite options provider data provider dynamic entities \ entity default/employees query | select id, '$ firstname', '$ lastname', '$ photo', '$ birthdate', '$ gender', '$ email', '$ phone', '$ street', '$ city', '$ state', '$ country', '$ category', '$ modify', '$ position', '$ employee startwork' from \[default/employees] where '$ category' = "employee detail" info modal in list jig in this example the info modal is used three places in the jig in the onrefresh event to notify the user that the list is refreshing the info modal use the title , description and buttontext to closes the info modal an element type icon with color warning shows an icon in the center of the info modal in the action to allow the info modal to show a message regarding sales information with an element type of image , the buttontext allows you to go back to the list in a swipeable left event to show the customer's details the info modal's description property provides a text message to users, the avatar uri provides an avatar with text and the buttontext allows you close the info modal the description containing the info modal content uses an expression to add content from a datasource example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal list jigx info modal list jigx title info modal in a list jig type jig list header type component jig header options height small children type component image options source uri https //images unsplash com/photo 1557683316 973673baf926?q=80\&w=1129\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d onrefresh type action info modal options modal title refreshing buttontext close description refreshing the customer list element type icon icon hourglass color warning datasources components type datasource static options data \ name belantti subtitle apac label color color4 avatar text b avatar uri https //robohash org/aloha progress 0 54 value 115000 status progress result reason badge off \ name ten tulip subtitle apac highlight false label color color7 avatar text tt avatar uri progress 0 6 value 107000 status progress result reason badge off \ name ellesti subtitle latam label color color3 avatar text e avatar uri https //robohash org/jigx progress 1 value 120000 status finished result success reason badge on \ name giga stride subtitle north america label color color8 avatar text gs avatar uri progress 0 21 value 102500 status progress result reason badge off \ name foot locker subtitle north america label color color11 avatar text fl avatar uri progress 0 47 value 42000 status finished result unsuccess reason stopped because of high price badge off \ name ovuga subtitle emea label color color9 avatar text o avatar uri progress 0 45 value 98000 status progress result reason badge off \ name boostgo subtitle north america label color color10 avatar text b avatar uri progress 0 8 value 56000 status progress result reason badge off \ name sonic automotive subtitle emea label color color13 avatar text sa avatar uri progress 0 22 value 37000 status progress result reason badge off \ name mega mile subtitle emea label color color5 avatar text mm avatar uri https //robohash org/mega progress 0 78 value 154000 status finished result unsuccess reason stopped because of high price badge on \ name jacobs engineering group subtitle emea label color color12 avatar text je avatar uri progress 1 value 38500 status finished result success reason badge off data =@ctx datasources components item type component list item options title =@ctx current item name subtitle =@ctx current item reason color \ when =(@ctx current item result= 'success' ? true \ false) color color2 progress =@ctx current item progress leftelement element checkbox value =(@ctx current item status= 'finished' ? true \ false) style iserror =(@ctx current item result= 'unsuccess' ? true \ false) isstrikethrough =(@ctx current item status= 'finished' ? true \ false) rightelement element value text ="$ " & @ctx current item value swipeable left \ label details icon people man 8 color primary onpress type action info modal options modal title customer details buttontext close description =(@ctx current item name & '\n' & @ctx current item subtitle & '\n' & '\n$' & @ctx current item value) element type avatar text =@ctx current item avatar text actions \ children \ type action info modal options title sales information icon chart modal title sales information description customer and sales information is subject to change frequently buttontext go back info modal in onpress action on a widget info modal on widget in this example the info modal is added to the onpress event of the widgets first widget uses an icon with color , title , buttontext , description and onconfirm event to navigate to another jig second widget uses avatar, title , buttontext , description and and onconfirm event to navigate to another jig third widget uses an image , title , buttontext and onconfirmed event to open a url the fourth widget uses a title , buttontext and description the buttontext closes the modal example see the example in github https //github com/jigx com/jigx samples/blob/main/quickstart/jigx samples/jigs/jigx actions/info modal/info modal widget jigx info modal widget jigx title wellness week type jig default children \ type component image options height 300 resizemode cover source uri https //images unsplash com/photo 1524901548305 08eeddc35080?w=700\&auto=format\&fit=crop\&q=60\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxzzwfyy2h8nnx8y2fsbxxlbnwwfhwwfhx8ma%3d%3d \ type component widgets options children \ size "1x1" jigid info modal placeholder join onpress type action info modal options modal element type icon icon yoga color warning title wellness week buttontext join description center your wellbeing and come join is for a week of yoga onconfirmed type action go to options linkto info modal placeholder join \ size "1x1" jigid info modal placeholder onpress type action info modal options modal element type avatar text js title venue buttontext directions description wellness week will take place at jodi's studio in western avenue, seattle onconfirmed type action go to options linkto fullscreen location dd \ size "1x1" jigid info modal placeholder shop onpress type action info modal options modal element type image resizemode contain uri https //images unsplash com/31/rpgvvtyaqeqais1kneru vegetables jpg?q=80\&w=1175\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d title healthy products buttontext shop description enhance your lifestyle with our premium selection of healthy products, now available at our store onconfirmed type action open url options url https //thrivemarket com/?utm source=google\&utm medium=cpc\&utm campaign=non brand sem diet healthy\&utm content=151719993106\&utm term=healthy%20food\&device=c\&ccode=acq60fogwp\&ccode force=1\&gad source=1\&gclid=cj0kcqjwpnuybhcuarisanjql9odblm28mmxgvxj9gk9ohdecvelkrldariwfwyg91jdluebmfwvk74aasv6ealw wcb \ size "1x1" jigid info modal placeholder contact onpress type action info modal options modal title about us buttontext go back description at our wellness center, we are dedicated to nurturing your mind, body, and spirit through holistic and personalized care info modal placeholder jigx title ' ' type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1622737133809 d95047b9e673?q=80\&w=2532\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d children \ type component entity options children \ type component entity field options label placeholder value placeholder