Rethinking smartUI

Rethinking smartUI

Yesterday I published a new video on Rethinking smartUI on Youtube. If you havnt seen yet, here is the short video. In this posts, we’ll go though the technical aspects of this new kind of approach to smartUI. This demo is a Document Pad (or short DocPad), displaying all document properties in a SCIFI GUI arrangement.

This is Part 1 of a multipart post covering all aspects of this Docpad.

Part 1: Overview

This demo is supposed to do this:

  • Demonstrate the usage of html5, javascript 6 and css3. Especially how to use this modern components inside the smartUI framework. For example, the famous parse function in the standard demo widget will change this way:

parse: function (response) {
// All attributes are placed below the data key

parse: (response) =>

  • Compare the methods of getting data via REST using the methods
    • Model (as usual in Backbone)
    • XMLHttpRequest (the good old XMLHttpRequest as used since long)
    • Fetch (the modern javascript 6 method to get REST data)
    • Not used: async/await. Despite the fact that async/await is very handy, this appeared in javascript 8 and is beyond the scope of the demo.
  • Exploit the power of css by using
    • different display methods as Grid and Table
    • use panels in a cube. Origionally this was planned as moveable 3D cube. In this case, all metadata were written on the sides of the cube. Here is a very good technical description how to do it. Unfortunately the cube idea seems to be very impractical for the demo and was dropped
    • “burning borders”, fog and animations as element of the UI
    • provide an additional print style sheet to make this screen infos printeable in a normal way
  • Except some Icons of Bootstrap, nothing is to be used from Bootstrap. These Icons can be replaced by those in the fontawesome font
  • JQuery is not used
  • These Content Server REST commands are used
    • The log in is done in the index.html page, but when used as a dashboard widget the user is already logged in. If a separate login panel is required (p.ex. for a stand aloane dashboard on a tablet) then its necessary to provide a login via post […]/v1/auth
    • then the user info is retrieved via get […]/v1/auth
    • if the user has stored a photo in his profile, then the photo is retrieved by get […][photo-url] and then inserted in the DOM.
    • Then the standard Node-Picker Control is called. All Node-Picker interactions with the server are managed by this control. As a result, the nodeid of the selected Document is returned.
    • Next, the DAPINode infos of the selected node are retrieved by get […]/v1/nodes/{id}
    • for the “created_by” and “modified_by” there is only a nujmber returned, the userid. For this two cases, the username is retrieved from the server by get […]/v1/members
    • Its always nice to exploit the thumbnail of the document to the user. This is done by get […]/nodes/{id}/thumbnails/medium/content
    • To get all other data , a special trick is used. The command get […]/v1/forms/nodes/update returns all categories and the othere nodeinfos using one REST call. This commmand takes a while to execute, so the user is entertained using some css animations.

In the next week, we explore the infrastructure of this Docpad demo.

Rendition Administration

The new Rendition Administration option allows the Delete or Overwrite of the latest version. This is a configuration to be made under the Admin pages (Renditions/Configure Versions Folder/Edit Versions Folder)

If “Save as new Version” is marked on, the rendition will be saved as new version instead of beeing saved as Rendition.

If “Delete latest Version” is marked on then the document which triggered the rendition will be deleted.

This improves the workflow if processing and the retention of the original document is no longer required,

User Session Management – Expiration

User Session Management

The world is bad and bad boys are amongst us. They will not even change app.html, they even can steal real documents or do other things with their sessions. As a precaution, there is a new User Session Management – Expiration


This new management allows to exploit the Cookie Authentication Infos. User sessions can be terminated in much more advanced way then the usual Security Tokens. The rules are:

  • By default, the session is set to expire 30 minutes after the last action is performed.
  • The Session Timeout minutes ranges from 1 to 10080 (7 Days)
  • Session Timeout Alert minutes ranges from 0 to 120
  • Also: Session Timeout Alert cannot be higher than the Session Timeout
User session management - expiration: New user session options

But: A session limit is not enabled by default

Sessions per User


Example of a user session configuration

If the user is not active, then the session will expire after 30 minutes from the last request made to the server.

3 minutes before the session expiration (on the 27th minute) an alert will be displayed to the user that their session is about to expire

Note: A session is not equal a session, the system admin must cosider these rules:

• If the Content Server is active on multiple tabs of the same browser is considered as one session

• A Content Server active on multiple browsers is a separate session on its own

• If the Content Server is active on CS Mobile or Enterprise Connect is is considered as a separate session

•And when the Content Server is active on other integrations like SAP, Salesforce, SuccessFactors etc. this is considered to be a separate session


User session terminations are proceceeded by some warnings. If the sesssion is still active but will be disconnected soon, the user gets his warning:

Session Timeout Warning

To keep the surprise as small as possible, the user can push the “Continue Session” button and extend his session. But if the session is expired the user gets this panel

Session timed out

The “Sign in” button redirects to OTDS and the user has to re-authenticate his session.

The other side: View Sessions

View User Sessions

This will be the tool for the admin to view sessions.

Detailed "View USer Sessions"

And, for different reasons, there is a button ‘Terminate Session’ ends the user session, and the user will be forced to re-authenticate again.

User Sessions will also be terminated by any “Logout” button and on removing the “Log-in enabled” privilege at the user profile edit page

User privilege "Lon-in enabled"

This will keep the bad boys out our your system.

smartUI – Printing

Print in smartUI

The support for smartUI – printing is new in smartUI 21.3.

Technically you’ll find a new command in the “Sent To” dropdown menu

The new print command

Then you get a list of the files to print and a list of all available printers

List of Printers

Happy printing.

Requirements: Content Server Browser Web extension and ebterpriseconnect_framework_21.3_x64.msi installed.

smartUI Goodies for Webreport Fans

One of the smartUI goodies for webreports

In the rich universe of Opentexts smartUI there are even some goodies for the webreport addicts. Besides the standard webreport widgets there are two controls witch are used happily and heavily by webreports designers, named Parameter.Prompt and Status.Screen. These are the true smartUI Goodies for Webreport fans.

smartUI support
Need smartUI support?

Especially two controls are of interest for the seasoned webreport developer.

For tests, I’ve used a senseless webreport

A senseless webreport just for demonstration

This is a dummy webreport with several parameters. At the top right corner you see the execution result. Just for demonstration purposes, this has been kept simple and stupid.

But what if…….. the webreport is supposed to be run under the new and amazing smartUI? In this case we have two controls to help.


This control senses, if the webreport does have one or several parameters and allows to alter the parameters before the webreport is started.

PArameter.Prompt, a special service for all the webreport addicts

Here, all parameters can be changed. A click on “Run WebReport” will start the webreport if activated.

The js code is easy

JS code for the parameter prompt control


can be used to start the webreport and to display some End-Messages. A standard situation is displayed here

A webreport has finished and the End-Messages are displayed

For example, if a html file is defined as output under the folder “webreports”, then this infos can be displayed at the status screen.

The js code is easy

A smartUI goodie for webreport fans in JS: status.screen

Both controls can be combined to a widget to start and execute webreports.

If you need some more sophisticated, its easy to override those controls with custom controls.

That were the smartUI Goodies for Webreport Fans.

Happy playing with webreports, but dont forget: Webreports will make a machine not faster!

The new DEMO widget

Demo Widget for Learning By Doing workshop

We made it. We finished a simple widget for smartUI to demonstrate a lot of features of smartUI inside our new workshop “Learning by Doing”.

This is a remote workshop and during 2 days you get the source code of the widget and learn, how this widget is developed from the standard hello widget.

The widget features

  • Usage of Glyphicons in binf
  • programmable multi line tooltips in binf
  • Navigationbars in binf with commands behind the targets
  • expanding and collapsing of structures using binf
  • a dateselector on an input type=date field
  • switching a label to an input field and vice versa
  • rendering the logged in user photo from a content server behind
  • use a nodepicker to select a document and render the thumbnail
  • add a user select control after the widget is rendered
  • delete the “copy” command in smartUI
  • display messageboxes and global messageboxes
  • use a standard slide in and use a wizard slide in with several views

See here a short video (20min) of the features

And dont forget to register for the next workshop “smartUI Learning by Doing”

Asking your browser for help in smartUI developments

Browser Memory

When you think of smartgUI, you may always think of a lot of small js/css text files and a couple of resources to be loaded. All together act as smartUI Page like this:

A typical standard landing page

This is a typical landing page. With such a page you can control, how your perspective is working and also if certain commands, controls and widgets are correct. For example, the widget ot the top left is a modified Welcome Widget showing System Messages and other news channels.

What else can a browser do for you in your continuing quest to produce an awesome user experience for an enduser?

A lot! First, open the development tools in the browser. Here we are using Chrome, but this tools are available on all browsers.

Developer tools – a closer look

Developer Tools

Press Ctrl+Shift+I or the Develeloper tools entry in the menu.

The tabs in the developer tools

This will open up the develeloper tools. The functionality is subdivided in several tabs. The most important (from left to right) are

  • Elements. Gives you the possibility to see the actual DOM loaded, Here you can change css and other elements and you’ll see immediately the effect. The rightmost icon lets you identify any element on the screen (and display it in the DOM). Thaty a handy way to identify elements on the screen and to which js file they belong (Similar way as we had in legacy gui with oscript in these ancient times)
Identify Icon
  • Console. Gives you all messages from the browser. You can see all module messages, also missing modules are displayed in red. There are several levels of messages, which can be filtered. Here, since this is a develeopent VM, all levels are activated.
  • Sources. The main tab to work with.
The sources window

The complete smartUI is loaded in the browsers memory (except those data parts, which will be changed via REST/Ajax later on). So we can examine directly, whats happening in the browser.

Interesting is the treeview at left:

Loaded js parts

We see blue and orange folders, which can be opened. Lets open a blue folder, for example the “New Generation Desktop” ngd and the resubmission

Bundles and Sources

First, we see, the ngd has the name ngd/bundles. It contains the js and css bundles of ngd. Lets open another folder, the resubmission folder. Here you see a blue app/bundles folder and an orange folder named src. Here you have the standard SDK tree. If there sre orange folders, then you can browse into the source code, like this:

Load a souce file which is not in the SDK

Here we checked the AddReminder.js from the reminder package, which is one of these modules not part of the smartUI SDK.

Whats to do with that file(s)? Select the file (with js extension) in the tree and right klick. Here you can edit the file or save the file to your filesystem.

Save a loaded js file

Search a needle in a haystack

We have a lot of js files in the browser memory. How to search for a specific file?

First, display the search window by clicking on the to right 3 point menu. Goto More Tools and click on Search. Then a search bar opens at the lower left. Enter your search name (mostly part of the requirejs path) and you’ll see the results. Select the .js file (bundles are not very useful to read). The file is displayed in the source window.

Our requirejs paths in the browser

Sometimes its quite nice to inspect the loaded requirejs modules in the browsers memory.

At first, we have to switch to the debugger mode. So open the console tab and type “debugger” in the last line to put the browser in Debug mode.

Then our interestring things appear at the right of the developers tools.

We see, the scope is filled with the loaded objects. Go to the global scope. Scroll down, until you’ll find ther csui entry. Please note, this may change to nuc from 21.2!

There are several entries under csui. Open the first “require” entry (or “requirejs”). Then open s. Expand contexts. Open _ (underscore). Expand registry.

Then all loaded csui and extension parts are listed in the registry. Lets examine one entry (countryselector.view).

Under depmaps, we see the dependencies.

Under map we see all map related things, this is the place to override an original module with a custom one.

And we have access to the source code (if we click on the link at countryselector.view:13.)

Now you have the base for your own experiments. There are a lot of additional features in the developers tools, which could not be covered here. So: Happy experimenting.

The new smartUI Nuc. A closer look.

The new NUC package in smartUI

Disclaimer: The discussed topic is on Content Server 21.2 smartUI SDK and may change anytime without notice after today (I dont hope so, but….)

The new package nuc in the smartUI SDK is the

(quote) nucleus of the nucleus (endquote)

and something like “the Best of the best, Sir” (Men in Black I)

What is nuc?

Lets take a look at the lib/src folder in an initialized 21.2 project. To see the images larger, right click and open the image in a new tab.

Nuc, The Nucleus of the Nucleus

The nuc consists of these folders:


This folder was located in the csui package in ancient time. Nowadays it has moved to nuc.

If you compare that to the csui/utils(21.1), you’ll discover a few differences

And also csui/utils(21.2)

If you use requirejs paths to elements, which are not in csui/utils(21.2), you should check these references and edit them to point to the proper element if needed.


This folder was located in the csui package in ancient time. Nowadays it has moved to nuc.

If you compare this with the csui/models(21.1), you’ll notice a few differences.

And also compared to the csui/models(21.2) there are differences:

A closer look reveals, that the csui/models(21.2) is not identical to csui/models(21.1) and therefore you are supposed to correct manually any requirejs paths in your js code, if you have to require those models moved from csui/models to nuc/models.


This folder was located in the csui package in ancient time. Nowadays it has moved to nuc. The folder contains

If you compare that with lib at csui (21.1) and also with that lib folder existing in the csui (21.2), you’ll discover, that csui/lib(21.1) is the same as csui/lib(21.2), whereas nuc contains a subset of the entries of 21.1. At least on 21.2 the csui/lib references seem to work perfect, so that those in nuc/lib could be ignored.


This folder was located in the csui package in ancient time. Nowadays it has moved to nuc. It contains that:

If you compare that with the grunt-tasks at 21.1, you’ll discover a surprisingly large amount of additional documentation files. The old 21.1 csui/grunt-tasks had only the, whereas there are a lot of additional md’s on 21.2 nuc/grunt-tasks available.


this is a new folder consisting of a couple of pre-defined bundles. These Defines([]) are quite handy to use. Nothing special here.

Amending the tabbed perspective

Tabs in the header: Playing hide&seek

In the tabbed perspective there is a nice game of hide and seek implemented. This gives you excellent entertainment, but you can amend this to simply display tabs as usually in any non-gaming environment. All examples here are displayed using the index.html from the /lib/src/csui/perspectives/tabbed.text/index.html. (Version 21.1)

The described way tabbed perspectives behave in smartUI is not a bug, its a feature.

The initial game

It goes like this:

The not so hidden hide&seek tab mode

If you have defined a header and several tabs, filled with standard data, you’ll see this initially. But when you click on any but the first header, the game is activated.

Hide&seek mode activated

A simple click on the tab name activates the hide &seek mode. The tabs try to hide and you are supposed to seek for them. This is really a nice and entertaining game.

The conservative Amendment

But what if you want to switch off this challenging mode?

Deactivating the hide&seek mode to allow the more conservative tab display

The build in hide&seek mode can be switched off by commenting this two lines in the tabbed.perspective.view.js.

A reload of the test page gives you by clicking to the second or thirth tab this:

The converwative Tab Display.

Although you switched of the hide&seek mode, you can now use the SDK to display the tabs in a more conservative way.

The smartUI SDK is very versatile and can be used for several purposes, even for conservative tab displays.

The only thing to decide for you is how to change that in the smartUI. Either spawn this into your own perspective or map your changed .js file over the standard requirejs path, this is up to you. You can even try to clear the cs-collapse.css and cs-toggling.css classes using the csui-stype-override-kit (I have not tested that for side-effects).

Happy tabbing.

New in Content Server 21.1: New Webreport Widgets and Extensions


There is already an amazing set of webreport related widgets in the smartui (like HTML Webreport, Nodes List WebReport, Visual Count and Widget Carousel) in smartUI along with a couple of controls, models and actions which make the usage of webreports in smartUI much easier (like parameter.prompt.form,, status.screen, open.webreport, WRTextModel etc). More detailled informations can be found in my Training “Advanced Workshop Webreports”.
At the dawn of the new version, we got a couple of new and extended widgets to be used with webreports.

Some amazing new full-page widgets hit the road

New in Content Server 21.1: New Webreport Widgets and Extensions. They display a full-page of data in a folder or Business Workspace in the Smart View. Three new full-page Content Intelligence widgets are now available to use with Perspectives:

  • Nodes Table Report – Full page
  • Table WebReport – Full page
  • Visual Count – Full page

Users may want to display visual countable data as a full-page chart or present a list of nodes, for example documents to be processed, in a full-page format in the Smart View.
The new full-page widgets will also work with Business Workspace tabbed perspectives, to add various reports sourced using WebReports. Full-page widgets can also be used with other Perspective layouts.

New Webreport Destination

A new WebReport destination, Full Page Widget, sees action for the Nodes Table WebReport, Table WebReport, HTML WebReport and Visual Count destinations.
Once the Full Page Widget output destination is selected, the Nodes Table WebReport, Table WebReport, HTML WebReport or Visual Count can be selected for the Type.
To support the new transport destination added for full page widgets, the transport destination page now has references to the Table Report SubWebReport node and the Visual Count button node to be transported.

Nodes Table WebReport – full page

The Nodes List WebReport widget displays a list of items (nodes) generated from the WebReport’s data source in a full-page view, similar to the browse view.
Parameter prompts can be added for the user to input date ranges, attribute values, etc. using the commands, actions and models mentioned above (since 20.1). If in use, an edit pencil button will display to edit the parameters.
Custom columns, scrolling, name search and pagination are supported.
The node action menu and multi-select actions are available to work with the items in the result set.
All titles and labels support multilingual metadata.

Configuration is done this way. Configure thhis widget and add the title and the node id of the webreport to display in the perspective manager. An Icon Class displays the appropriate Icon on the widget.

Table Web Report – full page

The Table WebReport widget displays a list of items based on the WebReports data source in full page mode.
Parameter prompts can be added for the user to input date ranges, attribute values, etc. using the commands, actions and models mentioned above (since 20.1). An edit pencil button will display to edit the parameters.
Additional data columns, scrolling, column filtering for multiple columns and pagination are supported.
Additional actions can be added, for example a sub-WebReport to initiate a workflow, send an email or create a document node from the item.
Titles and labels support multilingual metadata.

Visual Count – full page

The Visual Count helps visualize countable data using a full-page chart in the Smart View. The chart view (can use bar, donut or pie) has controls for users to filter and drill into data easily.
Parameter prompts can be added for the user to input date ranges, attribute values, etc. using the commands, actions and models mentioned above (since 20.1). If in use, an edit pencil button will display to edit the parameters.
Action buttons can be added, such as export to CSV file, email report data and initiate workflow.
Titles and labels support multilingual metadata.
The Visual Count tile widget and full-page Visual Count widget has a new Horizontal Bar type option.
The original Bar type has been renamed to Vertical Bar to distinguish the two bar types.
The horizontal bar, vertical bar, donut and pie chart types can be changed in the Perspective Manager and Edit page.

New WebReport features

New Enable Row Filters Tag

This new tag [LL_WEBREPORT_ENABLEROWFILTERS /] is designed to automatically filter a WebReport data source when the report is used as a button with the Visual Count widget.
This has also been added to the tag guide as a general feature. This allows WebReports to have better out- of-the box support for dynamic complex filters.

Hidden columns allowed to be included in Table WebReport widget

A new tag option is now available for Table WebReport widgets, INCLUDEHIDDENCOLUMNS:, to specify a list of columns that you want to include in the data returned to the client for each data row. The column will not be included in the columns array in the response.