var $List = cms.get('ui', 'list').appendto(elem);

$List.addItem({
  title:       'Title text',
  link:        'table/order/',  // If link
  onclick:     'myFunction()',  // If function to run
  onclick:     function(){},    // If callback
});

// Header can have all parameters as normal list item.
$List.addHeader({
  title: 'Header text'
});

$List.addItem({
  title:       'Title text',
  description: 'Additionl description text',
  content:     'Text to be shown when menu -icon is clicked',
  tooltip:     'Hovertext',
  color:       'green',
  icon:        'app-addnew',
  label:       'Label text',
  info:        'Infotext',
  amount:      123,
  number:      2
});

$List.addItem({
  title: 'Title text'
  button: [{
      icon: 'app-addnew',
      onclick: function(){}
  }]
  menu: [{
      icon: 'app-remove',
      onclick: function(){}
  }]
});

var $List = cms.get('ui', 'list').appendto(elem);

/*** Subitems in list ***/

$List.addItem({
  title: 'Main item',
  items: [{
    title: 'Subitem 1'
  },{
    title: 'Subitem 2'
  }]
});

/*** Subitems as Ui List ***/

var $Sublist = cms.get('ui', 'list');

$Sublist.addItem({
  title: 'Subitem 1',
});

$List.addItem({
  title: 'Main item',
  items: $Sublist
});

// Subitems parameters: Open on init
$List.addItem({
  title: 'Main item',
  items: {
    open: true,
    data: $Sublist
  }
});

/*** Subitems as callback ***/

$List.addItem({
  title: 'Main item',
  items: function($Sublist,callback){

    $Sublist.addItem({
      title: 'Subitem 1',
    });

    callback(); // Tell the main list that this is ready
  }
});

var $List = cms.get('ui', 'list', {
  title:    'Title text',    // Set as header -item title.
});

$List.addItem({
  title: 'Content as text',
  content: 'Show me all the time.'
});

$List.addItem({
  title: 'Content as function',
  content: function(elem){
    $(elem).append('Show me when toggled.');
  }
});

$List.addItem({
  title: 'Content as object',
  content: {
    toggle: true,
    text: 'Show me when menu -icon is clicked'
    onopen: function(elem){
      $(elem).append('Show me when toggled.');
    }
  }
});

var $List = cms.get('ui', 'list', {
  title:    'Title text',    // Set as header -item title.
  selected: selectedId,      // Marks item with same id selected.
  colorStyle: 'column',      // How to show link coloe: column, circle, background
  height:    400,            // Fixed height (overflow: scroll).
  maxHeight: 400,            // Max available height (overflow: scroll).
  maxWidth:  200,            // Max available width (overflow: scroll).
  style:    'row',           // title, grid - May not implementhave all item parameters.
  ordered:   true,           // Automatic order number
  ordered:   100,            // Automatic order number, start value
  items:     [{}],           // Items data.
});

$List.addItem({

  ### Technical

  id:          1000,         // set as attribute: data-id
  value:       'myval'       // set as attribute: data-value

  ### Visual

  indent:      2,            // Add margin
  order:       3,            // Custom order number on left

  iconUrl:     'url.to/img.png', // Img icon
  icon:        'app-addnew',     // Fonticon name or Imageicon.png filename

  title:       'Main text',

  description: 'Additional text',
  description: [
    'First line',
    'Second line'
  ],

  progress:    75, // Percent
  progress:    {
    value:   75, // Percent, if no total
    total:   200,
    color:   'green'
  },

  content: 'Text to be shown'
  content: function(elem){
      $(elem).html('SET ME WHEN CONTENT TOGGLE')
  },
  content:  {
    text: 'Initial context',
    open: false,  // initial state,
    tooltip: 'Show me on hover',
    toggle: false, // Show toggle button. If false, open is always true.
    onopen: function(elem){
      $(elem).html('SET ME AS CONTENT')
    }
  },

  info:        'Additional', // Gray text on right
  tooltip:     'Hovertext',  // Tooltip text
  label:       'Important',  // Label on right
  amount:      120,          // Amount on right

  ### Action

  selected:    false,        // Set item as selected.

  // Add checkbox.
  check: {
    onclick: 'alert("Check change")'
    // checked: false,
    // ... any value that in uiButton
  }

  link: 'table/asiakas/page/1000'
  link: {
    href: ''
    //
  },

  onclick: 'runFunction()',
  onclick: function(){
    // Callback function
  }

  // Buttons: In beginning of the row.  Same parameters as button.
  button: [{
    icon: 'app-edit',
    color: 'red',
    onclick: function(){
      alert('Button clicked');
    }
  }],

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