The new smartUI Zip&Download control

Zip&Download has arrived in smartUI. Finally.

The new download and zip command
The new download and zip command

Open up a nodelist and you’ll see the new Download command.

How to use it?

  • First select a couple of files to download
  • Click on Download
  • Then the ZIP archive is build
Building the ZIP Archive
Building the ZIP Archive
  • When finished, you can change the default name
ZIP file build
ZIP file build

Then you get the summary of all files contained in this ZIP Archive

Filelist for all files i n the ZIP archive
Filelist for all files i n the ZIP archive

Click on Download and this archive will be downloaded to your machine.

New Permissions Explorer in smartUI

Have you seen the new permissions explorer in smartUI? Open up the permissions on an object and you’ll see the new selection.

Permission Selection
Permission Selection
The Permissions Explorer
The Permissions Explorer

The permissions explorer is opened with a click on the “Permissions Explorer” Button on the upper right.

Inside the Permissions Explorer
Inside the Permissions Explorer

This will give you the option to edit all permissions of the objects in this folder at once.

New smartUI Training for Content Server 16.2.8

The actual Content Server release 16.2.8 brought a lot of improvements to the smartUI SDK, for example the xECM and the connected Workspaces Widgets are nowadays part of the SDK.

Also a lot of of people were interested in smartUI, not only Developers.

So we introduced an updated 5 days training to reflect the changes of 16.2.8 and a 2 days training to provide an overview of the SDK. Naturally, a 5 days training gives more information and also more exercises than a 2 days training, but this 2 days training can provide a good overview for Team Leaders and technical Managers.

For those with little time, there is also a 1 day training giving you a more compact overview for technical Managers and technical Evangelists. The one day training is not recommended for Developers. This training was held at the Enterprise World in Vienna 2019.

Whats new in the trainings?

New in the basic training

The Chapter 6 (SDK Intro) (5 days training Basic)

  • 6.1 Introduction
  • 6.2 Installing the SDK. Different Installations in 16.2.4 and 16.2.8. (NEW)
  • 6.3 Building the Demo Widget
  • 6.4 CSS Style Overrides Binf (OpenText Bootstrap Version)
  • 6.5 General Overview
    • General Overview
    • General Architecture, Coding Guidelines
    • Logging, Internationalization and Localization
  • 6.6 Content of the SDK
  • 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
    • Shortcuts
    • Metadata
    • NodesTable
    • DocumentOverview
    • Search Results (NEW)
    • Permissions (NEW)
    • Html.editor (NEW)
    • Navigation Header (NEW)
  • 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 (NEW)
      • Error (NEW)
      • Form (NEW)
      • Globalmessage (NEW)
      • Grid (NEW)
      • Zip&Download (NEW)
      • 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

A new Chapter 12 discusses the strategys needed to “widgedize” an existing legacy g module and to add things to an existing widget

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.

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 widget
  • Add a functionality in an existing widget
    • Add an email functionality in the Connected Workspaces Team Widget.
    • Usable from inside the Widget
    • As an example the new team widget with email Support

New in the advanced training

The advanced training will eventually grow more and more to cover the new widgets and controls coming in future releases.

Chapter 1: Extended SDK Parts

  • Additional Widgets
    • Webreports
      • NodesListReportView
      • TilereportView
      • FilteredCountChartView
      • Carousel Widget View
      • parameter.prompt.form (NEW)
      • table.report (NEW)
      • status.screen (NEW)
      • open.webreport.js (action to show the Parameters form) (NEW)
  • binf-Datepicker
    • Using the build in datepicker
  • binf-switch
    • Using the binf-switch to turn checkboxes and radio buttons into switches
  • Workflow
    • Workflow Components
    • Workflow in smartUI including Workflow Status (new in 16.2.4)
    • Starting Workflows
    • URL Routes
    • Workitem Model
    • Workitem Actions
    • Workitem Extension
    • Writing Workflow Extensions
    • REST API Support for Workflows
  • Connected Workspaces
    • Configurationvolume (NEW)
    • Header (NEW)
  • Extended ECM
    • xECM: Office365 Groups (NEW)
    • xECM: Header Widget with Business Object Infos (NEW)
    • xECM: Snapshot of current document Attachments (NEW)
    • xECM: Dossier View Widget (NEW)
    • Event Action Center (NEW)
  • Widgets not part of the SDK
    • Mobile Scanning
    • Discussion Widget
    • Engineering Doc Management: Search
    • MyShares

