OpenText Content Server Smart UI:

Building and Customizing Solutions for

Content Server

Darren Hodder, Product Manager; Franz Heiß, Senior Product Manager | July 9, 2017
Agenda

• Content Suite 16.2 Customization Overview

• Highlights of What’s New in 16.2
• In-depth Look at the Smart UI SDK
• Q&A

OpenText Confidential. ©2017 All Rights Reserved. 2

What’s New in OpenText
Content Suite EP2?

OpenText Confidential. ©2017 All Rights Reserved. 3

OpenText Confidential. ©2017 All Rights Reserved.
Smart UI features that
simplify workflow,
collaboration, markup,
viewing and Records
Management

OpenText Confidential. ©2017 All Rights Reserved. 4

And Connected
Workspaces are
supercharged with
a new Outlook
add-on to browse
workspaces and
add content
directly from
Microsoft®
Outlook
OpenText Confidential. ©2017 All Rights Reserved. 5
And the new Carousel
Widget makes it easy Users can
advance by
to tailor perspectives, clicking on dots

allowing users to flip

through several
“slides” of dynamic
content from a single
tile

OpenText Confidential. ©2017 All Rights Reserved. 6

For a deeper level of
customization, the new
Content Server Smart UI
SDK enables developers
and administrators to tailor
the new UI quickly and
easily

OpenText Confidential. ©2017 All Rights Reserved. 7

OpenText Smart UI 16.2

Users can now participate in workflows and view documents of any type via the Smart UI

Apply and edit Records Management and Physical Objects metadata within Smart UI

Support for Virtual Folders, Table Key Lookup Attributes and Generations

Document overview page provides the ability to control for viewing, downloading, editing, or accessing metadata

Uploading multiple documents with required attributes is simplified with an “Apply to all” capability for metadata

Enhanced keyboard navigation for accessibility

OpenText Confidential. ©2017 All Rights Reserved. 8

OpenText Content Suite 16
EP2 continues to transform
the user experience to
improve personal productivity
with…

OpenText Confidential. ©2017 All Rights Reserved. 9

Developing in the Smart UI

xECM Platform and Solution Data Transfer Interface

Accelerators*
Configuration Business Transport
Perspective CSUI
Workspaces
Manager Widgets
Connected Classic UI
Collaboration Workspaces
Widgets
CS SDK Content
(Oscript) Intelligence*
Data APIs Development APIs

Content
Smart
(CWS)
REST SOAP Intelligence* UI
SDK

External Applications
Mobile
Applications

*additional license required

OpenText Confidential. ©2017 All Rights Reserved. 10

Smart UI Personalization - Feature Overview
Content Server
Layout Types Widgets Features
• Flow • Favorites • Custom View • Default perspectives
• L-C-R • My Assignments Search • Perspective manager
• Tabbed flow • Node Table • Shortcut
• Recently • Welcome Tile
Accessed • Activity (Social)

Connected Workspaces Content Intelligence SDK

Layout Types Features
Widgets
• Grid • CSS Overrides
• Related workspaces
• Header • Integrate widgets
Widgets • Develop new widgets
• Team • HTML
• Workspaces • Create UI for custom
• Custom List solutions
• Metadata • Carousel
• Visualization

OpenText Confidential. ©2017 All Rights Reserved. 11

Content Intelligence

OpenText Confidential. ©2017 All Rights Reserved. 12

OpenText Content Intelligence 16.2

New Visual Data Widget accelerates insight and corrective action by quickly
graphing Content Server information in the new Smart UI

New Carousel Widget easily tailors perspectives to departments, personas,

or tasks by providing several “slides” of dynamic content in a single tile

Initial support has been added for ActiveView, WebReport, and LiveReport
object in the Transport mechanism

POST method added to Enhanced REST API

OpenText Confidential. ©2017 All Rights Reserved. 13

HTML WebReport

• Use common web standards to

develop custom content
• Supports HTML, JS and CSS
• Leverage libraries used for the
Smart UI
• Integrate CSUI SDK components
into your widget

OpenText Confidential. ©2017 All Rights Reserved. 14

Example: Our Internal PM Ops Area

OpenText Confidential. ©2017 All Rights Reserved. 15

Nodes List WebReport

• Quickly create custom lists for use

in the Smart UI
• No development or coding is
required
• Data can be configured using
standard WebReports data
sources
• Supports expanded view

OpenText Confidential. ©2017 All Rights Reserved. 16

Example: Engineering Department on Ollie

OpenText Confidential. ©2017 All Rights Reserved. 17

Visual Count

• Visualize Content Server

information using an supported
Content Intelligence data source
• Zero-development
• No coding necessary, just configure data
source

• Expanded view provides dynamic

filtering of data
• Supports optional quick buttons to
custom actions (such as export to
CSV)
OpenText Confidential. ©2017 All Rights Reserved. 18
Widget Carousel

• Carousel framework loads

