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)
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 aqoute
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
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 aqoute
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
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.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 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.
Then a Parameter Window opens. The Webreport can be startet by pressing the button “Run Webreport”
A feedback can be given from the Webreport like this
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.
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!!