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

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 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

Improved smartUI Webreport Usability

The usability of Webreports in smartUI has been improved. Now, you can, after starting a Webreport, edit the parameters of that report and receive feedbacks from the running Webreport. This makes a lot of fun!

Lets see, how this is done.

First a table.report widget can be used to list all data.

Click on a Webreport to start it

Then a Parameter Window opens. The Webreport can be startet by pressing the button “Run Webreport”

Webreport Parameters can be edited
Webreport Parameters can be edited

A feedback can be given from the Webreport like this

Running webreports can give Feedbacks to SmartUI
Running webreports can give Feedbacks to SmartUI

The table.report shows a Smart UI table based on the output of WebReports data. The WebReport used by this widget must be based on either the widget_table_report_process_data_in_webreport or widget_table_report_process_data_in_datasource default reportviews which use the INSERTJSON @TABLEREPORT directive.

   // Create the data managing context
      var context = new PageContext(),
      sampleTableReportView = new TableReportView({
          context: context,
          data: {
            id: 24024,
            sortBy: "SubType",
            SortOrder: "ASC",
            columnsWithSearch: "SubType",
            titleBarIcon: 'mime_audio',
            title: 'Sample WebReports Table',
            header: true,
            swrLaunchCell: {
                id: 12345,
                iconClass: 'my-icon-class',
                hoverText: 'Some hover text for my icon.'
            },
 parameters: [
                {
                    name: 'myparm1',
                    value: 'val1'
                },
                {
                    name: 'myparm2',
                    value: 'val2'
                }
            ]
          }
      }),
      // Create helpers to show the views on the page
      region = new Marionette.Region({
        el: "#content"
      });

      // Show the views on the page
      region.show(sampleTableReportView);

      // Fetch the WebReport output from the server to populate the tile with
      context.fetch();

The parameter window can be implemented like this (the xxxxxx is the node number for the webreport)

  var promptView,
        promptModel,
        contentRegion = new Marionette.Region({el: "#content"}),
        pageContext = new PageContext(),
        currentNode = pageContext.getModel(NodeModelFactory, {attributes: {id: xxxxxx}}),
        runWRModel = pageContext.getModel(PromptModelFactory, {
            attributes: {
                node: currentNode
            }
        }),
        runWRController = new RunWRController();
pageContext.fetch()
            .done(function () {

                // We've got the page context, now get the runWRModel to see if there are parameters:
                runWRController.getRunWRPreModel({
                    node: currentNode,
                    context: pageContext
                }).done( function(){

                    // Build the prompt view and show it:
                    promptView = new PromptView({
                        context: pageContext,
                        model: currentNode,
                        promptModel: runWRController.runWRPreModel,
                        showBackIcon: false
                    });

                    contentRegion.show(promptView);
                });
            })

A feedback is implemented by the status.screen control.

  require(['csui/lib/underscore', 'csui/lib/marionette', 'csui/utils/contexts/page/page.context',  'csui/utils/contexts/factories/connector',
  'csui/controls/globalmessage/globalmessage',
  'webreports/controls/status.screen/status.screen.view',
  'webreports/models/run.webreport.pre/run.webreport.pre.model',
  'webreports/models/run.webreport/run.webreport.model',
  './status.screen.mock.js'
  ], function (_, Marionette, PageContext, ConnectorFactory, GlobalMessage, StatusScreenView, WebReportRunModelPre, WebReportRunModel, WRMock) {

  var statusView,
  context = new PageContext(),
  connector = context.getObject(ConnectorFactory),
  region = new Marionette.Region({el: "#webreport-status-screen-demo"}),
  attributes = { id: xxxxxx },
  options = { connector: connector },
  WRRunPreModel = new WebReportRunModelPre(attributes, options),
  WRRunModel = new WebReportRunModel(attributes, options);
  WRMock.enable(); // Mockup for local tests
WRRunPreModel
  .fetch()
  .done( function(){

WRRunModel
  .fetch()
  .done( function(){
statusView = new StatusScreenView({
  destinationModel: WRRunPreModel.destinationModel,
  executeModel: WRRunModel});
  region.show(statusView);
  })
  })

});

Working with WebReports and SmartUI now makes a lot of fun!

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);