custom slides
• Slides are loaded asynchronously
for optimal loading performance
• Supports content created using
Content Intelligence widgets, such
as the Visual Count Widget

OpenText Confidential. ©2017 All Rights Reserved. 19

REST Enhancement - Support for POST

• New POST call for WebReport nodes

post api/v1/nodes/{id}
• Supports calling WebReport with POST-type destinations, such as:
• Workflows
• Desktop
• Email
• Form

• These additional destination types provide actions to start workflows, send

emails, download to desktop, etc from the new Smart UI

OpenText Confidential. ©2017 All Rights Reserved. 20

Content Intelligence REST API

OpenText Confidential. ©2017 All Rights Reserved. 21

Content Intelligence REST example

• Use the Content Intelligence REST API to easily get authenticated, and
richly formatted data into external applications

OpenText Confidential. ©2017 All Rights Reserved. 22

Example: WebReports Rest API Usage

OpenText Confidential. ©2017 All Rights Reserved. 23

Inclusion in Smart UI SDK

• Content Intelligence widget

components are provided in the
Smart UI SDK
• Components can be used in
integration scenarios in external
systems
• Components can be leveraged in
the HTML WebReport widget
using the SDK

OpenText Confidential. ©2017 All Rights Reserved. 24

OpenText Confidential. ©2017 All Rights Reserved. 25
Smart UI SDK

OpenText Confidential. ©2017 All Rights Reserved. 26

Smart UI Architecture

• HTML5, JavaScript, CSS

• REST API
• Based on Widgets used in
integrations like SAP, Oracle,
SharePoint

OpenText Confidential. ©2017 All Rights Reserved. 27

Content Server REST API

• Web API implementation using HTTP

and REST principles
• Based on 4 primary HTTP verbs (Get,
Put, Post, Delete )
• Returns JSON
• Focused on Smart UI: no complete CS
API up to now
• Documentation in My Support: Content
Server REST API 16.2
• Extensible by Partners

OpenText Confidential. ©2017 All Rights Reserved. 28

What is the Smart UI SDK

• Framework for a modern JavaScript based Content Server UI

• A set of selfcontained components and extension points, along with
documentation and samples for each
• Prepared Development project, which allows to develop, test and deploy in
the IDE of your choice
• Built on state of the art client-side UI technology (Backbone MVC,
RequireJS, Node.js dev infrastructure)

NOT part of the Content Server SDK; no extra license costs

OpenText Confidential. ©2017 All Rights Reserved. 29

Smart UI SDK Deliverables
• SDK package
• Libraries and sources
• Documentation, samples

• Extension project
• Yeoman project generator, sample widget
• Grunt based project infrastructure, testing
infrastructure
• Builds create JavaScript libraries, CS
deployment module

• IDE of your choice, like Visual Studio,

Eclipse, WebStorm
• Style override kit (for CSS developers)
• Smart UI SDK Forum

OpenText Confidential. ©2017 All Rights Reserved. 30

Smart UI SDK in Numbers
• Available since December 2016
• 10 extension points, 20 controls
• 30 widgets, 40 models
• 50 JavaScript/CSS libraries
• jQuery, Backbone, Marionette, Alpaca,
Bootstrap/BINF, moment.js, ...

• 750 JavaScript classes, 2000

methods

OpenText Confidential. ©2017 All Rights Reserved. 31

Preliminaries

• In order to be able to use the SDK, you should have a solid knowledge of OO
JavaScript, requirejs, the MVC libraries Backbone and Marionette, jQuery, and
Grunt as a building tool.
• See, e.g. Links
• Backbone hompage http://backbonejs.org/
• Marionette’s homepage http://marionettejs.com/
• Require’s homepage http://requirejs.org/
• Grunt’s homepage http://gruntjs.com/
• Backbone/Marionette/RequireJS TodoMvc http://jsoverson.github.io/todomvc/labs/dependency-
examples/backbone_marionette_require/

• And Books
• https://www.manning.com/books/javascript-application-design as a general introduction (covering Grunt)
• http://shop.oreilly.com/product/9780596806767.do Stoyanow’s JavaScript patterns
• http://shop.oreilly.com/product/9780596805531.do Flanagan’s basic introduction

OpenText Confidential. ©2017 All Rights Reserved. 32

What can you do with the Smart UI SDK
• Customizing the Smart UI look & feel
• Styling can be overridden by custom style sheets
• For example customize page header, background,
colors, icons
• Integrate Smart UI widgets in other
applications
• Developing custom widgets
• Implementing CS solutions in Smart UI
• Supporting new object types (sub-types)
• Adding/removing actions
• Extending metadata pages
• Use controls like Modal Alert, Node Picker, …

OpenText Confidential. ©2017 All Rights Reserved. 33

