Skip to main content

Custom Table Cell View sample

Custom Table cell view provides option to render column specific custom cell layout. With this cell view can be visually improved. As out of the box, document modified user column shows information only in text. In this sample modified user information is shown with initials.

This sample shows

  • How to define a Custom table cell view implementation.

Instruction to try out the sample​

  • Build the plugin using npm run build from SDK workspace root.
  • Copy D2-CustomTableCell-1.0.0.jar from 'dist' folder in workspace root and paste it inside WEB-INF/lib folder of a deployed D2 Smartview application.
  • Restart application server on which D2 Smartview is deployed.
  • Login into D2-Smartview and navigate to any Doclist widget view.
  • Using the 'Table settings' add column Modified By to display, if not already added.
  • Check, the Modified By column shows with a colored letter-avatar-icon along with the textual username(only username is shown without this plugin).

Source code structure​

D2-CustomTableCell
|
|   pom.xml
|   
+---src
|   \---main
|       +---java
|       |   \---com
|       |       +---emc
|       |       |       D2PluginVersion.java
|       |       |       
|       |       \---opentext
|       |           \---d2
|       |               +---rest
|       |               |   \---context
|       |               |       \---jc
|       |               |               PluginRestConfig_CustomTableCell.java
|       |               |               
|       |               \---smartview
|       |                   \---customtablecell
|       |                       |   CustomTableCellPlugin.java
|       |                       |   
|       |                       +---api
|       |                       |       CustomTableCellVersion.java
|       |                       |       
|       |                       \---rest
|       |                               package-info.java
|       |                               
|       +---resources
|       |   |   customtablecell-version.properties
|       |   |   D2Plugin.properties
|       |   |   
|       |   \---smartview
|       |           SmartView.properties
|       |           
|       \---smartview
|           |   .csslintrc
|           |   .eslintrc-html.yml
|           |   .eslintrc.yml
|           |   .npmrc
|           |   config-editor.js
|           |   customtablecell.setup.js
|           |   Gruntfile.js
|           |   package.json
|           |   server.conf.js
|           |   
|           +---src
|           |   |   component.js
|           |   |   config-build.js
|           |   |   customtablecell-extensions.json
|           |   |   customtablecell-init.js
|           |   |   Gruntfile.js
|           |   |   
|           |   +---bundles
|           |   |       customtablecell-bundle.js
|           |   |       
|           |   +---table
|           |   |   \---cell
|           |   |       \---modified.by
|           |   |           |   modified.by.view.js
|           |   |           |   
|           |   |           \---impl
|           |   |                   modified.by.css
|           |   |                   modified.by.hbs
|           |   |                   
|           |   +---test
|           |   |       extensions.spec.js
|           |   |       
|           |   \---utils
|           |       |   startup.js
|           |       |   
|           |       \---theme
|           |           |   action.icons.js
|           |           |   
|           |           \---action_icons
|           |                   action_sample_icon.svg
|           |                   
|           \---test
|                   Gruntfile.js
|                   karma.conf.js
|                   
\---target

Files and their purpose​

Following are the list of function oriented source files and their purpose. Other source files present within the plugin are part of common infrastructure code and explained in Understanding D2SV plugin project.

Custom table cell view​
  • src/main/smartview/src/table/cell/modified.by/modified.by.view.js - Define the custom cell view implementation.
  • src/main/smartview/src/table/cell/modified.by/impl/modified.by.hbs - Handlebar template for custom cell view.
  • src/main/smartview/src/table/cell/modified.by/impl/modified.by.css - CSS for styling custom cell view.
  • src/main/smartview/src/utils/startup.js - Loaded "modified.by.view.js" in "startup.js".