10 Embedding the Web User Interface

Embed the web user interface for Oracle Content and Experience Cloud into your own web applications to get access to the folder and document management features of the service.

These topics describe how to embed the interface and use it to display content from other domains and access folders and files on Oracle Content and Experience Cloud from your applications.

For content, you need to use application links (applink) to access folders and files. An applink provides access to a folder or file for a user with a particular role for a period of time. You can use the applink on subsequent calls that access the associated folder or file without having to establish user credentials with each call. For more information, see Applinks Resource.

Embedding the Web User Interface

You can embed the Oracle Content and Experience Cloud web user interface in an HTML inline frame (iframe tag). The embedded interface removes the default branding and resizes the content to fit the enclosing frame, allowing you to integrate Oracle Content and Experience Cloud into your own web applications.

To embed the Oracle Content and Experience Cloud user interface in an inline frame, add /embed to any member or public folder link immediately after the /documents element in the URL used to populate the inline frame.

Note:

Before implementing an interface solution that uses inline frames, be sure you understand the possible security risks associated with hosting external sites in inline frames. Security measures vary between different browsers and different browser versions. For more information, see http://www.w3.org/TR/UISecurity/.

For example, the following URL calls the standard user interface and shows the home folder for the current user:

https://www.example.com/documents/home/nameasc

To display the home folder in the embedded user interface, use the following form of the URL:

https://www.example.com/documents/embed/home/nameasc

To open a specified folder in the embedded interface, use the folder element in the URL and specify the globally unique identifier (GUID) of the folder.

For example, the following link opens the specified folder in the embedded user interface.

https://www.example.com/documents/embed/folder/1713A5712BE73C37891915A0127B594F/nameasc 

The next two figures show both versions of the user interface. The first figure shows the user's home folder with a folder selected in the standard interface. For comparison purposes, the embedded portion is surrounded with a dotted line.

The following figure shows an example of the same folder and selection using the embedded interface. Note that the banner and side panels are not displayed in the embedded user interface.

Note:

The embedded user interface adjusts the content to fit within windows as small as 320 pixels wide. Windows smaller than 320 pixels begin to hide content on the right edge of the window.

You can also embed member links and public links to folders and specify configuration parameters on the URL that control some aspects of the browser display. For information about configuring the appearance of the embedded user interface, see Browser Configuration Parameters.

Embedding Documents Manager on a Site Page

You can embed documents manager on a site page to provide a view of your home page or files in Oracle Content and Experience Cloud.

See How do I use documents? in Using Oracle Content and Experience Cloud.

Security for Content in Other Domains

When you embed the Oracle Content and Experience Cloud web user interface, it’s enclosed in an inline frame. Security policies are enforced to minimize the security risks of hosting external sites in inline frames.

In general, inline frames can host content if the protocol, domain, and port of the inline frame are identical to those for the content it displays. For example, by default, an inline frame on the page http://www.example.com:12345/home.html can host content only if the content's protocol is also http, the domain is www.example.com and the port is 12345.

An administrator can explicitly identify domains outside of the host domain and allow content from those domains to display in the embedded web user interface.

Note:

Before implementing an interface solution that uses inline frames, be sure you understand the possible security risks associated with hosting external sites in inline frames. Security measures vary between different browsers and different browser versions. For more information, see http://www.w3.org/TR/UISecurity/.

Oracle Content and Experience Cloud displays content for authorized users in the embedded interface. Supported content includes folders, member links, and views of individual files.

All unsupported content, such as public links and content from unauthorized domains, opens in a new browser tab or window (depending on the browser settings).

Embedding Content in Other Domains

You can display content from Oracle Content and Experience Cloud within other domains. For example, you might embed the Oracle Content and Experience Cloud web user interface into your own web applications to access folder and document management features inside your application.

To allow users to embed content, enable embedded content and add domains:

  1. After you log in to the Oracle Content and Experience Cloud web application as an administrator, open your user menu and click Administration.

  2. In the Administration menu, click Security.

  3. Under Embedded Content , select Enabled.

  4. In the Allowed domains box, enter a list of permitted domains, separated by commas. Domains must be in the form www.example.com.
    • To restrict the domain to a particular port, include the port in the specification. For example, www.example.com:12345.

    • If you want to allow a domain that has multiple sub-domains, you can use the * wildcard character. For example, www.example.* includes the domains www.example.com, www.example.co.uk, and so on.

Integrating Folder and File Selection

You can access folders and files stored on Oracle Content and Experience Cloud from your own applications.

Two online tutorials show how to make REST calls to Oracle Content and Experience Cloud from a web page using JavaScript. These tutorials are on each provisioned instance, at a location similar to this URL:

https://<host_name>[:<port>]/documents/static/api/<tutorial>

The tutorials document the code and code options and provide a demonstration of the functionality.

