Rethinking smartUI Part 3

The upper PART

Two weeks ago I published a new video on Rethinking smartUI on Youtube. If you havn’t it 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 3 of a multipart post covering the technical start of DocPad and the associated CSS

The post parts until now

Part 4-A The Javascript Part 1

Part 3 The Infrastructure and the CSS

Part 2 The HTML

Part 1 Overview

A. The technical infrastructure

Die DocPad is started via the index.html, found in the test folder of the docpad. This is because of its much easier to test modifications via index.html compared to installing the finished widget in the content server and trying it then.

The first part of index.html

The first part of index html

The whole page is more or less standard. We habe 4 areas of interest in the first part. Dont forget, nuc was introduced in 21.2. In older versions nuc was not existant.

  • A. Here, you see the config is moved to the nuc area
  • B. Change A will also require to add the nuc-extensions to the list of dependancies for csui. Thed whole js code is loaded by the “ademo” extension.
  • C. My machine is on a VM. This means, if you put this on your machine, you’ll have to enter your url and your support directory (called supportPath) in the configuration.
  • D. I’ve used my ticket to provide the login. You can use username and password to login the more convential way or also provide a ticket of youfself here. The displayed ticket won’t work at your site.

The second part of index.html

Part 2 of index html

Here we have this points of interest

  • A. The require parts of needed modules. It is a docpad.mock.js in the list of modules, but its not recommended to use the mockup facility because there is lot of traffic from and to the server. Its much easier to add a real content server behind that index.html.
  • B. Standard procedure. Instanciate the widget with the context, display it in the region and fetch the context from the server. As mentioned, its easiere to use a real server as data source so switch the mockup off.
  • C. The marionette region is associated with the id=”widget” of this div, so the widget is displayed here.

At the end there is immediate function starting with

