Custom Table with Action Bar and Filters using the SmartUI SDK

I’m creating a Marionette view with a tabular look and feel with custom columns while trying out a few things with the SmartUI SDK and would like to know if it is possible to perform the below on a 16.2.6 SDK version.

Would it be possible for us to integrate the inline toolbar actions for an item perhaps using the tableactionbar.view or any using some other component of the SDK?
Is there a model from which I can get information of a particular category’s attribute value of a node? Perhaps the appliedcategories model?
Is there a filter behavior that I could apply on the Marionette View and enable filters on columns of my desire?

Disclaimer: This electronic message and all contents contain information from Mannai Corporation which may be privileged, confidential or otherwise protected from discloser. The information is intended to be for the addressee only. If you are not addressee, any disclosure, copy, distribution or use of the contents of this message is prohibited. If you have received this electronic message in error please notify the sender immediately and destroy the original and all copies.

Find more posts tagged with

Comments

Pramod Mohandas

*Bump*

Kishore_Kumar

This is what I have done for a similar requirement.

Create a LiveReport that returns the documents (with DTREE columns) with the required columns from LLAttrData and anyother source.
Use the above LiveReport as a datasource for a WebReport that has [LL_WEBREPORT_INSERTJSON @NODESTABLEFIELDS .... /]
Create a custom Marionette View that extends 'csui/widgets/nodestable/nodestable.view' (This will handle column filters, sorting and pagination)
Create a cutom Collection Factory for fetching data from the above WebReport.

I have done this on 16.2.0, I am sure things might have been better in 16.2.6.

Ferdinand Prantl

Q: Would it be possible for us to integrate the inline toolbar actions for an item perhaps using the tableactionbar.view or any using some other component of the SDK?

A: Yes, tableactionbar.view can be used as a shared control.

Q: Is there a model from which I can get information of a particular category’s attribute value of a node? Perhaps the appliedcategories model?

A: Yea, appliedcategories or appliedcategory are the right model to get all or one category applied to a node. However, it will cost you a server call. This intormation is usually needed only on the Properties page.

Q: Is there a filter behavior that I could apply on the Marionette View and enable filters on columns of my desire?

A: No, there is no behavior to enable sorting or filtering on any column. You have to implement support for these features in the REST API at first and then declare that you did in the particular column schema by { sort: true, filter: true }. The table will show sorting and filtering controls automatically then. For example, folder children implement filtering only by name and sorting by type, name, size and modified date. For example roles and participants in Connected Workspaces implemente sorting and filtering for each column. If your collection is not large and your REST API returns all items, you can enable client-side.mixin on it. It will support paging, sorting and filtering for any model attribute on the client side.

Ferdinand Prantl

If you have a web report returning a collection of nodes, you can show it in the Nodes List WebReport widget (webreports/widgets/nodeslistreport/impl/nodestablereport.view) without coding.

If you need a custom initialisation, inheriting from nodestable.view or nodestablereport.view will bring you the quickest result. However, yuou shouldn't try overriding their private methods, otherwise you might need to fix your code according to changes made in CS updates. A fully custom widget not endangered by breaking changes shoudl be a composite made of public controls. nodestablereport.view is an example of such widget, which can be copied as a starting point.

Pramod Mohandas

Dear Ferdinand,

Thank you for the confirmation.

For points 1&2, do you perhaps have sample snippet codes that I could pick up from so that I can test and try it out at my end?

Also, if I use the nodestablereport.view, will I be able to then bring in custom columns with filters without touching the REST API layer?

Quoted Ferdinand Prantl on 04/11/2019 08:35 AM:

Q: Would it be possible for us to integrate the inline toolbar actions for an item perhaps using the tableactionbar.view or any using some other component of the SDK?

A: Yes, tableactionbar.view can be used as a shared control.

Q: Is there a model from which I can get information of a particular category’s attribute value of a node? Perhaps the appliedcategories model?

Q: Is there a filter behavior that I could apply on the Marionette View and enable filters on columns of my desire?

Ferdinand Prantl

I'm afraid, that there are no SDK examples for points 1 and 2. You can look for "tableactionbar" in lib/src/csui/widgets/nodestable.view.js or lib/src/csui/widgets/search.results/search.results.view.js to learn, how to integrate it.

WebReports display columns, which were configured in the WR node. You need not touch the REST API, but you need to modify the WR to return the expected columns. There are an expandable list tile and table controls available in WR: lib/src/webreports/widgets/nodeslistreport/nodeslistreport.view.js (list)
lib/src/webreports/controls/nodestablereport/nodestablereport.view.js.

How to fetch a category by its name:

getCategoryAttributes(node, 'Test')  .then(  function (categoryAttributes) {    console.log(categoryAttributes.get('data'));  },  function (error) {    error = new base.Error(error);    alert(error.message);  });function getCategoryAttributes (node, categoryName) {  var categories, category, categoryAttributes;  return getCategories()    .then(findCategory)    .then(getCategoryAttributes);  function getCategories () {    categories = new AppliedCategoryCollection(undefined, { node: node });    return categories.fetch();  }  function findCategory () {   category = categories.findWhere({ title: categoryName });   if (category) {     return category;   }   var error = new Error('Category not found.');   return $.Deferred().reject(error);  }  function getCategoryAttributes () {    categoryAttributes = AppliedCategoryFormModel(undefined, {      node: node,      categoryId: category.get('id'),      action: 'update'    });    return categoryAttributes.fetch();  }}