The chapter 3 has also been amended

  • Tips and Tricks (Work in Progress- List can change)
    • Add a OTDS Ticket already in the browser to the connection object
    • Re-using a OTDS Ticket as LLCookie
    • Checking the paths in the test/index.html
    • Adding non CSUI supported jQuery functions in a view
    • Add additional jQuery Libraries
    • Adding Controls to a widget (NEW)
    • CKEDITOR 4 (NEW)
      • Intro (NEW)
      • JQuery Non SDK example (NEW)
      • Usage in the SDK (NEW)
    • Handlebars advanced
      • Handlebars QuickStart
      • Expressions
      • Helpers
      • Helpers with html output
      • Helpers with Hash Object
      • The Helper fn property
      • The helper inverse property
      • Partials
      • Helpers in the SDK
      • 188 Handlebar Helpers
    • LESS advanced
      • LESS installation
      • Using LESS variables
      • Using Mixins in LESS
      • Parametric Mixins
      • Guarded Mixins
    • Accessibility in Bootstrap. Screen reader support and what’s to change in the SDK to support screen readers for visual impaired users.
      • What is Accessibility
      • Kinds of Disabilities
      • Accessibility and the law
      • WAI-ARIA
      • ASSETS.CMS.GOV
      • PayPal Bootstrap Accessibility Plugin
      • Web Experience Toolkit WET
      • Other resources
    • Best Practices in smartUI development
      • Pre-Development Steps
      • Preparation Steps
      • Development Steps
      • Integration Steps
      • Documentation Steps
  • Development Infrastructure for security aware Organizations (NEW)
    • Recommendations what’s to do if the reloading of npm modules during the creation of a widget is not wanted (NEW)

The agendas are available as pdf here

  • 2 day Agenda the training with more details and more exercises

New RulesMatchingMixin in smartUI

Have you seen the new Rules matching Mixin in the smartUI? Its a great mixin, allowing you to implement a colloection of rule models which are supposed one model, which rules match the input object. This is a quite powerful functionality

The following example implements the selection collection

  • Container = true
  • Subtype = 144, 749
  • and is type = 144 is one of the mimetypes listed
  • and is type = 144 or mimetype startswith “image/” of equals “pdf/x-pdf”
  • and is type = 144 and mimetype = “text/plain”

If run, then the action of the appripriate node is returned. Only on the base of a rules Model!!

Can be implemented like this

  var NodeActionSelectingModel = Backbone.Model.extend({
  idAttribute: 'signature',
  defaults: {
    sequence: 100,
    signature: null
  },
  constructor: function NodeActionSelectingModel(attributes, options) {
    Backbone.Model.prototype.constructor.apply(this, arguments);
    this.makeRulesMatching(options);
  },
  enabled: function (node) {
    return this.matchRules(node, this.attributes);
  }
});

RulesMatchingMixin.mixin(NodeActionSelectingModel.prototype);
var NodeActionSelectingCollection = Backbone.Collection.extend({
  model: NodeActionSelectingModel,
  comparator: 'sequence',
  constructor: function NodeActionSelectingCollection(models, options) {
    Backbone.Collection.prototype.constructor.apply(this, arguments);
  },
  findByNode: function (node) {
    return this.find(function (model) {
      return model.enabled(node);
    });
  }
});
var nodeActions = new NodeActionSelectingCollection([
  {
    equals: {
      container: true
    },
    signature: 'Browse'
  },
  {
    equals: {
      type: [144, 749]
    },
    signature: 'Open'
  },
  {
    and: [
      equals: {
        type: 144
      },
containsNoCase: {
        mime_type: [
          "application/msword",
          "application/vnd.ms-word",
          "application/vnd.msword",
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          "application/vnd.wordprocessing-openxml",
          "application/vnd.ces-quickword",
          "application/vnd.ms-word.document.macroEnabled.12",
          "application/vnd.ms-word.document.12",
          "application/mspowerpoint",
          "application/vnd.ms-powerpoint",
          "application/vnd.openxmlformats-officedocument.presentationml.presentation",
          "application/vnd.ces-quickpoint",
          "application/vnd.presentation-openxml",
          "application/vnd.presentation-openxmlm",
          "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
          "application/msexcel",
          "application/vnd.ms-excel",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          "application/vnd.ces-quicksheet",
          "application/vnd.spreadsheet-openxml",
          "application/vnd.ms-excel.sheet.macroEnabled.12",
        ]
      }
    },
    signature: 'Edit',
    sequence: 50
  },
{
    and: {
      equals: {
        type: 144
      },
      or: {
        startsWithNoCase: {
          mime_type: 'image/'
        },
        equalsNoCase: {
          mime_type: ['application/pdf', 'application/x-pdf']
        }       }     },
    signature: 'Convert',
    sequence: 50
  },
  {
    and: [
      {
        equals: {
          type: 144
        }
      },
      {
        equalsNoCase: {
          mime_type: 'text/plain'
        }      }    ],
    signature: 'Read',
    sequence: 50
  },
  {
    signature: 'Properties',
    sequence: 200
  }
]);
var node = new NodeModel(...),
    action = nodeActions.findByNode(node);

