In this guide, we will implement printing data from multiple tabs in ToolJet. This will be useful when printing an invoice or a report from your ToolJet application. For example, a ToolJet app that has a set of tabs for each invoice, and you want to print all the tabs in one go.
On the ToolJet homepage, click on the ellipses on the `Create new app` button. Choose an app with a set of tabs for each record. Each tab will have a set of fields to display. For this guide, we will be using the **Lead Management System** app.
- **Button**: The **Create Lead** button is the deafult button. For this guide, we will also add another button named **Download PDF**, that will print the data from all the tabs. The button will have two events, the details for which we will share later in this guide.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/appui-v2.png"alt="Print data from multiple tabs"/>
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/data-v2.png"alt="Print data from multiple tabs"/>
To print data from multiple tabs, we will create few JavaScript queries. Using event handlers, we will run these JavaScript queries in a sequence to print data from all the tabs.
| On click | Set variable | Set a variable with key `lastSelectedTab` and value to `{{components.tabs1.currentTab}}`. This will store the id of the currently selected tab in the variable. |
| On click | Run query | Select the query named *viewTabs* to run when the button is clicked. |
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/buttonevents-v2.png"alt="Print data from multiple tabs"/>
The *viewTabs* query is a JavaScript query that will run a loop to print data from all the tabs. The query will set a variable `tabIndex` that will store the id of the tab to print data from. The query for this app will loop and increment the tabsIndex variable by 1, using the setVariable action, till the value is less than 4.
- In the *viewTabs* query, click on the **New event handler** button, for the event type, choose `Query Success` from the dropdown.
- Choose `Control component` as the **Action** for the event.
- In the **Run only if** parameter of the event, copy the code: `{{parseInt(variables.tabIndex) < 4}}`. This will run only if the output of the given code is true, i.e. if the tabIndex is less than 4.
- Under the **ACTION OPTIONS** of the event, choose **Action** as `Set current tab`.
- Copy the code: `{{variables.tabIndex}}` in the Id parameter. This sets the current tab to the tab with id stored in the tabIndex variable, i.e. it sets the current tab to the tab whose id got recently stored in the `tabIndex` variable via the *viewTabs* query.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/q1-v2.png"alt="Print data from multiple tabs"/>
- The second event in this query will also be a `Query Success` event.
- Choose `Run Query` as the **Action** for the event.
- In the **Run Only If** parameter, copy the code: `{{parseInt(variables.tabIndex) < 4}}`. This event will run only if the condition given in the code is true.
- The query for this event handler will be `getTabsHTML`.
- Add a **Debounce** of `100` milliseconds to this event handler.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/q2-v2.png"alt="Print data from multiple tabs"/>
- The third event in this query will also be a `Query Success` event.
- Choose `Run Query` as the **Action** for the event.
- In the **Run Only If** parameter, copy the code: `{{parseInt(variables.tabIndex) === 4}}`. This action runs only when the `tabIndex` is equal to 4, i.e. the last iteration of the loop and we will print the data from all the tabs in this iteration.
- The query for this event handler will be `printPDF`.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/q3-v2.png"alt="Print data from multiple tabs"/>
Now that we have created the *viewTabs* query, we can go to the **[Download PDF](/docs/how-to/print-multi-tabs-report#printing-data-from-multiple-tabs)** button and add the *viewTabs* query to the `On click` event handler.
The *getTabsHTML* is a JavaScript query that will get the HTML of the current tab and store it in a variable. The query will have a variable `tabsHtml` that will store the HTML of all the tabs in the form of an array.
- The event in this query will be a `Query Success` event.
- This event will have an **Action** of `Run Query`.
- In the **Query** Parameter, choose *viewTabs* as the query. This will run the *viewTabs* query after the *getTabsHTML* query is successfully executed.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/gettabshtml-v2.png"alt="Print data from multiple tabs"/>
Now that we have created the *getTabsHTML* query, we can go to the *viewTabs* query and in the **Event 2** of that query, add the *getTabsHTML* query to the event handler.
The *printPDF* query is a JavaScript query that generates a printable document from the HTML content stored in the `tabsHtml` variable. This query will open a new window and write the HTML content of all the tabs. This will allow the user to download a PDF document that includes the formatted content of all the tabs.
- In the *printPDF* query, click on the **New event handler** button, for the event type, choose `Query Success` from the dropdown.
- Choose `Unset variable` as the **Action** for the event.
- Under the **ACTION OPTIONS** of the event, set `tabsIndex` as the **Key**. This will unset the tabsIndex variable after the *printPDF* query is successfully executed.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/unsetvar1-v2.png"alt="Print data from multiple tabs"/>
- The second event in this query will also be a `Query Success` event.
- Choose `Unset variable` as the **Action** for the event.
- Under the **ACTION OPTIONS** of the event, set `tabsHtml` as the **Key**. This will unset the `tabsHtml` variable after the *printPDF* query is successfully executed.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/unsetvar2-v2.png"alt="Print data from multiple tabs"/>
- The third event in this query will also be a `Query Success` event.
- Choose `Control component` as the **Action** for the event.
- Choose `tabs1` for the **Component** parameter.
- Choose `Set current tab` as the **Action**.
- For the Id parameter, copy the code: `{{variables.lastSelectedTab}}`. This will set the current tab to the tab that was selected before the **Download PDF** button was clicked.
<imgstyle={{border:'0',marginBottom:'15px',borderRadius:'5px',boxShadow:'0px1px3pxrgba(0,0,0,0.2)'}}className="screenshot-full"src="/img/how-to/print-multitabs/controlcomp2-v2.png"alt="Print data from multiple tabs"/>
Now that we have created the *printPDF* query, we can go to the *viewTabs* query, and in the **Event 3** of that query, add the *printPDF* query to the **Query Success** event handler.
Finally, we can test the app by clicking on the **Download PDF** button. This will redirect us to the new tab of the browser, and download a PDF document with the data from all the tabs.