(function() {
var ws = new WebSocket('ws://' + window.location.host + '/jb-server-page?reloadServiceClientId=1');

This is inserted by Webstorm (my JS IDE) to allow auto-reload of changed files. You can ignore that, other IDEs will solve that differently.

B. The CSS

The CSS

Here, all css files used in the docpad are listed in the require.js list of required modules. For demo purposed and to keep things simple, I used 3 css files:

base.css

This file contains the basic css instructions to style the .hbd template shown at the top of list.

adv.css

contains the more advanced css instructions for docpad

print.css

is the print style sheet to provide a proper output on paper.

Disclaimer: The css instructions selected do not impose or propose any styles to be followed, instead they are used for pure demo purposes here.

The base.css File

Here the main functionality of the css is found. One of the feature of css3, the variables, is used. In the pseudo element :root all variables used in different rules are defined.

css setup

At the end of the snipped you’ll see a media query, saying the following is used tor screen display.

Lets discuss several stages:

The header + the footer

Header
Footer

These two structures exploit the standard userinfo with REST from the content server in a standard backbone model. “Hello xxxxxx” is a structure from the hello world demo with the word “hello” and the signed in user. The photo is downloaded from the content server and dosplayed.

The bottom structure simply prints out other user data on the screen .

Points of interest:

Font used

The nice digital effect is build with the font “digital-7”

The header is done with

The header

Ther photo is inserted at the position of the .photo class in the size of 80×60 pixel. Then the photo gets this nioce rounded look using border-radius.

the footer conststs of three divs, which are positioned in 3 columns

The footer

The divs have the classes .boxcell and .leftbox and are descendants of the .footerbox

The document display

The document display consists of six divs and are positioned using a css grid.

docdisplay

They have numbers, the numbers range from one (“card1”) to 6 (“card6”). The css part is (shown here only a fraction):

Cards

They are all children of the cube, using the display mode grid and displaying the 6 cards in two rows and threee columns.

cube

Using the diffent REST methods in the js code, these cards were filled by the standard methods of DOM interaction from js. This will be the main theme of next weeks post, the js code of “Rethinking smartUI” Part 3.

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”

New in 21.1: Search MyAssignments Widget

The new Search Box

A minor improvement in OpenText’s new Content Server 21.1 is the addition of a Search Box in the MyAssignments Widget in smartUI.

The new MyAssignments Search Box - not expanded

Here, the MyAssignments widget is marked. To marvel at the new Search Box, you need to expand the widget.

The new MyAssignments Search Box - the Loupe

Then click on the loupe

Next, the Search Box is displayed.

The new MyAssignments Search Box -the Search Box

Happy Searching

New in 21.1: Folder-Templates

The latest addition in OpenTexts Template technology are Folder-Templates.

Reason for the new Folder-Templates:

Here is a couple of use cases:

  • Create a folder from template within in Workspace: Create some optional folders (not applicable to every Workspace) with predefined folder names, folder permissions, etc.
  • Create folder from template in the enterprise directory: Create a hierarchical structure with predefined folder names, folder permissions, etc

Folder-Templates – How do they work?

Lets explain this in a step-by-step example:

  1. Create the Top Folder structure in “Content Server Document Templates”. Dont forget to add the Classifications according to your schema. Here the main structure is named “Stock Plan”

2. Create the folder structure as required.

3. Add the folder structure at any connected workspace you like. Here a smartUI based workspace is displayed. At the “+”, you can add the Folder Structure “Stock Plan” by one simple click.

5. Then the folder structure is added. The clock icon is a smartUI indicator, that this structure is new. (See my posts on this topic)

Annd there are all subfolders defined.

All Classifications, Categories etc applied to the template will also be present at this copy, like in any other template.

The Sky is the Limit!

Happy Templating.

Next week we’ll discuss the Improvements in Content Intelligence (3 new Widgets) and the Modifications in the Webreports in the amazing new Version 21.1 of Content Server.

New in 21.1: Multilingual Metadata Support

Multilingual Metadata in 21.1

Finally, Multilingual Metadata Support is implemented in Content Server 21.1. Before that version there was only Support available here.

The Users Point of Vue

Multilingual Metadata can be added/edited at the Property Panel of a document. The first screenshot gives the entry of the name, the second gives the entry of the Description field.

Multilingual Metadata in 21.1
Multilingual Metadata in 21.1

Only Names and Descriptions are supported for Multilingual Metadata. For more fields or even Category Attributes in multiple languages, refer to an OpenText Partner like CASSIA.

The Programmers Point of Vue

The Name and Description fields show at least two multilingual text pickers. These are found in the SDK in /lib/csui/controls/multilingual.text.picker and in /lib/csui/dialogs/multilingual.text.picker. Unfortunately there is no Documentation and no index.html. Lets take a look on that control:

The Controls

The left screenshot is from dialogs, the right is from controls.

Multilingual Text PIcker

This is embedded in the header.view.js from the dialogs/node.picker and will only be activated, if Metadata Languages are enabled. The mixin allows the form to be displayed as a Bootstrap Popover.

Mixin Start

Changes in that area require the changed multilingu<al text picker and also the changed paths to be followed for that changes. Therefore require a spawn of the whole nodestable widget to reflect that changes. This is acually not recommended.

Happy MLM

New in Content Server 21.1

new

This is an brief overview on the highlights of Content Server 21.1. This is only a technical list without any screenshots.

In the following posts I will discuss some of the new features more in detail, of course with screenshots

What’s new? A brief overview.

This is an excerpt from the Content Server 21.1 Release Notes

  • Administration
    • Admin Server Processes have now names which follow the the schema AdminServer-NN.
    • Read-Only Partitions. They have been eliminated. During Upgrade, they will be converted to retired node.
    • New Indexing Control Rules. For new installations, they follow the best practices for configuration.
    • Transport Warehouse, The system was simplified.
  • Connected Workspaces
    • Folder Templates. Like creating documents and workspaces from predefined templates, Folders now can be created from predefined folder templates.
  • SmartView
    • Multilingual Metadata. The name and the description fields in the metadata now support the edit of these fields in the configured multilingual metadata
    • Search Forms. Search Forms, created in classic UI are now available from smartUI.
    • TreeBrowse. A new widget allows to browse the nodelist widget with tree like display (similar to the Windows Explorer) after enabling this widget.
  • OpenText Viewing
    • Is now available as Windows Installer in an non-containerized environment.
  • Perspectives
    • Perspectives now can be enabled or disabled
  • Content Intelligence
    • Three new full-page widgets.
      • Nodes Table Webreport -Full
      • Table Webreport – Full
      • Visual Count – Full
    • New full page Webreport destination supports the new full page widgets.
    • New Tags/Tag Options
      • Enable Row Filters: Automatically filter a Webreport data source if the report is used as a button within the Visual Count Widget.
      • Hidden Columns: INDLUDEHIDDENCOLUMS: <hiddencolumns to include> is a new option in Table Webreports to display hidden columns.
  • Records Management
    • REST
      • Add and remove users to a hold
      • Add and remove users to a user based hold
      • Execute a user based hold and apply or remove holds from content owned or modified by the user
  • Security Clearance
    • Dynamic Security Clearance. The Clearance can now be controlled based on organizational defined criteria, like network and device to provide a finer control of the Clearance. For example, a login from a coffee shop can receive a lower Clearance as one from the intranet.
    • User profile. Clearances and Supplemental Markings can now be displayed on the user profile.
  • Workflow
    • Initiation by Mime Type. Workflows can be initiated by mime type, such as a pdf in the proper format.

Changing the Business Workspace Display in SAP

Have you ever been wondering how to switch the Display of an Business Workspace displayed in xECM from the SAP GOS Menu?

Prefer the old display or the smart UI display?

The old Display of a Business Workspace

This is a Business Workspace displayed in the standard non-graphic form

This is a Business Workspace displayed using smartUI

Switching is easy.

Logon into your SAP System as Administrator. Start Transaction SPRO and click on the IMG Button.

The Display IMG Menu with the “Maintain Business Object Declaration” Task

Start the “Maintain Business Object Declaration” Task by clicking on the “Start” Icon. Select the Business Object you want to change. Here in this example is “KNA1” (Vendor).

If there is no checkmark at “Use Widgets for UI” then you’ll see the old display of the Business Workspace, if there is a checkmark, then the Business Workspace is displayed in smartUI.

Simple set or unset this checkmark.

Save. Update the tables.

Then you are done! The Display changes according to your setup.

You can also set this checkmark while creating new Business Object Declarations.