OpenText Media Management CE 22.2 - HTML5 Integration Guide English (MEDMGT220200-AIG-EN-02)

OpenText™ Media Management
HTML5 Integration Guide
This guide contains instructions on how to write, deploy, and

manage integrations for the OpenText Media Management
HTML5 User Interface.
MEDMGT220200-AIG-EN-02
OpenText™ Media Management
HTML5 Integration Guide
MEDMGT220200-AIG-EN-02
Rev.: 2022-May-05
This documentation has been created for OpenText™ Media Management CE 22.2.
It is also valid for subsequent software releases unless OpenText has made newer documentation available with the product,
on an OpenText website, or by any other means.
Open Text Corporation
275 Frank Tompa Drive, Waterloo, Ontario, Canada, N2L 0A1
Tel: +1-519-888-7111
Toll Free Canada/USA: 1-800-499-6544 International: +800-4996-5440
Fax: +1-519-888-0677
Support: https://support.opentext.com
For more information, visit https://www.opentext.com
Copyright © 2022 Open Text. All Rights Reserved.

Trademarks owned by Open Text.
One or more patents may cover this product. For more information, please visit https://www.opentext.com/patents.
Disclaimer
No Warranties and Limitation of Liability
Every effort has been made to ensure the accuracy of the features and techniques presented in this publication. However,
Open Text Corporation and its affiliates accept no responsibility and offer no warranty whether expressed or implied, for the
accuracy of this publication.
Table of Contents
1 Introduction ................................................................................ 9
1.1 JavaScript API documentation ......................................................... 10
1.2 REST API documentation ................................................................ 10
1.3 Examples pack ............................................................................... 10
1.3.1 Examples pack setup ...................................................................... 11
2 Environment ............................................................................. 13
2.1 Layout ............................................................................................ 13
2.2 Production code .............................................................................. 15
2.2.1 Source maps .................................................................................. 15
2.2.2 Debug mode ................................................................................... 16
3 Start integration development ................................................ 17

3.1 Set up a development environment .................................................. 17
3.1.1 Requirements ................................................................................. 17
3.1.2 Set up a development directory ........................................................ 18
3.1.3 Set up Chrome workspaces ............................................................. 18
3.2 HTML imports ................................................................................. 19
3.2.1 otui.Templates.load() ....................................................................... 19
3.3 HTML templates ............................................................................. 19
3.4 Leaner CSS (LESS) ........................................................................ 20
3.4.1 Including LESS files directly ............................................................. 20
3.4.2 LESS files on production environments ............................................. 20
3.4.3 Useful LESS files included with OTMM ............................................. 20
3.5 JavaScript tips ................................................................................ 21
3.5.1 Encapsulation of code ..................................................................... 21
3.5.2 otui.ready ....................................................................................... 21
3.6 Internationalization and localization .................................................. 22
3.7 Document Object Model sanitization ................................................. 22
4 Menu entries ............................................................................ 23

4.1 Common functions .......................................................................... 23
4.2 Types of menu entries ..................................................................... 23
4.3 Setup function ................................................................................. 24
4.4 Useful functions .............................................................................. 24
4.5 Main menu ..................................................................................... 25
4.6 Multiple asset menu entries ............................................................. 26
4.6.1 Multiple asset menu entries example ................................................ 27
4.7 Single asset menu entries ................................................................ 28
5 Status icons ............................................................................. 31
MEDMGT220200-AIG-EN-02 HTML5 Integration Guide iii

Table of Contents
6 Entry points .............................................................................. 33

6.1 Main area entry point ....................................................................... 33
6.2 Asset Detail view entry point ............................................................ 33
6.3 Folder Detail view entry point ........................................................... 33
6.4 Folder Gallery view entry point ......................................................... 33
6.5 Job Detail view entry point ............................................................... 34
6.6 Task Detail view entry point ............................................................. 34
6.7 Alternate entry URLs ....................................................................... 34
6.7.1 Keyword search entry point .............................................................. 34
7 Content types ........................................................................... 35
8 Metadata lookups .................................................................... 37

8.1 Cascading group extensions ............................................................ 37
9 Templates ................................................................................. 43
9.1 Custom elements ............................................................................ 44
9.1.1 ot-resource ..................................................................................... 44
9.1.2 ot-metadata .................................................................................... 44
9.1.3 ot-rendition ..................................................................................... 45
9.1.4 ot-i18n ............................................................................................ 45
9.1.5 ot-point ........................................................................................... 45
9.1.6 ot-select ......................................................................................... 46
9.2 Overriding and altering templates ..................................................... 46
9.3 Modifying the legal terms and conditions .......................................... 48
9.4 Cross-platform templates ................................................................. 49
10 Localization .............................................................................. 51
10.1 Mark text for translation ................................................................... 51
10.1.1 Format ........................................................................................... 51
10.1.2 Basic usage .................................................................................... 52
10.1.3 Plurals ............................................................................................ 53
10.1.4 Context .......................................................................................... 54
10.1.5 Style ............................................................................................... 55
10.1.5.1 Styled replacements ........................................................................ 55
10.1.5.2 Styled text ...................................................................................... 56
10.1.6 Tips and tricks to localize ................................................................. 56
10.2 Generate, localize, and deploy custom UI integration messages ........ 57
10.2.1 To generate a POT file .................................................................... 58
10.2.2 To generate a localization (PO) file from the template (POT) .............. 58
10.2.3 To deploy a localization file for your custom UI integration messages ...59
10.2.3.1 To deploy a custom localization for a new locale ............................... 60
10.2.3.2 To deploy a new custom localization for an existing locale ................. 60
iv OpenText™ Media Management MEDMGT220200-AIG-EN-02

Table of Contents
10.2.3.3 To replace existing, localized custom UI messages ........................... 60

10.2.3.4 To merge existing, localized custom UI messages ............................. 61
10.3 Apply localized text for database labels to the user interface .............. 62
11 User notifications, alerts, and confirmations ....................... 63

11.1 Select a notification type .................................................................. 63
11.2 Non-modal notifications ................................................................... 63
11.3 Alerts ............................................................................................. 64
11.4 Confirmation dialog boxes ............................................................... 65
12 Interface with OTMM ............................................................... 67

12.1 Function enablement tokens ............................................................ 67
12.2 User preferences ............................................................................ 67
12.3 System settings .............................................................................. 68
12.4 User details .................................................................................... 69
12.5 Assets, folders, keyword search, and reviews ................................... 70
12.5.1 Services ......................................................................................... 70
13 Views ........................................................................................ 73
13.1 Create a view .................................................................................. 73
13.1.1 Create the content template ............................................................. 73
13.1.2 Definition function ........................................................................... 74
13.1.2.1 Properties ....................................................................................... 74
13.1.2.2 Content function .............................................................................. 74
13.1.2.3 Watch properties ............................................................................. 75
13.1.2.4 Event listeners ................................................................................ 75
13.1.2.5 Additional functions ......................................................................... 76
13.1.2.6 Additional constructor ...................................................................... 76
13.1.3 Display the view as a dialog box ....................................................... 76
13.1.4 Display the view as a main application area ...................................... 76
13.1.4.1 Define the route URL and its mappings ............................................. 77
13.1.4.2 Use the route URL .......................................................................... 79
13.2 Functionality within views ................................................................. 79
13.2.1 Display resources ........................................................................... 79
13.2.1.1 Add resource elements to a template ............................................... 79
13.2.1.2 Apply the resource to that template .................................................. 80
13.2.1.3 Use ot-resource for third party resources .......................................... 80
13.2.2 Collapsible sidebars ........................................................................ 81
13.2.3 Sidebar styles ................................................................................. 82
13.3 Chains of requirement ..................................................................... 82
13.4 View mixins .................................................................................... 82
13.5 Composite views ............................................................................. 83
13.5.1 Freeflow composites ....................................................................... 83
MEDMGT220200-AIG-EN-02 HTML5 Integration Guide v

Table of Contents
13.5.2 Tabbed composites ......................................................................... 84

13.5.3 Add views to a composite view ......................................................... 84
13.6 Extend views .................................................................................. 85
13.7 Augment views ............................................................................... 85
14 Widgets ..................................................................................... 87
14.1 Configure OTMM ............................................................................ 88
14.1.1 To configure CORS to allow access to OTMM widgets ...................... 89
14.1.2 To configure extensions to be visible outside of OTMM ...................... 89
14.2 Get embed code ............................................................................. 90
14.3 Include widgets on a page ............................................................... 90
14.3.1 To include widgets on a page manually ............................................ 90
14.3.1.1 To include Folders widget functionality ............................................. 91
14.3.1.2 To include Saved searches widget functionality ................................. 93
14.3.1.3 To include Asset widget functionality ................................................ 95
14.3.1.4 To include Upload widget functionality .............................................. 96
14.3.2 Include a widget programmatically .................................................... 97
14.3.2.1 Load widgets after page load ........................................................... 98
14.4 Authenticate widgets in host applications .......................................... 99
14.4.1 To specify the session headers ...................................................... 100
14.4.2 To configure authentication on the OTMM server ............................ 100
14.5 How to interact with widgets ........................................................... 102
14.5.1 Widget attributes ........................................................................... 103
14.5.2 Widget features ............................................................................. 103
14.5.3 Widget events ............................................................................... 103
14.6 Style and position widgets ............................................................. 103
14.6.1 To add custom styles to widgets ..................................................... 104
15 Prepare integrations for production .................................... 105

15.1 Generate translations .................................................................... 105
16 Style the application .............................................................. 107

16.1 Create a brand .............................................................................. 108
16.1.1 Brand limitations ........................................................................... 109
16.1.2 To create an advanced brand ........................................................ 109
16.1.3 Use branding helpers .................................................................... 111
16.1.3.1 To add branding helpers ................................................................ 111
16.1.3.1.1 To set the home screen background ............................................... 112
16.1.3.1.2 To set the logo .............................................................................. 113
16.1.3.1.3 To set the color scheme ................................................................ 114
16.1.3.1.4 To set the header background color or image ................................. 116
16.2 Create a theme ............................................................................. 117
16.3 To copy and override style sheets .................................................. 118
vi OpenText™ Media Management MEDMGT220200-AIG-EN-02

Table of Contents
16.3.1 To change images or icons ............................................................ 118

16.3.2 To change basic display elements .................................................. 119
16.3.3 To change colors .......................................................................... 119
17 HTML5 UI examples ............................................................... 121

17.1 Create an alert menu integration .................................................... 121
17.2 Create a custom view .................................................................... 122
17.2.1 Add dynamic content to the page ................................................... 126
17.2.2 Add the asset action bar to the UI .................................................. 130
17.2.3 csRecentView ............................................................................... 131
17.2.4 Launch a custom job ..................................................................... 133
17.3 Add a global custom footer ............................................................ 134
GLS Glossary 137
MEDMGT220200-AIG-EN-02 HTML5 Integration Guide vii

Chapter 1
Introduction
This guide contains instructions on how to write, deploy and manage integrations
for the OpenText Media Management (OTMM) HTML5 User Interface (UI).
The HTML5 UI for OTMM is a new interface built using the latest standards of
HTML5, CSS3, and JavaScript. It uses a combination of JavaScript views and HTML
templates to drive the presentation and functionality of the UI.
The following are key points for the HTML5 UI:
• It is a singular-page application.
• All business logic and display templates are retrieved from the HTML5 UX
server upon page load. There is a complete separation between the data for assets
and resources and their display.
• All data from OTMM is retrieved from the REST API server in the JSON format.
This is always just data. It is never combined with its display when downloaded.
This is in contrast with a technology such as JSP, where a full page may be
downloaded that contains both the data and its display code.
Important
Due to framework changes, the following areas of the OTMM Web Client UI
are not currently customizable:
• Announcements on the Home page

• Jobs Dashboard
• Stock Libraries
• Asset Detail view
– Asset preview and Deep Zoom

– Usage tab
– Metadata tab, read-only and edit modes
• Review task for a custom job (Task details page > Review)
MEDMGT220200-AIG-EN-02 HTML5 Integration Guide 9

Chapter 1 Introduction
1.1 JavaScript API documentation

On a deployed version of OTMM, you can access the JavaScript API documentation
through the URL /otmm/ux-html/doc. The JavaScript API documentation contains
useful functions and examples on how to use core functions of the UI framework.
1.2 REST API documentation

On a deployed version of OTMM, you can access the REST API documentation
through the URL /swagger-ui. The REST API documentation contains information
about how to make calls to the REST API to achieve functions within OTMM such as
retrieving and saving assets, performing searches, starting workflows, and more.
1.3 Examples pack

Important
• This should only be accessed on a staging or development platform, not on

a production platform.
• There is no documented process about modifying the original source code,
manually altering the minified version of the code, or manually altering the
unminified version and re-minifying it. This is because this method of
alteration is not supported in the HTML5 UI as it would introduce large
maintainability and upgradeability overheads. Any form of required
extension or modification should be possible through extensions without
ever touching the original source code.
This guide comes with an examples pack, contained in an installed folder, which can
be used as a reference guide for integration development.
To activate the examples pack within OTMM:
1. Navigate to the deployment folder for OTMM.
2. Copy the cs-examples folder from otmmux.war/ux-html/demo to the parent

directory (otmmux.war/ux-html).
3. Reload your OTMM environment. It may take up to 30 seconds for the

examples to be recognized by the server so if they do not appear immediately,
wait 30 seconds and then try again.
If the examples have loaded successfully, there will be an extra menu entry available
called Code examples.
10 OpenText™ Media Management MEDMGT220200-AIG-EN-02

1.3. Examples pack
1.3.1 Examples pack setup

For the examples to work, there first needs to be a new lookup domain added to the
system. This lookup domain should be as follows:
Name
ARTESIA.DOMAIN.USERNAMES
Database Table
USERS
ID (Join) Column
LOGIN_ID
Value (Display) Column
NAME
Order By
NAME

Chapter 2
Environment
This section discusses the Media Management HTML5 UI layout and production
code.
2.1 Layout
The Media Management HTML5 UI layout is in the deployment folders under the
following folder:
artesia.ear/war/otmmux.war/ux-html
This folder contains the following subfolders.
adobe connector
Used for closing the authentication panel for the OpenText™ Media
Management Connector for Adobe Creative Cloud™.
app
Contains the core JavaScript code and styles for the HTML5 User Interface (UI).
branding
Contains all customer created brand information for the application, such as
HTML, Cascading Style Sheets (CSS) and JavaScript.
compliance
Contains JavaScript code that deals with accessibility for the end user.
debug
This folder is included as a shortcut for accessing the debug mode of the
application. For more information, see “Production code” on page 15.
demo
Unused.
dist
Contains the minified, concatenated code used with the production version of
the application. For more information, see “Production code” on page 15.
dist_appworks
Contains the minified, concatenated code used with the production version of
our AppWorks app.
doc
Contains the API documentation for the HTML5 UI. For more information, see
“JavaScript API documentation” on page 10.

Chapter 2 Environment
error
Contains an error page that is displayed to users who are attempting to access
the application using an unsupported browser.
lib
Contains third-party libraries that are used with the HTML5 UI.
locale
Contains the default core translations and localizations for the HTML5 UI.
META-INF
Contains information for the deployment server.
otmm
Contains the core JavaScript code, styles, and templates for the full version of
the HTML5 UI.
otmm/model/manager
Contains all the REST API interfaces that OTMM uses to fetch data that you can
use for your customizations.
Important
You can reuse the existing REST API code for your customization. The
code in the otmm/model/manager folder may be modified, deprecated or
removed in future releases.
result-mosaic
Contains the HTML, CSS, and JavaScript code required to support the Mosaic
layout throughout the application. This is used in various Gallery views.
style
Contains all the stylesheets and images used for the HTML5 UI.
ui
Contains core JavaScript code for the HTML5 UI.
widget
Contains the core JavaScript code, styles and templates for external widgets.
otmm/view/home-new
Contains new Home page and the widgets that are used in it.

2.2. Production code
2.2 Production code

When accessing the production environment of the OTMM HTML5 UI, which is
typically available under the URL/otmm or /otmm/ux-html folder, all the code,
templates, and styles are delivered from the dist folder in a minified and
concatenated version for speed and efficiency purposes. However, this makes it
slightly more difficult to perform client-side analysis of any issues that may arise
within the HTML5 UI as well as making it more difficult for Integrators to examine
examples that may come with the code. Therefore, to make debugging easier,
OTMM includes source maps and a debug mode.
Note: Due to framework changes, the following areas of the OTMM Web
Client UI are not customizable and integration development is currently
unavailable. In addition, source maps are not available for these areas.

• Jobs Dashboard
• Stock libraries
• Asset Detail view areas:

– Usage tab
– Metadata tab
2.2.1 Source maps

All production code JavaScript includes both a minified and a non-minified version.
The minified version is always used within production code. But because the
minified version is unreadable by humans, there is also a source map for each file,
which browser debuggers can use to map from the minified to the non-minified
version of the code. Using this functionality, it is possible to interact with the
minified version of the code by looking at the non-minified code.
• To enable source maps in Google Chrome™ (used for debugging purposes), see
the following link: https://developer.chrome.com/devtools/docs/javascript-
debugging#source-maps
• To enable source maps in Mozilla® Firefox® (used for debugging purposes), see
the “Seeing Results” section in the following link:
https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-
source-maps/
• Apple Safari 7 and higher has source maps enabled by default.
• Microsoft® Internet Explorer® does not support source maps.

Chapter 2 Environment
2.2.2 Debug mode

If you need a more comprehensive suite for investigating issues or developing
extensions, you can use the HTML5 UI debug mode. Access debug mode with the
following URL:
/otmm/ux-html/index-dev.html
Note: Instead of using concatenated or minified sources, debug mode uses the
individual files that make up the interface. As a result, it is slower to load.
Therefore, debug mode is not intended to be used in a production
environment.

Chapter 3
Start integration development
This section discusses how to start and integration development.
Note: Due to framework changes, the following areas of the OTMM Web
Client UI are not customizable and integration development is currently
unavailable:

• Jobs Dashboard
• Stock libraries
• Asset Detail view areas:

– Usage tab
– Metadata tab
3.1 Set up a development environment

This section discusses required tools, setting up a development directory, and
Google Chrome™ (Chrome) workspaces.
3.1.1 Requirements
The following tools are required to create integrations for the HTML5 UI:
• A web browser. OpenText recommends Chrome .

• A text editor. OpenText recommends using Notepad++ or Chrome's
“workspaces” functionality.
• A working copy of OTMM which can be developed on.
When developing integrations, OpenText recommends that you use the debug mode
of OTMM, to allow easier inspection of the core code of the application and to allow
for in situ style editing. For more information, see “Debug mode” on page 16.
Note: Customer-specific integrations are automatically detected, allowing for

in situ integration development without the need to restart the OTMM server.
When deploying a new integration, if it does not initially appear, wait 30
seconds then try again and it should appear.

Chapter 3 Start integration development
3.1.2 Set up a development directory

Integrations can be developed in situ without restarting OTMM. To start, create a
development folder underneath the main HTML5 UX environment on the running
copy of OTMM (artesia.ear/war/otmmux.war/ux-html). This folder can have any
unique name, but OpenText recommends using the format "cs_<customer name>".
Underneath this folder, create an HTML file called include.html. The final line in
this file should be the following:
<script>otui.Templates.load()</script>
3.1.3 Set up Chrome workspaces

Chrome workspaces offer the ability to perform live editing of JavaScript and to save
those changes while the application is still running.
To set up Chrome workspaces for integration:
1. In Chrome, open the OTMM HTML5 UX on a new tab.
2. Open Chrome’s JavaScript console, Tools/JavaScript console).
3. Click the Sources tab and confirm that the development folder and the
include.html file appear under the sources for the HTML5 UX (this is the list
of sources underneath the IP address/host name for the server) on the left-hand
side.
Tip: If they do not appear, wait 30 seconds and try again.
4. Click the Cog icon at the top-right of the window.
5. Click the Workspace setting, and then click Add folder.
6. Navigate to the development folder you previously created and select it. Grant
permission to use that folder.
7. Under the sources for the HTML5 UX, find the development folder and right-
click the include.html file.
a. Select the Map file to system resource option.
b. Select the one option for include.html.
c. To restart, click OK.
On restart, the development folder will no longer be visible under the list of sources
for the HTML5 UX, but will instead have its own top-level folder. You are now
ready to use the Chrome workspaces for development. For more information about
Chrome workspaces, see https://developer.chrome.com/devtools/docs/workspaces.

3.2. HTML imports
3.2 HTML imports

HTML imports, which is one of the core underpinnings of the HTML5 UI, is an
emerging standard which uses <link> elements to "import" other HTML files into the
page. These HTML files can then include imports such as JavaScript or CSS, for
example.
Integrations for OTMM use this technology in the same way as the core OTMM UI.
As files are added to a customer-specific integration, they should be written to the
include.html file for the integration. On the next page refresh, they will be loaded
into the page.
HTML imports are written as follows:
<link rel="import" href="./path/to/import.html"/>
3.2.1 otui.Templates.load()
When using HTML imports, if you are including any new or modified templates,
you should have at the bottom of your import HTML file something like the
following:
By doing this, you will be loading the import scanner to scan the import for relevant
content to load into the UI.
3.3 HTML templates

The OTMM UX specifies the majority of its HTML markup content as HTML
templates. HTML templates are uniquely named pieces of HTML wrapped around a
<template> element, which are ingested into the UI when the page is loaded and
then referenced by the UI.
HTML templates which are put into an HTML import file are only auto-ingested in
the following cases:
• They are marked with the ot-template attribute.

• The HTML import file has a call to otui.Templates.load() in a script element
on the page.
For more information about HTML templates, see “Templates“ on page 43.

3.4 Leaner CSS (LESS)

The OTMM UX uses LESS, which is a CSS pre-processor that makes CSS
development easier. For customer-specific integrations that require extra styling,
OpenText recommends that you use LESS files. For more information about LESS,
see http://lesscss.org/.
3.4.1 Including LESS files directly

