$Panel = $this->get('ui', 'panel', Array(
  icon     => 'app-addnew',
  title    => 'Title text',
  position => 'inline', // Inline HTML
  action   => 'url',
  hidden   => Array(
    'hidden_name' => 'hidden_value'
  ),
  button   => Array(
    Array(
      'icon'   => 'addnew',
      'title'  => 'Save',
      'color'  => 'Green',
      'name'   => 'submit'
    )
  ),
  menu   => Array(
    Array(
      'icon'   => 'addnew',
      'onlick' => 'runMe()'
    )
  ),
  content  => 'Panel content'
));

var $Panel = cms.get('ui', 'panel', {
  icon:     'app-addnew',
  title:    'Title text',
  content:  'Panel content'
});

var $Panel = cms.get('ui', 'panel', {
  id:          'id',      // Is set as data-id
  role:        'role',    // Is set as data-role
  description: 'Additional text under title',
  style:       '',        // menu, condensed.
  close_type:  'remove',  // Remove/hide on close.
  modal:       false,     // If true, panel is shown as modal panel. (prevents other interaction with the page)
  tabs:        [{}],      // Tabs content

  // Menu: In end of the row. Same parameters as button.
  menu: [{
    icon: 'app-addnew'
    onclick: function(){
      alert('Menu clicked');
    }
  }]
});

var $Panel = cms.get('ui', 'panel', {
  form:   true,     // Add FROM tag to panel.
  button: [{
    icon: 'app-edit',
    color: 'red',
    onclick: function(){
      alert('Button clicked');
    }
  }],
  // Hidden values as name=value -pairs
  hidden: {
      id:        Todo.id,
      table_id:  Todo.table_id,
      record_id: Todo.record_id
  },
  // Hidden values as List of objects
  hidden: [{
      name:  'name',
      value:  123
  }],
});

var $Panel = cms.get('ui', 'panel',{
  toolbar:   '',
  toolbar: {
    left:      '',
    center:    '',
    right:     ''
  },
  footer:    '',
  footer: {
    left:      '',
    center:    '',
    right:     ''
  }
});

var $Panel = cms.get('ui', 'panel', {
  width:         400,   // Panel width
  height:        400,   // Panel height
  contentHeight: 400,   // body div height
  closed:        false, // Initial state (true, if is used via toggle)
  target:        '',    // Element that panel is positioned at
  parent:        '#wrapper-float', // Selector of the DOM element that panel is appended to.
  position:      'atop', // over, under ... As in .anchorTo()
  position: {
    vertical: {
      panel:  'top',
      target: 'bottom',
      offset: '4'
    },
    horizontal: {
      panel:  'left',
      target: 'left',
      offset: '0'
    }
  },
});

var $Panel = cms.get('ui', 'panel', {
  title: 'Panel title',
  display: 'inline',
  content: 'Inline content'
});

var $Panel = cms.get('ui', 'panel',{
  tab_position: 'menu' // title, header
});
$Panel.addTab({
  icon:      'app-config',
  name:      'mytab',
  title:     'Title',     // Text to show under icon
  tooltip:   'Tooltip text',
  data: {
    showButtons: 'true'   // Show buttons when this tab is open
  },
  onclick:   function(){}
});

// Modify tab content
$Panel.elemTab('mytab').append('Content')

// Add feedback
var $Feedback = $Panel.newFeedback({
  icon:  'app-warning',
  title: 'Something went wrong'
});

// Remove feedback using jQuery
$Feedback.remove();