Questions on Custom Column sample

Questions by Pramod (OTCS ticket 2935437 ):

As I begin to start my development efforts using the Smart UI SDK, I have a few technical queries that I would like you to address for me. I have gone through the documentation and to be honest, it’s quite an amount of information to absorb. So far I have been able to setup my development environment with NPM and Grunt. All is good there and I was able to run the test samples on the local NPM server too using the csui-sdk-16.0.3. Following the presentation document further, I was able to setup an environment for widget development too using the generator-csui-extension-16.0.3. My queries are as follows,
I’m trying out the Custom Column sample - csui-sdk-16.0.3\samples\cells\reserved. However, I do not see any test.html generated for this sample within the csui-sdk-16.0.3.
1. Are the test.html files or the test folders in general generated by hand or via grunt methods? Must I refer other test.html files in order to be able to generate one for this sample?
2. To deploy this sample on my actual environment, do I simply place the reserved folder under the support\csui\cells folder? Or must I create a module to install this?
3. To debug this example to test out other case scenarios before deployment, I must be performing this on the NPM server first via the IE/Chrome developer tools. Is that correct?

Find more posts tagged with

Comments

Leonhard

Quoted Harald Lange on 01/19/2017 10:37 AM:

Questions by Pramod (OTCS ticket 2935437 ):

As I begin to start my development efforts using the Smart UI SDK, I have a few technical queries that I would like you to address for me. I have gone through the documentation and to be honest, it’s quite an amount of information to absorb. So far I have been able to setup my development environment with NPM and Grunt. All is good there and I was able to run the test samples on the local NPM server too using the csui-sdk-16.0.3. Following the presentation document further, I was able to setup an environment for widget development too using the generator-csui-extension-16.0.3. My queries are as follows,
I’m trying out the Custom Column sample - csui-sdk-16.0.3\samples\cells\reserved. However, I do not see any test.html generated for this sample within the csui-sdk-16.0.3.
1. Are the test.html files or the test folders in general generated by hand or via grunt methods? Must I refer other test.html files in order to be able to generate one for this sample?
Currently, we do not have test.html files for all samples. So in some cases you just have to read the code and take from it what you need. We try to improve this for the upcoming versions, of course. All the test.html files are generated by hand from our developers. There is no automated way to do this.
Regarding the specifc cells/reserved sample: It has no added value as compared to the controls/cells/hello sample, which has a test.html. Actually the reserved column has meanwhile gone to the standard columns of table-browse, so the example makese not much sensen any more. Therefore we will remove it in the next version.

2. To deploy this sample on my actual environment, do I simply place the reserved folder under the support\csui\cells folder? Or must I create a module to install this?
There is a post in this forum (how to import out-module directory to Oclipse) which explains in detail what is to be done to deploy your extensions on CS. Generally speaking, in order to deploy you have to have a module, by which you deploy. In the post is described the case where you create a new module, which we recommend.
In case you want to deploy via an existing module, you have to orphan CSUI::Extension and specify the Require.js module prefix. You can have a look into the out-module directory of your generated project for an example.
You have to place the bundle which is created through building of your extension project in the support folder. Direct placement of source files there will not work.
Please have a look at the out-module structure of your extension project, after build.

3. To debug this example to test out other case scenarios before deployment, I must be performing this on the NPM server first via the IE/Chrome developer tools. Is that correct?
Yes, this is correct. In general, to debug the examples, you have to access the samples-index.html through a web-server in a browser which allows you to debug (FF, Chrome, IE, what you want). Most IDEs provide a simple web server when you start html pages from within the IDE. If you are working outside an IDE, you can use the simple web-server provided through npm start.

Pramod Mohandas

Thank you for your inputs. Appreciate it.

Alexander Kühn

Quoted Leonhard Schuster on 01/31/2017 01:47 PM:

Quoted Harald Lange on 01/19/2017 10:37 AM:

Questions by Pramod (OTCS ticket 2935437 ):

As I begin to start my development efforts using the Smart UI SDK, I have a few technical queries that I would like you to address for me. I have gone through the documentation and to be honest, it’s quite an amount of information to absorb. So far I have been able to setup my development environment with NPM and Grunt. All is good there and I was able to run the test samples on the local NPM server too using the csui-sdk-16.0.3. Following the presentation document further, I was able to setup an environment for widget development too using the generator-csui-extension-16.0.3. My queries are as follows,
I’m trying out the Custom Column sample - csui-sdk-16.0.3\samples\cells\reserved. However, I do not see any test.html generated for this sample within the csui-sdk-16.0.3.
1. Are the test.html files or the test folders in general generated by hand or via grunt methods? Must I refer other test.html files in order to be able to generate one for this sample?
Currently, we do not have test.html files for all samples. So in some cases you just have to read the code and take from it what you need. We try to improve this for the upcoming versions, of course. All the test.html files are generated by hand from our developers. There is no automated way to do this.
Regarding the specifc cells/reserved sample: It has no added value as compared to the controls/cells/hello sample, which has a test.html. Actually the reserved column has meanwhile gone to the standard columns of table-browse, so the example makese not much sensen any more. Therefore we will remove it in the next version.
Could you please advise how to add another custom column. Our client wants to show the "Description" attribute as a custom column. Changing the example from "reserved" to "description" does not show the custom column:
How can we identify the right identifier?: e.g. this.model.get('description');