When using the debug mode of OTMM for integration development, it is possible to
use LESS files directly in the browser by including the LESS files directly, similarly
to how you would include a CSS file. One potential problem when doing this is that
LESS files included in include.html or any other import must have their paths
written as if they were from the root directory. For example:
<link rel="stylesheet/less" type="text/less" href="./cs_

demointegration/styles.less"/>
When using LESS files directly in debug mode, the watch mode is enabled. This
means that as you make changes to the LESS file, the changes are automatically
applied to the page without having to refresh.
3.4.2 LESS files on production environments

While LESS files can be included directly when developing integrations, they cannot
be used directly in production environments. For more information about
converting the LESS file links into a format suitable for production environments,
see “Prepare integrations for production“ on page 105.
3.4.3 Useful LESS files included with OTMM

The following LESS files are included with OTMM, and they contain a number of
variables and functions so your integration can achieve a similar look and feel to the
main application.
• ux-html/style/format/variables.less
• ux-html/style/format/mixins.less
When creating a LESS file, OpenText recommends including these two files at the
top of your file using a relative path. For example, if the LESS file is in:
ux-html/cs_demointegration/styles.less
Then they would be imported with these lines of code:
@import "../style/format/variables.less";
@import "../style/format/mixins.less";

3.5. JavaScript tips
3.5 JavaScript tips

The following section discusses JavaScript tips.
3.5.1 Encapsulation of code

When developing JavaScript for integrations, OpenText recommends that all
JavaScript files be encapsulated with the following code:
(function(otui)
// Code goes here
})(otui);
By encapsulating the code, you ensure that all variables created, unless attached to a
window, otui or some other global object, will not exist outside of the JavaScript file.
In this way, the chance of two pieces of code interfering with each other is greatly
reduced.
3.5.2 otui.ready
With the exception of advanced integrations involving views (see “Views“
on page 73), most integration code should be executed after the user has logged in.
To do this, the otui.ready function should be used to execute your code. For
example:
(function(otui)
function startIntegration()
// Do integration code here.
otui.ready(startIntegration);
})(otui);

3.6 Internationalization and localization

The translation and localization of translations should be considered from the start
of development. The HTML5 UI makes it easy to achieve localization. However,
follow these guidelines when displaying text to a user:
• Write the text in English but write anything which will differ in that text as a
number in braces{ }.
• Wrap the text in one of the HTML5 UI translation functions or elements, passing
in the differing parts as extra arguments in the order you specified them in.
For example, in the phrase Welcome to OpenText Media Management version 20.3,
John Doe!, the parts that may vary are the version number and the user's name.
Therefore, you would write it in JavaScript as follows:
// Assume that version and userName are variables in JavaScript
otui.tr("Welcome to OpenText Media Management version {0}, {1}!",

version, userName);
Or, if you wanted to display it directly to the user as HTML as a View (for advanced
integrations only), you could write it as follows:
<ot-i18n ot-replacements="version,userName">Welcome to OpenText Media

Management version {0}, {1}!</ot-i18n>
For more information about internationalization and localization, see “Localization“

on page 51.
3.7 Document Object Model sanitization

Any data that is fetched from third party servers, URLs, or REST API may contain
unsafe scripts. It is essential to sanitize such data before adding it to a Document
Object Model (DOM) to provide protection against security attacks.
OpenText recommends that you add data to DOM by using the textContent
property. By doing this, content that is written to a DOM will be treated as simple
text content, thus preventing attacks, even if there are some tags in the response
being written to the DOM.
If you are not using textContent because you intend to construct a DOM, use the
sanitization API as follows:
var sanitizedText = otui.sanitize("<text string>")
The above produces sanitized text. This text can safely be used to construct the
DOM. For example, you could use the innerHTML property of an element to append
child nodes.

Chapter 4
Menu entries
You can modify existing entries or add new entries to all menus within the OTMM
HTML5 UI through small pieces of JavaScript, “registering” a description for those
entries in JSON.
4.1 Common functions

The functions for adding or modifying menu entries are the same across all menus.
The functions are shown in the following table.
Function Description
register Register a new menu item, or an array of
new menu items.
remove Remove an existing menu item.
modify Get an existing menu item and modify it.
extend Register a new menu item, using an existing
menu item as the basis.
4.2 Types of menu entries

The following types of menu entries are available:
• Generic menu entries

• Resource-specific menu entries
Generic menu entries are entries that exist without the context of a specific asset or
resource, such as the main menu or the menu in the Gallery View.
Resource-specific menu entries are entries that are tied to a specific asset or resource.
When functions are called on these menu entries, a reference to the asset JSON that
the menu item is tied to is passed as a parameter.

Chapter 4 Menu entries
4.3 Setup function

You can specify a setup function for all menu entries. The setup function is called
every time the menu entry is displayed and can be used to set up context-specific
checks based on where in the application the user is, or the asset being looked at.
In the setup function, the following parameters are passed:
event
This is the setup event object.
resource
For resource-specific menu entries, this is the reference to the JSON for the asset
that this menu item precedes.
base
This is a reference to the parent element for the menu entry that is being
displayed. By using the "base" parameter, you will always have a link to the area
where the menu entry is being rendered.
In the function, the value of this is the menu entry that is being set up.
The return value from setup function decides the display of menu entry. The
following values are supported:
• true - displays the menu entry.

• false - hides the menu entry.
• "disable" - disables the menu entry.
• "enable" - enables the menu entry.
4.4 Useful functions

When writing menu entries, you may find the following functions useful.
otui.Views.containing() This retrieves the view object which contains
the element passed to this function. Within a
menu setup/select function, passing base as
the argument will give you the view which
contains the given menu entry.
resultsView.getSelectedAssets() For views which allow for multiple
selections, such as Gallery View, you can
retrieve all currently selected asset IDs using
this call. This is an asynchronous function
which takes a callback, because it may not be
known at the point of call which assets have
been selected.

4.5. Main menu
resultView.getSelectionContext() If interfacing with the REST API to create
functionality, you could use this function
instead of using getSelectedAssets() to
retrieve the asset IDs. This will return a
selection context, which is a piece of JSON
which can be used in the calls to the REST
API to tell it how to retrieve assets.
4.5 Main menu

Main menu entries are generic menu entries, located under otui.Menus. Each main
menu entry includes the following properties:
Property Description
name A unique, internal name for this menu entry.
title Localized display name for this menu entry.
This should be wrapped in a translation
function.
select An optional function to execute when the
menu entry is selected.
url A URL to go to when the menu entry is
selected. This is optional.
For example, you could write a registering menu entry that would display an alert
when clicked as:
(function(otui) {
function showAlert() {
otui.alert(otui.tr("This is an alert”)); // Translated
};
otui.ready(function() {
otui.Menus.register({
'name' : 'showalert',
'title' : otui.tr('Show alert'), // Translated
'select' : showAlert
});
});
})(otui);

4.6 Multiple asset menu entries

Multiple asset menu entries are generic menu entries which appear in various parts
of the application. They are intended to perform some kind of action on one or more
assets in that view, such as downloading selected assets, or to alternatively act on
the view as a whole, such as refreshing the view. In most cases, multiple asset menu
entries will only be enabled if the user selects an asset.
Each multiple asset menu entry type includes the following properties:
text Localized display name for this menu entry.
function.
img A URL to a 16x60 image used for this menu
entry. This property is optional.
Note: By default, OTMM does not

honor the img property for multiple
asset menu entries in the Gallery view.
You can optionally configure this
property to support any
customizations.
The property should consist of a sprite

divided into four 16x16 blocks stacked
vertically. Each block should contain the icon
for the entry, colored as follows:
• Block 1 is the standard state of the icon,
and should be colored in rgb(0, 116, 172).
• Block 2 is the hover state of the icon, and
should be colored in rgb(224, 142, 38).
• Block 3 is the active state of the icon, and
should be colored in rgb(1, 76, 114).
• Block 4 is the disabled state of the icon,
and should be colored in rgb(152, 152,
151).
select A function to execute when this menu entry
is selected.
setup An optional function to execute when this
menu entry is initially displayed. For more
information, see “Setup function”
on page 24.
In addition, the register function can include the following optional parameters:

4.6. Multiple asset menu entries
index
A numerical parameter to specify the position of the entry in the menu or, if
groupIndex is specified, the position within the menu group. For
example, .register(entry, 1, 4), where 1 is the index parameter.
If this parameter is not specified, the entry is placed in the last position in the
menu or group.
groupIndex
A numerical parameter to specify the position of the entry in a menu group. For
example, .register(entry, 1, 4), where 4 is the groupIndex parameter.
If this parameter is not specified, the entry is placed in the last group in the
menu.
Multiple asset menu entries can be added to the following menus.
Menu Where to add multiple asset menu entries

Gallery view otui.GalleryViewActions
Folder view otui.FolderViewActions
Version view otui.VersionViewActions
Collection view otui.CollectionListActions
Collection view header otui.CollectionListHeaderActions
Checked out assets view otui.CheckedOutViewActions
Job Workflows view otui.WorkflowJobsViewActions
Workflow Tasks view otui.WorkflowTasksViewActions
Workflow Assets view otui.WorkflowAssetsViewActions
Relationship view otui.RelationshipViewActions
Clips view otui.ClipsViewActions
Related Folders view otui.RelatedFoldersViewActions
4.6.1 Multiple asset menu entries example

The following example shows how to create a multiple asset menu entry which,
when selected, will log all the assets selected to the JavaScript console, and then add
it to the collections, checked-out assets, and gallery views.
Example 4-1: Multiple asset menu entries

(function(otui) {
function showAssets(event) {
var view = otui.Views.containing(this); // Get the view for this entry.
// The user may have chosen "select all", which means the UI needs to ask the server
for the full list of asset IDs.
view.getSelectedAssets(function(assets) // Only give us the asset IDs
{
console.log("Assets selected:", assets);

});
};
// Create definition of the menu entry.
var entry = {
'name' : 'showassets',
'text' : 'Log selected assets',
'select' : showAssets
};
// Then add it to all the locations available.

otui.CollectionListHeaderActions.register(entry);
otui.CheckedOutViewActions.register(entry, 2);
otui.GalleryViewActions.register(entry, 0, 4);
});
})(otui);
4.7 Single asset menu entries

Single asset menu entries are resource-based menu entries which appear in various
parts of the application. They are intended to perform some form of action on a
single asset.
All single asset menu entry types require the same properties.
text Localized display name for this menu entry.
function.
img A URL to a 16x16 image used for this menu
entry.
select A function to execute when this menu entry
is selected.
setup An optional function to execute when this
menu entry is initially displayed. For more
information, see “Setup function”
on page 24.
The select and setup functions are both passed a resource parameter, which is the
JSON for the resource the menu entry should act upon. However, under certain
circumstances, this may be undefined. In such cases, your functions should cope
with this and not do anything.
In addition, the register function can include the following optional parameters:
index
A numerical parameter to specify the position of the entry in the menu or, if
groupIndex is specified, the position within the menu group. For
example, .register(entry, 1, 4), where 1 is the index parameter.

4.7. Single asset menu entries
If this parameter is not specified, the entry is placed in the last position in the
menu or group.
groupIndex
A numerical parameter to specify the position of the entry in a menu group. For
example, .register(entry, 1, 4), where 4 is the groupIndex parameter.
If this parameter is not specified, the entry is placed in the last group in the
menu.
Single asset menu entries can be added to the following actions.
Action Where to add single asset menu entries

Gallery view asset otui.GalleryAssetActions
Detail view asset otui.InspectorAssetActions
Workflow view job otui.WorkflowJobActions
Collections view otui.CollectionInlineActions
Example 4-2: Single asset menu
The following example shows how to create a single asset menu entry which,
when selected, will open the preview rendition of an image asset in a new
window. It also has a setup function which will hide the entry if the asset in
question has no preview rendition or is not a picture. It is then added to the
Gallery view asset actions and Detail view asset actions.
(function(otui) {
function openAsset(event, resource) {
if (resource) {
// The setup function guarantees that this will exist so we can skip the existence
checks.
var renditionObject = resource.rendition_content.preview_content;
var url = renditionObject.url;
var height = renditionObject.height;
var width = renditionObject.width;
window.open(url, "preview", "left=0,top=0,height=" + height + ",width=" + width);

}
}
function setupOpenAsset(event, resource) {

var ret;
if (resource) {
var isBitmap = (resource.content_type == "BITMAP");
if (!isBitmap || !resource.rendition_content || !
resource.rendition_content.preview_content)
ret = false;
}
return ret;
}
var entry = {
'name' : 'openAsset',
'text' : 'Open preview',
'img' : 'path/to/myimg.png',
'select' : openAsset,
'setup' : setupOpenAsset

};
// Then add it to all the locations available.

otui.GalleryAssetActions.register(entry);
otui.InspectorAssetActions.register(entry, 1, 2);
});
})(otui);

Chapter 5
Status icons
New status icons can be added in the same way as resource-based menu entries (see
“Menu entries“ on page 23). Status icons and menu entries share the same common
functions and properties. The only difference is that status icons are mostly inert.
All status icons require the following properties.
name A unique, internal name for this status icon.
text Localized display name for this status icon.
function.
img A URL to a 16x16 image used for this status
icon.
setup A mandatory function which is called when
the status icon is to be displayed. This should
return true or false depending on whether
the status icon should be displayed for this
asset. For more information, see “Setup
function” on page 24.
Status icon definitions are interchangeable and the same definition can be added to
more than one area.
Status icon Where to add status icon

Gallery view asset otui.GalleryStatusIcons
Detail view asset otui.InspectorStatusIcons
Example 5-1: Status icons
The following is an example of how to register a new status icon on an asset

which detects whether the asset was created in the last 24 hours:
(function(otui) {
function setupIcon(event, resource) {
if (resource) {
var formatter = otui.DateFormat.get(otui.DateFormat.OTMM_DATETIME);
var importDate = formatter.parse(resource.date_imported);
var now = Date.now();
return (now – importDate.getTime() < (24 * 60 * 60 * 1000))
}
}
var definition = {

Chapter 5 Status icons
'name' : 'recentasset',
'text' : otui.tr('Asset was loaded recently') // Translated,
'img' : 'path/to/myimg.png'
'setup' : setupIcon
};
otui.GalleryStatusIcons.register(definition);
otui.InspectorStatusIcons.register(definition);
});
})(otui);

Chapter 6
Entry points
As an integrator, it is possible to generate entry point URLs programmatically to

send out to users or to provide as links. A series of preformatted URL getters are
available under the object otui.url. This section details each of those URL getters
and also how to use more advanced URL retrieval for scenarios where this does not
meet your requirements.
6.1 Main area entry point

An entry point for a main area of the application (for example, home or folders) can
be retrieved by using the call otui.url.area. This takes one parameter, which is a
member of the array otui.Menus.names. For example:
otui.url.area("folders"); // URL for folders area
6.2 Asset Detail view entry point

An entry point for an asset Detail view can be retrieved by using the otui.url.
asset call. This takes two parameters, including the asset ID to generate the URL
for, and a Boolean expression indicating whether the Detail view should be opened
in edit mode (true) or read-only mode (false). For example:
otui.url.asset("1c91ccf8729cd769cad903f7ab80f3d753eaedfd", true) // URL

for this asset in edit mode.
6.3 Folder Detail view entry point

An entry point for a folder Detail view can be retrieved by using the call otui.url.
folderInspector. This takes the same arguments as the asset Detail view entry
point generator.
6.4 Folder Gallery view entry point

An entry point for a folder Gallery view can be retrieved by using the call otui.
url.folder. This takes one argument, which is the folder ID to generate the URL
for. For example:
otui.url.folder("f12287f53cc3b502b0fe862d123bfb4610c2e837") // URL for

gallery view.

Chapter 6 Entry points
6.5 Job Detail view entry point

You can generate a job Detail view entry point by using the otui.url.activity
call. This call takes one argument. The argument is the job ID that is used to generate
the URL.
Note: OpenText recommends that you use otui.url.activity as the otui.

url.job call is deprecated.
6.6 Task Detail view entry point

You can generate a task Detail view entry point using the otui.url.assignment
call. This call takes two arguments. The arguments include the ID of the task and the
ID of the job.
Note: OpenText recommends that you use otui.url.assignment to generate

the URL as the otui.url.task call is deprecated.
6.7 Alternate entry URLs

Some alternate entry point URLs also exist. These URLs do not have generator
functions available under otui.url and are intended as ease-of-use functions for
customers who are used to certain functions of the Flex UI.
Note: All alternate entry URLs will automatically convert the URL given into
the standard format required for the HTML5 UI. This is designed behavior.
6.7.1 Keyword search entry point

A keyword search can be conducted in the HTML5 UI by navigating to a URL in the
form:
http://path.to.otmm/otmm/ux-html/?p=keywordsearch&term=<prefered_
search_keyword>
where
term is the keyword term to search for.

Chapter 7
Content types
Within results lists for OTMM, assets of any content type will be displayed by
default. OTMM has a default list of content types which it has display attributes for.
However, any new content types which are added will appear in results lists initially
as an unknown asset type. It is possible to augment the display of these content
types by registering it with the HTML5 UI. This can be done by using the otui.
MetadataModelManager.addContentTypes() function.
This function can be passed a content type descriptor or an array of content type
descriptors. Each descriptor is a JSON object containing the following properties:
name
The name of the content type as returned from OTMM, such as BITMAP.
displayName
The translated display name for the content type.
icon
A URL to a 16x16 PNG used as an icon in the gallery view for this content type.
fallback
A URL to a 96x96 PNG used as a default fallback image if an asset with this
content type has no displayable rendition.
Any calls to this function should be wrapped in an otui.ready() call to ensure that
the locale for the user has been successfully loaded.

Chapter 8
Metadata lookups
It is possible to register a metadata field within OTMM to have a lookup function

specified on it. When users edit an asset or folder that has that metadata field, they
can run the lookup function by pressing the lookup button. This enables you to
integrate third-party search APIs or lookup screens into OTMM for an asset.
This can be done using the otui.MetadataModelManager.addFieldLookup

function, which supplies the name of the field to add the lookup and the lookup
itself.
A full reference of this can be found in the JavaScript API Documentation for the
MetadataModelManager namespace. The following is a brief example:
Example 8-1: MetadataModelManager namespace
otui.MetadataModelManager.addFieldLookup("CUSTOM.FIELD.NAME", function(field,
populateValue) {
cs.pollUserForValue(field.name, field.type, function gotValue(value, displayValue) {
if (value && displayValue)
populateValue({'value' : value, 'displayValue' : displayValue});
}):
});
8.1 Cascading group extensions

An application can register a custom extension to create a cascading domain group
that programmatically preselects an option without a user manually choosing it. A
custom extension can also specify the way the lookup domain is displayed, such as
read-only, hide, disable, or show.
For example, if a cascading group, called ZONE, is comprised of COUNTRY, STATE

and CITY lookup domains, the application can register a cascading handler to select
a country from the COUNTRY lookup domain based on the model ID and render
this lookup domain as read-only. The user cannot change the country, but can
choose the state and city.
The following is an example of the syntax that you need to use to register a
cascading domain group:
Example 8-2: Syntax to register a cascading domain group

OTMetadataElement.CASCADE.registerField("<CASCADING_GROUP_NAME>", {
"<LOOKUP_DOMAIN_ID1>" : function (context) {
…………………………………………
…………………………………………

Chapter 8 Metadata lookups
return {"display" : OTMetadataElement.fieldDisplay.readonly, "selectedOption" :

"country1"}
},
"<LOOKUP_DOMAIN_ID2>" : function (context) {

…………………………………………
…………………………………………
return {"display" : OTMetadataElement.fieldDisplay.disable, "selectedOption" : "city5"}
},
…………………………………………………………
});
The metadata framework provides contextual information to the handler function

that is registered against the lookup domain. This allows the handler to select an
option programmatically.
The context is a JavaScript object that contains following properties:
viewMode
The view in which the cascading group is rendered. The viewMode property can
use one of the following values in the otui.ViewState.mode object:
Name Description
UNKNOWN Any view other than those mentioned in
this table, such as jobs, tasks, and so on.
ASSET_IMPORT New Assets dialog box, which is accessible
by clicking the Folders page > New >
Assets.
FOLDER_CREATE New Folder dialog box, which is accessible
by clicking the Folders page > New >
Folder.
BULK_EDIT Edit multiple assets dialog box, which is
accessible by selecting multiple assets and
clicking Edit.
GALLERY_VIEW Gallery view on the Folders and
Collections pages, which is accessible by
clicking the Folders or Collections menu
entry on the Navigation bar and using the
Gallery view.
ASSET_VIEW Asset Detail view, which is accessible by
double-clicking an asset to invoke the
Detail view.
ASSET_EDIT Asset Detail Edit view, which is accessible
by clicking an asset to invoke the Detail
view, then clicking Edit.

8.1. Cascading group extensions
Name Description
FOLDER_VIEW Folder Detail view, which is accessible by
clicking the Folders tab, navigating to the
folder you want, and then clicking its
Show Properties icon to invoke the
Detail view.
FOLDER_EDIT Folder Detail Edit view, which is accessible
by clicking the Folders tab, navigating to
the folder you want and, clicking its Show
Properties icon to invoke the Detail view,
and then clicking Edit.
CLIP_CREATE Create sub clip dialog box, which is
accessible by clicking a video asset to
invoke the Detail view, then clicking More
> Create Sub clip.
CHECK_OUT_VIEW Checked out page, which is accessible by
clicking the Checked out tab.
ADV_SEARCH_VIEW Advanced search dialog box, which is
accessible by clicking the search icon ,
and then clicking the Advanced search
link in the search options dialog box.
For example, to conditionally test for the ASSET_IMPORT view, write the code as
follows:
otui.ViewState.mode.ASSET_IMPORT === context.viewMode
fieldMode
Describes the way the domain field is rendered. It can be read-only or edit. Use
the one of following properties in the OTMetadataElement.fieldMode function
to check against the actual value returned for this property:
edit
readonly
Name Description
edit Displays the field in edit mode. Users can
select an option.
readonly Displays read-only text. Users cannot
select an option.
For example, to check for edit, enter the following:

