Adding custom message to the NodesList table

Mathijs Depuydt

Hi,

We would like to add a small custom message with some instructions in the NodesList table header. I made a mockup to illustrate:

Ideally this would also be displayed in the integration Widget in an external application.

Would this be possible to achieve via the Smart UI SDK? And what steps would be required to add a new table row to the header of the NodesList widget?

Thanks!
Mathijs

Ferdinand Prantl

Let us see, how to put the nodestable widget on a custom page.

The nodestable widget does not offer an interface to insert such panel there. If you want to try it, you could inject the panel there dynamically. You would have to test, how the rest of the functionality works. Also, you may need to update the injection selector, if we break it with some update. But I think, that it would be unlikely in this case.

csui.onReady2([  'csui/lib/jquery', 'csui/lib/marionette',  'csui/utils/contexts/browsing/browsing.context',  'csui/utils/contexts/factories/node',  'csui/widgets/nodestable/nodestable.view'], function ($, Marionette, BrowsingContext, NodeModelFactory,    NodesTableView) {  'use strict';  var context = new BrowsingContext(),      node = context.getModel(NodeModelFactory),      tableView = new NodesTableView({        context: context,        data: {          containerId: 2000        }      }),      tableRegion = new Marionette.Region({el: '#content'}),      $message;  // Whenever the nodestable widget is re-rendered, inject the message panel  tableView.on('render', function () {    var $innerTable = tableView.$('.csui-facet-table-container');    $message = $('<div>').addClass('samples-message')                         .text('Loading...')                         .insertBefore($innerTable);  });  // Whenever the entered container changes, update the message  node.on('change', function () {    $message.text('Description: ' + node.get('description'));  });  // Show the nodestable widget and fetch the data  tableRegion.show(tableView);  context.fetch();});<style>  body {    margin: 0;  }  #content {    height: 100vh;  }  .csui-nodestable .samples-message {    padding-left: 63px;    height: 3em;    line-height: 3em;    background-color: #ffbb33;  }</style><div id="content" class="binf-widgets"></div>

You might make your life easier, if you decided to put the message panel above the nodestable widget ;-) For example:

csui.onReady2([  'csui/lib/jquery', 'csui/lib/marionette',  'csui/utils/contexts/browsing/browsing.context',  'csui/utils/contexts/factories/node',  'csui/widgets/nodestable/nodestable.view'], function ($, Marionette, BrowsingContext, NodeModelFactory,    NodesTableView) {  'use strict';  var context = new BrowsingContext(),      node = context.getModel(NodeModelFactory),      tableView = new NodesTableView({        context: context,        data: {          containerId: 2000        }      }),      tableRegion = new Marionette.Region({el: '#content'}),      $message = $('.samples-message');  // Whenever the entered container changes, update the message  node.on('change', function () {    $message.text('Description: ' + node.get('description'));  });  // Show the nodestable widget and fetch the data  tableRegion.show(tableView);  context.fetch();});<style>  body {    margin: 0;  }  #content {    height: calc(100vh - 3em);  }  .samples-message {    padding-left: 63px;    height: 3em;    line-height: 3em;    background-color: #ffbb33;  }</style><div class="samples-message"></div><div id="content" class="binf-widgets"></div>