Customizing the Smart UI Look & Feel
What Is Style Override?
A selector contains an original style defined by Smart UI default theme:
body.binf-widgets {
background: linear-gradient(to bottom, #004b71 0%, #00a4d8 100%);
background-attachment: fixed;
}

The same selector with an additional style either replaces or extends the original stykle:
body.binf-widgets {
background: linear-gradient(to bottom, #00714b 0%, #00d8a4 100%);
}
Anatomy Of Style Overrides
Style overrides are a directory with stylesheets, fonts and images, which are
supposed to be loaded via a single (master) stylesheet, which is supposed to be
placed after the original Smart UI main stylesheet.

alberi/
fonts/ Font faces used in the local stylesheet
images/ Images referred from the local stylesheet
damascus-pattern.jpg
favourites.svg
overrides.css “master” stylesheet with overridden styles
From Bootstrap to BINF

• In SmartUI, you have the complete Bootstrap styles and plugins available
for building your widgets
• Original Bootstrap however is meant to be used exclusively on a page,
while SmartUI widgets used in integration scenarios cannot expect to be
alone.
• With BINF, every former Bootstrap style got now prefixed with ‘binf-’
• e.g. the Bootstrap CSS class btn became binf-btn, dropdown-menu became binf-
dropdown-menu, etc.

OpenText Confidential. ©2017 All Rights Reserved. 37

What you have to know about Style Overrides

• Style Overrides offer the same power as full styling

• But this flexibility has a price:
• There is no guarantee that underlying styles will not change; they can change with Content
Server updates
• Testing/adapting style overrides with Content Server updates necessary

Do the changes needed, but try to limit the changes you do

OpenText Confidential. ©2017 All Rights Reserved. 38

Integrate Smart UI Widgets in other applications

• Available Widgets:
• Base Widgets: Favorites, Assignments,
Recently Accessed, Shortcut, Browse Table,
Custom View Search, Search Results,
Activity Feed
• Web Reports: HTML, Nodes List, Visual
Data, Carousel
• Extended ECM: Workspace header,
Business Attachment, MSFT Group
widgets…
• …
• Widgets can be used in applications
like SAP, Salesforce, SharePoint
• New UI features will be available in
integrations without coding changes
OpenText Confidential. ©2017 All Rights Reserved. 39
Integration Code Sample (NodesTable)
<script src="//server/otcs/cs/widgets?crossOrigin=true"></script> Load OpenText JavaScript
<link rel="stylesheet" href="//server/otcssupport/csui/themes/carbonfiber/theme.css"> Load OpenText style sheets

<div id="browser” class=“binf-widgets”></div> Widget placeholder

csui.onReady2([’csui/widgets/nodestable/nodestable.view’], function (NodesTableView) { Initialize widget

var context = new BrowsingContext(),

nodesTableView = new NodesTableView({

context: context
data: {
start: {id: 2000}
}
}),

nodesTableRegion = new Marionette.Region({el: '#browser'});

nodesTableRegion.show(nodesTableView);
context.fetch(); Fetch widget data from server
});
Developing custom widgets

OpenText Confidential. ©2017 All Rights Reserved. 41

Application Widget: Create
• Setup
• Create folder src/widgets/<name>
• Create main view (controller)
<name>.view.js
• Create widget manifest
<name>.manifest.json
• Refer to the main view module from the main
bundle
• Register the widget for discovery API

• Access Data
• Create model and factory for the context
• Request the model in the main view
• Use the model in the view template

OpenText Confidential. ©2017 All Rights Reserved. 42

Supporting New Object Types

User Interface for new object types

can be provided:
• Object type specific icon
• Custom actions, including
default action
• Custom metadata page(s)
• Perspective Override

OpenText Confidential. ©2017 All Rights Reserved. 43

Implementing Custom Commands

• Browse Table
• Add Item menu
• Current Item menu
• Top action bar
• Inline Action bar

• Expanded tiles: Favorites,

Recently Accessed
• Search Results

OpenText Confidential. ©2017 All Rights Reserved. 44

Custom Columns

• REST API: provide custom

column list
• Render custom column data
type (CellViews)
• Status columns
• Actionable
• Needed space allocated
dynamically

OpenText Confidential. ©2017 All Rights Reserved. 45

Metadata Page Extensions

• New metadata pages

• New sections
• New fields in “General”
• Custom Add menu

OpenText Confidential. ©2017 All Rights Reserved. 46

Metadata Page Extensions

• Think carefully which

extension option you use
• Everybody wants to be on the
first place…
• Introduce action fields to
switch to other pages?

OpenText Confidential. ©2017 All Rights Reserved. 47

Public Models/Controls/Dialogs

• Models (Data layer)

• Node model
• Member model
• Ancestor collection (breadcrumb)

• Controls (Presentation layer)

• List View
• Table View
• Form View

• Dialogs
• Node Picker
• Modal Alerts
• File Open

OpenText Confidential. ©2017 All Rights Reserved. 48

Thank you

twitter.com/opentext

facebook.com/opentext

linkedin.com/company/opentext

opentext.com
OpenText Confidential. ©2017 All Rights Reserved. 49