OTMetadataElement.fieldMode.edit === context.fieldMode
lookup
The name of the registered cascading group for preselection.
domainID
The registered domain field.

Chapter 8 Metadata lookups
options
The domain field options that are available.
model
A JavaScript object that contains modelId and name, as follows:
{
'modelId' : 'test_model_id',
' name ' : 'test_model_name'
}
Generally, the following properties will be undefined for bulk operations, such as
bulk edit.
resource
Asset or folder-related metadata.
cascadeEl
The cascading group DOM element, which can be used to get additional node
and parent details using the HTML DOM API.
The registered handler function can programmatically decide, based on the supplied
context, which option needs to be selected and the way the domain field or member
should be displayed. The handler function returns a JavaScript object that consists of
following properties:
selectedOption
The option to be displayed for the current domain field. The handler takes this
from the options list that is supplied in context. For more information, see
options on page 40.
display
This property can use the following strings in OTMetadataElement.
fieldDisplay.
Note: This property is optional.
Name Description
hide Hides the domain field from being
displayed.
show Displays the field, this is default display. If
the field mode is edit, the field is
displayed as a combo box or option list. If
the field mode is readonly, the field is
displayed as read-only.
disable Applicable to domain fields. When the
field mode is edit, the handler displays
the option list as disabled. The user will
not be able to choose an option.

8.1. Cascading group extensions
Name Description
readonly The field is displayed as text.
For example, the following custom code can return an object in the following
way:
return {
"display" : OTMetadataElement.fieldDisplay.hide, 'selectedOption' : "<option1>"
};

Chapter 9
Templates
Templates, as described in “HTML templates” on page 19, are uniquely named

pieces of HTML content which are referenced and used throughout the application.
These are all loaded when a page is loaded and can be overridden by customizations
or alterations similar to how styles and colors can be altered.
The following types of templates used within the UI:
Generic templates
These are standard pieces of markup which are reused throughout the UI. They
have only an ot-template attribute (not an ot-view attribute).
Content templates
These are templates which are intended to serve as the main content for a given
view within the application, such as Gallery view or asset Detail view. They
have an ot-template attribute and an ot-view attribute which is set to the view
they are the content for. Content templates are usually named using the format
<view>_content. For example:
ResultsView_content
Resource templates
These are templates which are intended to serve as a template for an individual
resource used within a specific view, such as assets within Gallery view. They
have an ot-template attribute and an ot-view attribute, which is set to the
view that they are resource templates for. Resource templates are usually named
using the format "<view>_resource". For views that can show more than one
type of resource, such as the results view, which can show assets or folders.
Resource templates may also be suffixed with an asset type. For example:
FolderView_resource#folder.
Layout templates
These are templates which dictate how the content on screen is broadly laid out,
such as putting the folders view on the left, taking up 25% of the screen, and
putting the results view on the right, using the remaining space. They have an
ot-template attribute and an ot-view attribute set to MainView.

Chapter 9 Templates
9.1 Custom elements

When dealing with templates, you may see various elements beginning with ot-.
These are custom elements used throughout the application which have custom
displays for simplifying the creation and usage of templates in the UI. For more
information about the various custom elements, see “JavaScript API documentation”
on page 10. However, the following is a subsection of the custom elements which
have particular relevance to templates:
• ot-resource
• ot-metadata
• ot-rendition
• ot-i18n
• ot-point
• ot-select
9.1.1 ot-resource
The ot-resource element is primarily used within resource templates for views and
contains a base anchor point for all data about the resource, such as assets or folders,
which the template is displaying. It is primarily used in conjunction with the ot-
metadata and ot-rendition elements.
9.1.2 ot-metadata
The ot-metadata element is used in conjunction with the ot-resource element to
show a particular piece of metadata. Field type detection, such as date or string, is
automatically handled by the UI. For basic use in templates, the following attributes
are relevant:
ot-fields
Comma separated list of fields to display for this element. Only field name
needs to be specified. Only one field is displayed per element. If multiple fields
are specified, then it will display the first one that has a value.
ot-with-label
An optional attribute. If specified on the element, the field will have a localized
label for the field displayed with it. This label is retrieved from the metadata
model.
ot-as-attribute
An optional attribute. If specified on the element, it will not render anything,
and will just put the value in as a data-value attribute. This is useful for
displaying icons that are dependent on metadata.
ot-with-title
An optional attribute. If specified on the element, the value of the metadata field
will be displayed in a tooltip when the value overflows the container.

9.1. Custom elements
ot-length
An optional attribute. If specified on the element, editable string, or text area,
metadata fields will restrict the length to the given value.
ot-date-restriction
An optional attribute. If specified on an element with a metadata date field, the
given restriction parameters will be enforced.
9.1.3 ot-rendition
The ot-rendition element is used in conjunction with the ot-resource element to
show a particular rendition for an asset. For basic use in templates, the following
attributes are relevant:
ot-rendition-types
Comma-separated list of rendition types to display for this element. Only one
type is displayed per element. If multiple types are specified, then it will display
the first one which exists for the asset.
ot-rendition-format
Format of the rendition. Valid formats are Image (IMG), video, audio and
Acrobat.
Note: For ot-rendition elements displaying an image, when the image is

loaded and visible, the ot-rendition element will fire a "rendition-ready"
event. This can be used for detecting when rendition images have loaded
successfully.
9.1.4 ot-i18n
The ot-i18n element is part of the localization and translation layer of the UI. Each
ot-i18n element specifies a string to be localized and translated into the user's
locale when displayed. For more information, see “Localization“ on page 51.
9.1.5 ot-point
The ot-point element contains a reference to a specific integration point which
should be rendered for a given resource. This is an easy way to incorporate
integration points, such as asset actions or menu entries, into a template and have it
apply setup methods for the given resource. ot-point is used in conjunction with
the ot-resource element. For basic use in templates, the following attributes are
relevant:
ot-lookup
A required attribute. The name of the integration point to use for rendering the
content of this element.

Chapter 9 Templates
ot-max-items
An optional attribute. Used for overflow-style integration points, specifies an
overriding number of maximum items to display.
9.1.6 ot-select
The ot-select element generates a drop-down list. This user interface element
presents users with a list of options. You can add entries with the standard
<option> tag. For basic use in templates, the following attribute is relevant:
ot-as-multiselect
Creates a select box which allows the user to select multiple entries rather than
just a single entry.
9.2 Overriding and altering templates

To perform more advanced alterations or customizations of elements of the user
interface, such as re-ordering existing elements or adding new areas, you will need
to override and alter the templates in the application. For more information, see
“HTML templates” on page 19.
To override templates:
1. Find the template you want to override. Templates can be found in HTML files
underneath the /otmm/ux-html/otmm folder. The files are named to reference
their area. So for example, results.html contains templates for the results
view, inspector.html contains templates for the Detail view, and so forth.
Generic templates can be found in the file /otmm/ux-html/ui/templates.
html. Templates always start with a <template> element.
2. Copy the whole template into the HTML import file in your development folder
and modify it as desired.
3. Reload the page to see your changes.
Modifying templates will usually involve modifying the CSS styles that are meant
for that template as well because the two exist in a symbiotic relationship. For more
information about modifying the CSS styles, see “Create a theme” on page 117. If
the styling is radically different, you may want to consider adding or changing the
CSS classes used on elements. This should be done with caution because some
classes are used as identifiers within JavaScript to enact code and changing these
classes could break functionality.
For example, the resource template used for displaying individual folders in the
folder view typically looks like this:
Example 9-1: Resource template used for displaying individual folders

<template id="FolderView_resource" ot-template ot-view="FolderView">
<ot-resource class="ot-folder">

9.2. Overriding and altering templates
<div class="ot-folder-entry">
<ot-metadata ot-fields="container_child_count" ot-as-attribute class="ot-
folder-disclose"></ot-metadata>
<span id="ot-folder-icon" class="ot-folder-icon-close"></span>
<ot-metadata ot-fields="name" class="ot-folder-title"></ot-metadata>
</div>
<div class="ot-folder-children">
<ot-i18n id="ot-folder-loading">Loading...</ot-i18n>
</div>
</ot-resource>
</template>
If, for example, you wanted to show an icon which showed the type of folder, you
could copy the template into an HTML import file in your development folder and
modify it as follows:
Example 9-2: Show an icon that shows the type of folder

<template id="FolderView_resource" ot-template ot-view="FolderView">
<ot-resource class="ot-folder">
<div class="ot-folder-entry">
<ot-metadata ot-fields="container_child_count" ot-as-attribute
class="ot-folder-disclose"></ot-metadata>
<ot-metadata ot-fields="container_type_id" ot-as-attribute
class="ot-cs-folder-type"></ot-metadata>
<span id="ot-folder-icon" class="ot-folder-icon-close"></span>
<ot-metadata ot-fields="name" class="ot-folder-title"></ot-metadata>
</div>
<div class="ot-folder-children">
<ot-i18n id="ot-folder-loading">Loading...</ot-i18n>
</div>
</ot-resource>
</template>
This would add in the <ot-metadata> element which would contain, as an

attribute, the value of the folder's type. This could then have CSS rules written for it,
such as:
Example 9-3: Attribute with the value of the folder’s type
.ot-cs-folder-type {
background-repeat: no-repeat;
background-size: contain;
width: 1rem;
height: 1rem;
display: inline-block;
&[data-value="CUSTOMER.FOLDER.LOGOS"] {
background-image: url('./folder_types/logo.png');
}
&[data-value="CUSTOMER.FOLDER.DOCUMENTS"] {
Background-image: url('./folder_types/document.png');
}
}

Chapter 9 Templates
Note: This is written in LESS syntax, which is not strictly CSS compatible.
This would then show a "logo" icon for logo-type folders and a "document" icon for
document-type folders.
9.3 Modifying the legal terms and conditions

If desired, with a template, you can overwrite the legal terms and conditions text in
the terms & conditions dialog box.
To overwrite the legal terms and conditions:
1. Create a folder under the /development folder, where development folder is

<TEAMS_HOME>\ear\artesia.ear\otmmux.war\ux-html.
2. In the folder that you created in Step 1, add an HTML file, and name it
include.html.
3. In a text editor, open the include.html file, and do the following:
a. Create a <template> element, give it the ot-template attribute, and the ID

attribute "legal-terms-and-conditions", as follows:
<template ot-template id="legal-terms-and-conditions">
b. Inside the <template> element, create an <ot-i18n> element.
c. Inside the <ot-i18n> element, write the legal text using plain text, without
any HTML elements or styling applied.
d. Add the following at the end of the include.html file.

Example 9-4: Sample include.html file
<template ot-template id="legal-terms-and-conditions">

<ot-i18n>Enter your terms and conditions.</ot-i18n>
</template>
4. Clear the browser cache to see the updated legal text.
Note: You can also use this approach to make the legal text available for
translations. For more information, see “Localization“ on page 51.

9.4. Cross-platform templates
9.4 Cross-platform templates

When creating or modifying templates, you may want to have separate templates
for desktop and tablets but sharing a common name. This can be done by specifying,
as part of the <template> element, an attribute of ot-platform, set to one or more
of the following options. Specifying this will indicate that the template should only
be loaded if they match the current platform.
desktop
This template should be for desktop platforms only.
mobile
This template should be for mobile platforms only. This is a shortcut for both
tablet and phone.
tablet
This template should be for tablets only.
phone
This template should be for phones only.
The ot-platform attribute can also be applied to specific elements within a

template to indicate that they should only be available on the given platforms.
Example 9-5: Cross-platform template


<template id="content" ot-template ot-view="CustomView" ot-platform="desktop">

</template>

<template id="content" ot-template ot-view="CustomView" ot-platform="tablet">

</template>

<template id="resource" ot-template ot-view="CustomView">
<span ot-platform="desktop">You're on a desktop</span>
<span ot-platform="mobile">You're on a mobile device</span>
</template>

Chapter 10
Localization
The HTML5 UI includes a full localization and translation layer. This section will
explain how to do the following:
• Mark text for translation, used for customizations that include new messages.
• Generate localization files for the translation of new messages present in
customizations and integrations.
• Apply localized text for database labels to the user interface
10.1 Mark text for translation

All text visible to the user in the UI needs to be translated. When you are creating
custom integrations, you need to follow the procedures in this section.
By marking text for translation using the following guidelines, once the integration
has been developed, it becomes a one-click operation to generate a localization
template (otmm-messages.pot) for all messages in the integration, which you can
then use to generate localization (PO) files for that integration.
10.1.1 Format
Each translation token to be used in the application is specified as the English US
translation of the message, marked up using the gettext standard. For example, if
the user interface is to display the message “Welcome to OpenText Media
Management”, the translation token which should be used is “Welcome to OpenText
Media Management”.
If replacements are required in the translation, then they should be specified as

blocks of {n}, where n is an integer. At the point of translation, the replacements are
specified as arguments and are substituted in place. For example, if you wanted to
display the phrase “Welcome to OpenText Media Management version 16, John
Doe!”, the parts that may vary in the sentence are the version number and the user's
name. Therefore, you should use the following translation token:
"Welcome to OpenText Media Management version {0}, {1}!"
Once used with one of the translation functions, or the translation element, at the
point of translation, {0} will be replaced with the version number and {1} will be
replaced with the user's name.
It is also possible to specify that a particular message has a plural form as well. For
more information, see “Plurals” on page 53.

Chapter 10 Localization
10.1.2 Basic usage

In JavaScript, the function to use for translating text is otui.tr(). The function
takes at least one argument, which is the translation token. Any further arguments
are interpreted as replacements. When using otui.tr(), the translation token
specified must be the string itself.
Example 10-1: JavaScript
// Do this
var translated = otui.tr("Welcome to OpenText MediaManagement");
// DO NOT DO THIS
var message = "Welcome to OpenText MediaManagement");
var translated = otui.tr(message);
The otui.tr() function should never be passed a variable reference. This is the
fundamental underpinning of how the translations are extracted from the
application. However, any replacements can be passed as variables.
Example 10-2: Replacement variable

