Browse Guides

Adding Iframes to Custom Tabs
Reading mode
Copy Link
Link Copied!
Print
Feedback
This guide has multiple versions available:
<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><div><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } .fr-fic.fr-dii { float: none; margin: 5px auto; } .fr-fic.fr-dii.fr-fil { float: left; margin: 5px auto; } .fr-fic.fr-dii.fr-fir { float: right; margin: 5px auto; } img.fr-dib.fr-fir { margin-right: 0; text-align: right; } img.fr-dib.fr-fil { margin-left: 0; text-align: left; } img.fr-dib { margin: 5px auto; display: block; float: none; } img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC; } img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc; } img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } </style><div><div><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } .fr-fic.fr-dii { float: none; margin: 5px auto; } .fr-fic.fr-dii.fr-fil { float: left; margin: 5px auto; } .fr-fic.fr-dii.fr-fir { float: right; margin: 5px auto; } img.fr-dib.fr-fir { margin-right: 0; text-align: right; } img.fr-dib.fr-fil { margin-left: 0; text-align: left; } img.fr-dib { margin: 5px auto; display: block; float: none; } img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC; } img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc; } img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } </style><div><p><span style="font-size: 11pt;"><strong>In this guide we will cover:</strong></span></p><p><span style="font-size: 11pt;"><strong>- How to create a custom tab containing an Iframe&nbsp;</strong></span></p><p><span style="font-size: 11pt;"><strong>- How to display a report in this custom tab, and filter the report</strong></span></p><p><br></p><p><br></p><p><span style="font-size: 11pt;">Adding an Iframe to a custom tab is used to embed another website into the custom tab. This means you can see/navigate another webpage within a custom tab in your Halo.&nbsp;</span></p><p><br></p><p><strong><span style="font-size: 14px;">The following entities can have a custom tab against them containing an Iframe:</span></strong></p><ul><li><span style="font-size: 14px;">Tickets</span></li><li><span style="font-size: 14px;">Customers</span></li><li><span style="font-size: 14px;">Assets (we have a specific guide on Asset Iframes <a data-fr-linked="true" href="https://usehalo.com/haloitsm/guides/2200/" id="isPasted" target="_blank" rel="noopener noreferrer"><strong>here</strong></a>)</span></li><li><span style="font-size: 14px;">Users</span></li><li><span style="font-size: 14px;">Agents</span></li></ul><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">Embedding a webpage into a custom tab allows you to access external webpages from within Halo. This is useful if you need access to information that is stored outside of Halo as it prevents the need for you to navigate to another webpage. It also allows you to view information from within a ticket or customer profile, that is stored elsewhere in Halo. This is useful for when you require information about a customer (for example) that can only be obtained from a report. You can then use an Iframe custom tab to view the report data within the customer/ticket itself, without having to navigate to the reporting module. &nbsp;</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14pt;"><strong>How to Create a Custom Tab Containing an Iframe</strong></span></p><p><span style="font-size: 12pt;"><strong>Display an External Website</strong></span></p><p><span style="font-size: 14px;">Head to Configuration &gt; Custom Objects &gt; Custom Tabs &gt; select entity you would like to make the tab under &gt; New. Here, set the &#39;Type&#39; of tab to be &#39;Iframe&#39;, and you will have an option to enter a URL.&nbsp;</span></p><p><br></p><p><span style="font-size: 14px;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjhkN2JhZTRlLWRhN2MtNDViMi1iYTA1LTc4M2Q0MGM3MGViOCJ9.-u1i84wIWRdZMIY32ZrMMDGQuGWg2s5Id-DqbRFol6s" class="fr-fic fr-fil fr-dib" style="width: 852px;"></span></p><p><span style="font-size: 10pt;"><strong>Fig 1. Custom Tab Setup</strong></span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">In the URL field, enter the URL of the webpage you would like to appear on the custom tab, your company website for example. Save this. Now when you view the custom tab, you will be able to see and navigate the webpage specified in the URL.&nbsp;</span></p><p><br></p><p><span style="font-size: 14px;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjA1OTBkN2IyLWYwODMtNGFiZi05Y2U4LTk0M2Q5M2ZmYWMxMCJ9.VlrN7fMCtT3yGeQ9LEtFWSaWnwYZABrqW7OjLVUNNm4" class="fr-fic fr-fil fr-dib" style="width: 986px; height: 575.773px;" width="984" height="576"></span></p><p><span style="font-size: 10pt;"><strong>Fig 2. Webpage within custom tab</strong></span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">If you have made a custom tab against the customer entity, this tab will appear under all your customers.</span></p><p><span style="font-size: 14px;">If you have made a custom tab against the ticket entity the tab will only appear on ticket types that have this tab enabled.&nbsp;</span></p><p><br></p></div></div><p><span style="font-size: 14px;">To check this head to Configuration &gt; Tickets &gt; Ticket Types &gt; select a ticket type you would like the tab on &gt; Allowed Values &gt; Custom Tabs section. Here you have the option to &#39;Allow all Custom Tabs&#39;, if enabled will show all the custom tabs you have created for tickets.</span></p><p><br></p><p><span style="font-size: 14px;">If you do not allow all custom tabs, you can add the allowed tabs into the table below, only tabs in this table will appear on this ticket type.&nbsp;</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI0N2I2OWFhLTAwMjUtNGZhNS1iMTZmLTU3MjZmNTI1MzhhMSJ9.4Bw2hSGQf75qIs_F7VgFKC4xr30mkwmKFo2C3g7HPhc" class="fr-fic fr-fil fr-dib" style="width: 864px;"></span></p><p><span style="font-size: 10pt;"><strong>Fig 3. Allowed custom tabs for a ticket type</strong></span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 12pt;"><strong>Display a Halo Area</strong></span></p><p><span style="font-size: 14px;">You could also use the Iframe functionality to have one areas of your Halo appear under a custom tab. For example if you would like to see all your assets under the custom tab, take the URL from the assets page and enter this in the Iframe URL.</span></p><p><br></p><p><span style="font-size: 14px;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY4M2ViYTY5LWFhOGEtNGZhOS1iYzBjLTQyYTZmZGU2MjZiMyJ9.Ab9a01YEpREustrUrHBYSrjCFA6blrkFOlGtC0dbaUs" class="fr-fic fr-fil fr-dib" style="width: 902px;"></span></p><p><span style="font-size: 10pt;"><strong>Fig 4. Assets page within a custom tab</strong></span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">Taking the raw URL will show the whole webpage. If you would like to hide the navigation menu (left hand side) so the agent cannot navigate to other areas of Halo (only quotations) you can add &#39;<strong>&amp;showmenu=false</strong>&#39; &nbsp;to the end of the URL.</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">Note, when accessing an area in Halo through an Iframe this will take the permissions of the agent that you are logged in as. This means if an agent who does not have permission to access the asset module views this custom tab, they will not be able to see any assets here.&nbsp;</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14pt;"><strong>Display a Report in the Custom tab</strong></span></p><p><span style="font-size: 14px;">The Iframe custom tab functionality can also be used to display reports under a custom tab. This is useful if you would like specific information/data about a customer to be visible against their customer profile. For example if you have a report showing the total revenue and profit for your customers, you may want this to be visible under the customer profile rather than having to navigate to the reporting module.&nbsp;</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">To create a custom tab Iframe that shows a specific report, head to the report you would like to display in the reporting module. Once the report is open, copy the URL and enter this into the &#39;URL&#39; field on the custom tab. This will display the report as it does in the reporting suite, allowing you to apply filters on an ad-hoc basis. This is useful if you would like the ability to flexibly change which filters are applied to the report.</span></p><p><br></p><p><span style="font-size: 14px;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjMwMGNiYWFkLWI2OWUtNDNkZS1iMWNiLTAwYmQ0YmYxZjVlYSJ9.9mlau5IvlLsElGN_EhmdTLUFdO1JYqH0xZ_VU_23pCc" class="fr-fic fr-fil fr-dib" style="width: 885px;"></span></p><p><span style="font-size: 10pt;"><strong>Fig 5. Report within a custom tab with ad-hoc filtering</strong></span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">You can also have the report to apply a filter automatically, such as only showing data for the customer the tab is under. To do this you will need to edit the URL inputted for the custom tab. In order to filter for the customer add the following to end of your URL: &nbsp;<em>&amp;Filter_Includes_[Colum name containing customer]=$area</em></span></p><p id="isPasted"><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">To have the report filter so that it only shows data for the ticket the custom tab is under add the following to the end of the URL: <em>&amp;Filter_Includes_[Colum name containing ticketID]=$faultid</em></span></p><p><span style="font-size: 14px;"><strong><br></strong></span></p><p><span style="color: rgb(209, 72, 65); font-size: 14px;"><strong>You must also change the URL from &#39;reports?&#39; to &#39;report?&#39; If this is not changed, the filters will not work.</strong></span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;"><strong>For example:</strong></span></p><p><span style="font-size: 14px;">This is the raw URL of the report I would like to appear in my custom tab: https://myhalo.halopsa.com/reports?mainview=reportgroup&amp;selid=-99&amp;sellevel=1&amp;selparentid=0&amp;id=168&nbsp;</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">To have the report automatically filter data to only show data for the customer I am viewing, I will change it to: &nbsp;https://myhalo.halopsa.com/report?mainview=reportgroup&amp;selid=-99&amp;sellevel=1&amp;selparentid=0&amp;id=168&amp;Filter_Includes_Customer=$area</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">The are many other filters you can apply to the report through the URL, such as filtering for a specific time period, user, contract etc. We have a dedicated guide on this <a data-fr-linked="true" href="https://usehalo.com/haloitsm/guides/1771/" id="isPasted" target="_blank" rel="noopener noreferrer"><strong>here</strong></a>.&nbsp;</span></p><p><span style="font-size: 14px;"><br></span></p><p><span style="font-size: 14px;">Applying a filter through the URL will result in the filter automatically applying in the UI. This means filters can be removed/changed when within the custom tab. But if the page is refreshed the original filters will re-apply.&nbsp;</span></p><p><br></p><p><span style="font-size: 14px;"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImY2M2E2NTE5LTQ0MDYtNDYxNC1hNjljLTcyNmQyYmY3NjQ0NSJ9.B-qyCV8ztMlJy0UfkjY2OCKdAIXzWQGt0g4OG2rtd2g" class="fr-fic fr-fil fr-dib" style="width: 971px;"></span></p><span style="font-size: 10pt;"><p><strong>Fig 6. Report after customer filter applied in URL</strong></p></span><br><p><span style="font-size: 14px;">Note that adding a filter in the URL will add an additional filter to those already applied in the report, so if you already have a filter saved to the report, this will be applied as well as the customer filter applied in the URL. If using URL filters it is best to not save any filters to the source report.</span></p></div></div>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.