NodesList with Expand button with custom expand

Hi,

We would like to make a widget similar to the NodesList widget, but with the expand button that has a different behavior. When clicking on the expand button, an expanded widget should open where a webReport or other HTML code can be loaded in via AJAX.

I've started making an HTML webreport and already have the small widget with a nodeslist and Expand button, but i'm already having some troubles here. Currently there are no subtags to have the correct icon for the Mimetype of the document. I just used the HTML/CSS of the normal nodeslist and generate all the required HTML in the webreport, and would have to manually code the logic to load in the mimeType icon. Because we are dynamically loading documents from different sources, a single LiveReport is not sufficient and the NodesList cannot be used.

Is there a convenient way to load or fetch the icon for each document based on the mimetype? Or is there some example code to generate a nodesList by giving as input a list of NodeID's and then use the standard functions to generate the nodesList? Currently there is only the standard "NodesList" widget that takes a LiveReport as input, or generate a NodesList out of a table. And what would be the best option to get the "expand" button there with an AJAX load of HTML in the expanded widget?

Thanks!
- Mathijs

Find more posts tagged with

Comments

Ian_Whitfield

Hi,

In general you can execute a NodesListReport widget programmatically via the SDK using code similar to this:

csui.require(['csui/lib/marionette', 'csui/utils/contexts/page/page.context', 'webreports/widgets/nodeslistreport/nodeslistreport.view'],
function (Marionette, PageContext, NodesListReportView) {

var contentRegion = new Marionette.Region({el: '#content'}),
pageContext = new PageContext(),
myNodesListReportView,
options;

options = {
context: pageContext,
data: {
id: 96622,
title: 'Most Commonly Accessed Locations',
titleBarIcon: 'title-assignments',
searchPlaceholder: 'Search Common Locations'
}
};

myNodesListReportView = new NodesListReportView(options);
contentRegion.show(myNodesListReportView);
pageContext.fetch();

});

</script>
<div id="content"></div>

This is documented in the Smart UI SDK docs. This code should work in theory from an HTML WebReports widget too.

However this won't really give you what you need because this won't allow you to customize the expand button. It will just load the NodesList as is. I think it might be good if you could log a feature request with support here because it wouldn't be much work to add a feature to the NodesListReport widget so it could accept an option where the developer could specify a custom expanded view.

One approach might be to extend and override the NodesListReportView as follows:

csui.require(['csui/lib/jquery', 'csui/lib/marionette', 'csui/lib/underscore' ,'csui/utils/contexts/page/page.context', 'csui/behaviors/expanding/expanding.behavior', 'csui/behaviors/default.action/default.action.behavior','webreports/widgets/nodeslistreport/nodeslistreport.view'],
function ($, Marionette, _, PageContext, ExpandingBehavior, DefaultActionBehavior, NodesListReportView) {

var contentRegion = new Marionette.Region({el: '#content'}),
pageContext = new PageContext(),
myNodesListReportView,
CustomNodesListReportView,
MyView,
options;

options = {
context: pageContext,
data: {
id: 96622,
title: 'Report Title',
titleBarIcon: 'title-assignments',
searchPlaceholder: 'Search My Report'
}
};

MyView = Marionette.ItemView.extend({

tagName: 'h1',
template: _.template('Contents')

});

CustomNodesListReportView = NodesListReportView.extend({

behaviors: {

ExpandableList: {
behaviorClass: ExpandingBehavior,
expandedView: MyView,
expandedViewOptions: function () {
return this.options;
},
titleBarIcon: function () {
return this.options.data.titleBarIcon;
},
dialogTitle: function () {
return this.options.data.title || lang.dialogTitle;
},
dialogTitleIconRight: "icon-tileCollapse",
dialogClassName: 'webreports-nodeslistreport-myview'
},

DefaultAction: {
behaviorClass: DefaultActionBehavior
}

}

});

myNodesListReportView = new CustomNodesListReportView(options);
contentRegion.show(myNodesListReportView);
pageContext.fetch();

});

</script>
<div id="content"></div>

With regards to the icons, you can't get these from the server. It's not possible to use a tag for this because the icon information is stored on the client. The SDK component that does this is 'csui/utils/nodesprites' and can be invoked using:

NodeSpriteCollection.findClassByNode(node)

I think this is in the SDK documentationt too. The output of the NodesListReport WebReport should be a collection of NodeModel objects which are in the correct format to pass into this function if you needed to do this manually for any reason.

Regards
Ian

Ferdinand Prantl

About icons representing the node type (and the MIME type for documents)

The icons are rendered in <span> tags by adding a CSS class to them, which carries the icon in the background-image property. If you want to build HTML on this low level, you can get the CSS class and the text for the node type like this:

  csui.require([    'csui/models/node/node.model', 'csui/utils/nodesprites'  ], function (NodeModel, nodeSpriteCollection) {    'use strict';    var node = new NodeModel(...),        nodeSprite = nodeSpriteCollection.findByNode(node),        className = nodeSprite.get('className'),        typeName = nodeSprite.get('mimeType') || node.get('type_name');  });

Showing the icon is usually done by using NodeTypeIconView, which wraps the functionality in a Marionette View:

  csui.require([    'csui/lib/marionette', 'csui/models/node/node.model',     'csui/controls/node-type.icon/node-type.icon.view'  ], function (Marionette, NodeModel, nodeSpriteCollection) {    'use strict';    var node = new NodeModel(...),        region = new Marionette.Region(...),        iconView = new NodeTypeIconView({node: node});    region.show(iconView);  });

About writing a widget showing a list of nodes

I am afraid, that there is no complete example for this in CS UI SDK. You could have a look at sources of FavoritesView at "lib/src/csui/widgets/favorites/favorites.view.js". You would need a similar widget, which would use your custom collection with nodes.

Mathijs Depuydt

Quoted Ferdinand Prantl on 06/27/2017 09:20 AM:

About writing a widget showing a list of nodes

After looking through the SDK I came to the same conclusion. Currently we've used the WebReports HTML widget to output a list of nodes from various sources that fits seamlessly in the smart UI to load a limited set of documents so the widget loads quite fast. I've added a custom expand functionality to load a longer/more dynamic list in an expanded view, performance wise it seems to work quite well.

Thanks!