Agenda of the new 20.2 Smart UI Base Workshop

CSUI Components

Day 1 (10:00-17:00)

Chapter 1

Agenda. A short introduction to this agenda

Chapter 2 The different GUIs.

The new smart GUI. How smartUI works. Setting up landing pages with the new GUI. Using Perspectives and build them with the Perspective Manager. Use Webreports to build custom widgets. The new perspective element and the difference 20.2 to previous versions.

Using widgets on another portal w/o content server.

Exercises:

  • Build a custom perspective
  • Build a custom widget based on a web report

Content:

  • Chapter 2.1: The different UI Possibilities
    • Examples: Connected Workspaces
    • Examples: xECM
    • Examples: Documentum D2 Smart View
    • The Big Picture. See the GUI components in the Content Server Environment
    • Functional Components of the smartUI SDK
  • Chapter 2.2: smartUI Overview
  • Chapter 2.3: Diving deeper in the smartUI
    • Role-Based Content Server Pages
    • User Interface
  • Chapter 2.4: Perspectives Overview
    • Scenario: Creating a new Perspective
  • Chapter 2.6: The Perspective Manager
    • General Information
    • Rules for Role-Based Perspectives
    • Layout Behavior
    • Configure Widgets
  • Chapter 2.6: The Toolbox. An overview of the visual components in the SDK. The usage will be discussed later in the SDK

Day 2 (9:00-17:00)

Chapter 3 REST

REST. What is REST? Overview of REST Services

Chapter 3.1 REST. Consuming REST Services with Postman.

  • Using REST Services.
    • Authenticate a User
    • Test a REST Operation in Postman
    • Filtering and Expanding Data in the request
    • REST API Clients
    • Tips and Tricks.

Exercises:

  • Use POSTMAN to get used to REST, Authenticate in REST
  • Try several REST commands and get an overview over the various options
  • Build a REST based html page, which queries a node

Chapter 3.2 Extending REST Services.

How to build a new REST Service in OSCRIPT.

Exercises:

  • Build a custom REST Service in a new Content Server Module. Later in Chapter 10, this REST Service will be modified and be the server-side base of our first widget

Content:

  • Handling Requests with REST API
  • RESTful object
  • Create a module for REST extension
  • REST API module in Content Server 20.x
  • Resources, actions and prototypes
  • Adding parameters to the prototype
  • Test a new REST resource
  • Tips and Tricks for REST Services with smartUI
    • Table Query inside a REST Service
    • Getting nodes with complex categories
    • Handling complex Categories

Chapter 4 A very short intro to JavaScript Patterns.

That’s what any developer of the SDK sees inside the SDK. A short tour through the JavaScript patterns required to understand the SDK and the underlying frameworks. This is based on Stefanov “JavaScript Patterns” O’Reilly, ISBN 978-0-596-80675-0, which is very recommended. Some new Aspects of ECMA6, Promises, Deferrals are also discussed

Content:

  • Introduction and References
  • ECMAScript Versions
  • Chapter 4.1 The Patterns
    • Promises
    • JQuery Deferred
    • XMLHttpRequest
    • Immediate Functions
    • Immediate Object Initialization
    • Function Properties—A Memorization Pattern
    • Configuration Objects
    • Function Application (also with smartUI examples)
    • Schönfinkelizing or currying a function
    • Mix-In Inheritance copy all properties to a child
    • Borrowing Methods
  • Chapter 4.2: Object Creation Patterns
  • Chapter 4.3: Sugar methods
  • Chapter 4.4: Object Design Patterns
    • Singleton
    • Object Decorators (used quite often in the smartUI SDK)
  • Chapter 4.5: DOM and Browser Patterns
    • Web Workers (only in recent browsers) long running scripts

Day 3 (9.00-17:00)

SDK Infrastructure Intro

Chapter 5 SDK Infrastructure Intro

Introduction to Infrastructure needed for the SDK. All components and frameworks will be introduced. Introduction to Backbone with a Tutorial, Marionette as the extension of Backbone is also covered by a tutorial.

Exercises:

  • Backbone Tutorial. Building a browser-based TODO List
  • Marionette Tutorial. Extending the TODO List with Marionette