//Translate this into the user’s language.
otui.tr("Welcome to OpenText Media Management" /* lookup token */);
//Translate this into the user's language, substituting {0} for the version and {1} for
the username passed
var version = "11";
function getWelcomeString (username) {
return otui.tr(
"Welcome to OpenText Media Management {0}, {1}" / *lookup token */,
version /* Replace {0} with version */,
username /* Replace {1} with username */
);
Templates
It is also possible to markup templates in the application that should contain
translated text by using the <ot-i18n> element and specifying the translation
token as the text content of the element. Replacements are specified as the ot-
replacements attribute on the element. The ot-replacements attribute should
be a comma separated list of replacements. By default, it will be assumed that
replacements will be properties of the view that the ot-i18n element is in,
although string literals can be specified by wrapping them in single quotes.

10.1. Mark text for translation


<ot-i18n>Folders</ot-i18n>

<ot-i18n ot-replacements="searchID">Search for {0}</ot-i18n>

<ot-i18n ot-replacements="'11',username">Welcome to OpenText MediaManagement {0},
{1}</ot-i18n>
10.1.3 Plurals
It is possible to specify that a message has a singular and plural format by specifying
both the singular and plural variant of the message as the US English translation of
the variant. Using this does not limit the translation to having just one plural, as is
the case in English. The gettext standard allows for an arbitrary number of plurals,
including no plurals in languages such as Japanese. The following examples show
how to use the US English variant to mark that a message has a plural.
JavaScript
In JavaScript, the function to use for translating text with a plural format is
otui.trn(). This function takes at least the following arguments:
• The singular version of the translation token.

• The plural version of the translation token.
• The N argument, which is the number which should be used to determine
which plural version to use.
Any further arguments are, like otui.tr(), interpreted as replacements for the
translation.
Example 10-3: Plurals
// Translate the number of search results .

function getSearchResultsString(resultCount/* number */) {
// Give me the translated results string, depending on the results count.
return otui.trn ("{O} Result" /* singular form */,
"{0} Results" /*plural form */,
resultCount/* Use this to determine which plural form to use) \*/,
resultCount /* replace {0) with this */) ;
}
Templates
The ot-i18n element can also be used to specify singular and plural versions of
a message. This can be done by specifying an "ot-n" argument containing the
view property name or string literal used for determining plurality (in the same
format as ot-replacements). The text, however, should be specified as two
child elements under the ot-i18n element called singular and plural, which
contain the singular and plural versions of the message.

Example 10-4: Singular and plural

i18n message. In this case, resultCount is the name of a view's stored property to
look up -->
<ot-i18n ot-replacements="resultCount" ot-n="resultCount">
<singular>{0} Result</singular>
<plural>{0} Results</plural>
</ot-i18n>
10.1.4 Context
In some cases, it is necessary to provide extra context when translating a particular
term, such as when the same word can have multiple meanings. For example, the
English word charge could be used in the context to charge a battery or to charge a
customer, which are two very different things.
JavaScript
When you are looking to provide some context, you should use the otui.trc()
and otui.trnc() functions. These functions work in the same way as otui.
tr() and otui.trn() respectively, with the addition of an extra first argument,
which is the context for the translation. This is then displayed to the translator
when translating the text.
Example 10-5: Translation
// Translate "Dec" as a short month

otui.trc("(month)", "Dec");
// Translate "{0} category" as a pluralised string, providing context that the

category in this case is a taxonomy.
var categoryCount = 5;
otui.trnc("(taxonomy)", "{0} category", "{0} categories", categoryCount,
categoryCount);
Templates
Context can be specified on an ot-i18n tag by using the ot-context attribute.
Example 10-6: Context specified on an ot-i18n tag using an ot-context

attribute
i18n message. In this case, categoryCount is the name of a view's stored property
to look up -->
<ot-i18n ot-replacements="categoryCount" ot-n="categoryCount" ot-
context="(taxonomy)">
<singular>{0} category</singular>
<plural>{0} categories</plural>
</ot-i18n>

10.1. Mark text for translation
10.1.5 Style
When using the ot-i18n element for translation, it is also possible to apply styles to
portions of the text through one of two ways:
• Styled replacements
• Styled text
10.1.5.1 Styled replacements

Replacement text in a translatable message (anything which is marked as {0}, {1},
etc., in a message and will be replaced later) can be styled separately from the rest of
the message.
To style replacement text:
1. Add the ot-wrap-replacements attribute to the ot-i18n element in question,

ensuring that the element has a unique class name (for example, cs-styled-
translation).
2. Create CSS rules which match the elements underneath that ot-i18n element
which have the attribute ot-replacement-idx.
Example 10-7: Style replacement text
Given the element:

<ot-i18n ot-wrap-replacements ot-replacements="product,name" class="cs-styled-
translation">Welcome to {0}, {1}</ot-i18n>
The following CSS will change the color of the first replaced text and make the
second replaced text bold:
.cs-styled-translation [ot-replacement-idx=0] {
color: blue;
}
.cs-styled-translation [ot-replacement-idx=1] {
font-weight: bold;
}

10.1.5.2 Styled text

It is possible to apply limited styling to a translatable message itself.
To apply styling to a translatable message:
1. Add the ot-styled attribute to the ot-i18n element in question.
2. Add simple markup to the text. The available markup is as follows:
Note: For @link[url]@, If you add a URL, the address is opened in a new tab
in the browser.
Example 10-8: Styled text
The following element:

<ot-i18n ot-styled>*Alert*: The system will _go down_ for maintenance in +5 minutes+.</
ot-i18n>
Will be displayed as:
Important
Style tags cannot be mixed or nested. For example, you cannot apply both bold
and underline to the same text.
10.1.6 Tips and tricks to localize

This section contains some tips and tricks to help with the localization and
internationalization of the UI.
Text in images
Try to avoid using text in images whenever possible. If you have text in images
that are used in the UI, they will not be translated. This will add overhead to any
translation because the original image will have to be altered to include the text
in the correct language.
Broken up strings
To help ease the task of translating text, try to consolidate text as much as
possible by using replacements to concatenate several broken up strings into one
string.
For example, instead of using:
<span>Welcome</span>
<ot-view-prop ot-prop="username"><ot-view-prop>
Use the following:

10.2. Generate, localize, and deploy custom UI integration messages
<ot-i18n ot-replacements="username">Welcome {0} to OpenText Media Management</ot-

i18n>
Buttons
For clickable buttons, you should use the <button> element as opposed to the
<input type="button"> element. This is mainly because <button> elements can
have child elements and <input> elements cannot. Using the <button> element
will make the internationalization of button text easier because you can do the
following:
<button>
<ot-i18n>OK</ot-i18n>
</button>
Note: Buttons can have type="submit" and type="reset" attributes,

which work in the same way as they do for inputs.
10.2 Generate, localize, and deploy custom UI

integration messages
For integrations or customizations that have new messages that require translations
in the UI, you need to do the following:
1. Generate a portable object template (POT) file for the integration.

For integrations or customizations that have messages that are not included in
OTMM and require translations in the UI, you need generate a POT file for the
integration. For more information, see “To generate a POT file” on page 58.
2. Generate a portable object (PO) file from your POT file to localize the
messages.
Use the POT file to localize strings and generate a PO file. For more information,
see “To generate a localization (PO) file from the template (POT)” on page 58.
3. Merge custom UI messages from your custom integration with existing
OTMM UI messages, if required.
For more information, see “To merge existing, localized custom UI messages”
on page 61.
4. Replace the custom version of a PO file with the merged version of the PO file to
deploy it.
See section 20.4.4.7 “To replace the custom version of a component file” in
OpenText Media Management - Administration Guide (MEDMGT220200-AGD).

10.2.1 To generate a POT file

1. Open the debug mode of the OTMM HTML5 UI on the development system,
ensuring that the integration code is loaded. For more information, see “Debug
mode” on page 16.
2. Click the Admin tab.
3. To load and scan the integration for translation tabs and generate the POT file,
click the Generate button beside Generate translation template for customer
specific integrations option.
Note: The Generate translation template for customer specific

integrations option is available only if the integration is loaded.
4. Click Download after the file is generated. The file name will be cs-
translation-template.pot.
Note: This template contains only the changes for the customization. This
means that only new labels that were added to OTMM are reflected in this
POT file.
10.2.2 To generate a localization (PO) file from the template

(POT)
Note: After you generate the template file (cs-translation-template.pot),
you need to generate a PO file for you desired language. OpenText
recommends that you use Poedit to generate your PO files. You can download
the Poedit Gettext Translations Editor at http://poedit.net/.
1. Open Poedit.
2. Click File > New from POT/PO file and navigate to your POT file.
3. At the prompt, enter the translation language.
4. Select the string that you want to localize from the list and type the translation
in the Translation area. Repeat this for each string (source text) that you want to
localize.
Note: For plural-based translations, under the Translation area there is

one or more tabs where you can provide each plural format that is
required.
5. Click Save and use the following naming convention for the new PO file:
<language_Territory>.po
For example, for French locale (fr_FR), the file name would be fr_FR.po.

10.2.3 To deploy a localization file for your custom UI

integration messages
1. In the OTMM Web Administration tool, on the Dashboard or top-level menu,
go to System, and click Languages.
2. Do one of the following depending on your scenario:
• New locale that has not been added to OTMM

This locale does not exist in the table for Languages. You do not see the
locale listed on the Languages page in the OTMM Web Administration tool.
Proceed to section “To deploy a custom localization for a new locale”
on page 60.
• Locale exists, but you do not have a custom version
This locale exists in the table for Languages, but you do not have a custom
version for UI messages deployed. On the Language page for this locale, you
see Add in the Custom version column for the UI messages component.
Proceed to section “To deploy a new custom localization for an existing
locale” on page 60.
• Locale exists and you have a custom version
This locale exists in the table for Languages and you deployed a custom
version for UI messages. On the Language page for this locale, you see
Delete in the Custom version column for the UI messages component.
There are two possible scenarios as follows:
a. The custom version of your currently deployed UI messages is from a
previous version of a custom UI integration and there are no other
changes (such as overwriting default OTMM localizations or providing a
localization for a language for which OpenText does not provide a
language pack) to the localization of your custom UI messages PO file. In
this scenario case, you can replace the existing PO file with your updated
PO file.
Proceed to “To replace existing, localized custom UI messages”
on page 60.
Note: If you are not sure if your currently deployed custom UI

messages PO file contains other localizations, continue to the
following scenario.
b. The custom version of your currently deployed UI messages file contains
additional localizations that are not related to a custom UI localization.
You need to merge the existing, previously deployed custom UI
messages PO file with the UI messages of your custom UI integration PO
file, and then deploy the merged PO file.
Proceed to “To merge existing, localized custom UI messages”
on page 61.

10.2.3.1 To deploy a custom localization for a new locale

1. Compress your PO file and save it as a ZIP file.

3. On the Languages page, click Choose file, choose your ZIP file and click
Upload.
4. Verify that the new locale is listed on the Languages page.
Tip: You can click View in the Actions column of the new locale to verify
that the file for your UI messages deployed. For more info, see section
20.4.4 “Generate and manage custom language packs” in OpenText Media
Management - Administration Guide (MEDMGT220200-AGD).
10.2.3.2 To deploy a new custom localization for an existing locale

2. Go to the Actions column of the locale to which you want to add your custom
UI messages and click View.
3. On the Language page, go to the UI messages row and click Add in the Custom
version column.
4. Click Choose File, choose your ZIP file, and click Upload.
10.2.3.3 To replace existing, localized custom UI messages
Note: If the custom version for your UI messages is from a previous version of
a custom UI integration, you can replace it with your updated PO file.

2. Go to the Actions column of the locale for which you want to replace your
custom UI messages and click View.
3. On the Language page, go to the row of the custom UI messages file that you
want to replace and do the following:
a. Click Download in the Custom version column and save the downloaded
filto create back up the previous version of the UI messages file.
b. Click Delete in the Custom version column to remove the existing version
of the UI messages file.
c. Click Add in the Custom version column to add the new version of the UI
messages file.
d. Choose the new version of the PO file and click Upload.

10.2.3.4 To merge existing, localized custom UI messages
Note: If the custom version for your UI messages is from a custom UI

localization file that is not related to a custom UI integration, you need to
merge the existing, previously deployed custom UI messages with your UI
messages for your custom UI integration, and deploy the merged files.

2. Go to the Actions column of the locale for which you want to add your custom
UI messages and click View.
3. Download the custom version of your existing OTMM UI messages file. For
more information, see section 20.4.4.3 “To download component files” in
OpenText Media Management - Administration Guide (MEDMGT220200-AGD).
4. Create a backup of the OTMM UI messages file that you downloaded in Step 3.
5. In a text editor, open your new custom integration UI messages PO file and
copy all the rows with translated strings to the Clipboard.
Tip: The translation rows start at the first hashtag (#), which is below the
PO file configuration setting section.
6. In a text editor, open the existing custom UI messages PO file that you
downloaded in Step 3 and do the following:
a. Scroll to the end of the file.

b. Paste the new custom integration UI messages strings from the Clipboard.
c. Save the PO file.
7. To verify that the merged PO file does not contain duplicate entries, do the
following:
Note: PO files cannot contain duplicate entries. Prior to uploading the new
PO file to OTMM, you need to remove duplicate entries as source text.
You can do this using Poedit Gettext Translations Editor, which you can
download from http://poedit.net/.
a. Open the merged PO file in Poedit.

If your PO file contains duplicate entries, Poedit will try to flag them for
manual correction or fix them.
b. Remove all duplicate entires.
c. Save the PO using the existing file name.
8. To deploy your merged PO file, on the OTMM Web Administrration tool

Dashboard or top-level menu, go to System, and click Languages and do the
following:

a. Go to the Actions column of the locale for which you want to replace your
custom UI messages and click View.
b. On the Language page, go to the row of the custom UI messages file that
you want to replace and click Delete in the Custom version column
c. Click Add in the Custom version column to add the new version of the UI
messages file.
d. Choose the new version of the PO file and click Upload.
Note: For more information, see section 20.4.4 “Generate and manage custom
language packs” in OpenText Media Management - Administration Guide
(MEDMGT220200-AGD).
10.3 Apply localized text for database labels to the

user interface
Many calls to the OTMM REST API return text values from the OTMM database
which are then displayed within the user interface. For example, the GET
transformers call returns a specified list of transformers with their English names.
These database labels (with the exception of metadata fields, metadata field groups,
metadata models, tabular fields, and cascading groups) are available through the
dynamically generated otmm-db-messages_custom.pot POT file for localization.
When the proper PO file exists for the database values, all of the translations for the
current locale are loaded upon startup. However, these values need to be used
within the UI. You can do this using the otui.TranslationManager.
getTranslation() function. For example, within the ShareView, which is opened
when the user clicks Share for an asset, the UI retrieves a list of delivery
transformers from the back-end and stores them within a local variable array called
_deliveryMethods;. This list is then displayed dynamically within a drop-down
list. For each option within the drop-down list, the text is dynamically added with
the following code:
optionItem.textContent = otui.TranslationManager.
getTranslation(_deliveryMethods[i].name);
The drop-down list will then display these options within the current locale,
provided a translation for the locale exists.

Chapter 11
User notifications, alerts, and confirmations
The HTML5 UX has a built-in API for displaying notifications to a user as well as
displaying alert and confirmation dialog boxes in a consistent, cross-platform way.
11.1 Select a notification type

The following types of notifications are available within OTMM:
Non-modal notifications
Take the form of a small banner at the top of the UI.
Modal notifications
Take the form of a small modal dialog box.
When creating notifications for a user, it is preferable to use non-modal notifications,

unless the situation specifically calls for a modal alert dialog box. For example, use
this in a case where a critical error which prevents further use of the application as a
whole, or if a modal confirmation dialog box is required.
11.2 Non-modal notifications

Non-modal notifications can be created by using the otui.NotificationManager.
showNotification() call. The function takes a single object which contains details
about which notification to show. This object can contain the following properties:
message
This is the message to show in the notification.
status
How to present this notification to the user. The following values are possible:
• information ‒ Show this notification as a general information notification
• warning ‒ Show this notification as a warning or non-critical error.
• error - Show this notification as a critical error.
stayopen
An optional Boolean which, when set to true, causes the notification to stay open
until the user manually closes it. Otherwise, the notification will gradually fade
and then disappear.

Chapter 11 User notifications, alerts, and confirmations
Example 11-1: Non-modal notification
// Inform the user that an upload has succeeded

otui.NotificationManager.showNotification({
'message' : otui.tr("Assets have been uploaded successfully.")
});
// Notify the user that an error has occurred.

'message' : otui.tr("An error has occurred."),
'status' : 'error',
'stayOpen' : true
});
// Warn the user that the system will be going down for maintenance soon
'message' : otui.tr("The system will shortly be going down for periodic
maintenance."),
'status' : 'warning',
'stayOpen' : true
});
11.3 Alerts
Modal alert notifications can be created by using the otui.alert() call. The
function can take just a string to display as a modal alert message, but it can also
take a single object which contains more details about the alert to display. This object
can contain the following properties:
title
This is the title of the alert.
message
This is the message to show in the alert.
status
How to present this alert to the user. The following values are possible:
• information ‒ Show this alert as a general information notification

• warning ‒ Show this alert as a warning or non-critical error.
• error - Show this alert as a critical error.
Example 11-2: Alert
// Tell the user that this is an alert

otui.alert(otui.tr("This is an alert"));
// Warn the user that the system is going down for maintenance
otui.alert({
'title' : otui.tr("System maintenance"),

11.4. Confirmation dialog boxes
'message' : otui.tr("The system is going down for periodic maintenance.")
});
11.4 Confirmation dialog boxes

Modal confirmation dialog boxes can be created by using the otui.confirm() call.
This function takes two parameters: A string detailing the question to ask, or object
containing details about the confirmation dialog box to display, and a callback
function which is called when the user clicks one of the options.
The details object takes the same parameters as for modal alerts.
The callback object is passed a single Boolean indicating if the user clicked the Yes or
No button.
Example 11-3: Confirmation dialog box
// Ask the user if they're sure they want to log out.

otui.confirm(otui.tr("Are you sure you want to log out?"), function(confirmed) {
if (confirmed) {
// log out.
}
});
// Ask the user to confirm they want to delete these assets.

otui.confirm({
'title' : otui.tr("Delete assets?"),
'message' : otui.tr("Are you sure you want to delete these assets?")
}, function(confirmed) {
if (confirmed) {
// Delete assets
}
});

Chapter 12
Interface with OTMM
This section details how to retrieve details pertinent to the current OTMM
environment and the currently signed-in user, in order to apply security, feature
checking, and so forth.
12.1 Function enablement tokens

Function enablement tokens (FETs) are security tokens that are set against a user
and are used to control access to functionality. All FETs are stored in the HTML5
UX in otui.UserFETManager. The following functions are available:
otui.UserFETManager.getUserFET()
Return an Array of every FET that the user has available.
otui.UserFETManager.isTokenAvailable(tokenName)
Returns true or false depending on whether the user has the given FET.
Example 12-1: otui.UserFETManager sample
// Create a new gallery view action which will link the currently selected assets into a
newly created personal folder.
otui.GalleryViewActions.register({
'name' : 'create-personal',
'text' : 'Save assets into personal folder',
'setup' : function () {
// Only display this menu entry if the user has the FET for creating folders.
return otui.UserFETManager.isTokenAvailable("FOLDER.CREATE");
},
'select' : function () {
// Create personal folder here
}
});
12.2 User preferences

Preferences for the current user can be read and written in the HTML5 UX using
otui.PreferencesManager. When using the PreferenceManager, a distinction
should be made between a preference value and preference object. A preference value
is the actual value of the preference. The preference object is the full object structure
representing that preference.
The following functions and attributes are available:

Chapter 12 Interface with OTMM
otui.PreferencesManager.preferences
Object containing all preferences currently used by the HTML5 UX and their
value objects.
otui.PreferencesManager.preference(id)
Retrieves the value for the current preference. For simple, single value
preferences, this will return the preference value itself. For more complex
preferences, the full value object is returned.
otui.PreferencesManager.preference(id, value, callback)
Sets the value for the current preference. For simple, single value preferences,
the value can just be the preference value itself. For more complex preferences,
the full value object should be passed. A callback function can be passed which
will be called after the preference has been set.
Example 12-2: User preferences
// Create a new gallery view action which will reset the user's preference for seeing
drag hints.
otui.GalleryViewActions.register({
'name' : 'reset-preference',
'text' : 'Show drag hints',
'setup' : function () {
// Only display this menu entry if the user has already seen the drag hint
return (otui.PreferencesManager.preference("seenDragHint") === "true");
},
'select' : function () {
// Set the preferences then show a notification saying it's been set
otui.PreferencesManager.preference("seenDragHint", "false", function(response,
success)
{
if (success)
'message' : otui.tr('Drag hints will be shown the next time you
navigate to a folder')
});
});
}
});
12.3 System settings

System settings can be found under otui.SystemSettingsManager. All system
settings that are marked as public can be accessed through this manager. These
settings are accessible through the Settings page in the Web Administration tool. For
more information, see section 23.1 “Manage configuration groups, components, and
properties” in OpenText Media Management - Administration Guide (MEDMGT220200-
AGD).
System settings are typically broken down by configuration group, component, key,
and name. When viewing system settings through the Settings page in the Web
Administration tool, the component and key both come from the group heading. For
example:

12.4. User details
The name of the setting comes from the property name.
When reading TResource, the component and the key both come from the group
heading, and the name comes from the setting itself. For example:
The following functions are available:
otui.SystemSettingsManager.getSystemSettingValue(component, key, name)

Retrieves the value of the given system setting.
otui.SystemSettingsManager.getSystemSettings()
Retrieves an object of all public system settings. Each key in this object is made
up of the component, key, and name of the setting, joined with "^^", for
example:
SEARCH^^SERVER^^DISABLE_SEARCH_SUGGESTIONS
12.4 User details

You can read details regarding the current user in the HTML5 UX using -
UserDetailsManager. The following functions and attributes are available:
UserDetailsManager.getUserDetails
Object containing all details of the currently signed in user.
UserDetailsManager.isAdmin
Returns true if the current user is an administrator. Otherwise, it returns false.

Chapter 12 Interface with OTMM
12.5 Assets, folders, keyword search, and reviews

For many objects within OTMM, such as assets and folders, the method of accessing
them comes under a unified umbrella of services. The intention of a service is to
provide a common API for performing Create, Read, Update, Delete (CRUD)
functions on disparate objects.
All services under the OTMM HTML5 UX can be accessed under otui.services.
Each service typically has create, read, update, and delete methods, each of which
take a data object containing information about what is being accessed and a
callback which is called after the service has completed its work.
While it is not guaranteed that all objects will be accessible under services, it is also
not guaranteed that each service present will have create, read, update, and delete
methods available. If you find that a given service is not available, or it does not
meet your requirements, then you should make use of the REST API directly.
Services will be augmented to be fully representative of the functionality required in
subsequent releases.
A sort order object is a JavaScript Object containing the following attributes:
field
The field used for sorting on. This is commonly a metadata field name.
direction
The direction to sort in. Should be asc (ascending) or desc (descending).
12.5.1 Services
Each service function takes two arguments: A data object (which data is required is
listed against each service), and a callback function.
The callback function will be given at least two arguments, including the response,
and a Boolean indicating whether the request was successful or not. There may also
be a third argument, which is the HTTP status returned from the REST API when
performing a call. In all cases, the success Boolean is always the last argument to the
callback.
If the request was successful, then the response will contain the data requested in the
case of read requests. If the request was not successful, then the response, if it exists,
will be an object containing an exception_body object, which will contain a
message detailing why the request failed. This can then be used to notify the user of
an error.
For more information about the data format, see “REST API documentation”
on page 10.

12.5. Assets, folders, keyword search, and reviews
Example 12-3: How services are typically used
// Read an asset and notify the user of its name.

function showAssetName(assetID) {
// Block the UI to let them know that we're doing something.
otui.main.blockContent({'message' : 'Getting asset name'});
otui.services.asset.read({'assetID' : assetID}, function(response, success) {

// If success is false then we had an error, so display it please.
if (!success) {
var message = response.exception_body.message;
'message' : message,
'status' : 'error',
'stayOpen' : true
});
}
else {
// Success, alert the user with the asset name.
var assetName = response.asset_resource.asset.name;
otui.alert(otui.tr("Asset name is {0}", assetName));
}
// Always unblock the UI afterwards!

otui.main.unblockContent();
});
}
Note: For additional guidance on using the REST API to retrieve data, see the
otmm/model/manager folder. These methods may be modified, deprecated or
removed in future releases.

Chapter 13
Views
Within the OTMM HTML5 UX, views are the medium through which functionality
is delivered to the end user. Views provide a standardized, modular base for
encapsulating an area of functionality entirely, including its display, state, and route
through the application.
Each view is comprised of a HTML template used for content and a JavaScript View
class which provides state and parameter tracking to back it.
Views can be cached and are intended to be self-contained and reusable across the
application. They can also be displayed both as main areas of the application or as
modal dialog boxes.
Throughout this section the views examples pack that comes with OTMM will be
referenced.
13.1 Create a view

To create a new view, first create a new JavaScript file with the same name as the
view, and then fill it with the appropriate encapsulation. For more information, see
“Encapsulation of code” on page 21. A new HTML import file for the view will also
be required, which will contain a reference to that JavaScript file, along with any
HTML templates used for the view. For more information, see “HTML templates”
on page 19. Finally, a .LESS file for the styles for the view will be required and is also
referenced in the HTML import.
For examples of everything detailed in this section, see the businesscard folder in
the examples pack.
13.1.1 Create the content template

The first step, before defining the view, is to create a basic content template. For
more information about template types, see “Templates“ on page 43. While this
content template does not need to have any real content at this point in time, it is
logically the first step towards creating the view.
As can be seen in businesscard.html, the BusinessCardView view has a content

template specified as follows:
<template id="content" ot-template ot-view="BusinessCardView">
The ID attribute specifies the name of the template, the ot-template attribute marks
it as a template to be ingested, and the ot-view attribute marks it for the
BusinessCardView.

Chapter 13 Views
Once the view object begins to take shape, the content view can be expanded to
include more content.
Note: When creating a content template, there should only be one top-level
element in the template, which encapsulates the rest of the content.
13.1.2 Definition function

Views are created by using the otui.define function. This takes two arguments,
including the name of the view (which must be unique), and a definition function.
The definition function for a view is called to define properties and methods on
instantiations of that view. In JavaScript terms, this is called the view prototype.
13.1.2.1 Properties
All views should have a properties object. This is a map of default and expected
properties which will be required for the view to work. There should be at least one
property specified, which is name. This should be a unique name for the view.
If you specify any property as undefined, as can be seen with userName in

BuisnessCard.js, then this marks the property as required. That is, when the view is
instantiated, that property must be specified or an error will occur. This is useful for
making sure that you definitely have all the data required to start populating the
view.
Aside from that, any default property values which would be required for the view's
logic should be specified there.
13.1.2.2 Content function

All views should have a content function. This is designated as _initContent
within the definition function. This function receives two parameters, including a
reference to the view that is being initialized, and a function, placeCallback, which
should be called with the content to be displayed in the view.
The most typical use of the content function is to retrieve a HTML template and
send that to be placed as content for the view. This can be done, as seen in
BusinessCardView.js, by using the this.getTemplate() function. This will
retrieve the template with the given ID that is marked for that view.

13.1. Create a view
13.1.2.3 Watch properties

It is possible to watch a property, so that when the value of the property changes, a
function is fired, or invoked, to respond to that update. By doing this, you can make
the view more reactive to changes. Watching properties can be established by using
this.watch() within the definition function.
An example of this can be seen in BusinessCardView.js, where the userName

property is watched so that when it changes, the card reloads with the new user's
details.
13.1.2.4 Event listeners

Over the lifecycle of a view there will be a number of events which are fired on the
view. It is possible to listen for those events and to respond accordingly by using the
this.bind() function.
Examples of this can be seen in every example where the setup event listener is used
to set up interaction events.
Another example of this involving a custom element binding can be seen in

MosaicView.js, where there is an event listener for the render event bound.
While the example uses a custom render event which is emitted by the
ResultsView, the following set of standard events can be bound to any view.
Event Description
setup Called whenever the view is displayed.
setup-finished Called whenever the view is displayed,
useful for ensuring something is run after
other setup functions.
teardown Called when a view is to be destroyed.
resize Called whenever the view is resized, either
from the window being resized or by another
view modifying it.
detach Called when the view is detached from the
UI, so that it is no longer visible. Useful for
resetting the state when the view is on
screen.
attached-to-view Called when a view is attached to a parent
view. Useful for pulling through data from
parent views in a view hierarchy.
removed-from-view Called when a view is removed from a
parent view. Useful for cleaning up data that
was pulled through from parent views.

Chapter 13 Views
Event Description
show For tabbed composite views, this event will
be called on a child view (tab) whenever it is
shown.
13.1.2.5 Additional functions

If the view can benefit from having extra public functions defined on it, then this can
be done in the definition function by assigning a function to the object. An example
of this can be seen in BusinessCardView.js where we define the sendEmail
function to open the system's email client for the view's current user.
13.1.2.6 Additional constructor

It is possible to specify a function to be used as a constructor for when an
instantiation of that view is created by returning the constructor from the definition
function.
13.1.3 Display the view as a dialog box