Tutorial Description

FilePickerTutorial.html

Provides an interface button and supporting JavaScript code to select one or more folders or files and returns the REST response that includes the selection. This method is useful for working directly with folders and files using the credentials of a provisioned user.

LinkPickerTutorial.html

Provides an interface button and supporting JavaScript code to select a file and return the public link to the file. This method is useful for providing public access to a specific file.

Both tutorials include options for using an application link (applink) to access folders and files. An application link provides access to a folder or file for a user with a particular role for a period of time. You can use the application link on subsequent calls that access the associated folder or file without having to establish user credentials with each call. For more information, see Applinks Resource.

Browser Configuration Parameters

You can include optional parameters in the URL for a folder or folder link to control some aspects of the browser display. This can be very useful for embedding the user interface in other applications.

Layout Configuration

You can append the layout configuration parameter (lyt) and a single value to the end of a URL for a folder or folder link using the following format:

{URL}/lyt={value}

For example, the following URL uses a member link to display the associated folder in the embedded interface with a grid layout:

https://www.example.com/documents/embed/folder/FDB8AC67BE3FCFB4984E1327T0000DEFAULT00000000/_Resources/lyt=grid

Note:

You can use the layout parameter with folders and folder links in both the standard and embedded interfaces.
Value Description

list

Displays the folder content in the standard list layout.

grid

Displays the folder content in the standard grid layout.

Embed Mode Configuration

You can specify an embed mode configuration as a URL query parameter:

  • hide: Hides elements that are visible by default when embedded.

  • show: Shows elements that are visible by default when embedded.

Options of the embed mode configuration apply only when you use embed mode URLs, including applink URLs. You can use the following embedded views:

  • Digital Assets View (embed/digitalassets/{collectionId})

  • Collections View (embed/collections/{collectionId})

  • Content Items View (embed/contentitems/{collectionId})

  • Folder View (embed/folder/{folderId}or embed/folder/home)

  • File View (embed/fileview/{fileId})

  • Conversations List (embed/conversations)

  • Conversation View (embed/conversations/{conversationId}

  • Themes View (embed/themes)

For example:

/documents/embed/folder/{folderId}?hide=header+actions&show=branding&singlesel

You can add individual options directly as parameters. Combine multiple hide and show options with either a plus sign (+) or comma (,). For example:

hide=header+breadcrumb+sidebar

The following table lists the options you can use for embed mode configuration.

Parameter Value Description
type images+video+documents Preselect the listed type filters for Digital Assets, Collections, and Content Items views. The type option supersedes the {collectionId} fragment of the URL, which can be omitted when type is specified.
typeoptions none Hide the Digital Assets Type section in the Collections View, or hide the Types panel in the Digital Assets view
typeoptions images+video+documents Display the listed type filters as available options
contenttype article+blog+... Preselect the listed content type filters for Content Items and Collections views
contenttypeoptions none Hide the Content Items section in the Collections view, or hide theTypes panel in the Content Items view
contenttypeoptions article+blog... Display the listed content type filters as available options
status published+approved+rejected+draft+pending Preselect the lists status filters
statusoptions none Hide the Status panel altogether
statusoptions published+approved+rejected+draft+pending Display the listed status filters as available options
show branding Show branding header (hidden in embed mode)
hide header Hide content header
hide breadcrumbs Hide breadcrumb area
hide nextprev Hide next and previous controls (File View)
hide toolbar Hide toolbar (Folder View)
hide sidebar Hide sidebar
hide thumbs Hide viewer thumbnail area
hide pin Hide annotation mode pin
hide actions Hide all document actions
hide new Hide header create action (new folder)
hide upload Hide action upload
hide dnload Hide action download
hide move Hide action move
hide copy Hide action copy
hide delete Hide action delete
hide props Hide action props
hide favs Hide Favorite actions and View menu
hide trash Hide Trash View menu
hide share Hide action share
hide fitpage Hide fit to page action in file view
hide fitwidth Hide fit to with action in File View
noopen   Disable action open for folders in Folder View and conversations in conversation list (conversation list becomes multiselect)
noview   Disable action view for files in Folder View
wide   Display wide content area
foldersonly   Include only folders in list
docsonly   Include only documents in list
singlesel   Single select
launch   Launch documents on view (opens new tab versus inline)
fitpage   Start with document fit to page
fitwidth   Start with document fit to width
fitoriginal   Start document at original size
collapsetn   Start with thumbnails area collapsed
autoplay   Auto play video and audio content
loop   Loop video and audio content
mute   Mute video and audio content
novidctls   Hide video controls
simpleDisplay   Simplified select list
nofocus   Don’t take focus

Browser Configuration

Note:

The embed mode configuration has replaced the legacy browser /cfg settings. Existing /cfg settings are supported in embed mode if no legacy query parameters are specified.