{"id":14491,"date":"2015-09-29T11:42:41","date_gmt":"2015-09-29T10:42:41","guid":{"rendered":"https:\/\/help.instantatlas.com\/dashboard-builder-desktop\/desktop-user-guide\/the-instantatlas-designer\/creating-a-new-design\/etc\/"},"modified":"2020-11-25T14:46:45","modified_gmt":"2020-11-25T14:46:45","slug":"etc","status":"publish","type":"page","link":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/desktop-user-guide\/the-instantatlas-designer\/creating-a-new-design\/etc\/","title":{"rendered":"Making a Component a Pop-up Window"},"content":{"rendered":"<p>All components in the report can either be permanently visible or work as a pop-up window which can be toggled on and off using a button. This section will describe the steps to modify a component to be a pop-up window. The bar chart will be used as an example.<\/p>\n<p>Click to select the bar chart component in the canvas and the \u2018Bar Chart Properties\u2019 will be displayed in the right hand panel. As with every other component, the bar chart has the two properties:<\/p>\n<p>Visible at Startup?<br \/>\nPopUp Window?<\/p>\n<p>Tick the \u2018PopUp Window?\u2019 checkbox to make the bar chart a pop-up. Use the \u2018Visible At Startup?\u2019 property to define whether the component should be visible or hidden when opening the report. Both properties are part of all report components.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/popupProperties.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/popupProperties.png\" alt=\"\" class=\"alignnone size-full wp-image-33991\" width=\"328\" height=\"594\" srcset=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/popupProperties.png 328w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/popupProperties-166x300.png 166w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/p>\n<p>You should then insert a new button into your report. Select \u2018Insert\u2019, \u2018Button\u2019 from the menu bar, give the button a label and tooltip of your choice and select the \u2018Links\u2019 tab in the Properties Pane. Type \u2018javascript:iaToggle(barChart)\u2019 into the URL field.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/ToggleButtonProperties.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/ToggleButtonProperties.png\" alt=\"\" class=\"alignnone size-full wp-image-33992\" width=\"276\" height=\"383\" srcset=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/ToggleButtonProperties.png 276w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/ToggleButtonProperties-216x300.png 216w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/a><\/p>\n<p>You can find out which script you need to use by hovering over the \u2018Visible at Startup?\u2019 or \u2018PopUp Window?\u2019 properties. The tooltips that appear include the JavaScript function.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/TooltipToggle.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/TooltipToggle.png\" alt=\"\" class=\"alignnone size-full wp-image-33994\" width=\"462\" height=\"320\" srcset=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/TooltipToggle.png 462w, https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-content\/uploads\/sites\/31\/2020\/11\/TooltipToggle-300x208.png 300w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/a><\/p>\n<p>You can find a full list of JavaScript functions in section \u2018<a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/desktop-user-guide\/the-instantatlas-designer\/creating-a-new-design\/button\/button-properties\/\">Button Properties<\/a>\u2019.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All components in the report can either be permanently visible or work as a pop-up window which can be toggled on and off using a button. This section will describe the steps to modify a component to be a pop-up window. The bar chart will be used as an example. Click to select the bar &hellip; <a href=\"https:\/\/help.instantatlas.com\/instantatlas-desktop\/en\/welcome\/desktop-user-guide\/the-instantatlas-designer\/creating-a-new-design\/etc\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Making a Component a Pop-up Window<\/span><\/a><\/p>\n","protected":false},"author":22,"featured_media":0,"parent":4941,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14491","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/14491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/comments?post=14491"}],"version-history":[{"count":0,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/14491\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/pages\/4941"}],"wp:attachment":[{"href":"https:\/\/help.instantatlas.com\/instantatlas-desktop\/wp-json\/wp\/v2\/media?parent=14491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}