Top bar

The app appears as an icon on the right side of the bar along the top of the agent interface. Clicking the icon opens the app.

Example manifest

             

              
"location":{"support":{"top_bar":"assets/iframe.html"}},
             

SeeSetting the app location.

In addition to the objects available inall locations, the following additional actions are available in this location:

• popover
• preloadPane
• iconSymbol
• iconChars

Events

In addition to thecore events, the following events are available to an app in the top bar:

• pane.activated
• pane.deactivated

By default, the pane view of a nav bar or top bar app is only inserted into the DOM the first time the app is opened by the user. If you need to insert the pane into the DOM without making it visible, see thepreloadPaneaction in the nav bar documentation.

Once the app pane is in the DOM, users can switch away and back to it.

pane.activated

Fires when the user returns to a top_bar or nav_bar app that's already been opened. It doesn't fire when the app is first displayed after loading. Consider using theapp.registeredevent in that case.

             

              
client.on('pane.activated',function(){//handler code});
             

pane.deactivated

Fires when the user switches away from your app and the app is no longer visible.

             

              
client.on('pane.deactivated',function(){//handler code});
             

Actions

The following additional actions are available in this location:

• popover
• preloadPane
• iconSymbol
• iconChars

popover

You can use thepopoverAPI to show, hide, or resize top bar apps.

调用

             

              
client.调用('popover',{width:400,// The special value auto is also allowed for the height property onlyheight:200})
             

             

              
client.调用('popover','show')// possible values: 'toggle', 'hide' or 'show'. Default: 'show'.
             

Note:ThepopoverAPI only changes the size of the popover. It doesn't change the size of your iframe. Theresizeaction changes the size of both the iframe and the popover for top bar apps.

preloadPane

By default, the pane view of a nav bar or top bar app is only inserted into the DOM the first time the app is opened. CallingpreloadPanecauses the pane view to be inserted into the DOM in advance, but it won't be visible until the app is opened. This is useful in cases where you need to manipulate the DOM before the app is made visible or if you have an iframe that needs to be preloaded. When the app pane is created, the framework fires thepane.createdevent.

Note:You can only callpreloadPanewith theinstances APIfrom a location loaded earlier. In most cases however, performing background tasks directly from the background location is preferred to preloading the pane.

调用

             

              
instanceClient.调用('preloadPane')// called from another location using the instances API.
             

iconSymbol

Changes the SVG icon. SeeiconSymbol API.

set

             

              
client.set('iconSymbol',symbolName)
             

arguments

• symbolName的价值idattribute in atag in your SVG file.

Note:You can't use theiconSymbolproperty to change an app icon in the overflow menu.

iconChars

Changes the SVG icon to the two characters provided. Supports UTF8.

调用

             

              
client.调用('iconChars',twoChars)client.调用('iconChars','Wi')client.调用('iconChars','∑✈')
             

arguments

• twoCharsis a string of two characters that will be put into the nav_bar icon.

Note:You can't use theiconCharsproperty to change an app icon in the overflow menu.