New in 16.2 Workflows in SmartGUI

A new feature in the content server version 16.2 is the usage of smartGUI in workflows. This gives a standard workflow user a great new experience in using this workflow.

Lets see, how:

Setup

But first, you have to setup an few things.

This is our workflow map which we use in this example:

Example Workflow Map
Example Workflow Map: Computer Approval

In the Classic UI edit the workflow map.

Goto to the Initiator. Mark „Initiate in Smart View“ . Add to Workflow Definition and save the map

Workflow Start Step
Initiator

(optional)

goto the Tab „Smart View“ and add a form. Forms can be added to all steps, if they are enabled for display in Smart View.

This is an example of the last step on „How to enable a step for SmartUI“:

Enable a Step in SmartGUI
Enable a Step in smartGUI

Save the map and exit.

Now its time to see our workflow in the smartGUI.

Usage

Switch to the smartGUI and instantiate the workflow from the map.

Instantiate a Workflow
Instantiate a Workflow

Then the Workflow Widget appears. At this stage, you can set all attributes as usual, you can add files at to the workflow by dragging and dropping these to the right side of the widget

Workflow Widget
Workflow Widget

Add some comments

Comments on the Workflow
Comments on the Workflow

Click submit and login with the userid of the first step assignee.

Open Workflow
An open workflow in a landing page

Here, you see your open workflow step in the “My Assignments” widget. Clicking on the entry opens the Approval widget

Approval in the workflow
Approval in the workflow

By clicking on the attachment at the right side, the attachment can be opened, downloaded or the properties can be checked.

Attachment
Attachment

The properties look like

Attachment Properties Window
Attachment Properties Window

Now after the examination, you can click on “Approve” and add a comment.

Then the Workflow Step is approved. The entry in MyAssignments is removed. The workflow is on the next step.

 

Easy, ist’t it?

A new SDK in Town: Content Server SmartUI SDK – First glimpse

Did you ever wonder, how to create new widgets or forms for the new SmartUI of the content server? The new SmartUI is responsive and can be used on mobile devices.

smartui

If you want to add new widgets or modify things, there is a new SDK on the knowledge center, which can be found here:

This are the components:

  • CSUI SDK Intro.pptx
    this is a powerpoint presentation on the SDK.
  • csui-doc-16.0.3.zip (1.7MB)
    this is the documentation as stand alone.
  • csui-sdk-16.0.3.zip (53.5 MB)
    this is the sdk itself. It contains a copy of the documentation.
  • csui-style-override-kit-16.0.3.zip (122 kb)
    this is a kit to provide branded css files, which will be used instead of the original ones.
  • generator-csui-extension-16.0.3.zip(51.9 MB)
    this is a generator, which will be used to setup an empty development project.

 

The basic requirement is the installation of node.js at your CSIDE machine.  You should be familiar with the REST API and Grunt to use the SDK.

The workflow is

  1. Generate an empty project on the harddisc
  2. Install all prerequisites in node.js (npm, grunt-cli)
  3. Modify the example according to your needs
  4. Import the module in out-module of your project into CSIDE
  5. Copy the widgets etc into your support folder
  6. Create the module in CSIDE and install it

The installed new Widget

Then you should see the example widget under the name of your module in the perspective manager.

Watch for upcoming posts on this exciting new Content Server technology.