To push custom controls into CIB webRec, there exists a special panel with buttons which can be configured during runtime. This panel is shown near (or instead of) open and save buttons. These buttons will make CIB webRec perform a function call in enclosing window using the same mechanism.

To configure this panel, you would provide an array of objects into webRec.setIntegrationPanelState. Objects must have following fields:

{
  key: string,       // Unique ID for this particular button 
  title: string,     // Text that will be shown when button is hovered 
  shortcut: string,  // Shortcut for the button. Optional parameter.
  callback: string,  // Path to function to be called when
                     // button is clicked 
  icon: string,      // icon name 
  disabled: boolean, // True makes the button greyed out
                     // and not clickable 
  display: boolean   // False hides the button completely
}

 

Supported icons are that of FontAwesome (http://fontawesome.io/icons/). Icon name is the CSS class without fa- prefix (fa-cog becomes just cog)

callback should contain a complete path to a function to be called. Functions will be called with no arguments.

window.blockForever = function () { 
  please.call('webRec.blockUI', true)
}
 
window.webRecCallbacks = {
  reloadWebRec: function () { 
    please.call('location.reload') 
  }
}
 
please.call('webRec.setIntegrationPanelState', [ 
  { 
    key: 'process', 
    title: 'Process document', 
    callback: 'my_processing_implementation', 
    icon: 'icon-check', 
    disabled: false, 
    display: true 
  }, 
  { 
    key: 'reload', 
    title: 'Reload editor tab', 
    callback: 'webRecCallbacks.reloadWebRec',
    icon: 'icon-refresh', 
    disabled: false, 
    display: true 
  } 
])

Providing a GET parameter onEditorOpen is the best place for CIB webRec initialization, including integration panel. It obeys the same rules as callback property in integration button (a path to zero-argument function).