Content:

  • Chapter 5.1: Bootstrap
    • A CSS and JS framework as the base of smartUI
  • Chapter 5.2: Node.JS
  • Chapter 5.3: Require.js
    • Overview
    • How to use require.js.
  • Chapter 5.4: Backbone.js
    • Views
    • Events
    • Models
    • Collections
    • Routers
    • Models and Views
    • Collections
    • View Rendering
    • Routing with URLs
    • A simple Backbone Tutorial
  • Chapter 5.5: Marionette.js
    • Marionette Views – Layouts
    • Marionette Views – Regions
    • Tutorial: A simple Backbone-Marionette App
    • Recommended Tools
      • Backbone Debugger
      • Marionette Inspector
    • Python based client for mozilla-marionette
  • Chapter 5.6: Handlebars.js (Overview, more in depth in the advanced training)
    • A html template framework
    • Handlebars SDK usage
  • Chapter 5.7: Yeoman
  • Chapter 5.8 Grunt.js
    • Tasks Configuration
    • Starting grunt
    • Some examples of GRUNT tasks
    • CSUI sdk custom grunt tasks
  • Chapter 5.9 Additional Libraries. Here the libraries are quickly discussed. For a more in-depth discussion, please refer to the Advanced Workshop.
    • Short Overview of D3, the interactive SVG Graphics package inside the SDK
      • D3 GANTT Chart example
    • Short Overview of Alpaca, the forms package inside der SDK
      • Alpaca Example
      • Alpaca Support in the Content Server
  • Chapter 5.10 Additional Infrastructure
    • Python
    • CORS – Cross Origin Resource Sharing Chrome Plugin
    • Inkscape/wingrep/fiddler
    • SVG viewer
    • Markdown

Day 4 (9:00-17:00)

Chapter 6 smartUI Intro BASIC

What is the SDK, Prerequisites, documentation? Download and install the SDK.  Examine the structure. Style Overrides, an overview. We look at all framework homepages to find examples and documentation. Using fiddler to examine underlying functionality. What’s possible with the SDK. Discussion of how to add new node types, new commands. Discussion of the controls and the widgets in the SDK (basic level).

Exercises:

  • Find the SDK and download the SDK
  • Install the SDK
  • Build a Project Directory
  • Prepare the Demo Widget “Hello”
  • Install this in the CSIDE Module from Chapter 4
  • Test this widget in the Perspective Manager

Content:

  • 6.1 Introduction
    • Content of the SDK
    • How to develop
      • JS IDE Webstorm
      • JS IDE Eclipse
      • Notepad++
  • 6.2 Installing the SDK.
  • 6.3 Building the Demo Widget
  • 6.4 CSS Style Overrides Binf (OpenText Bootstrap Version)
  • 6.5 General Overview
    • General Architecture
    • Coding Guidelines
    • csui.onReadyx  
    • Logging, Internationalization and Localization
  • 6.6 Content of the SDK
    • The Connection Object
  • 6.7 Routing Preview (see adv. Training for a more detailed discussion)
  • 6.8 New Command
  • 6.9 Custom Column
  • 6.10 Metadata
  • 6.11 Define a new Nodetype
  • 6.12 Create a Widget
  • 6.13 Base Widgets. Detailed info’s on base widgets.
    • Favorites
    • Recently Accessed
    • MyAssignments
    • Shortcut (depreciated in 16.2.10)
    • Shortcuts
    • Metadata
    • NodesTable
    • Thumbnail
    • DocumentOverview
    • Search Results
    • node.state
    • Permissions and Permission Explorer
    • Html.editor
    • Navigation Header
  • 6.14 Controls and Contexts
    • Controls
      • Node Picker
      • Modal Alert
      • File Open
      • Perspectives: Grid, Single, Left-Center-Right, Tabbed, Tabbed-Flow
      • Tile
      • ListView
      • ListItem
      • Signin
      • UserPicker
      • Breadcrumps
      • Checkbox
      • Dialog
      • Disclosure
      • Error
      • Form – with alpaca.js
      • Globalmessage
      • Grid
      • Zip&Download
      • Visual Count Control
      • Integration Folder Browser
      • Integration Target Picker
    • Contexts
      • Detached objects
      • Permanent objects
      • Temporary objects
      • Page Context
      • Browsing Context
      • Perspective Context
      • Portal Context
  • 6.15 Models and Factories
    • NodeModel
    • Other Models
    • Factories
      • Fetchable Factory
      • Configurable Factory

