Placeholder API

Placeholder APIs allow you to position your app in specific locations on certain pages. Using these APIs ensures that even if the underlying page changes or is restructured, your app will be displayed in the way you intended without any breakage.

Note:
If you are building an app to share on the Marketplace, you MUST use the placeholder APIs to display the app.


Ticket Details Page
  1. appPlaceholder.ticket.navBarList() - The app will be displayed as a new option in the dropdown list under the “More” button in the top navigation bar.
    template.html
    Copied Copy 
    1
    		<a href='#' target='_self | _blank | default '>My New Option</a>
    app.js
    appPlaceholder.ticket.navBarList(jQuery(this.$container));
  2. appPlaceholder.ticket.sidebar() - The app will be displayed at the bottom of the sidebar on the right after the “Ticket Properties” section.
    template.html
    Copied Copy 
    1
    2
    3
    4
    5
    6
    		<div class="widget" id="example_id">
	<h3>My App</h3>
	<div class="content">
		<!-- your app html goes here -->
	</div>
</div>
    app.js
    appPlaceholder.ticket.sidebar(jQuery(this.$container));
  3. appPlaceholder.ticket.requestorInfo() - The app will be displayed inside the Requestor Info box. This location is typically used to place remote assistance apps such as Google Hangouts for support to easily get in touch with the customer.
    template.html
    Copied Copy 
    1
    2
    3
    4
    5
    6
    		<div class="widget" id="example_id">
	<h3>My App</h3>
	<div class="content">
		<!-- your app html goes here -->
	</div>
</div>
    app.js
    appPlaceholder.ticket.requestorInfo(jQuery(this.$container));
  4. appPlaceholder.ticket.belowRequestorInfo() - The app will be displayed right underneath the Requestor Info section but above the Ticket Properties section in the sidebar on the right.
    template.html
    Copied Copy 
    1
    2
    3
    4
    5
    6
    		<div class="widget" id="example_id">
	<h3>My App</h3>
	<div class="content">
		<!-- your app html goes here -->
	</div>
</div>
    app.js
    appPlaceholder.ticket.belowRequestorInfo(jQuery(this.$container));
  5. appPlaceholder.ticket.requestorInfoTab() - The app will be displayed as a tab in the Requestor Info section. Please note that this API can be used only for apps that enrich contact data, such as CRM apps.
    template.html
    Copied Copy 
    1
    2
    3
    4
    5
    6
    		<a href="#my_div" data-tab-icon="tab">
	<img src="{{'icon.png' | asset_url}}" width="16" height="16">
</a>
<div id="my_div" class="requester_tab"  data-tab-content="tabContent" style="display:none;">
	<p class="red">Tab Works</p>
</div>
    app.js
    appPlaceholder.ticket.requestorInfoTab(jQuery(this.$container));
Contact Details Page
appPlaceholder.contact.sidebar() - The app will be displayed in the sidebar on the right on the Contact Details page.
template.html
Copied Copy 
1
2
3
4
5
6
<div class="widget" id="example_id">
	<h3>My App</h3>
	<div class="content">
		<!-- your app html goes here -->
	</div>
</div>
app.js
appPlaceholder.contact.sidebar(jQuery(this.$container));