define(['csui/controls/table/cells/cell/cell.view',
'csui/controls/table/cells/cell.registry',
'csui/controls/table/table.columns',
'i18n!dtcsuiext/cells/description/impl/nls/localized.strings'
], function (CellView, cellViewRegistry, tableColumns, localizedStrings) {

// Declares a column which shows the description text depending
var descriptionCellView = CellView.extend({

    getValueText: function () {
      var text;
      if (this.model.get('type') === 144) {
        var description = this.model.get('description');
        text = description
       //? localizedStrings.yes : localizedStrings.no;
      } else {
        text = localizedStrings.notApplicable;
      }
      return text;
    }

});

// Register this cell view for the `description` column key, which can be
// added by the `featuredColumns` to the node table on the client side
cellViewRegistry.registerByColumnKey('description', descriptionCellView);

// Make the column always appear behind the system columns, which have
// sequence number < 100; custom columns have sequence number > 1000
tableColumns.add({
key: 'description',
sequence: 110
});

});

Also, if we have a custom column "Project Number" how can show (identify this column in the SmartUI.

By specifying this.model.get('?');?

2. To deploy this sample on my actual environment, do I simply place the reserved folder under the support\csui\cells folder? Or must I create a module to install this?
There is a post in this forum (how to import out-module directory to Oclipse) which explains in detail what is to be done to deploy your extensions on CS. Generally speaking, in order to deploy you have to have a module, by which you deploy. In the post is described the case where you create a new module, which we recommend.
In case you want to deploy via an existing module, you have to orphan CSUI::Extension and specify the Require.js module prefix. You can have a look into the out-module directory of your generated project for an example.
You have to place the bundle which is created through building of your extension project in the support folder. Direct placement of source files there will not work.
Please have a look at the out-module structure of your extension project, after build.
Is it sufficient, that when implementing new Smart UI customizations to an already installed OTCS module, that building the extension project (grunt) and copying the /out-release/ conntent to the /module/<csuiext>/support/ folder is sufficient , without the need to uninstall/re-install the module?
3. To debug this example to test out other case scenarios before deployment, I must be performing this on the NPM server first via the IE/Chrome developer tools. Is that correct?
Yes, this is correct. In general, to debug the examples, you have to access the samples-index.html through a web-server in a browser which allows you to debug (FF, Chrome, IE, what you want). Most IDEs provide a simple web server when you start html pages from within the IDE. If you are working outside an IDE, you can use the simple web-server provided through npm start.

Ferdinand Prantl

The easiest way how to show custom columns is Smart UI is to show them in Classic UI :-) Smart UI shows the same custom columns. If you enable the custom column "Project Number" in some container, Smart UI will show it.

If you want to show a custom columns, which cannot be displayed in Classic UI - which do not a have a data source, which you could create a custom column with in CS administration - you need, that the server sends data and metadata (definition) of the property, which will back up the column. You can inspect the response of a ".../v1/nodes/{node_id}/nodes" REST call to learn how properties and their definitions look like.

For example, the "description" property is returned including its definition and you can make Smart UI show a column with it.

src/table.cells/description/description.view.js:

  define(['csui/controls/table/cells/cell/cell.view',    'csui/controls/table/cells/cell.registry',    'csui/controls/table/table.columns'  ], function (CellView, cellViewRegistry, tableColumns) {    // Declares a column which renders the value of the "description" property    var DescriptionCellView = CellView.extend({      getValueText: function () {        return this.model.get('description') || '';      }    });    // Register this cell view for the `reserved` column key, which can be    // added by the `featuredColumns` to the node table on the client side    cellViewRegistry.registerByColumnKey('description', DescriptionCellView);    // Make the column always appear behind the system columns, which have    // sequence number < 100; custom columns have sequence number > 1000    tableColumns.add({      key: 'description',      sequence: 110    });  });

src/myprefix-extensions.json:

  {    "csui/controls/table/cells/cell.factory": {      "extensions": {        "myprefix": [          "myprefix/table.cells/description/description.view"        ]      }    }  }

Yes, if you have already installed a CS module with the CSUI:::Extension orphan, you can just copy the output of the "out-release" directory to the ".../support/<module>" directory in your CS installation. However, if you make changes in the "<prefix>-extensions.json" file, you will need to restart the llserver service.

Alexander Kühn

Hi Ferdinand,

thank you! The description column as well as the custom column (after creation in the FacetVolume) show up in the SmartUI.

Regards

Alexander