Day 5 (9:00-16:00)

Rest of Chapter 6: SDK

The remaining parts of yesterdays SDK intoduction

Chapter 7 Mockup Data and Testing

MockJax is used to mock up data (no need for a Content Server during development of a widget) and the Jasmine Framework is used to for the testing of the widgets or other JavaScript modules

Content:

  • Mocking Up Data
  • MockJax
  • Setup and Usage
  • Jasmine Usage

Chapter 8 The anatomy of the example widget Hello.

A detailed voyage in the source of the widget. (Explanation of all js files, the test folder, css and language settings)

The Chapters 9-11 are exercises. Chapter 12 is a Real-Life Demo/Exercise. Depending on the time left, these parts can be cut down.

Chapter 9 The anatomy of the myAssignment Widget.

A detailed voyage in the source of the widget. (Explanation of all js files, the test folder, css and language settings)

Chapter 10 Add another Widget to the one already loaded.

Recap the complete workflow how to implement a widget from Unit7. Add the Greeting Widget (another simple Widget from the samples) to the Greetings Widget.

Exercises:

  • Add the Greeting Widget to the Content Server
  • Test using the Perspective Manager
  • Modify the widget (by doing several things as implementing a control from the library)

Chapter 11: Build a custom Widget (optional)

Our First Widget.

Use the Hello Widget, modify it to call the REST Service we build in Unit 3.2. Modify this REST Service to provide a better JSON Structure.

Exercises:

  • Modify the Hello-Widget. Add a model for our REST Service. Add a handlebar template to output our greetings from the server. Add some css effects