The easiest way to display a new view is to display it as a dialog box. This can be
done through use of the asDialog() function. This function should be passed an
object of properties to use for instantiation. The view will then be shown as a modal
dialog box.
An example of this can be seen in BusinessCardView.js, where the

BusinessCardView is instantiated as a dialog box, showing the business card for the
administrator user.
13.1.4 Display the view as a main application area

To display a view as a main application area, create a route in the application. This
serves a dual purpose of dealing with view instantiation and navigation, and
creating a URL-based entry point for that area of the application.
Creating a route is a two-step process. An example of this process can be seen at the
bottom of examples.js in the examples pack.

13.1. Create a view
13.1.4.1 Define the route URL and its mappings

First, you must define the URL for the route and what content that URL maps to.
This is done by using the route.as function on a view. The route.as function takes
at least one parameter, which defines which URL pattern to use. Any number of
routing functions can be specified as parameters after the URL pattern.
URL format
The URL format for a route consists of a parameterized URL fragment which,
when the URL for the page is set to that URL, will navigate or route to the view.
Every parameter which is specified as part of a URL format will be placed into
the views which are displayed when users navigate to that URL. Parameters are
bound to a URL format by specifying the parameter with the colon (:) character
added as a prefix. Parameters are, by default, mandatory, unless question mark
(?) character is added as a suffix.
For example, the URL for displaying the Detail view for an asset in OTMM may
be the following:
asset/:resourceID@:InspectorView_selected?
This URL format will then match on any URL in the application which matches
that format, and will set the resourceID parameter and the InspectorView_
selected parameter, should it exist, into any views that are created.
Note: If a parameter has a prefix with the name of a view and an

underscore, then when placed into a view of that type, the prefix will be
removed. For example, the parameter InspectorView_selected will be placed
into the InspectorView as just selected.
Routing functions
After the URL format has been specified, any number of routing functions can
be specified. These functions are used to tell the UI framework what to display
for this URL.
The first function which is usually specified is otui.withTemplate, a function
to indicate which layout template to use. For more information about templates,
see “Templates“ on page 43.
The following templates are available:
main
Template for showing one view which takes up the whole screen.
main-with-sidebar
Template for showing two views, one in a left-hand sidebar and another
which takes up the whole screen.
horz-split
Template for showing two views which each take up 100% of the width of
the screen and 50% of the height of the screen.
The remaining functions typically dictate which views to display in the layout
template. When inserting views into the layout templates, the views are always

Chapter 13 Views
inserted left to right and then top to bottom. These functions are usually variants of
route.to on a view, called on the view to display. This function can be passed an
object of extra properties to use for instantiation or alternatively, a function which
can read the parameters from the URL and return an object of extra properties.
You will find examples of these in examples.js in the examples pack.
Binding the route to a name

Optionally, you can bind the URL to a name to increase reusability of routes.
This can be done by using the route.define function on a view, passing the
function a name for the route and then the response from view.route on a
view. Once the route has been bound to a name, it can then be re-used for other
named route definitions, or used as click handlers, by using route.use on a
view.
Reading routes
There are patterns to help you read and remember functions for routing. For
example, the full definition of the open route for ExamplesView in examples.js,
if compressed into a single line, reads as follows:
ExamplesView.route.define("open",
ExamplesView.route.as("demo/examples/:example?",
otui.withTemplate("main-with-sidebar"),
ExamplesView.route.to(),
loadCurrentExample));
This is designed to be read in English as:
define route open as "as demo/examples/:example?, with template main-with-sidebar,

route to ExamplesView and load current example".
define route open as "as demo/examples/:example?, with template main-

with-sidebar, route to ExamplesView and load current example".
Likewise, the "open-contents" route for ExamplesView in examples.js is as
follows:
ExamplesView.route.define("open-contents",
ExamplesView.route.use("open"));
This is designed to be read in English as:

define route open-contents as "use the route called open for ExamplesView"

13.2. Functionality within views
13.1.4.2 Use the route URL

After the route URL has been created and bound to a name, it can then be used to
display the view by using the route.use function on a view as part of a click
handler. This is most frequently done as part of a top-level menu action or some
other menu action.
You can see an example of this in examples.js in the examples pack.
13.2 Functionality within views

This section discusses functionality within views.
13.2.1 Display resources

When writing views, you may want to retrieve some resource such as an asset or
folder and display it at the frontend. To simplify this procedure, the following
elements have been created:
ot-resource
ot-metadata
ot-rendition
13.2.1.1 Add resource elements to a template

To leverage this functionality, start by putting an ot-resource element in a
template. This element will need to have the ot-resource-locator attribute
specified on it. This should be set to one of the following values depending on what
resource you are looking at:
verbose
For assets/folders which have been requested from the REST API without
specifying any specific fields to return.
light
For assets/folders which have been requested from the REST API with only
specific fields return.
path
For all other assets/folders.
You can place the ot-metadata and ot-rendition elements at any point within the
ot-resource element.
For ot-metadata elements, you must specify the ot-fields attribute, which is one
or more fields from the resource to display. For resources without asset-type
metadata, such as anything other than folders or assets, you should specify the
data-type attribute. For a full list of types, as well as a full reference on this

Chapter 13 Views
element, see the ot-metadata namespace in “JavaScript API documentation”

on page 10.
For ot-rendition elements, you must specify the ot-rendition-types attribute,

which is one or more rendition types from the resource to display, and the ot-
rendition-format attribute, which is what format to display the rendition in. This
should usually just be set to IMG. For a full reference on this element, see the ot-
rendition namespace in “JavaScript API documentation” on page 10.
For an example of the ot-resource and ot-metadata, see the BusinessCardView

content template in businesscard.html in the examples pack.
13.2.1.2 Apply the resource to that template

After the display of the resource has been created in the template, it is then possible
to apply a resource object to be displayed by using the otui.Templates.
applyObject() function, passing in the area where the ot-resource element is
located. This does not have to be the ot-resource element itself, but one of its parent
elements.
An example of this can be seen in BusinessCardView.js, in the loadUser()

function.
Note: If you are using the ot-resource element with objects retrieved directly
from the REST API, and not through one of the UI services, then ensure that
the object passed into otui.Templates.applyObject is the resource itself and
not it's wrapper. For example, retrieving an asset directly from the REST API
will wrap the asset itself in an asset object, which is itself wrapped in an
asset_resource object. The UI expects just the asset itself, not the wrappers.
13.2.1.3 Use ot-resource for third party resources

The ot-resource and ot-metadata elements can be used for displaying custom or
third party resources as well using the same methods as for OTMM resources. To do
this, set the ot-resource-locator attribute for the ot-resource element to path,
and use applyObject in the same manner as describe in “Apply the resource to that
template” on page 80.
There are a few restrictions for using this default functionality:
• Resources must be in JSON, and that JSON cannot have recursive links in it, such
as
obj.a = obj
• The resource JSON must be a flat object with each value as a primitive value such
as string, number, or Boolean, or in the case where there are both internal and
display values, as a JavaScript object with ID and name as the internal and
display names respectively.
• Dates in the JSON must be specified as either a JavaScript Date object, or a String
in ISO-8601 date format.

13.2. Functionality within views
Example 13-1: JSON sample
{
"string_field" : "string value",
"date_field" : "2014-07-04T14:10:44",
"number_field" : 5,
"boolean_field" : true,
"key_value_field" : {
"id" : "internalvalue",
"name" : "Display value"
}
}
If the resource JSON that is to be displayed cannot be put into this format, you will
need to write a custom resource locator for the ot-resource element to allow the
resource element to navigate the JSON structure, and set the ot-resource-locator
attribute to be the name of that custom resource locator. For more information, see
the ot-resource namespace in “JavaScript API documentation” on page 10.
13.2.2 Collapsible sidebars

The following procedure explains how to make a sidebar collapsible in a layout
template. An example of this can be seen in examples.js and include.html in the
examples pack.
To add view collapse to a template:
• To the content template for your sidebar view, add the following underneath
your main element:
<ot-view-collapser collapser-style="vertical-bar" ot-
platform="desktop"></ot-view-
This adds the display and functionality for a vertical view collapse.
To add sidebar styles:
• In the .less file for the view, add the following:

ot-view[ot-view-type="<viewName>"]
{
.as-sidebar();
}
where <viewName> is the name of the view.

Chapter 13 Views
13.2.3 Sidebar styles

When creating a sidebar, you may want to use the same styles used by core OTMM.
To create a sidebar header in the OTMM style:
• Add the header as the first element underneath your main element in your
content template and give it the class ot-view-header-title.
To create a clickable list in a sidebar in the OTMM style:
• Apply the OTMM default styles to those list entries by giving each entry a class
of ot-list-view-entry. An example of this can be seen in include.html in
the examples pack.
13.3 Chains of requirement

When creating a view, if you need to reference another view in the definition
function, and that view is in another JavaScript class, so its existence is not
guaranteed, you can mark one or more views as being required for definition by
using otui.require before using define.
An example of this can be seen in the examples pack in AddressBookView.js, in the

definition for the view.
13.4 View mixins

When defining a view, it is possible to supply a list of functional mixins to the
definition to add common functionality across several views. This can be done by
passing the array of mixins in as the second argument to otui.define:
Example 13-2: Pass the array of mixins in as the second argument to otui.
define
// Create functional mixin for editable calls

function editable() {
this.startEdit = function startEdit() {
// Start edit.
};
this.endEdit = function endEdit() {

// End edit
};
this.save = function save() {

// Save edit
};
this.rollback = function rollback() {

// Roll back edit
};
};
// And then use that functional mixin on the view

13.5. Composite views
otui.define("EditableView", [editable], function() {

// Define view here
});
There are also several mixins which come with the framework and can be used to
create composite views, which are described in “Composite views” on page 83.
13.5 Composite views

Views are able to contain other “child” views to build a display hierarchy should the
functionality call for it. You can create the following types of composite views:
• Freeflow composites.
• Tabbed composites.
13.5.1 Freeflow composites

A view marked as a freeflow composite view is able to display child views in a
freeflow style. Each child view of a freeflow composite view has an ot-view element
which will contain the content of the child view inserted into the content of the
parent composite view. This can then be styled in any way that is necessary to
achieve a freeflow style.
An example of this kind of view can be seen in the examples pack under
AddressBookView.js, which will display a series of business cards in a grid-like
view.
To create a freeflow composite view:
1. Pass in the functional mixin otui.Views.MIXINS.CHILDREN when defining a

view.
2. Create a content template for the view which contains an element with the class
ot-child-container. This will contain all the child views when displayed.
When using freeflow composite views, it is possible to specify a template which will
be used to wrap each child view so that extra functionality and display attributes
can be incorporated without having to specifically modify the child views. This can
be done by specifying the name of the template as the property child-template and
ensuring that the template has an element with the class ot-child-content. For an
example, see AddressBookView.js in the examples pack.

Chapter 13 Views
13.5.2 Tabbed composites

A view marked as a tabbed composite view is able to display child views as tabs.
Only one child view will be shown at a time, depending on which tab is clicked.
To create a tabbed composite view:
1. Pass in the functional mixin otui.Views.MIXINS.TABS when defining the

view.
2. Create a content template for the view which contains an ot-tabs element. This
will contain all of the tabs and each of the views for those tabs.
13.5.3 Add views to a composite view

Once a composite view has been created, views can be added either during
definition or construction, or after construction.
During definition/construction
If you want to have a default or predefined set of child views for a composite
view, you can specify this.hierarchy in the definition function for the view.
This should be an array which contains one or more objects with the following
attributes:
view
The constructor of the view to use.
properties
An object of properties to use for instantiation of that view.
Example 13-3: Composite view example
otui.define("ExampleTabbedView", [otui.Views.MIXINS.TABS], function() {

this.hierarchy = [
{'view' : ExampleChildView, 'properties' { 'name' : 'one', 'display' :
otui.tr("Child one") }},
{'view' : ExampleChildView, 'properties' { 'name' : 'two', 'display' :
otui.tr("Child two") }}
];
});
After construction
If you want to dynamically add views after construction, you can use the
addChildView function on a view, passing in an instantiation of the view to add.
Tip: Views can be instantiated as regular JavaScript classes by using the

new keyword, such as new ExampleView(props).
You can find an example in the examples pack under AddressBookView.js.

13.6. Extend views
13.6 Extend views

Views can be created from other views to create a more Java-like sense of class
inheritance by using the otui.extend function. This takes the following arguments:
• The name of the view to extend.

• The name of the new view to be created.
• The definition function which will run on that view in addition to the original
definition function.
An example of this can be found in the examples pack under MosaicView.js.
13.7 Augment views

Existing views can be augmented with new functionality by using the otui.
augment function, which takes the following arguments:
• The name of the view to augment.

• A definition function which will run on that view in addition to the original
definition function.
This is useful for a number of circumstances, such as overriding or supplementing

existing functionality on a view. For example, overriding the login function on the
LoginView to perform extra security checks, or adding a new tab to the asset Detail
view.
Example 13-4: Augment a view to add a new tab to the asset Detail view
(function(otui) {
/* otui.require ensures that the view named in the argument exists before continuing
the function chain.
* otui.augment augments the prototype of an existing view, without extending it to
create a new view.
* the line below essentially reads "Once the CustomChildView exists, augment the
InspectorView by executing the following function on its prototype".
*/
otui.require("CustomChildView").augment("InspectorView", function() {
/* As detailed in the integrators guide, the 'hierarchy' property of a view's
prototype is the list of all child views which will be created for that view.
* We add a child view by pushing a new entry into that ar-ray.
* Note: this.inherit() is a special function which can be used in this
circumstance to indicate that properties for the parent view should be passed down to
the child view. For exam-ple, the line
* 'assetID' : this.inherit("assetID")
* indicates that this child view should inherit the "as-setID" property from
the parent view (InspectorView).
*/
this.hierarchy.push({
'view' : CustomChildView, // 'view' attribute is a refer-ence to the view
which will be used for this tab
'if' : function() { return true; }, // 'if' attribute is an optional attribute which
references a function. When the child view is due to be created for an asset inspector,
it will call this function. Returning false from this function will hide this child view
and make it inaccessible for that instance of the asset inspector.
'properties' : { // 'properties' attribute is a map of properties which will
be passed to this child view on instan-tiation

Chapter 13 Views
'assetID' : this.inherit("assetID") // inherit the as-set ID from the

parent view (InspectorView)
}
});
});
})(otui);

Chapter 14
Widgets
Using widgets, you can integrate OTMM into any external applications that allows
you to add embed code. By integrating widgets, you provide that external
application with access to a large portion of the functionality in OTMM.
Important
• This section uses host applications to refer to the external applications that
integrate widgets.
• This section is only applicable to widgets that are being added to host
applications.
• If you created custom widgets, those widgets will no longer display on the
Home page. Depending on how you developed and implemented these
widgets, they may cause issues loading the Home page. You may need to
remove these widgets from the host application, or update the code to
resolve any JavaScript errors or conflicts to use them in host applications as
external widgets.
The following lists the task that you need to perform to integrate widgets into a host
application.
1. Configure OTMM. See “Configure OTMM” on page 88.
2. Get the embed code and add it to your application. See “Get embed code”
on page 90.
By default, the following widgets are included with OTMM:
• Folder preview widget

This widget displays the contents of a given folder in OTMM in a Gallery
view and can also optionally display a folder navigation tree.
• Asset widget
This widget displays a given asset, with some basic metadata and
functionality, such as playing video or audio. Currently, download is the
only action available for assets in the Asset widget.
• Saved search preview widget

This widget displays the results of a saved search in Gallery view in OTMM.
• Upload widget
This widget displays an area which can be used to upload files to OTMM.

Chapter 14 Widgets
Note: If a user does not have the necessary upload permissions, import
template, or security policies, then the Upload widget is not available
on the Home page.
3. Include widgets on a page. See “Include widgets on a page” on page 90.
4. Provide a way to authenticate widgets in the host application. See “Authenticate
widgets in host applications” on page 99.
5. Interact with widgets by adding widget attributes, features, and events. See
“Include widgets on a page” on page 90.
Note: This task is optional.
6. Style and position widgets. See “Style and position widgets” on page 103.
Note: This task is optional.
14.1 Configure OTMM

Before you integrate a widget into a host application, you need to configure OTMM
to allow the host application to access the OTMM widgets.
In addition, you may want to use extensions for the UI in the widgets. To do this,
you must configure OTMM to make the appropriate extension folders visible outside
of main OTMM.
Notes
• The following configurations assume that the OTMM installation widgets

are loaded from the following location:
http://path.to.mediamanager:11090/otmm/ux-html
• If OTMM is included in host application that uses Iframes or Frames, you

need to configure X-Frame-Options and set the headers in the
responseheaders.properties file. For more information, see section 4.6.6.6
“Secure the OTMM application” in OpenText Media Management - Installation
Guide (MEDMGT210400-IGD).

14.1. Configure OTMM
14.1.1 To configure CORS to allow access to OTMM widgets

1. Sign in to the Web Administration tool.
2. On the Dashboard or top-level menu, navigate to Configurations, and click

Settings.
Note: This procedure discusses editing system settings. You can search for
system setting on the Settings page in the Web Administration tool. For
more information about how to search for settings, see section 23.1.2.4 “To
search for a property” in OpenText Media Management - Administration
Guide (MEDMGT220200-AGD). After finding the setting on the Search
results page, click the property name. For more information about how to
configure system settings, see section 23.1.2.3 “To edit a component and
properties” in OpenText Media Management - Administration Guide
(MEDMGT220200-AGD).
3. Edit the CORS_ORIGIN_LIST setting by adding comma separated list of “origin”

sites.
Note: An origin site is the end-point address to access the host application.
If the host application uses load balancers, you only need to specify the
end point URL that the user uses to access the host application. You also
need to specify the resource locator protocol for each origin site, such as
http:// or https://, and the port of the host application. For example, if
the host application can be accessed at the URL http://third.party.
application:2890/app, then the setting would be as follows:
"CORS_ORIGIN_LIST"="http://third.party.application:2890"
14.1.2 To configure extensions to be visible outside of OTMM