Content:

  • Subdirectory Structure
  • Some Changes to our REST Service
  • Files to create
  • Add mockup support, once the answer is clear defined
  • Test with index.html
  • Start „npm start “the local server in the dev folder
  • Compile the new bundles file with grunt
  • Install on Content-Server
  • Open the perspective manager
  • Problem with Chrome. Official Chrome BUG: (Issue 611328 https://bugs.chromium.org/p/chromium/issues/detail?id=611328)

Chapter 12: Strategies to “widgedize” an existing legacy gui module and to add things to an existing module (optional)

The strange word “to widgedize” stands for “Build a widget for a legacy module not already supporting widgets”. The Strategies on amending a Module by adding a widget and on adding additional functionality inside an existing widget are discussed. In the complete practical workshop, these widgets are implemented also on the Server side, whereas here no server implementations are made.

Content:

  • Moving from a legacy gui module to a smartUI module
    • Examine a legacy module and rebuild a smartUI widget (here only on the client side)
    • As an example, the barcode module
  • Add a functionality in an existing widget
    • Add an email functionality in the Connected Workspaces Team Widget.
    • Usable from inside the Widget

Handouts and Class Material

A share accessible for all attendees as source of this handouts is required.

Handouts

  • Reiner’s Cheat Sheet for CSUI Widgets
  • Reiner’s CSUI Workflow Cheat Sheet (advanced Session only)
  • Backbone.js Offline Manual (Offline Webpage)
  • Bootstrap 4 Cheat Sheet (Offline Webpage)
  • REST Demo guides Memberinfo and Nodeinfo
  • REST Demo Guide Create a REST Service

Class Material

  • Backbone Tutorial TODO Application
  • Marionette Tutorial TODO Application
  • Our first homemade widget
  • REST Exercises
  • myfirstNode.js
  • Material for Chapter 12 including the client side js apps

Training conditions

  • The training is remote using Microsoft Teams in these Corona times.
  • The training materials are in english, the trtaining lanbguage is english or german, depending on the geographical location.
  • The customer needs to setup a stand alone training VM with a Content Server and Database. A copy of these machine must be provided as the Trainer Machine to us, on which the training is held.

New: We are offering custom widget development. Interested? Send an e-mail to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

New 16.2.10 Content Server Smart UI Advanced Workshop

This is a 4-5 days’ Workshop covering the additional Parts of the SDK, the xECM, Webreports, Workflow etc. Modules. Here, some of the more advanced concepts are discussed, like how to make Widgets configurable in the Perspective Manager.

Also, there are overviews of D3 (Graphic Package) and Alpaca (Forms Package) inside the SDK. The complete Training is configurable.

See the complete Agenda here

New smartUI Workshop Basic for 16.2.10

This is an overview of the Content Server part in the SDK. At the end, simple Widgets based on the standard demo widget can be build and set up in the Content Server. This Workshop in available in various lengths to allow a different depth of Understanding. See the complete 5 days Agenda on the next pages. The 1 day and 2 days workshops are subsets of the complete 5 days workshop-

1 Day Content Server Smart UI Workshop Basic

Suited for Managers to get a technical overview of the SDK (Content Server Part) and what’s to do with it. First held at the Enterprise World Vienna 2019.

2 Days Content Server Smart UI Workshop Basic

Suited for technical Team Leaders or Consultants to get a technical overview of the SDK (Content Server Part) and what’s to do with it. Gets more in-depth as the 1-day workshop with more exercises. Forst held at the Enterprise World Toronto 2019.

5 Days Content Server Smart UI Workshop Basic

This is the complete training, covering all areas (JS Patterns, REST, SDK Infrastructure, SDK, Exercises) in the SDK (Content Server Part)

See the complete 5 days Agenda here

New: We are offering custom widget development. Interested? Send an e-mail to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

New Trainings for smartUI and Content Server 16.2.10

Content Server 16.2.10 gave us a lot of new Features, which require a new Traininigs.

Therefore there is a Workshop Line of smartUI Trainings and a new Practical Series.

Workshop Line: The two Workshops Content Server SmartUI Workshop Basic and Contnent Server smartUI Workshop advanced have been extended to 16.2.10. As always this Workshops give the explanation, what and why is going on in der SDK

  • Content Server Smart UI Workshop Basic
  • Content Server Smart UI Workshop Advanced

The Practical Series include a complete Implementation of Widgets, REST Services and Contnent Server based Applications in the form of Business Workspaces. So this part is more a Workshop for the practical usage of smartUI. As the content of the Workshop Line is required in the Practical Series, a knowledge comparable to this Workshop Line is recommended for attending the practical Series.

  • Practical Series I: Strategies to “widgedize” an existing Content Server module and to add functionality in an existing widget.
  • Practical Series II: Building an EVENT Management System in the Content Server using a graphical smartUI Dashboard and Connected Workspaces

New: We are offering custom widget development. Interested? Send an e-mail to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

New in 16.2.10: New Favorites, MyAssignments and RecentAccessed Widgets

New in the actual Content Server Release 16.2.10 are redesigned Favorites, My Assignments and Recently Accessed Widgets.

All three widgets can now be expanded from an Icon located at the upper right. And the expanded view is no longer a popup Window, its a separate view, giving you much more space to display. Also, there are node Commands available at the entries

Lets start from with the Recently Accessed widget:

The new Recently Accessed Main View
with the new menu

Here we see, that the expanded view has been moved to the upper right. And direct node commands are available from the menu

The expanded view of the recently accessed widget
The new expanded view of the recently Accessed Widget

To leave the expanded view, simply click on the Arrow at the upper left.

Next, we have a new Favorites Widget

Favorites Widget
The new Favorites Widget

By hovering over the entries, there are new node commands available (here for the business workspace). Also the expand Icon moved to the top right.

Favorites Expanded View
Favorites Expanded View

This is an example of the Favorites expanded view.

The next is the MyAssignments Widget

The MyAssignments Widget
The MyAssignments Widget

and the expanded view is

MyAssignments Widget expanded
The MyAssignments Widget

Interesting, isn’t it?

New: We are offering custom widget development. Interested? Send an e-mail to merz at ebit-company.de stating the purpose of the widget and requesting a qoute

smartUI SDK additional Libraries

There are a few additional libraries in smartUI, which are distributed in any content server installation. Therefore its not necessary, to instatt the libraries, just use them. We discuss several libraries also in the smartUI base and advanced trainings.

These are

  • alpacca.js
    A library to develop and use JSON based forms. Supported by Content Server RESTS calls
  • ally.js
    simplify certain accessibility features, functions and behaviors.
  • bililite.js
    Cross-Browser Text Ranges and Selection
  • ckeditor.js
    Configurable javascript RTF Editor
  • d3.js
    Data driven documents. A highly interactive library to draw interactive SVG graphics. Used to visualize data. The OpenText distribution contains
  • d3-selection
  • d3-array
  • d3-scale
  • d3-shape
  • d3-axis
  • d3-collection
  • d3-transition
  • d3-interpolate
  • d3-format
  • hammer.js
    Gestures in Webapps
  • less.js
    dynamic stylesheet language
  • moment.js
    Date Arithmetic in JS. Very useful with d3.
  • numeral.js
    Formatting and manipulating numbers
  • text.js
    AMD/Loader Plugin for loading text resources
  • jqueryui.js
    Includes:
    widget.js, position.js, data.js, disable-selection.js, focusable.js, form-reset-mixin.js,
    jquery-1-7.js, keycode.js, labels.js, scroll-parent.js, tabbable.js, unique-id.js, widgets/draggable.js, widgets/droppable.js, widgets/resizable.js,
    widgets/selectable.js, widgets/sortable.js, widgets/mouse.js, effect.js,
    effects/effect-blind.js, effects/effect-bounce.js, effects/effect-clip.js,
    effects/effect-drop.js, effects/effect-explode.js, effects/effect-fade.js, effects/effect-fold.js, effects/effect-highlight.js, effects/effect-puff.js, effects/effect-pulsate.js, effects/effect-scale.js, effects/effect-shake.js, effects/effect-size.js, effects/effect-slide.js, effects/effect-transfer.js

Whats new in the Workflow Area of Content Server 16.2.9?

There are seveeral new things implemented in the Workflow area of Content Server 16.2.9.

First think of a very simple workflow defined like this.

a very simple Workflow as example
A really simple workflow

Lets set the name of our workflow to “Test Work Flow 16.2.9”. Lets initiate it.

Stop Action in smartUI

If configured on a landing page, the workflow tracking widget shows our workflow, once initiated like this

The Workflow Tracking Widget
The workflow tracking widget

If you click on the extension button on the lower right of the workflow tracking widget, then there will be a list of all workflows belonging to or initiated by this person will open.

A workflow list with only one workflow.

If you click on the status of a workflow (here we have only one workflow to click onto), the details of this workflow instance opens

Details of the Test Work Flow 16.2.9

Here you see a graphical overview of the current step along with all steps of the workflow. This instance of the workflow an be stopped by pressing the “Stop” Button.

Open the Workflow Map from smartUI

A new Edit Action has been added to allow the edit of a Workflow Map

The new edit action for workflow maps

This will open the Workflow Map Editor in the legacy gui

A simple Workflow
A really simple Workflow

Copying or Moving Workflow Attachments in smart UI

Workflow Attachments can now be moved of copied within the Workflow Attachment Panel

New in 16.2.9: Custom View Search Form as side panel

In 16.2.9, there is a nice thing added to smartUI:

Custom View Search Form

First, a custom view search form has to be configured in the legacy gui, something like this:

A Custom View Search configured fpr a folder
A Custom View Search configured in the legacy gui

When switched to the smartUI, a doubleclick on the stored Search “Product Search” starts the Custom View Search

Search not started
Search started

Then the Search Panel appears on the left. Clicking on the “Search” Button will start the search. A click on the icon in the upper right will switch between the standard form and the tabular form of the search results.

Search results in standard list form
Tabular Form
Search Results in tabular form

Nice, isn’t it?

SmartUI expandable Tiles at Work

Wondered, how expandable Tiles work in smartUI?

The base Widget is a simple Tile:

Reiners Expandable Tile Entries
Expandable Tile Entries

Pressing the Expand Button (lower right) shows a different view with more details as a list:

Expanded Tile Entries
Expanded Tile Entries

Implementation:

For simplicity sake, all require.js setups are omitted. The complete javascript would run on a simple html page without connecting to Server.

First, we need a collection and a model. The model does have 3 attributes, name, desc, adv. 30 Models are filled automatically in the collection.

     var  ItemModel = Backbone.Model.extend({
              defaults: {
                  id: null,
                  name: 'Unnamed',
                  desc: 'Unnamed',
                  adv: 'Unnamed'
              }
          }),

      ItemCollection = Backbone.Collection.extend({
              model: ItemModel,
              initialize: function (models, options) {
                  this._items = _.times(30, function (index) {
                          ++index;
                          return {
                              id: index,
                              name: 'Item Entry No.' + index,
                              desc: 'the ' + index + 'th. Description',
                              adv: 'the adv attribute of the ' + index + '-Description Model'
                          };
                      });
                  this.makeFetchable(options)
                  .makeClientSideBrowsable(options);
              },
              sync: function (method, collection, options) {
                  if (method !== 'read') {
                      throw new Error('Only fetching the collection is supported.');
                  }
                  console.log('Getting', collection._items.length, 'items');
                  var deferred = $.Deferred();
                  setTimeout(function () {
                      var response = _.clone(collection._items);
                      if (!options) {
                          options = {};
                      }
                      if (options.success) {
                          options.success(response, options);
                      }
                      collection.trigger('sync', collection, response, options);
                      deferred.resolve(response);
                  }, 250);
                  return deferred.promise();
              }
          }),

Second, we need two views, a base view and an expanded view.

The base view with its template is:

      ListItemView = Marionette.ItemView.extend({
              className: 'binf-list-group-item',
              template: Handlebars.compile($('#list-item-template').html())
          }),
 
script id="list-item-template" type="text/x-handlebars-template"
  {{name}} 
/script

<> around the script tags are omitted

The extended view with its template is

ListFieldItemView = Marionette.ItemView.extend({

                  className: 'binf-list-group-item',

                  template: Handlebars.compile($('#list-item-template1').html()),

                  initialize: function () {

                      this.listenTo(this.collection, 'sync', this.render);

                      this.collection.fetch();

                  },

                  serializeData: function () {

                      if (!this.model && !this.collection) {

                          return {};

                      }
                   var args = [this.model || this.collection];
                  if (arguments.length) {
                      args.push.apply(args, arguments);
                  }

                  if (this.model) {
                      return this.serializeModel.apply(this, args);
                  } else {
                      return {
                          items: this.serializeCollection.apply(this, args)
                      };
                  }
              },
          }), 
script id="list-item-template1" type="text/x-handlebars-template"
   {{#each items}}
      p class="items"a href=#{{name}}  ----     {{desc}}---{{adv}}/a/p
  {{/each}}
/script

<> brackets around the html and script tags are omitted

The serialize function is used to make the collection renderable with handlebars.js. This and item-template1 will render to this expanded view:

We also need one base view, referencing our two views, one as contentview and one as expandedView. We add the Behavior Expanding with the options with our collection set. And of course, with several title and icon options set.

     ListTileView = TileView.extend({
              icon: 'header-openfolder',
              title: 'Reiners expandable Tile Entries',
              contentView: ListView,
              contentViewOptions: function () {
                  return {
                      collection: this.items
                  };
              },
              childEvents: {
                  'click .items': 'onClickItem'
              },
              onClickItem: function (target) {
                  this.trigger('click:item');
                  this.triggerMethod('execute:defaultAction', target.model);
                  alert("Clicked on item '" + target.model.attributes.name + "'");
              },
              behaviors: {

                  Expanding: {
                      behaviorClass: ExpandingBehavior,
                      expandedView: ListFieldItemView,
                      expandedViewOptions: function () {
                          return {
                              collection: this.contentView.collection
                          };
                      },
                      titleBarIcon: 'title-assignments',
                      dialogTitle: 'Reiners Special Tile expanded Details',
                      expandIconTitle: 'Reiners Expand Button',
                      dialogTitleIconRight: "icon-tileCollapse"
                  }
              },
              constructor: function (options) {
                  ListTileView.__super__.constructor.apply(this, arguments);
                  this.items = new ItemCollection(undefined, {
                          top: 30
                      });
                     // options.items = this.items;
              },
              onShow: function () {
                  this.items.fetch();
              }
          });

Initialize it and show it at the el #tile. Then you are done

      var
      // Create instances of the views to show on the page
      tileView = new ListTileView(),

      // Create helpers to show the views on the page

      tileRegion = new Marionette.Region({
              el: "#tile"
          });

      tileRegion.show(tileView);

Easy, isn’t it?

The complete html file containing the javascript demo code can be downloaded here