1. In a text editor, open the web.xml file, which is located in one of the following
deployed folders:
JBoss EAP
<TEAMS_HOME>/ear/artesia.ear/otmmux.war/WEB-INF
TomEE
<TEAMS_HOME>/ear/atresia/otmmux/WEB-INF
2. Navigate to the last XML tag, <filter-mapping>, and then add the following
below it:
<filter-mapping>
<filter-name>CORSFilter</filter-name>
<url-pattern>/ux-html/directory/*</url-pattern>
</filter-mapping>
where

Chapter 14 Widgets
directory is replaced with the name of the extension folder that you want to
expose.
14.2 Get embed code

You can get the embed code for the following widgets manually or through the
OTMM Web client:
• Folder preview widget

• Asset widget
• Saved search preview widget
Note: Getting the embed code through the OTMM Web client provides you
with the IDs. For more information about how to get embed code using the UI,
see section 25 “Generating embed code” in OpenText Media Management - Web
Desktop Client User Guide (MEDMGTMOD220200-UCW).
To get the embed code for the Upload widget, copy it from this document. See “To
include Upload widget functionality” on page 96.
14.3 Include widgets on a page

You can include references to widgets manually or programmatically.
14.3.1 To include widgets on a page manually

1. Include a reference to the dist/otmm-platform.min.js JavaScript file to load
the core OTMM widget code and third-party libraries required for OTMM. For
example:
<script src="http://path.to.mediamanager:11090/otmm/ux-html/dist/
otmm-platform.min.js></script>
2. Include the HTML import link elements for each widget library that is required.
See the following sections for information about their locations:
• “To include Folders widget functionality” on page 91

• “To include Saved searches widget functionality” on page 93
• “To include Asset widget functionality” on page 95
• “To include Upload widget functionality” on page 96
3. Include any custom JavaScript or HTML files after the otmm-platform.min.js

and widget script inclusions.
4. Include the widget element to display the widget.
Note: For more information about including the widget element, see
“How to interact with widgets” on page 102.

14.3. Include widgets on a page
5. To include the masonry-cell package, do the following:
a. In a text editor, open the web.xml file, which is located in one of the
following deployed folders:
JBoss EAP
<TEAMS_HOME>/ear/artesia.ear/otmmux.war/WEB-INF
TomEE
<TEAMS_HOME>/ear/atresia/otmmux/WEB-INF
b. Add the following to the web.xml file:

<filter-mapping>
<filter-name>CORSFilter</filter-name>
<url-pattern>/ux-html/results-masonry/*</url-pattern>
</filter-mapping>
c. Save and close the web.xml file.
d. Include the http://path.to.mediamanager:11090/otmm/ux-html/

results-masonry/include.html file in the HTML file that is deployed in
the host application.
6. To apply the changes, restart the OTMM server.
14.3.1.1 To include Folders widget functionality

1. Create an import link to dist/otmm-asset-widget.min.html underneath the
otmm-platform.min.js script. For example:
<link rel="import" href="http://path.to.mediamanager:11090/otmm/
ux-html/dist/otmm-asset-widget.min.html"/>
2. Include Folders widgets in a page by using the <otmm-folder> element with

any of the attributes listed in “Attributes” on page 92.
3. To enable features, add feature elements within the <otmm-folder> element.

For example:
<otmm-folder folder-id="xxxxxxxxxxxxxxx">
<feature name="folders-list"></feature>
</otmm-folder>
Note: Not all features work in external widgets, as noted in “Features”

on page 92.
Note: Be aware that the name of the HTML file is otmm-asset-widget. This is
so for future releases, single asset functionality can be shipped while being
backwards compatible with existing integrations.

Chapter 14 Widgets
Table 14-1: Attributes
Attribute Description
header A displayable title for the widget. (Optional)
folder-id The ID of the folder to display for this
widget. If one is not supplied, and the
settings feature is available for the widget,
then the settings area will automatically
display. The attribute is mandatory.
template-name The name of the template to use for
displaying assets in this folder. Defaults to
tiled-cell can be one of tiled-cell, masonry-
cell, table-cell, grid-cell, assets-slider. The
attribute is optional.
user-page-properties The controls for the Sort results by
parameters. This attribute allows users to
sort by prefix, field, and assets per page. You
must use the JSON format and provide all or
none of the following supported properties:
sortField, sortPrefix, and
assetsPerPage.
Table 14-2: Features
Feature Description External use

pagination Includes pagination tools for No
the widget
see-all Includes a "see all" link in the No
footer of the widget. The link
fires the see-all event when
clicked.
upload Allows for new assets to be Yes
uploaded to this widget by
drag and drop or by clicking
the upload button.
results-navigation Enables the ability for the Yes
widget to change the folder
that is being viewed by
selecting folders either in the
Main View area or on the
breadcrumb.
folders-list Displays the folder Yes
navigation tree to the left of
the widget.


settings Allows end users access to a No
settings area where they can
select their own folder ID
and title.
Table 14-3: Events
Event Description
open-contents Fired when the user clicks on an asset. Detail
object contains:
• resourceID - The ID of the asset selected.
• resourceType - The object type of the
asset selected.
open-folder Fired when the user clicks on a folder in the
main view, folders list, or breadcrumb. Detail
object contains:
• nodeID - The ID of the folder selected.
• breadcrumb - Object containing the full
breadcrumb for the folder selected, split
into IDs and names lists.
update Fired when the user has changed settings in
the settings area. It requires the settings
feature to be turned on. The Detail object is
empty. However, all attributes will have
been updated by this point.
14.3.1.2 To include Saved searches widget functionality

1. Create an import link to dist/otmm-asset-widget.min.html underneath the
otmm-platform.min.js script. For example:
Note: This is the same import link that is used for Folders widget.
2. Include Saved searches widget in a page by using the <otmm-saved-search>

element with any of the attributes listed in “Attributes” on page 94.
3. To enable features, add feature elements within the <otmm-saved-search>
element. For example:
<otmm-saved-search saved-search-id="xx">
<feature name="refresh"></feature>
</otmm-saved-search>

on page 94.

Chapter 14 Widgets
Note: Be aware that the name of the HTML file is otmm-asset-widget. This is
for future releases. Single asset functionality can be shipped while being
backwards compatible with existing integrations.
header A displayable title for the widget. This
saved-search-id The ID of the saved search to display for this
widget. If one is not supplied, and the
settings feature is available for the widget,
then the settings area will automatically
display. This attribute is mandatory.
template-name The name of the template to use for
displaying assets in this folder. Defaults to
tiled-cell, can be one of tiled-cell, masonry-
cell, table-cell , grid-cell, assets-slider. This
user-page-properties The controls for the Sort results by
parameters. This attribute allows users to
sort by prefix, field and assets per page. You
must use the JSON format and provide all or
none of the following supported properties:
sortField, sortPrefix, and
assetsPerPage.

pagination Includes pagination tools for No
the widget
see-all Includes a "see all" link in the No
footer of the widget. The link
fires the see-all event when
clicked.
refresh Exposes a "refresh" icon in Yes
the header of the widget
which, when clicked, will
manually refresh the Saved
searches widget contents.
select their own folder ID
and title.

Table 14-6: Events
Event Description
open-contents Fired when the user clicks on an asset. Detail
object contains:
• resourceID - The ID of the asset selected.
• resourceType - The object type of the
asset selected.
open-folder Fired when the user clicks on a folder in the
Main View, folders list, or breadcrumb.
Detail object contains:
• nodeID - The ID of the folder selected.
• breadcrumb - Object containing the full
breadcrumb for the folder selected, split
into IDs and names lists.
open-search Fired when the user clicks on the "see all"
area for the widget. Detail object contains:
• searchID - A string which contains the
title of the saved search and the ID of the
saved search in such a format that can be
used by the UI.
update Fired when the user has changed settings in
the settings area. It requires the settings
feature to be turned on. The Detail object is
empty. However, all attributes will have
been updated by this point.
14.3.1.3 To include Asset widget functionality

1. Create an import link to dist/otmm-widget-base.min.html, which is located
under the otmm-platform.min.js script. For example:
2. Create an import link to dist/asset-inspector.min.html, which is located

under the otmm-asset-widget.js script. For example:
ux-html/dist/asset-inspector.min.html"/>
3. Include an Asset widget on a page by using the <otmm-asset-inspector>

element with any of the attributes listed in “Attributes” on page 96.

Chapter 14 Widgets
asset-id The ID of the asset to display for this widget.
This attribute is mandatory.
asset-type Set this attribute to detect. This attribute is
mandatory.
14.3.1.4 To include Upload widget functionality

1. Create an import link to dist/otmm-upload-widget.min.html, which is
located under the otmm-platform.min.js script. For example:
ux-html/dist/otmm-upload-widget.min.html"/>
2. Include the Upload widget in a page by writing an <otmm-upload> element into

the page with any of the attributes listed in “Attributes” on page 96.
3. To enable features, add feature elements within the <otmm-upload> element.

For example:
<otmm-upload folder-id="xxxxxxxxxxxxxxxxxxx">
<feature name="folder-selection"></feature>
</otmm-upload>

on page 96.
folder-id The ID of the folder to upload assets into. If
you do not provide a folder ID, the user can
choose by browsing.
Attribute Description External use

folder-selection When a folder ID is provided Yes
for this widget, this feature
allows the user to alter that
folder ID.

Attribute Description External use

choose their own folder ID
and title.
Table 14-10: Events
Event Description
upload-started Fired when an asset upload is initiated.
upload-finished Fired when an asset upload completes.
The detail object contains:

• success - A flag indicates if the upload is
successful.
• batch - Provides the details of uploaded
files, only returned if the upload
succeeded, meaning when the success
flag is true.
• error - An error message, only returned
when success is false.
14.3.2 Include a widget programmatically

If the integration of widgets involves programmatic insertion of widgets, then
OpenText recommends that you template the widgets and use the OTMM
templating engine.
To template a widget:
1. Create an HTML file which includes a <template> tag and give it the ot-
template attribute and an ID attribute. Ensure that this ID attribute is unique to
the system. You can do this by prefix the template with the name of the
application. Inside the template element, write the widget as you normally
would write a widget. For example:
Example: <template ot-template id="sample-app-folder">
<otmm-folder header="OTMM Folder picker">
2. Go to the end of the file and include a script tag that calls otui.Templates.
load().
3. Load the template import using otui.loadImports().
Note: Any templates that were in the file can then be accessed using otui.
Templates.get(), passing in the ID of the template. This will return a
document fragment that can be inserted into the page.
The following example shows how to add the widget in a template.

Chapter 14 Widgets
Example 14-1: sample-app-import.html
<template ot-template id="sample-app-folder">

<otmm-folder header="OTMM Folder picker">
<feature name="folders-list"></feature>
<feature name="pagination"></feature>
<feature name="results-navigation"></feature>
</otmm-folder>
</template>
The following example shows how to trigger the template widget.
Example 14-2: sample-app.js
// Assume that the otmm-platform has loaded, along with all prerequisites
function addWidget(element) {
var widget = otui.Templates.get("sample-app-folder");
element.appendChild(widget);
}
14.3.2.1 Load widgets after page load
Note: On some systems, it may not be possible or desirable to alter core HTML
files to include script and link tags. In these cases, you can load the OTMM
widgets programmatically after the page of the host application loads.
To load widgets programmatically:
1. Create a script element pointing to otmm-platform.min.js (as above in “To

include widgets on a page manually” on page 90) and insert it into the page.
2. Add an event listener to the window for the event OTUIReady. This should be
placed in the same function as where the script is created. This event will be
fired after the OTMM platform has been loaded and is ready for use.
3. In the event listener function, load one or more of the widget libraries by using
the function otui.loadImport(), passing in a URL (or an array of URLs), and a
function to call once those have been loaded. In this case, each of the URLs
should be one of the widget library URLs. For more information about their
locations, see the following sections.
Note: For advanced configurations, this could also be used to load another
HTML page which in turn includes links to the widget libraries.
4. The callback function for otui.loadImport() can then call otui.widget.

setup() to handle authentication, setup, initialization, and so on.
5. Insert the widgets.

14.4. Authenticate widgets in host applications
14.4 Authenticate widgets in host applications

This section provides information about authentication.
Specify session headers

In most cases, when OTMM and the host application share the same Single Sign-
On Gateway, an authentication token needs to be passed from the host
application to the OTMM widgets to share the same session. This token typically
takes the form of a HTTP header.
After retrieving the authentication token, a set of session headers are passed, as a
JavaScript object, to the widgets. Session headers can be passed as an element or
as a JavaScript variable.
Note: Specifying session headers is applicable if you are using the OTDS
Ticket Resolver or if you are using Username Resolver and the host
application and OTMM are using the same OTDS instance for
authentication.
Configure OTMM
Configure OTMM system settings. This includes configuring the SSO resolver
settings, which are based on the authentication method that you will be using.
The following describes the scenarios to help you determine which SSO
Resolver you should use:
1. The widget is embedded in an application that does not authenticate users,
or authenticates a different user base than OTMM. Use the
WidgetUserName Resolver.
2. The widget is embedded in a host application that authenticates users using
the same OTDS instance as OTMM. Use the OTDS Ticket Resolver.
3. The widget is embedded in a host application that does not authenticate
users using OTDS or does not use the same instance of OTDS as OTMM. The
host application authenticates using the same user base as OTMM. For
example, the host application authenticates directly against LDAP or Active
Directory and OTDS has been configured with a synchronized partition that
points to this same directory. Use the Username Resolver.
Note: The host application needs to pass a valid OTDS ticket to the
OTMM widget.
Note: For use cases beyond these options, implement a custom SSO
Resolver. For more information, see section 9.1.2.4 “Configure SSO
resolver” in OpenText Media Management - Integration Guide
(MEDMGT220200-AIN).

Chapter 14 Widgets
14.4.1 To specify the session headers

• Do one of the following:
• To specify the session headers as an element, create an otmm-setup element,

and then set the attribute session-headers to a JSON object of header name
-> header value. For example:
<otmm-setup session-headers='{"OTDSToken" : "value-
goeshere"}'></otmm-setup>
• To specify the session headers as a JavaScript variable, set the headers object
as a JavaScript variable by setting the JSON object to the variable otui.
sessionHeaders. For example:
otui.sessionHeaders = {"OTDSToken" : "valuegoeshere"};
Note: Setting the headers object as a JavaScript variable is especially

useful when loading widgets after page load.
14.4.2 To configure authentication on the OTMM server

Navigation path
> Dashboard or top‑level menu > Configurations > Settings
1. Specify the session headers if you are using one of the following in Step 4:
• OTDS Ticket Resolver.

• Username Resolver and the host application and OTMM are using the same
OTDS instance for authentication.
2. Sign in to the Web Administration tool.
3. On the Dashboard or top-level menu, navigate to Configurations, and click

Settings.
Note: This procedure discusses editing system settings. You can search for
system setting on the Settings page in the Web Administration tool. For
more information about how to search for settings, see section 23.1.2.4 “To
search for a property” in OpenText Media Management - Administration
Guide (MEDMGT220200-AGD). After finding the setting on the Search
results page, click the property name. For more information about how to
configure system settings, see section 23.1.2.3 “To edit a component and
(MEDMGT220200-AGD).
4. To configure the REST API authentication to work with the widgets on host
applications, enable remote sign-in by change the value of the ALLOW_REMOTE_
USER_LOGIN system setting to Y.
5. To configure the SSO Resolvers, do one of the following:

14.4. Authenticate widgets in host applications
Note: For more information about the OTMM SSO resolvers and
guidelines, see “Authenticate widgets in host applications” on page 99.
• Configure the WidgetUserName resolver – Set or append the SSO_

RESOLVER value with com.opentext.mediamanager.restapi.common.sso.
WidgetUserNameResolver. Set the WIDGET_USER_NAME system setting by
entering a username for remote users. For example, you can create a
consumer name, such as John_Doe.
The OTMM system settings configuration will look as follows:
Example:
"SSO_RESOLVER"="com.opentext.mediamanager.restapi.common.sso.WidgetUserNameResolv
er"
"USER_HEADER_NAME"="John_Doe"
The following is an example of the embed code for the WidgetUserName

resolver:
Example: <otmm-setup session-headers='{"X-OTMM-Widget" :

"true"}'></otmm-setup>
• Configure the OTDS Ticket resolver – Set or append the value of the SSO_
RESOLVER setting with com.opentext.mediamanager.restapi.common.
sso.OTDSHeaderTokenResolver. Set the OTDS_SSO_HEADER_NAME system
setting with the header name that you set in the session headers.
The OTMM system settings configuration will look as follows:
Example: "SSO_RESOLVER"="com.opentext.mediamanager.restapi.
common.sso.OTDSHeaderTokenResolver"
"OTDS_SSO_HEADER_NAME"="OTDSToken"
Note: The value of the OTDSToken should be an OTDSSSO Ticket or an

OTMM Ticket and not the integrating host application-specific ticket.
The client code on the host application will look as follows if the JavaScript
object is being passed as an element:
Example:
<otmm-setup session-headers='
{"OTDSToken" : "value-goeshere"}
'></otmm-setup>
object is being passed as a JavaScript variable
Example:
otui.sessionHeaders =
{"OTDSToken" : "OTMMTicket"}

Chapter 14 Widgets
• Configure the Username resolver – Set or append the SSO_RESOLVER value

with com.opentext.mediamanager.restapi.common.sso.
SimpleUserNameResolver. Set the USER_HEADER_NAME system setting with
the header name that you set in the session headers. For example, the client
code on the application you are integrating the OTMM widgets will look like
this:
Example: The OTMM system settings configuration will look as follows:

"SSO_RESOLVER"="com.opentext.mediamanager.restapi.common.sso.SimpleUserNameResolv
er"
"USER_HEADER_NAME"="OTMMUser"
Note: The value of the user set in the header should be a valid OTMM
username. This resolver checks the username.
object is being passed as an element:
Example:
<otmm-setup session-headers='
{"OTMMUser" : "value-goeshere"}
'></otmm-setup>
object is being passed as a JavaScript variable:
Example:
<otmm-setup session-headers='{"OTMMUser" : "app-user"}'></otmm-setup> or
otui.sessionHeaders = {"OTMMUser " : "app-user"};
14.5 How to interact with widgets

Widgets have three main ways of interaction:
• Attributes
• Features
• Events
Each widget includes a discover() method, which lists all available attributes,
features, and events for that widget.

14.6. Style and position widgets
14.5.1 Widget attributes

Widget attributes detail information about what the widget is intended to display.
Each attribute is specified as an attribute on the widget element itself. Common
examples of attributes include a title header for the widget, the ID of a folder to
display, and so forth.
Attributes are fully reflective of the current state of the widget. Changing an
attribute's value will update the widget. For example, changing the folder ID
attribute for a Folders widget will change the widget to display that folder. If the
widget internally changes, the attributes will be updated to reflect that change.
14.5.2 Widget features

Widget features expose extra functionality in a widget that is not enabled by default.
While widgets are designed to work by default with a minimum set of functionality,
extra functionality can be turned on through the use of features. Each feature is
specified as a <feature> element underneath a widget.
Note: Features are not changeable once the widget has been instantiated and
are read-only.
14.5.3 Widget events

Widget events are browser-level events which are called on the widget under certain
circumstances. This allows integrators to hook into user interactions in widgets such
as selecting an asset, and to perform their own actions when that happens.
Widget events work in the same way as normal browser events, such as a click or a
keypress, and can be attached as such. Each event includes a detail object which
includes information pertaining to the event in question.
Note: If using jQuery events, jQuery wraps their own event around the
original event, so the detail object will be accessible under event.
originalEvent.detail instead.
14.6 Style and position widgets

OTMM widgets are included inline in the main document and do not make use of
iFrames. This allows them to be fully responsive to screen changes and they do not
require particular screen sizes.
By default, widgets are displayed as inline-blocks and do not have a specified width
or height. As part of the integration, OpenText recommends that you set these
yourself. Any changes to padding, margin and background color will be honored.
Widgets will respond to any change in size automatically.
For some integrations, you might want to apply custom styling to the internals of
widgets to better integrate into the host application. You can do this through simple
CSS changes, much in the same way that styles can be changed for core OTMM.

Chapter 14 Widgets
14.6.1 To add custom styles to widgets

1. Create a HTML import file (as described in “HTML imports” on page 19),
ensuring that it is loaded as part of the widget integration using either a link tag
or by referencing it in otui.loadImport(). Either way, it is important that this
file is referenced after the core widget includes as it will ensure that any styles
specified will have precedence over the core styling.
2. Create a CSS file and include a link to it in the HTML import file created in Step
1. Ensure that the rel attribute is set to stylesheet/shadow as opposed to just
stylesheet. This will ensure that it is placed into the widgets.
3. Within the widgets, write a CSS to affect the styles.
Note: You must write each style specification twice, with different prefixes
due to technological limitations. Be sure to write each style with the
following prefixes:
:host({widgetname}) {rest of selector}, {widgetname}[ot-
shadow-host] {rest of selector}
For example, this is how you would change the background color of the
footer in the Folders widget to light grey:
:host(otmm-folder) .ot-results-widget-footer, otmm-folder[ot-shadow-host] .ot-
results-widget-footer {
background-color: rgba(224, 224, 224, 0.9);
}

Chapter 15
Prepare integrations for production
When you are ready to deploy the integration in your development environment to
your production environment, you must replace any references to .less files with
references to .css files. This removes the ability to auto-reload .less files during
development. Instead, the processing of .less files into CSS will shift to the server,
which speeds up the user experience in the production environment.
The changes to each <link> element which references a .less file are as follows:
• Change the type attribute from text/less to text/css

• Change the rel attribute from stylesheet/less to stylesheet
• Change the href attribute so that the .less file is referenced relatively as a CSS file
instead from the root of the application.
For example, you would change the following:
<link rel="stylesheet/less" type="text/less" href="./cs_

demointegration/styles.less"/>
To:
<link rel="stylesheet" type="text/css" href="./styles.css"/>
15.1 Generate translations

If necessary, the translation template should be generated for the integration and
then translations should be created for it in the desired languages. For more
information, see “Generate, localize, and deploy custom UI integration messages”
on page 57.

Chapter 16
Style the application
You can style the OTMM UI by changing icons and images, display attributes, and
colors. To do this, you either create or override CSS files that are used for those
styles.
OTMM provides two methods to style the UI:
• Brand
Using this method, you create a brand to style the UI, and you assign the brand
to user groups. You can create a basic brand using the Web Administration tool
or create and configure an advanced brand. To create an advanced brand, you
need to create a brand folder and a file called branding.html. Reference all files,
such as CSS, that you used to create your brand in branding.html. Compress
the brand folder to create a brand configuration file, and then import the
branding configuration ZIP file using the Web Administration tool. For more
information, see “Create a brand” on page 108.
Note: This method does not allow you to override global CSS variables. For
more information, see “Brand limitations” on page 109.
• Theme
Using this method, you create a theme to style the UI and you override the CSS
files. The changes you make will be applied to all user groups automatically. To
change the theme, you need to create a LESS file and an include.html file. The
include.html file must reference the LESS file. For more information, see
“Create a theme” on page 117.
Note: This method allows you to override global CSS variables.
Important
You must choose one of these methods. If you implement a theme, then create
and apply brands to user groups, the brands might not override the style
elements in all cases.
Example 16-1: Brand versus theme
If your organization has multiple business units and each business unit has a
different theme or style, create a brand for each business unit and then assign
each brand to the appropriate user group.
Using the Brands page in the Web Administration tool, you can quickly create
a basic brand. If you want to style the brand further, you can use the basic
brand as an example or as a basis for an advanced brand. To do this, download

Chapter 16 Style the application
the brand and extend it. After creating an advanced brand, use the Brands page
to import it.
If your organization has one corporate style, you can create a theme. Your
theme will apply to all user groups automatically. Another option would be to
create one brand and apply it to the Everyone user group. However, if you take
this approach, note that the brand method does not allow you to override
global CSS variables. See “Brand limitations” on page 109.
16.1 Create a brand

Through the use of the branding infrastructure, you can brand Media Management
by user group. A brand is a folder that contains a collection of items, including CSS,
JavaScript, and image elements. These elements define the items required for a
proper brand presentation in the OTMM UI.
Note: The branding infrastructure is similar to a theme, but with limitations.

See “Brand limitations” on page 109.
You can define the configuration components of a brand by creating a brand

configuration on the Brands page in the Media Management Web Administration
tool. The Brands page provides two methods of creating a brand configuration:
• Basic branding
Fill out and submit a form that defines the brand components.
• Advanced branding
Upload a brand configuration file that contains the branding.html file and
brand components. You must reference all the files that you used to create the
brand in the branding.html file, for example all CSS files and theme.js. After
creating the brand, create a brand configuration file by compressing the folder;
ensure that branding.html is at the top of the folder. Use the Brands page to
import the ZIP file.
Note: You need to create both CSS and theme.js files to style the OTMM
GUI.
An administrator creates a basic brand or upload an advanced brand configuration

and applies the brands to one or more user groups on the User Groups page. If a
signed-in user belongs to a user group with the brand applied, they will see the
branded UI. If the user belongs to more than one user group with different brands
applied, they can set the default brand through their user preferences. If they do not
set a preference, OTMM will use the brand associated with the first user group it
finds. If the user belongs to a group with no brand configuration applied, the system
will load the default brand.

16.1. Create a brand
Note: If an administrator deletes an active brand configuration file, OTMM

will do one of the following the next time the user refreshes their browser or
signs-in:
• Revert to the default UI.

• Revert to another brand configuration if the user belongs to multiple user
groups and different brand configurations were applied to those user
groups.
The following sections explain how to create a brand configuration file using the
Advanced brand method. For more information about creating a brand
configuration using the basic branding method, see section 7 “Create and manage
branding configurations” in OpenText Media Management - Administration Guide
(MEDMGT220200-AGD).
16.1.1 Brand limitations

Brands work in the same way as a typical theme, except that they are loaded post-in
as opposed to pre-login. Therefore, all functionality that is available for themes, such
as adding new menu entries and changing images, can also be used for brands.
However, there is a limitation to the functionality. Due to the structure of the global
variables, you cannot override global CSS variables in the same way that you can
with themes. Consequently, outside of the use of branding helper functions, you
must redefine colors on a per-element basis.
16.1.2 To create an advanced brand

1. Create a folder for your brand. For example, /mybrand.
2. Under the /mybrand folder, create an HTML file and name it branding.html.
Important
You must reference all the files that you use to create your brand in
branding.html, such as CSS file and theme.js.
3. To create a brand, do any of the following:
Task Procedure
Use branding helpers to change the home See “To add branding helpers”
screen, logo, color scheme and on page 111.
background header, and so on.
Copy and edit the CSS sheets as you See “To copy and override style sheets”
would for a theme. on page 118.
Change images or icons as you would for See “To copy and override style sheets”
a theme. on page 118.
Change display element as you would for See “To copy and override style sheets”
a theme. on page 118.

Note: Anything that will work with a theme, such as changing styles or
templates, adding new menu entries, and reordering menu entries, will
also work in a branding.html file, with a few exceptions. For more
information about the exceptions, see “Brand limitations” on page 109.
Tip: To ensure that your advanced brand contains all necessary files,
OpenText recommends that you first create a basic brand and use it as the
foundation for your advanced brand. Go to the Brands page in the Web
Administration tool, create the basic brand, then download the brand and
modify it as required. When modifying the brand, remember to update the
link to the favicon in the branding.html file to match the new folder for
the advanced brand. For more information, see section 7 “Create and
manage branding configurations” in OpenText Media Management -
Administration Guide (MEDMGT220200-AGD).
4. Create a brand configuration file by compressing your brand folder and the files
that you used to create the brand. Ensure that branding.html is at the top level
of the ZIP file.
Tip: This ZIP file is referred to as the brand configuration file.
5. Upload a brand configuration file by doing the following in the Media

Management Web Administration tool:
a. Go to the Brands page and click New brand configuration.

b. Enter a Name, Description and optionally enter a Folder Name.
Note: If you do not specify a folder name, the name of the ZIP file that
you upload is used.
c. Click Advanced Branding > Choose File and select the brand configuration
file.
d. Click Save. For more information, see section 7.3 “To upload an advanced
branding configuration” in OpenText Media Management - Administration
Guide (MEDMGT220200-AGD).
6. Assign the brand to a user group in the Media Management Web

Administration tool. For more information see, section 6.1.2 “To navigate user
groups” in OpenText Media Management - Administration Guide
(MEDMGT220200-AGD).
Note: You can only assign one brand to a user group.
7. To verify your brand, sign in to the Web Client as member of the user group
that you created in Step 6. The OTMM UI reflects the brand associated with that
user group when you sign in or refresh your browser.
Note: If a user belongs to multiple user groups that are associated with
different brands, OTMM will choose the first brand in the list. Users can

set their default brand through their user preferences. In the absence of
any configured brand for user groups, OTMM will load the default brand.
8. With one of the users who is a member of the user group you assigned the
brand to in Step 6, sign in to Media Management, click , General. In the
Brand list, choose the newly created brand and save the preferences. When you
refresh your browser or the next time you sign in to Media Management with
that user, the branding.html that you created will be loaded for that user.
16.1.3 Use branding helpers

Anything that will work with a theme, such as changing styles or templates, adding
new menu entries, and reordering menu entries, will also work in a branding.html
file, with a few exceptions. For more information about the exceptions, see “Brand
limitations” on page 109.
You can also use branding helpers to simplify the process of styling the application.
Branding helpers are functions that you add to a LESS file that you create.
Note: All branding helper functions are provided in the brand-functions.

less. Each helper is described in this file.
16.1.3.1 To add branding helpers
Note: All branding helper functions are provided in the brand-functions.

less. Each helper is described in this file.
1. Create a LESS file in your brand folder. For example, /mybrand.
2. Reference the LESS file in your branding.html file.
3. To make the branding helpers available, include the following line at the top of
the LESS file that you created in Step 1:
@import (reference) "../brand-functions.less";
4. To implement the branding helpers, use them in the LESS file as you would call
a function in JavaScript.
Notes
• You can find a commented example in otmmux.war/ux-html/

branding/dev-test/dev-branding.less. Each example includes the
@import statement detailed above. However, you only need to include
the @import statement once per file, not per function.
• Examples of all the functions are provided in the following sections.

16.1.3.1.1 To set the home screen background
Note: Changes that you make to the background apply to the home screen
only.
To change the background of the home screen, use the .set-homescreen-

background branding helper function. This function accepts a value pair.
The first value of the pair accepts a background image CSS property. This value
supports a URL or gradient, including all the gradient possibilities. For more
information, see https://www.w3schools.com/cssref/pr_background-image.asp.
If you are using the first value of the pair, you must pass one of the following:
• A color gradient for the home screen background. The sample branding file
provided in the otmmux.war/ux-html/branding/dev-test/dev-branding.
less provides a color a gradient color.
• A relative URL for a background image.
Example 16-2, “Set a background image” shows you how to change the background
image, where an image called background.jpg is in the same directory as
branding.html.
Example 16-2: Set a background image

.set-homescreen-background(url('./background.jpg'));
Note: You can also add a background color as a backup. For example:
.set-homescreen-background(url('./background.jpg'), #000000);
Example 16-3, “Set a background image for devices” shows you how to set a
background image using an image for tablets, phones, or both. This image is called
mybackground.jpg and is located in the same directory as the branding.html file.
Example 16-3: Set a background image for devices
Phones
.ot-phone-ui { set-homescreen-background(url('./mybackground.jpg'), 250px,
24px);}
Tablets
.ot-tablet-ui { set-homescreen-background(url('./mybackground.jpg'), 250px, 24px);}
Phones and tablets

.ot-touch-ui { set-homescreen-background(url('./mybackground.jpg'), 250px, 24px);}

Example 16-4, “Set a background color” shows you how to change the background
color.
Example 16-4: Set a background color

.set-homescreen-background(none, #000000);
Example 16-5, “Set a background color for devices” shows you how to set the
background color for tablets, phones, or both.
Example 16-5: Set a background color for devices
Phones
.ot-phone-ui { set-homescreen-background(none, #000000), 250px, 24px);}
Tablets
.ot-tablet-ui { set-homescreen-background(none, #000000), 250px, 24px);}
Phones and tablets

.ot-touch-ui { set-homescreen-background(none, #000000), 250px, 24px);}
Note: For the home screen background image, OpenText recommends using a
size of 1920 x 1080 pixels. Avoid using an image file that is over 500KB; images
larger than this will take up a lot of resources when the screen loads
16.1.3.1.2 To set the logo
To change the logo image in the UI, use the .set-logo() branding helper function.
You must pass this function to a relative URL for the logo image that you want to
use, as well as its dimensions in pixels:.set-logo(image, width, height).
Note: If you do not specify dimensions for the image, OTMM will set the
width and height as 322 by 32 pixels respectively. The dimensions apply to all
devices. However, you can override the logo and dimensions for either tablets
or phones, or both.
Example 16-6, “Set the logo” shows you how to set the logo image.
Example 16-6: Set the logo

.set-logo(url('./mylogo.jpg'), 400px, 40px);
where
.set-logo(url('./mylogo.jpg') is the relative path of the image that you

want to use as the new logo.

400px is the width, in pixels, that you want to use for the logo.
40px is the height, in pixels, that you want to use for the logo.
Example 16-7, “Set the logo for devices” shows you how to override the logo image
for phones, tablets or both.
Example 16-7: Set the logo for devices
Phones
.ot-phone-ui { .set-logo(url('./logo_phone.png'), 250px, 24px);}
Tablets
.ot-tablet-ui { .set-logo(url('./logo_tablet.png'), 250px, 24px);}
Phones and tablets

.ot-touch-ui { .set-logo(url('./logo_mobile.png'), 250px, 24px);}
16.1.3.1.3 To set the color scheme
To change the entire color scheme of the application, use the brand function set-
color. This function requires at least one argument, which is the main color of the
UI. You can also pass a second argument, which will be the accent color of the UI.
You can pass this color as any valid CSS color, such as named colors, HEX, RGBA or
HSLA. For more information, see https://www.w3schools.com/cssref/
pr_background-color.asp. Some accent colors may not contrast well with the entire
color scheme; use your discretion when choosing the accent color.
Notes
• The accent color is applied to the header text and the accordion tabs on the
sidebar.
• OTMM tests the contrast of text in some areas of the UI and icons on the
accordion tabs in the sidebar against the color scheme. Depending on the
OTMM color scheme being used, OTMM applies white or black to the text
and icons, whichever color creates the most contrast.
Changing the color scheme has the following limitations:
• Dimmed (gray) colors that represent options that are unavailable colors in the
application remain unchangeable.
• The background color used for views (such as Gallery and Spreadsheet) in the
Web Client UI will remain white.

Note: To the change background color of various areas in the UI, such as
the Gallery view, you can follow the standard procedures to customize
advanced brands.
• Changing the icon color is not currently supported.
If the main brand color is a shade of teal, specifically, HEX color #008C82, then
Example 16-8, “Set the color scheme to teal” will recolor the UI using that shade of
teal.
Example 16-8: Set the color scheme to teal

.set-color(#008C82);
Example 16-9, “Set the color scheme to teal for devices” shows you how to recolor
the UI the same way as Example 16-8, “Set the color scheme to teal” for phones,
tablets or both.
Example 16-9: Set the color scheme to teal for devices
Phones
.ot-phone-ui { .set-color(#008C82);}
Tablets
.ot-tablet-ui { .set-color(#008C82);}
Phones and tablets

.ot-touch-ui { .set-color(#008C82);}
If the main brand colors are red and yellow, specifically hex #DD1021 for red and
hex #FFCC00 for yellow, then Example 16-10, “Set the color scheme to teal red and
yellow” will recolor the UI primarily around the red, using the yellow for accents:
Example 16-10: Set the color scheme to teal red and yellow
.set-color(#DD1021, #FFCC00);
Example 16-11, “Set the color scheme to teal red and yellow for devices” shows you
how to recolor the UI the same way as Example 16-10, “Set the color scheme to teal
red and yellow” for phones, tablets or both.

Example 16-11: Set the color scheme to teal red and yellow for devices
Phones
.ot-phone-ui { .set-color(#DD1021, #FFCC00);}
Tablets
.ot-tablet-ui { .set-color(#DD1021, #FFCC00);}
Phones and tablets

.ot-touch-ui { .set-color(#DD1021, #FFCC00);}
16.1.3.1.4 To set the header background color or image
To change the header background color or image, use the .set-header-background

branding helper function. You can pass this function a color or gradient to which the
header background will be set.
Note: This function accepts any valid W3Schools color combinations or image.
For more information, see https://www.w3schools.com/cssref/
css3_pr_background.asp.
Example 16-12, “Set the header background to a linear gradient” shows how to set
the header background to a linear gradient with shades of Gainsboro and Pioneer
Red.
Example 16-12: Set the header background to a linear gradient
.set-header-background(linear-gradient(61deg, #B1343A 0%, #E2E2E2 59%, #B1343A 100%));
Example 16-13, “Set the header background to a linear gradient for devices” shows
how to set the header background to a linear gradient for phones, tablets or both.
Example 16-13: Set the header background to a linear gradient for devices
Phones
.ot-phone-ui { .set-header-background(linear-gradient(61deg, #B1343A 0%, #E2E2E2
59%, #B1343A 100%));}
Tablets
.ot-tablet-ui { .set-header-background(linear-gradient(61deg, #B1343A 0%,
#E2E2E2 59%, #B1343A 100%));}
Phones and tablets

.ot-touch-ui { .set-header-background(linear-gradient(61deg, #B1343A 0%, #E2E2E2
59%, #B1343A 100%));}

16.2. Create a theme
Example 16-14, “Set the header background to an image” shows how to set the
header background to an image.
Example 16-14: Set the header background to an image

.set-header-background(url('./myheader.jpg'));
Example 16-15, “Set the header background to an image for devices” shows how to
set the header background to an image for phones, tablets or both.
Example 16-15: Set the header background to an image for devices
Phones
.ot-phone-ui { .set-header-background(url('./myheader.jpg'));}
Tablets
.ot-tablet-ui { .set-header-background(url('./myheader.jpg'));}
Phones and tablets

.ot-touch-ui { .set-header-background(url('./myheader.jpg'));}
16.2 Create a theme

A theme can override the look and feel of any part of the UI, such as icons, display
attributes, and colors. You can change the UI by overriding the CSS that are used for
those styles.
A theme is automatically applied to all user groups. To create a theme, you need to
create a LESS file and reference it in the include.html file.
Tip: You can also add branding helpers in a theme to simplify process of
styling the application. To use branding helpers, you need to add them to the
LESS file that you create in your development directory. For more information
branding helpers, see “Use branding helpers” on page 111.

16.3 To copy and override style sheets

1. Create a new LESS file, if one does not exist, in your integration development
folder. Reference the LESS file in the include.html file.
2. Open debug mode of the HTML5 UI in a web browser, preferably Firefox or

Chrome.
3. Find the style that you would like to modify in the UI and right-click it. Select
Inspect Element.
4. In the development tools that appear, the element you right-clicked will be
selected and there will be a description of the CSS styles/rules used for that
element, usually on the right-hand side of the tools area. Find the appropriate
CSS and copy the following two items into your LESS file:
• The name of the CSS rule. For example, ot-folder-icon-close.

• The CSS styles you want to change.
5. To create a theme, do any of the following:
• Edit the CSS in your new file and save it.

• Change images or icons. See “To change images or icons” on page 118.
• Change display element. See “To change basic display elements”
on page 119.
• Change colors. See “To change colors” on page 119.
• Use branding helpers to change the home screen, logo, color scheme and
background header. See “To add branding helpers” on page 111.
6. Refresh the page if the styles do not automatically update after a few seconds.
16.3.1 To change images or icons

All images or icons used in the UI framework, aside from those used for assets, are
put in as background images in CSS. To change an image or icon, copy the URL of
the image or icon, which is specified as a background-image CSS style. For example,
the CSS for the “closed folder” icon used in the Folders view, as viewed in the
development tools, may look like this:
.ot-folder-icon-close {
margin-left: 0.5rem;
margin-right: 0.5rem;
width: 16px;
height: 2.4rem;
display: inline-block;
cursor: pointer;
background-image: url('../../style/img/folder16.png');
background-repeat: no-repeat;
background-position: center center;
}

16.3. To copy and override style sheets
The copied and modified CSS rule you would place in your LESS file would look
like this:
.ot-folder-icon-close {
background-image: url('./img/new-folder-img.png');
}
When replacing icons or images, ensure that the replacements meet the following
criteria:
• Are the same size.

• Have a transparent background.
• Are in the PNG or SVG format.
16.3.2 To change basic display elements

You can alter the basic display of the UI by identifying and copying the appropriate
styles. While this method cannot alter the ordering of elements within the UI (such
as re-ordering the metadata in a results cell), it can alter aspects such as the
following:
• Borders
• Fonts
• Text alignment
• Height/width of elements
• Paddings/margins on elements
For more information about performing more advanced display alterations, see
“Templates“ on page 43.
16.3.3 To change colors

To alter the colors used within the UI for purposes such as styling for your corporate
brand, you can follow the procedure described in “To copy and override style
sheets” on page 118. However, this can be a time-consuming process if you are using
the same color in many different places. In this case, changing the color variables
used for the UI provides a comprehensive UI-wide color change.
All colors used in the UI are referenced in the /otmm/ux-html/style/format/

variables.less file. This file is fully documented; you can use it to guide you
through the color variables are used that are used in the UI.
To override the color variables, create a LESS file in your integration development
folder and name it variables.less. Then, copy and change the variables from the
original variables.less in the same way as you would copy and change normal
CSS styles, including referencing the LESS file in the include.html file.

You can specify any valid CSS color when you are changing the color variables. For
more information, see:
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
Example 16-16: Change the boarder color
In the original variables.less, the border color for active (focused) text
inputs, which is traditionally green, is written as:
@input_border_focus: #8dc63f;
To change this color to purple, copy the variable into your variables.less
file, and then modify the color as follows:
@input_border_focus: #CC99CC;

Chapter 17
HTML5 UI examples
This chapter describes HTML5 UI examples about how to do the following:
• Create an alert action.

• Create a custom view.
• Add a custom footer across OTMM.
These examples use the pre-defined formatting, templates, and functions defined in
the OTMM UI. For more examples of defining and customizing views, see the demo
views provided in the demo/cs-examples folder.
17.1 Create an alert menu integration

“Main menu” on page 25 gives a brief example of registering a new menu item to
launch an alert (message) popup. This section implements this integration.
OTMM monitors the ux-html folder (<TEAMS_HOME>/artesia.ear/otmmux.war/

ux-html) looking for new integrations. If a new folder contains a file include.html,
then it will be recognized and deployed by OTMM.
To create an alert menu integration:
1. Create a new project folder called cs_alert, in the following location:

<TEAMS_HOME>/artesia.ear/otmmux.war/ux-html/cs_alert
Caution
To avoid conflicts with the OTMM namespaces and pre-defined
templates and functions, use the cs (customer specific) prefix when
naming files and defining functions.
2. Define a simple menu bar integration by creating a JavaScript file (cs_alert.

js) in the cs_alert folder, containing the following:
(function(exports) {
// Alert Example
// Register a menu item

// Unique name for the menu entry.
'name' : 'cs_alert',
// Display name for the menu entry.
'title' : otui.tr("Alert Menu Item"),
// Action (function) when selected by mouse click
'select' : null
});

Chapter 17 HTML5 UI examples
}, true);
})(window);
Note: For more information about the otui.ready() function, see

“otui.ready” on page 21 and the online HTML5 documentation at http://
<otmmhost>:11090/otmm/ux-html/doc/otui.html.
3. Add an include.html file to the cs_alert folder. OTMM scans for files named
include.html in the top-level folder. This is the page that is ingested,
interpreted and displayed in the OTMM UI. Add the following lines to the
include.html page:
<script type=”text/javascript” src=”./cs_alert.js”></script>
4. Wait 30 seconds for the UI to scan the changes, navigate to http://

<otmmhost>:11090/otmm/ux-html, and then sign into the UI. You should see
the new Alert Menu Item button on the OTMM menu bar.
5. To add an alert action to the menu item so that a message window pops up
when the button is clicked, add a function to the select menu property,
replacing the null. The otui.tr function is used to define the popup alert
message (for a description of otui.tr usage, see “Basic usage” on page 52).
a. Add the following function definition to the cs_alert.js JavaScript file

before to the call to otui.ready():
function showAlert() {
otui.alert ( otui.tr (" Custom Popup Message ")) ;
}
b. Map the new function to the menu select property by changing the select
setting in the outui.ready function:
'select' : showAlert
6. Refresh the page and test the new menu button.
17.2 Create a custom view

This example describes how to create a custom view showing the most recently
viewed assets. The new view will be constructed using templates. For more
information about templates, see “Templates“ on page 43. For more information
about Views, see “Views“ on page 73.
The following diagram summarizes the use of templates in the UI.

17.2. Create a custom view
Figure 17-1: Templates
Layout templates
These define the overall page layout. For example, plain (“main”), with frame to
the left (“main-with-sidebar”), or with action buttons at the top of the page
(“main-with-actionbar”).
Content templates
These define the content for the specific layout. Content templates have ot-
template and ot-view attributes.
Resource templates
These serve as the template for an individual resource. If, for example, the
resource is an OTMM asset, and there are twenty assets in the content set, then
the resource template will be applied twenty times. Examples of resource
templates are “masonry-cell” (asset per block) and “table-cell”(asset per row).
To create a custom view:
1. Create a new cs_recent project folder in the ux-html folder. The OTMM
HTML5 UI framework monitors the top-level folder for new applications.
a. Navigate to the <TEAMS_HOME>/ear/artesia.ear/war/otmmux.war/ux-

html folder.
b. Create a new folder called cs_recent.
Caution
To avoid conflicts with the OTMM namespaces and pre-defined
templates and functions, use the ‘cs’ (customer specific) prefix when
naming files and defining functions.
2. Add a new JavaScript file to the cs_recent folder called cs_recent.js with
the following contents:
// Custom View Example
var csRecentView = exports.csRecentView =
otui.define("csRecentView", function() {

this.properties = {
'name' : 'csrecent', // Name of the view
};
}); // END: csRecentView definition block
//Create a menu item for custom view

// Unique name for the menu entry
'name' : 'cs_recent_assets',
// Display name for menu entry
'title' : otui.tr("Show Recent Assets"),
// Action on mouse click
'select' : null
});
}, true);
})(window);
Note: All views should have a properties object (this.properties). For

more information, see “Properties” on page 74.
3. Add an include.html file to the cs_recent folder. OTMM scans for files
named include.html in the top-level folder. This is the page that is ingested,
interpreted and displayed in the OTMM UI. Add the following lines to the
include.html page:
<script type=”text/javascript” src=”./cs_recent.js”></script>
4. Navigate in the browser to http://<otmmhost>:11090/otmm/ux-html and

sign into OTMM. Wait 30 seconds for the UI to scan the changes and then
refresh your browser. You should now see the new Show Recent Assets button
on the OTMM menu bar.
5. Optional Set up a Chrome Workspace so you can edit, test, and debug from a
single window. Setting up a Chrome Workspace simplifies the edit and debug
cycle for creating a new view. For more information, see “Set up Chrome
workspaces” on page 18.
• The Sources tab will give you access to viewing and editing the source code.
• The Network tab will show you network activity to the OTMM services,
including the REST API requests and responses. The REST API calls are of
the form: /otmmapi/v1/…
To view the details of a REST API call, click on that row and then select from
the tabs in the right-hand pane: Headers, Preview, Response.
• Click on the Folders menu item, navigate through the folders, and view the
assets to see the network activity.
6. Define the content template. The template in the include.html file defines
what the content of the page will be. To start, add a header and banner to the
template. Add the ot-view attribute, which assigns the csRecentView, defined
in the cs_recent.js javascript file, to the content template, as follows:
<template ot-template id="content" ot-view="csRecentView">
<div class="ot-content">
<ot-i18n class="ot-view-header-title">
Recently Viewed Assets

</ot-i18n>
<ot-i18n> Assets will be displayed here </ot-i18n>
</div>
</template>
7. Initialize the csRecentView. Each view must define an _initContent()

function. This function can be explicitly defined or inherited for each new view.
In the cs_recent.js JavaScript file, create a new _initContent function to
place the content in the UI. Add the following function definition inside the
csRecentView block:
// Function called to create the content for this view.
// Required for csRecentView instantiation.
// If not defined, exception is raised.
this._initContent =
// Note that initContent functions must always have a name.

function initRecentView(self, placeContent) {
// get the template with the id="content"
var template = this.getTemplate("content");
//place the template data into the UI.

placeContent(template);
};
Note: The placeContent statement will paint the content as it is defined

in the include.html file.
8. Define a route URL in the csRecentView. This will define the action to display
the UI page when the menu button is clicked. For more information about the
route URL format, see “Define the route URL and its mappings” on page 77.
Define the URL for csRecentView as “recent”, as follows:
// Specify the route for the view,
// binding an optional "display" parameter to the URL
// The route should then load the "main" layout template
// using the full-page for content
var csOpenView = csRecentView.route.as("recent", // URL format

otui.withTemplate("main"), // Load the layout template
csRecentView.route.to() // Route to the new View
);
This example will use the “main” layout template, which displays the contents
in full-page mode without a sidebar or action bar.
• The code for this step is located outside the csRecentView block and before
the otui.ready() call.
For more information about defining a “route”, see the online documentation
http://<otmmhost>:11090/otmm/ux-html/doc/Views.asViewModule.
route.html.
9. Define the “open” route to use the new csOpenView route definition, as follows:
// (after the csOpenView definition)
// Bind that route URL into the named route "open".
csRecentView.route.define("open", csOpenView);
10. Update the menu item to “open” the view by modifying the otui.Menus.
register block and setting the select property to use the new routing URL:

// Open the view on mouse click

‘select’ : csRecentView.route.use("open”)
11. Test the new button. It should look like this:
The content takes up the whole page (“main” layout template) and the content
defined in the include.html template block is displayed in the content area.
17.2.1 Add dynamic content to the page

Use the REST API to add dynamic content to the page. Use the REST API to request
a list of the most recently used assets from the Media Management service. Then add
instructions to the include.html and cs_recent.js files to add them to the page.
In this example, the asset will be our resource. For more information about the REST
API integration and services, see “Assets, folders, keyword search, and reviews”
on page 70.
To add dynamic content to the page:
1. To determine which REST API call will provide the required functionality,
investigate the Swagger™ UI documentation:
http://<otmmhost>:11090/swagger-ui
Note: Be patient as it will take some time for the documentation home
page to display.
For the purposes of this example, the assets GET API will allow us to request
the most recently used assets. Scroll down the page to the Parameters section.
We are going to specify the following two input parameters to the method:
limit
The maximum number of assets we want returned.
selection_context
Define the properties to guide the selection of assets returned.

For all other parameters, accept the default values.
2. Define and register the service that will retrieve the assets. In the cs_request.
js JavaScript file, define a new service that will retrieve the assets from the
OTMM server.
Note: The type of service is one of the basic operations on persistent

storage: Create, Read, Update, or Delete (CRUD).
a. Use the otui.registerService() function to register the new service.

b. Register the service as “Read”. Look up the assets with no intention to
modify them.
c. Use the otui.get() function to retrieve the results.
For more information about the otui.get() function and otui.registerService()

function, see the online documentation:
http://<otmmhost>:11090/otmm/ux-html/doc/otui.html
// Register a new data service with the OTUI framework.
otui.registerService("cs-recent-svc", {
‘read’ : function getRecentAssets(data, callback)
{
// Retrieve selection context from input ‘data’
var selection = data.selection;
// Construct the URL to use /assets REST api

var url = otui.service + "/assets";
// ‘limit’ our results to 30 assets

url += "?limit=30";
// Append ‘selection_context’ in JSON format

url += "&selection_context=" +
encodeURIComponent(JSON.stringify(selection));
// get the results

// response = JSON results received from server
// status = HTTP status received from server
// success = indicates overall success/failure
otui.get( url, undefined, "application/json",
function (response, status, success )
{
if (!success)
callback(response, false);
else
{
// Successful, unpack the results
var assets = [];
if (response && response.assets_resource &&
response.assets_resource.asset_list )
{
assets = response.assets_resource.asset_list;
}
callback(assets, true);
}
}); // END: otui.get()
} // END: ‘read’ function
}); // END: service definition/registration

3. Specify the selection context property. The /assets REST API requires a selection
context parameter as input. The selection context defines how assets are selected
from OTMM. In the csRecentView definition block, define a new function to
setup the selection context property. For more information about the selection
context, see the online Swagger documentation.
a. Type = ‘FolderSelectionContext’
b. Folder_id = ARTESIA.PUBLIC.TREEN
Select assets from the top-level public folder.
c. Include_descendants = ALL
d. Child_type = ASSETS
Only include asset types. Do not display folders.
e. Exclusion_asset_id_list = []
The empty list. Do not exclude any assets.
f. Define the createSelectionContext function inside the csRecentView
block.
// Internal function to generate selection context parameter.
function createSelectionContext()
{
var selectionContext = {
‘type’ : ‘com.artesia.asset.selection.FolderSelectionContext’,
‘folder_id’ : ‘ARTESIA.PUBLIC.TREEN’,
‘include_descendants’ : ‘ALL’,
‘child_type’ : ‘ASSETS’,
‘exclusion_asset_id_list’ : []
};
// set the property in the view object in JSON format.

this.properties.selectionContext =
{‘selection_context_param’:
{‘selection_context’: selectionContext}
};
};
4. Modify the csRecentView to extend the existing OTMM ResultsView. Define

the actions and display for the resources returned from the new service. The
ResultsView displays a list of assets received via an OTMM REST API call.
Extending the csRecentView to use the existing ResultsView takes advantage
of this existing functionality and simplifies the new view definition.
Locate the definition for the ResultsView:
http://<otmmhost>:11090/otmm/ux-html/doc/ResultsView.html
Note the properties required for objects using this view. Add the following
properties to the new view definition.
• title
• service
• serviceData
• sourceName
• templateName

• no-results-msg
Edit the cs_recent.js JavaScript file to modify the csRecentView definition to

extend the ResultsView and update the properties.
// extend the ResultsView
var csRecentView = exports.csRecentView = otui.extend("ResultsView",
"csRecentView", function()
{
// include the properties REQUIRED by the ResultsView.
this.properties = {
// initialize the selection_context
‘selection_context’ : null,
// map the service for this view
‘service’ : ‘ cs-recent-svc’,
// Initialize the service data to the empty list

‘serviceData’ : {},
‘sourceName’ : ‘csrecent’,
// Resource template for the view
‘templateName’ : ‘masonry-cell’,
‘no-results-msg’ : otui.tr("No Assets Found")
};
this.idProperty = 'assetID';
// _initContent() function….
// createSelectionContext function HERE ….
5. Use the inherited ResultsView _initContent function. Edit the cs_recent.js

JavaScript file and remove the existing _initContent definition. Once the
custom initContent definition is removed, the UI will automatically use the
function inherited from the ResultsView. No additional edits are required.
Note: Using the inherited _initContents() function will cause the page
to be populated using the registered cs-recent-svc service.
6. Map the selection context to the new serviceDataMap property. Instantiate the
selection context by calling the new createSelectionContext function. Then
map this selection context to its serviceDataMap so that it will be seen by the
cs-recent-svc as input. This mapping occurs inside the csRecentView
definition block after the function definition.
// createSelectionContext function HERE…
// DataMap is required by ResultsView to build the data object
this.serviceDataMap = {
‘selection’ : ‘selectionContext’
};
// the view creates the select context on instantiation.

return createSelectionContext;
}); // END: csRecentView definition
7. Edit the include.html template with directions to display assets as the

resources. Currently, the include.html template only displays text. The
template needs to be updated to display the assets returned from the cs-
recent-svc service call. Add a new ot-results-wrapper section to the
include.html file for the asset results.
Test the new view in the browser and verify that the most recent assets display
in the window.

<ot-i18n class=”ot-view-header-title”> Recent Assets <</ot-i18n>

<div class=”ot-results-wrapper”>
<div class=”ot-results></div>
</div>
17.2.2 Add the asset action bar to the UI

The new view shows the assets, however, the action buttons on the asset are not
functional. The goal is to be able to edit asset properties and view the asset in the
Detail view as well as having the asset actions toolbar at the top of the page for
acting on all selected assets.
To add the asset action bar to the UI:
1. Define the asset action routes. The "open” route is defined for the
csRecentView. To enable the asset inspection view (open-contents) and edit
properties actions, use the routes already defined for the InspectorView. Add
the following route definitions for the csRecentView in the cs_recent.js
JavaScript file:
• csRecentView.route.define("open-contents", InspectorView.route.
use("open"));
• csRecentView.route.define("edit-contents", InspectorEditView.
route.use("open"));
For more information about the Detail view, see the online documentation
http://<otmmhost>:11090/otmm/ux-html/doc/InspectorView.html.
2. Refresh the browser page and verify that the Edit Properties asset action is
functional. Verify that when an asset is clicked, the Detail view is opened for
that asset.
3. Display the asset action bar. To display the action bar, you must update the
layout template to provide a space for the action buttons. Edit the cs_recent.
js JavaScript file and change the template in the csOpenView function from
main to main-with-actionbar. This will include a space at the top of the page
for asset action buttons.
4. Update the template, include.html, to define the action bar. Add a new ot-
layout section specifying the GalleryViewActions to be used in the action bar.
</ot-i18n>
<ot-layout class="ot-folder-asset-actions-holder"
ot-platform="desktop">
<ot-point ot-lookup="GalleryViewActions"
class="ot-folder-asset-actions" ot-layout-fill-width>
</ot-point>
</ot-layout>
<div class="ot-results-wrapper">
<div class="ot-results"></div>
</div>
</div>

5. Refresh the browser and verify that there are now action buttons at the top of
the recently viewed assets page.
6. Select the check box in the upper-left corner of an asset and verify that the
buttons at the top of the page become active.
17.2.3 csRecentView
Here are the final copies of the JavaScript view and HTML template.
Include.html
<script type="text/javascript" src="./cs_recent.js"></script>
<template ot-template id="content" ot-view="csRecentView">

</ot-i18n>
<ot-layout class="ot-folder-asset-actions-holder"
ot-platform="desktop">
<ot-point ot-lookup="GalleryViewActions"
class="ot-folder-asset-actions"
ot-layout-fill-width>
</ot-point>
</ot-layout>
<div class="ot-results-wrapper">
<div class="ot-results"></div>
</div>
</div>
</template>
Cs_recent.js
// Custom View Example
var csRecentView = exports.csRecentView =
otui.extend("ResultsView","csRecentView", function() {
this.properties = {
'selection_context' : null,
'service' : 'cs-recent-svc',
'serviceData' : {},
'sourceName' : 'csrecent',
'templateName' : 'masonry-cell',
'minCellWidth' : 320,
'no-results-msg' : otui.tr("No Assets Found")
};
// Internal function to generate selection context

function createSelectionContext()
{
var selectionContext = {
'type' : 'com.artesia.asset.selection.FolderSelectionContext',
'folder_id' : 'ARTESIA.PUBLIC.TREEN',
'include_descendants' : 'ALL',
'child_type' : 'ASSETS',
'exclusion_asset_id_list' : []
};
// set the property in the view object in JSON format.

this.properties.selectionContext =
{ 'selection_context_param':

{'selection_context' : selectionContext}};
};
this.idProperty = 'assetID';
// Data map is required by results view to build data object
this.serviceDataMap = { 'selection' : 'selectionContext' }
;
// the view creates the select context on instantiation.

return createSelectionContext;
}); // END: csRecentView definition block
// Specify the route for the view,

// binding an optional "display" parameter to the URL
// The route should then load the "main" template
// using the full-page for content (no side-bar)
// Define the URL format pattern

var csOpenView = csRecentView.route.as("csrecent",
// Load the layout template
otui.withTemplate("main-with-actionbar"),
csRecentView.route.to()
);
// Then bind that route URL into the named route "open".
csRecentView.route.define("open", csOpenView);
csRecentView.route.define("open-contents",
InspectorView.route.use("open"));
csRecentView.route.define("edit-contents",
InspectorEditView.route.use("open"));
// Register a new data service with the OTUI framework.

otui.registerService("cs-recent-svc", {
'read' : function getRecentAssets(data, callback) {
// Retrieve the selection context from the input ‘data’

var selection = data.selection;
// Construct the URL to the /assets REST api

var url = otui.service + "/assets";
// limit our results to 30 assets using ‘limit’ parameter

url += "?limit=30";
// Append the ‘selection_context’ parameter in JSON format

url += "&selection_context=" +
encodeURIComponent(JSON.stringify(selection));
// get the results

// response = JSON results received from server
// status = HTTP status received from server
// success = indicates overall success/failure
otui.get( url, undefined, "application/json",
function (response, status, success ){
if (!success)
callback(response, false);
else
{
// Successful, unpack the results
var assets = [];
if (response && response.assets_resource
&& response.assets_resource.asset_list )
{
assets = response.assets_resource.asset_list;

callback(assets, true);
}
});
}
}); // END: service definition/registration
//Create a menu item for our new view

// Unique name for the menu entry
'name' : 'csrecent',
// Display name for menu entry
'title' : otui.tr("Show Recent Assets"),
// Select action on mouse click
'select' : csRecentView.route.use("open")
});
}, true);
})(window);
17.2.4 Launch a custom job

The setup for launching a custom job is detailed in OpenText Media Management -
Integration Guide (MEDMGT220200-AIN). After you complete the setup, you must
build and deploy a multiple asset menu entry as shown in Example 17-1, “Multiple
asset menu entry JavaScript code for launching a custom job” on page 133 to launch
the custom job. This JavaScript code needs to be included in a JavaScript file, such as
launchworkflowprocess.js, and you must include this JavaScript file in the
include HTML that you might have created for this extension or in a common
include file for all your custom extensions.
Example 17-1: Multiple asset menu entry JavaScript code for launching a
custom job
(function(otui) {
function launchCustomJob(event) {
var view = otui.Views.containing(this); // Get the view for this entry.
// The user may have chosen "select all", which means the UI needs to ask the
server for the full list of asset IDs.
view.getSelectedAssets(function(assets) // Only give us the asset IDs
{
var jobName = "CustomNotification"; // This is the user defined name for
the job
var jobType = "CustomNotification"; // This is the configured job type in
the system
console.log("Assets selected:", assets);
if(assets !== undefined && assets.length > 0)
{
var assetsToPass = "";
for(var i = 0;i < assets.length;i++)
{
if(i !== 0)
assetsToPass = assetsToPass + ',';
assetsToPass = assetsToPass + '"' + assets[i] + '"';
}
var serviceUrl = otui.service + "/jobs";
var jobRequestParam = '{"job_request_param":{"job_request":
{"asset_ids":[' + assetsToPass + '],
"job_name":"'+ jobName + '", "job_type":"'+ jobType + '"}}}';
var data = "job_request=" + jobRequestParam;
otui.post(serviceUrl, data, otui.contentTypes.formData,
function(response)
{

if(response.job_handle !== undefined &&

response.job_handle.job_id !== undefined) {
var successMsg = otui.tr("'{0}' has been initiated. Please
check the status in Jobs.",
jobName);
var successNotification = {'message' :
successMsg, 'stayOpen': false, 'status' : 'ok' };
otui.NotificationManager.showNotification(successNotification);
} else {
var errorMsg = otui.tr("{0} launch has failed.", jobName);
var errorNotification = {'message' :
errorMsg, 'stayOpen': true, 'status' : 'error' };
otui.NotificationManager.showNotification(errorNotification);
}
});
}
});
};
var entry = {
'name' : 'launchcustomjob',
'text' : 'Launch custom job',
'select' : launchCustomJob
};
// Then add it to all the locations available. Adding here only for Gallery
View
otui.GalleryViewActions.register(entry);
});
})(otui);
17.3 Add a global custom footer

To add a global custom footer:
1. Create a project folder called cs_footer, in the following location:

<TEAMS_HOME>/ear/artesia.ear/otmmux.war/ux-html/cs_footer
2. Create a CSS file and name it cs_footer.css, and add it to the <TEAMS_HOME>/
ear/artesia.ear/otmmux.war/ux-html/cs_footer folder.
3. Overwrite the ot-web-footer and ot-web-footer-bar elements with the

following:
ot-web-footer
{
display: block;
}
ot-web-footer .ot-web-footer-bar
{
height: <specify required height for the footer>
}
4. To customize the footer, do the following:
a. Create an HTML file and name it include.html.

17.3. Add a global custom footer
b. Add the following to the include.html page:

<link rel="stylesheet" type="text/css" href="./cs_footer.css"/>
<template id="ot-web-footer-content" ot-template>
<div class="ot-web-footer-bar">
(Add the required content here, this will be displayed as footer)
</div>
</template>
c. Save the include.html file to the /cs_footer folder.
Note: OTMM scans for files named include.html in the top-level

folder. This page is ingested, interpreted and displayed in the OTMM
UI.

Glossary
Asynchronous Function
A function in JavaScript which does not automatically return data. Instead, it
takes a callback function which, when the data required is available, will call the
callback function with that data.
Callback function
A function in JavaScript which expects to be called with data at a later point in
time. It is usually passed into an asynchronous function.
JSON
JavaScript Object Notation. A lightweight, serializable format for storing
properties which is used throughout JavaScript. For more information, see http://
en.wikipedia.org/wiki/JSON.
REST API
The REST API for OTMM is a server component of OTMM which allows for
stateless requests to be made and to send data back in a consistent JSON format.
Settings page
System settings and preferences are stored in a database. You can access these
settings through the Settings page in the Web Administration tool. For more
information, see section 23.1 “Manage configuration groups, components, and
(MEDMGT220200-AGD).
TResource
A resource file used by OTMM to store node-specific settings. This file is located
in the <TEAMS_HOME>/data/cs/global directory of each installation.

OpenText Media Management CE 22.2 - HTML5 Integration Guide English (MEDMGT220200-AIG-EN-02)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OpenText Media Management CE 22.2 - HTML5 Integration Guide English (MEDMGT220200-AIG-EN-02)

Uploaded by

Copyright:

Available Formats

OpenText™ Media Management

HTML5 Integration Guide

This guide contains instructions on how to write, deploy, and

Open Text Corporation

275 Frank Tompa Drive, Waterloo, Ontario, Canada, N2L 0A1

Copyright © 2022 Open Text. All Rights Reserved.

No Warranties and Limitation of Liability

3 Start integration development ................................................ 17

4 Menu entries ............................................................................ 23

5 Status icons ............................................................................. 31

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide iii

6 Entry points .............................................................................. 33

7 Content types ........................................................................... 35

8 Metadata lookups .................................................................... 37

iv OpenText™ Media Management MEDMGT220200-AIG-EN-02

10.2.3.3 To replace existing, localized custom UI messages ........................... 60

11 User notifications, alerts, and confirmations ....................... 63

12 Interface with OTMM ............................................................... 67

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide v

13.5.2 Tabbed composites ......................................................................... 84

15 Prepare integrations for production .................................... 105

16 Style the application .............................................................. 107

vi OpenText™ Media Management MEDMGT220200-AIG-EN-02

16.3.1 To change images or icons ............................................................ 118

17 HTML5 UI examples ............................................................... 121

GLS Glossary 137

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide vii

The following are key points for the HTML5 UI:

• Announcements on the Home page

– Asset preview and Deep Zoom

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide 9

1.1 JavaScript API documentation

1.2 REST API documentation

1.3 Examples pack

• This should only be accessed on a staging or development platform, not on

To activate the examples pack within OTMM:

1. Navigate to the deployment folder for OTMM.

2. Copy the cs-examples folder from otmmux.war/ux-html/demo to the parent

3. Reload your OTMM environment. It may take up to 30 seconds for the

10 OpenText™ Media Management MEDMGT220200-AIG-EN-02

1.3.1 Examples pack setup

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide 11

This folder contains the following subfolders.

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide 13

14 OpenText™ Media Management MEDMGT220200-AIG-EN-02

2.2 Production code

• Announcements on the Home page

– Asset preview and Deep Zoom

2.2.1 Source maps

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide 15

2.2.2 Debug mode

16 OpenText™ Media Management MEDMGT220200-AIG-EN-02

This section discusses how to start and integration development.

• Announcements on the Home page

– Asset preview and Deep Zoom

3.1 Set up a development environment

• A web browser. OpenText recommends Chrome .

Note: Customer-specific integrations are automatically detected, allowing for

MEDMGT220200-AIG-EN-02 HTML5 Integration Guide 17

3.1.2 Set up a development directory

3.1.3 Set up Chrome workspaces

To set up Chrome workspaces for integration:

1. In Chrome, open the OTMM HTML5 UX on a new tab.

2. Open Chrome’s JavaScript console, Tools/JavaScript console).