XCC Documentation Release 13.0

© Copyright TIMETOACT Software & Consulting GmbH.
Licensed Materials - Property of TIMETOACT.
All rights reserved.
TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
1 / 124
XCC 13.0
Documentation
Web Content & Custom Apps
Extension for IBM Connections

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
2 / 124
Content
Introduction
Introduction ........................................................................................................................... 6
1 Role concept ................................................................................................................... 7
1.1 Websphere Application Server-Admin (WAS-Admin) ................................................... 7
1.2 Admin .......................................................................................................................... 7
1.3 Content Master ............................................................................................................ 7
1.4 Reader......................................................................................................................... 8
2 Admin Dashboard............................................................................................................ 9
2.1 Admin Caching ............................................................................................................ 9
3 Admin Panel...................................................................................................................10
3.1 Grid & Layout..............................................................................................................10
3.1.1 Include Custom Grids ........................................................................................11
3.1.2 Include Custom CSS and Images......................................................................12
3.1.3 Create Custom CSS ..........................................................................................12
3.1.3.1 CSS for all Pages........................................................................................13
3.1.3.2 CSS by Page-ID..........................................................................................13
3.1.3.3 CSS by Grid-Layout ....................................................................................13
3.1.3.4 CSS for Widgets..........................................................................................13
3.1.3.4.1 Type-Specific........................................................................................13
3.1.3.4.2 Position-Specific ...................................................................................13
3.2 Include Custom.js .......................................................................................................14
3.3 Customize the language file........................................................................................14
3.3.1 Update language files........................................................................................15
3.4 Direct Edit for *.css, *.js and *.json Files .....................................................................15
3.5 Include your Favicon...................................................................................................16
3.6 Create Widgets ...........................................................................................................17
3.7 Integration of the Navigation .......................................................................................17
3.7.1 Mobile Navigation ..............................................................................................19
3.7.2 Active Navigation and Breadcrumb....................................................................20
3.8 Access Rights for XCC Pages.....................................................................................20
3.9 Page Management......................................................................................................20

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
3 / 124
3.9.1 Creating New or Multiple Pages.........................................................................21
3.9.2 Page Import / Export..........................................................................................22
3.9.3 Set author rights and anonymous Access..........................................................23
3.10 Page Templating / Inheritance ..................................................................................24
3.11 License Key ..............................................................................................................25
4 XCC Widgets..................................................................................................................28
4.1.1 Choose Image teaser for News Widgets............................................................30
4.1.2 Language-based Widget Title............................................................................31
4.1.3 Configure Image for Widget Title .......................................................................32
4.1 IBM Connections Widgets...........................................................................................33
4.2 ATOM/RSS Feed........................................................................................................34
4.3 Clipping.......................................................................................................................36
4.4 Community Description...............................................................................................39
4.5 Community Overview..................................................................................................39
4.6 Events.........................................................................................................................41
4.7 Files............................................................................................................................42
4.8 Files Explorer..............................................................................................................44
4.9 Forum .........................................................................................................................46
4.10 HTML........................................................................................................................47
4.11 Ideation Blog.............................................................................................................50
4.12 IFrame ......................................................................................................................51
4.13 Important Bookmarks................................................................................................52
4.14 Links .........................................................................................................................53
4.15 MediaGallery.............................................................................................................54
4.16 My Links....................................................................................................................57
4.17 My Notes...................................................................................................................59
4.18 My Quicklinks............................................................................................................62
4.19 Navigation.................................................................................................................65
4.20 News Channel...........................................................................................................67
4.21 News List ..................................................................................................................69
4.22 News Overview.........................................................................................................70
4.23 News Slider...............................................................................................................72

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
4 / 124
4.24 News.........................................................................................................................73
4.25 People Birthday.........................................................................................................77
4.26 People Finder ...........................................................................................................78
4.27 People Selector.........................................................................................................79
4.28 Picture ......................................................................................................................81
4.29 Pinned Files..............................................................................................................82
4.30 Popular Content........................................................................................................83
4.31 Preferences ..............................................................................................................84
4.32 Profile Completion.....................................................................................................85
4.33 Profile Tagging..........................................................................................................87
4.34 Profile Upload ...........................................................................................................87
4.35 Saved Search ...........................................................................................................88
4.36 Static Content - Blog .................................................................................................91
4.37 Static Content - Wiki..................................................................................................92
4.38 Suggestion................................................................................................................93
4.39 Tag Cloud .................................................................................................................94
4.40 Teaser Widget...........................................................................................................95
4.41 Top News..................................................................................................................96
5 Embedded Experience ...................................................................................................99
6 XCC4Communities.......................................................................................................101
7 XCC4Cloud ..................................................................................................................106
8 XCC4Anonymous.........................................................................................................107
9 XCC FlyOut Page.........................................................................................................108
10 XCC-Personalization ..................................................................................................109
10.1 Personalize Homepage...........................................................................................112
11 Custom Widget API ....................................................................................................113
11.1 Register Custom Widget .........................................................................................113
11.2 Example of Custom Widget.....................................................................................113
12 IBM Forms Widget......................................................................................................115
13 Functions, Fields and Buttons.....................................................................................116
14 Best Practices for Content & Restriction Maintenance in IBM Connections ................119
14.1 Roles & Restrictions in Source Communities ..........................................................119

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
5 / 124
14.2 Picture Guidelines...................................................................................................121
14.2.1 Picture Ratio..................................................................................................121
14.2.1 Picture Size ...................................................................................................122
15 System Requirements ................................................................................................124

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
6 / 124
Introduction
This documentation explains and describes role concept, site structure, functions of the
various XCC features and their usage and configuration.
Before you start with XCC we suggest you to have a look at our Videos of XCC at
https://connections-apps.com/xcc.
Alternative: https://www.youtube.com/watch?v=Kc7qqVzQG9U
For a more technical documentation please use the XCC - Technical User’s Guide.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
7 / 124
1 Role concept
In this section we will explain the role concept. You can also have a look at our video:
Alternative: https://www.youtube.com/watch?v=RbqZ6Ukq93c
1.1 Websphere Application Server-Admin (WAS-Admin)
Person, who is able to install XCC and adjust XCC configurations on the IBM Websphere
Application Server.
1.2 Admin
Admins are Connections users with special XCC permissions. They are able to configure the
Custom Homepage within Connections and define the display of widgets, navigation and
layout. Furthermore, an admin can move and configure each widget. Admins can only select
channels over the configuration masks, which they are member (community member) of.
1.3 Content Master
Content Masters are Connections users with special XCC permissions. They can configure
each widget and are able to add widgets, remove widgets or access the XCC-Page
configuration with the “Customize” function. A Content Master is not able to create/delete
pages, upload/delete Files or to update the license key. He only can select channels via the
configuration masks, which they are member (community member) of.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
8 / 124
1.4 Reader
Readers are a group of IBM Connections users, who are able to see and use the offered
widgets. The displayed content can vary according to permissions and personalization.
Permissions in this case refer to the authorization of the content source (e.g. a closed
community) within CNX.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
9 / 124
2 Admin Dashboard
The Admin Dashboard is reachable through the URL <yourDomain>/xcc/admin. You will find
system configurations there, so be careful with that. In this chapter we will explain some
functionalities that will be helpful.
The following options can be found in the Admin Dashboard and are well explained in the
“XCC – Technical User Guide”:
 Enable/Disable Backup
 Set Connections Context-Roots
 Set Customization folder
 Set Connections Theme
 Set Anonymous Access
2.1 Admin Caching
For every User all requests to the server from XCC are cached for 15 minutes. This will
increase the performance. However sometimes this will result in confusion, if the editor
published a new blog entry and it is not shown directly on the XCC pages. Therefore you can
disable the Caching for Admins. You will find this setting in the Admin Dashboard in the
Global Settings tab.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
10 / 124
3 Admin Panel
This chapter will explain all functionalities in the Admin Panel. If you are Admin, you can
reach the Admin Panel on every XCC page by clicking the “Customize” button.
3.1 Grid & Layout
The Custom Homepage can either be displayed above the Activity Stream and with the
Connections built-in Right-Column or as separate page. You have to choose a layout for your
Custom Homepage. Default is Grid 1.
You can choose between 19 different layout grids. It is possible to activate Activity Stream
and Right Column separately. If activated, Right Column and Activity Stream show up at the
positions pointed out by the green and blue colors in the selected layout grid.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
11 / 124
Depending on the chosen layout grid, it is possible to implement 1- to 4-column layouts. The
width of the widgets will automatically adjust to the width of its containing "placeholder".
You can add Widgets by clicking on them in the Widgets tab. They will be moved to the first
free position in the layout grid. After that you can move them around by dragging and
dropping them to the desired position. As a visual helper during that operation, a green
visualization appears if you drag a widget over a valid placeholder position.
It is also possible to swap widgets. Just drag and drop one widget into a filled placeholder to
exchange the position of both affected widgets. Only the positions of the Right-Column and
Activity Stream are disabled for drag and drop.
3.1.1 Include Custom Grids
If you want to include your own grid, you can upload an html file in the “XCC Settings” tab. By
using the filename GridLayout1.html you exchange the built-in grid 1 structure with your own.
Since there are 22 pre-built grids, you are able to create 22 custom grids, while the built-in
grids are being overwritten.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
12 / 124
You activate the custom grid for a XCC Page by selecting the corresponding layout in the
“Page Settings” tab.
We recommend you to use a template for creating custom grids. Please contact us for
assistance at xcc-support@timetoact.de.
3.1.2 Include Custom CSS and Images
If you want to include your own CSS, you can upload a stylesheet file in the “XCC-Settings”
tab. Please make sure not to use an already existing file-name, because the upload
overwrites older versions without further inquiry. Images (e.g. *.jpg, *.png) requested by your
CSS can be uploaded through the same upload-form.
After uploading your CSS, you can select the uploaded stylesheet file for the current page in
the “Page Settings” tab under the “Layout” selector. To edit multiple pages you can go to the
“Page-Management” tab and edit a page. Click on the wrench icon and it will open a dialog,
allowing you to specify a CSS for each page.
3.1.3 Create Custom CSS
The instruction given in this documentation demands basic CSS-Knowledge. A free online-
guide can be found on http://www.w3schools.com/css/.
You can customize the appearance of nearly every visible element of your XCC. CSS-
language depends on order and specificity. To detect which selector you have to use to
change an attribute (color, size, etc.) we recommend you to use either the Developer-Tools
of Google Chrome (https://developer.chrome.com/devtools) or the Developer-Toolbar of
Mozilla Firefox (https://developer.mozilla.org/de/docs/Tools).
Your customized CSS is loaded last. This way using the same selector as the one that is
applied should change the appearance of the element. If not and even an increased
specificity does not result in the desired behavior the !important-keyword will grant you
access to the attribute.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
13 / 124
Uploaded images are located in the same folder as the CSS. No path has to be specified.
3.1.3.1 CSS for all Pages
If you are using one XCC page only or want all XCC pages to behave and appear in the
same way, it is recommended to use CSS selectors starting with the .xccstyle body-class.
Example: (setting up a red background)
3.1.3.2 CSS by Page-ID
Through the .{page-id} body-class you are able to set styles, which exclusively apply to the
XCC page having the page-id. This way you can avoid uploading CSS files for each XCC
page you want to appear different from the standard.
Example: (setting up a green background exclusively for my-special-page)
3.1.3.3 CSS by Grid-Layout
If you want your pages to behave different depending on what grid-layout (see 3.1) is
selected, we recommend to select by .Layout{#} body-class in your CSS.
Example: (setting up a blue background for all pages in grid-layout 17)
3.1.3.4 CSS for Widgets
Customizing the widgets in general is possible through several classes. XCC-Widgets have a
standard structure:
Use CSS selectors similar to .xccstyle .xccWidget .wheader .wtitle if you want to customize
the overall-appearance of your widgets.
3.1.3.4.1 Type-Specific
It is possible to apply styles to specific widget-types (e.g Top-News-Widget). We recommend
you to use a attribute selector on the data-wtype-attribute, because it allows to customize
header/title and body of the widget, while .{widget-type}-class is limited to the body.
Example: (setting up a red font-color for the title of all Top-News-Widgets)
3.1.3.4.2 Position-Specific
By referring to the position-attribute you can style widgets placed on a specific grid-position.
The top-left grid-position is always position=”0”.
Example: (setting up a red font-color for the title of the widget on grid-position 0)

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
14 / 124
3.2 Include Custom.js
If you want to include customized JavaScript you have to download the custom.js. You can
find this file in the XCC Settings tab in the customization file list. Alternatively, you can use
the Direct Edit button.
Within this file you will find an init-function, where you paste your custom JavaScript. After
you finished, upload the file again and the XCC will use your custom JavaScript.
3.3 Customize the language file
You can create a new language file, by downloading the template file and editing a copy of it
or by using the Direct Edit button.
The name of the language file needs to consist of the prefix "xcc-" and the abbreviation of the
language it is intended for. You can find the language files in the “XCC-Settings” tab of the
admin panel. Here you can download and upload the language files. The file contents need
to be of type JSON. This JSON format basically consists of key value pairs that define the
String to be used in the language the file defines. If you omit a key-value-pair, the string
denominated by that key will appear in its English default. If a language file for a chosen

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
15 / 124
language is not available, the Messages used within XCC will remain in its English defaults.
Messages presented exclusively to Content Masters or Admins will always be English.
You can switch the language in the IBM-Connections header. After uploading your edited
language file, the changes take immediate effect, so reloading the page or changing your
language to the just uploaded one will bring up the settings you have just uploaded.
You are able to rename each grid `template` with the language file. Therefore you have to
use the label “grid_name_X”. X represents the ID of the grid layout.
3.3.1 Update language files
If you want to reinitialize the language files, maybe because they are not up-to-date, you
should to the following steps.
1. Backup your language files by downloading them from the UI
2. Delete the language files
3. Go to the Admin Dashboard into the “Language Files” page and press the reInit
button
4. Download the updated language-files
5. Compare if you did changes in the backup language files and move them to the
updated language files
3.4 Direct Edit for *.css, *.js and *.json Files
The Direct Edit option offers the opportunity to edit stylesheets, JavaScript- and Language-
Files without having to download the file and re-upload it.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
16 / 124
It opens the Code-Mirror Editor, which features syntax highlighting.
3.5 Include your Favicon
You can also include a custom favicon. Therefore you only need to upload a “favicon.ico” file
in the XCC-Settings tab. This favicon will be used on every XCC page.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
17 / 124
3.6 Create Widgets
You can create new widgets in the admin panel by a click on “Create Widget”. A dialog will
open and you can choose your new widgets type name. If the name is valid, the input field
will be visualized green. Else the field will be visualized red and the “Create” button will be
disabled.
The new widget will appear in the admin panel in alphabetical order. If the new widget is not
displayed instantly, try reloading the page.
3.7 Integration of the Navigation
If activated, the navigation will be shown across the complete width of the page and above
the widgets. Activate it within the “Page Settings” tab of the admin panel and select a
Community. By clicking on the checkbox you can disable the navigation.
You have three options to display the navigation: On top of the page, left or right-adjusted.
By default the Navigation is shown at the top.
An arrow will show you, that a deeper level exists.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
18 / 124
Short description:
The vertical navigation of the custom homepage derives from the horizontal Wiki-navigation
of an editorial Community.
Content source:
A Connections Community is configured as content source for this widget. This Community
has to contain a Wiki.
Expected format:
Displayed in the horizontal navigation are wiki pages of the selected Community, including
their hierarchy. The navigation can open the Embedded Experience, forward to an URL or
just can be used as a placeholder. To include links to other sources, paste the URL of the
source into the wiki page. If a URL is the beginning of a wiki page, the navigation will forward
to this URL. So you can also paste a link to another XCC page in there. If you want to have a
normal element in the navigation, which will not link to a site or open an embedded
experience, you can use an empty Wiki Page. To open the external link in a new window you
only need to select this option for this link in Connections.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
19 / 124
Configuration options Admin:
 Personalization
 Navigation positioning
3.7.1 Mobile Navigation
You can have a look at our mobile navigation here:
Or alternative: https://www.youtube.com/watch?v=jv4CrO4DQHE

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
20 / 124
3.7.2 Active Navigation and Breadcrumb
If your page title has the same name like a link in your Navigation, this link will be highlighted
as active. Also a breadcrumb will be displayed as shown in the picture below.
3.8 Access Rights for XCC Pages
The access rights can be set individually for every XCC Page. As well in the “Page Settings”
as in the “Page Management” tab of the admin panel you are able to select “Restricted”,
“Public” or “Anonymous” access. Each access selection allows for adding users as “Page
Editor”.
The “Restricted” option additionally offers to add users with explicit read access. Since
Version 12 you can also select a single Community and multiple users as “Page Readers”.
3.9 Page Management
Within the “Page Management” tab you can specify Content-Editors for each page. You can
also see the page title and who modified the page. In the “Action” section you can edit, copy
or delete a page.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
21 / 124
If you click on the edit icon, a dialog will open. Here you can rename the page’s name, title,
add or remove content editors and select a custom layout. Renaming a page to a name
already taken will rename the original page by adding the suffix “-old”.
Caution: Homepage Personalization and Flyout Page will not be interfered by the renaming.
Target of both will still be the “old” XCC page.
By clicking on the copy icon, a new page with the addition “-copy” will be created. It has the
same configurations as the original.
3.9.1 Creating New or Multiple Pages
You can create a new page in the “Page Management” tab of the admin panel. Click on
“Create new page” to open the dialog. You have to enter a valid name and title and choose
the type.
If there is already a page with the same name, a popup with an error will occur. Otherwise a
popup with a link to the new page will inform you that the page was successfully created.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
22 / 124
3.9.2 Page Import / Export
Since XCC 5.0 you can export and import XCC pages. To import XCC pages navigate to
“Page Management”. There you find an “Import pages” button. If you click it your will see the
following modal box.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
23 / 124
By clicking on “Select files” you can select an XCC page XML data or ZIP file to import. You
can also upload these files by drag and drop them into the drop area. Because of browser
restrictions only Google Chrome is supporting folder uploads at the moment. So if you drop a
folder in this area, all files from this folder will upload.
For exporting an XCC page you can find a download icon next to the site in the “Page
Management”.
The file you download is a XML file, which contains all your XCC settings.
If you want to export all your pages click the “Export all pages” button.
3.9.3 Set author rights and anonymous Access
Also in the “Page Management” you can change the settings of XCC pages. To open the
menu, click on the following icon.
Within the following menu you can change the ID, the title, the layout, mark as template, set
editor access or allow anonymous access to single XCC pages.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
24 / 124
3.10 Page Templating / Inheritance
You can mark an XCC page as template and use it to inherit from. If you are on an XCC
page itself, open the admin panel, click on the “Page Settings” tab, then click on the “Show
Advanced” button and you will see the advanced section. In this section you find a checkbox
named “Is Template”. Check this box then click the save button on the bottom right and you
will have this page as an XCC template.
You can do this in the Page Management either. Go to the Page Management and click on
the wrench icon of the page to edit it. In the new opened modal window you can edit the
page and on the bottom left you can find the checkbox “Is Template” as well.
After you have added content to your XCC template, you can select the XCC pages, which
will inherit from your template. To do this, go to the Page Management and edit every page

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
25 / 124
you want to let inherit from your template. In the edit page modal box of the XCC page that
will inherit, you select your template in the dropdown with the label “Inherit from” and click on
“Save”. You have to do it for every page that shall inherit.
Finally, if you have added content to your template and chose the pages that will inherit from
your template, you start the transmission by clicking the „Full Resynchronize“ button
once.You can find this button below the „Inherit from“ dropdown in your XCC template. The
chosen pages should now have inherited.
Hint: Only grid, layout and widgets will be inherited.
3.11 License Key
At the first start of XCC you will be asked for a license key. You will get the key from our XCC
sales team by email. If you are using a demo version, the maintenance will end after 30
days. You can have a look at your license in the “About” tab of the admin panel.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
26 / 124
If you click “Enter new license key” a dialog will open, where you can submit your new
license key.
If the maintenance date is exceeded and you updated to a new XCC version, the expiry date
exceeded or the maximum number of IBM Connections Users is exceeded, XCC will
continue to work but will display a message to all users that can be closed only after a few
seconds:
If you are an admin, you will be able to review the current license information and enter a
new License key here:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
27 / 124
Functionality of XCC will be preserved but administrative functionality will be deactivated until
an administrator enters a valid license.
In order to prevent a sudden loss of functionality, XCC will start to inform administrators
about potential and upcoming license issues.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
28 / 124
4 XCC Widgets
Short description:
Widgets can be embedded in the Placeholders on every XCC page. The height of each
widget can be defined pixel perfect or set to “auto” for a height responsive to the content.
The Widget header will be hidden, if no Widget title is defined.
You can include a twisty, to toggle the widget body. You only need to add the following html
snippet to the widget title:
If you will add the class “open”, the widget body will be shown, otherwise the widget body will
be hidden.
If you want to have the icon and the title to toggle the widget on click, you need to do this like
the
following example:
So instead of “toggleClick” you need to enter “toggleTitle” as a Class and put the widget title
inside of the tag.

Widget title

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
29 / 124
Content source:
The content source ‘type’ is set as default for each widget. To fill the widgets with content
you have to select a community or standalone application in the source field. Therefore start
to type in the name of your community in the field. After typing in the first letters a dropdown
menu will appear showing you matching communities with the community image. Select your
community by clicking on it.
If you just type in the full name without clicking on the name your choice won´t be saved.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
30 / 124
The different colors indicate which type of community the community is. Green are public,
yellow are moderated and red are restricted communities. If you set a restricted community
as content make sure that your users have access to the community otherwise they will see
an empty widget.
Configuration options Admin/Content Master:
Configurations for all Widgets:
 Positioning via Drag & Drop
 Height of the widget
 Widget title
Miscellaneous:
Caution: For correct display of the content within the widgets of XCC the sources need to
deliver valid HTML. If content is not displayed check the source for validity first. Sometimes
IBM Connections lets users save invalid HTML code.
4.1 Special Options
4.1.1 Choose Image teaser for News Widgets
The default XCC algorithm will search the first Video or Image into a blog post and will show
this as a Teaser for this entry. In some cases you may want to have the second or third
image to be the teaser. Therefore you have to edit the blog entry in IBM Connections. Right-
Click on the image you want to have as a teaser and click on “image properties”. Then you
have to add the word “teaser” in to the alternative text field. Now this picture should be the
teaser of this blog post in every news widget.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
31 / 124
4.1.2 Language-based Widget Title
You can localize widget title with the language-files. For titles that should be localized, please
use the following syntax in the widget-titles: %localize:key%. You can use any word for key.
Next you need to add the key with the language specific values to your language Files.
Here is an example:
The key test is mapped to the value “Hello World” for English.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
32 / 124
If there is no key found in the language-file, the key will just be displayed. E.g. if Russian
language is active, but there is no Russian language file or translation for this key, the widget
title will be “test” in this case.
4.1.3 Configure Image for Widget Title
You can configure a widget to display an image as widget title by pasting an html img-tag into
the input field for the title in the widget editor. The image can easily be uploaded to the XCC
customization files in the Admin Panel.
Code-Example:
The path of the image is always the same if you uploaded it to the XCC. You only need to
change the name of the file, e.g. “/xcc/rest/public/custom/filename.extension”
The image will by default be displayed in full-width without any padding.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
33 / 124
If you want to position a text on the image, please use the following Code in addition to the
Code-Example:
4.2 IBM Connections Widgets
Short description:
Apart from XCC-widgets those Connections in-built widgets can be added that are available
for “My Page”.
Added in release:
2.0
Content Source:
CNX
Caution: CNX-Widgets aren’t available in Cloud, Communities or Anonymous mode of XCC.
Expected format:
Text

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
34 / 124
Different for each widget
4.3 ATOM/RSS Feed
Short description:
This Widget allows you to include elements from other web sites. You can show RSS or
ATOM Feeds from external sites within that widget.
Caution: Be sure that you have configured the AJAX-Proxy (XCC - Technical Userguide).
As of XCC v11 this Widget allows enriching the displayed content with the Rich RSS Option.
With that option you may display images from the target resources within the RSS Widget.
Caution: the Rich RSS option will not work for all RSS widgets. In order to use this option
the OEmbed Service needs to be configured. Additionally not all Websites provide
information consumable by the OEmbed service. You need to check on a per-feed decision if
the rich option works for your use case.
As of XCC v11 this Widget allows for personalizing the pulled feeds.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
35 / 124
Added in release:
4.1 resp. 11
Content source:
External / RSS or ATOM Feed
Expected format:
Feeds will be displayed as a link, with date and maybe a short abstract. If you click on the
links you will be forwarded to this feed.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
36 / 124
 Number of Items
 Number of Items per Page
Other:
If too many tabs are created regarding to the width of the widget, an arrow navigation
appears as help. If you have only one Channel no tab will be displayed.
4.4 Clipping
Short description:
This Widget allows you to display content from other Sites. For example you can include the
news section from an external website. To configure this widget, HTML, JQuery and CSS
skills are required/useful.
Added in release:
10.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
37 / 124
Content source:
The content from another website will be displayed.
Expected format:
The Clipping Widget displays the selected HTML from the source URL in XCC/Connections
standard formatting. For customized appearance you can add custom CSS. Multiple
selectors are displayed in the defined order. Please make sure not to enter a forwarding URL
but the targeted URL instead.
 URL (content source)
 Apply Custom CSS, which can be pasted or edited in the widget editor

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
38 / 124
 Selector Type: Use cropmarks or a JQuery/CSS selector to specify the displayed
content
Caution: Be sure that you configured the AJAX-Proxy (XCC - Installation Instructions).

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
39 / 124
4.5 Community Description
Short description:
 Displays the description of a community
Added in release:
10.0
Content source:
The description of the chosen community will be displayed.
Expected format:
The HTML-code of the description will be displayed. Also Images that are embedded in the
description will be displayed.
 Personalization
 Community
4.6 Community Overview
Short description:
This widget suited especially for highlighting specific Connections Communities. The layout
is the same like the NewsOverview Widget. The Community picture, name and description
will be shown.
Added in release:
9.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
40 / 124
Content source:
Minimum one Connections Community should be defined as content source for this widget.
Expected format:
Pictures will be shown with a height of 100 pixels.
The entries will link to the community.
You can get the Community-Title as Widget title by entering “%sourceName%” into the
Widget title.
 Channels with a Community as a source

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
41 / 124
4.7 Events
Short description:
 Display of events or campaigns
 Content is maintained by the events of a Community
 View by month, week, week(list), day, day(list) and upcoming events
Added in release:
1.0
Content source:
A Connections Community is configured as content source for this widget. This Community
has to contain a calendar (events).
Expected format:
Depending on the selected view, all Community Events of the current view are displayed in
the widget. The different channels are displayed in different colors. The default setting is set
to three different colors. Also there should be a forward and back button to navigate through
the dates. You can jump back to today via the “today” button. Also you can select a Date to
jump to with a date picker. If you want to go to another view, you can easily click on the view.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
42 / 124
At a click on an event entry an Embedded Experience Pop Up opens up on the right side
next to the widget. The pop-up contains the complete content of the event, including all
comments and attending persons. The user has the options available to follow/unfollow,
attend/unattend, comment or like/dislike the event. It also includes an “Open in Community...”
link under the description to the actual event.
The mouse-over shows a tool tip with further information about the event.
To automatically display the source Community’s title add “%sourceName%” into the widget
title field.
 Available Views in Settings: Month, Week, Week List, Day, Day List, Upcoming
4.8 Files
Short description:
This Widget shows uploaded files with information about the author and the uploaded date.
Files can be downloaded with a single click. Each file type is represented by its own icon. If
more than five files are in the selected Community, a page navigation appears on the bottom
of the widget. A maximum of 100 files are displayed.
Since Version 5.0 you can also select files from the community and display them in the order
you want to have. Since Version 11.0 you are able to select a folder. All files of the selected
folder will be shown.
Since Version 9.0 you can sort the files by name, updated, likes, comments, shared and
downloads. If you don’t want to show the uploader and date, simply deactivate the “Show
details” checkbox in the edit area of this widget. Also you can have a search in the widget, to
search for a specific file. This is helpful, if you are showing lots of files with or without paging.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
43 / 124
By adding more channels, you are able to use more than one community as a content
source. This offers you the option to categorize downloads, reachable by switching the tabs
of the displayed widget.
You can get the Community-Title as Channel name by entering “%sourceName%” into the
Channel name.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
44 / 124
Added in release:
3.0
Expected format:
All uploaded files of a Community.
 Personalization
 Channel name
 Sort by
 Number of Items
 Enable Search
 Show details
Other:
4.9 Files Explorer
Short description:
This Widget shows the first level of folders in a Community. You can easily navigate through
the folders for- and backwards. Files can be downloaded with a single click. Each file type is
represented by its own icon. If more than five files are in the selected Community, navigation
appears at the bottom of the widget. A maximum of 100 files are displayed.
You are able to sort the files by name, updated, likes, comments, shared and downloads. If
you don’t want to show the uploader and date, simply deactivate the “Show details” checkbox
in the edit area of this widget. Also you can have a search in the widget, to search for a
specific file. This is helpful, if you are showing lots of files with or without paging.
By adding more channels, you are able to use more than one community as a content
source. This offers you the option to categorize downloads, reachable by switching the tabs
of the displayed widget.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
45 / 124
Added in release:
12.0
Expected format:
The root folder level of a Community will be displayed.
 Personalization
 Channel name
 Sort by

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
46 / 124
 Number of Items
 Enable Search
 Show details
Other:
4.10 Forum
Short description:
 Shows latest or selected entries of an Standalone or Community forum
 Shows the status of the forum ( Open question, answered question, discussion)
 Open the complete description in the Embedded Experience

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
47 / 124
Added in release:
6.0
Content source:
A Connections Community or Standalone Forum is defined as content source for this widget.
A Community has to contain a forum and at least one topic.
Expected format:
All topics contain a small image to indicate the status of the topic, a headline and a small
abstract.
 Personalization
 Number of Items
4.11 HTML
Short description:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
48 / 124
This Widget allows you to include elements from other Sites. For example you can include a
weather widget from an external website. To configure this widget, HTML skills are required.
Here is a small overview, what you can do with the Clipping Widget:
Alternative: https://www.youtube.com/watch?v=GMvT-fUBg1g
If your Code needs external Images or CSS/JS-Sources, you have to edit the link to this
source as shown in the following example:
Http Example:
http://www.google.de
/communities/ajaxProxy/http/google.de
Https Example:
https://www.google.de
/communities/ajaxProxy/https/google.de
Caution: Be sure that you configured the AJAX-Proxy (XCC - Installation Instructions).

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
49 / 124
Added in release:
3.0
Content source:
Extern
Expected format:
HTML, JS, CSS
Other:
The Code-Mirror input-box features full-screen-mode (STRG+F11), autocompletion
(STRG+Space), syntax-highlighting and much more. Further information: codemirror.net

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
50 / 124
4.12 Ideation Blog
Short description:
 Shows latest or selected entries of an ideation blog in a community
 Vote directly from the XCC for an idea
 Open the complete description in the Embedded Experience
Added in release:
5.0
Content source:
A Connections Community is defined as content source for this widget. This Community has
to contain an ideation-blog and at least one blog entry.
Expected format:
All ideations blog entries of a community exceptional graduated ideas. Graduated ideas are
not shown in the ideation blog widget.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
51 / 124
 Personalization
 Number of Items
Other:
If you have set a vote limit of e.g. 5 in the community the users can vote only for 5 ideas. If
the user already voted for 5 ideas he can´t vote for new ideas. The ideation blog widget gives
the user a response if he reached the limit.
4.13 IFrame
Short description:
 Embed an iFrame to the XCC
 Use the IBM Connections proxy to access to http sites
Added in release:
5.0
Content source:
Source is the website you enter in the URL input field. The information of the site will be
transferred directly to the XCC.
Expected format:
The source of the IFrame widget should be able to be shown in an IFrame. The screenshot
of the IFrame widgets shows the web view of a notes database. There is only some
information about a menu. If you try to display a whole website you will see that there is not
enough space to show it complete.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
52 / 124
 Personalization
 Use Proxy
Other:
To use the IBM connections proxy it has to be configured. How to configure the proxy server
you can see in the Technical Users Guide for XCC.
4.14 Important Bookmarks
Short description:
 Lists of links can be categorized by several tabs
 By linking, any content can be made permanently visible and highlighted here
 Only links, which are marked as important will be shown
Added in release:
8.0
Content source:
For each channel a Connections Community is configured as content source in this widget.
Each of those Communities has to contain at least one bookmark.
Expected format:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
53 / 124
For each selected Community one tab with the correlating important bookmarks will be
shown. The bookmarks are sorted alphabetically. With a click on the bookmark, the user will
be forwarded to the corresponding URL.
You can get the Community title as channel name by entering “%sourceName%” into the
channel name field.
 Personalization
 Channel name
 Number of Items
Other:
4.15 Links
Short description:
 Lists of links can be categorized by several tabs
 By linking, any content can be made permanently visible and highlighted here
Added in release:
1.0
Content source:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
54 / 124
For each channel a Connections Community is configured as content source in this widget.
Each of those Communities have to contain at least one bookmark.
Expected format:
For each selected Community one tab with the correlating bookmarks will be shown. The
bookmarks are sorted alphabetically. With a click on the bookmark, the user will be
forwarded to the corresponding URL.
Since Version 5.0 you can also select files from the community and display them in the order
you want to have. Since Version 9.0 you can sort them by name or update date.
Also you can have a search in the widget, to search for a specific file. This is helpful, if you
are showing lots of files with or without paging.
channel name field.
 Personalization
 Sort by
 Channel name
 Number of Items
Other:
4.16 MediaGallery
Short description:
The MediaGallery displays Images or videos from a Community File Application. They can
be shown in a Grid or a Slider.
Added in release:
9.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
55 / 124
Content source:
A Connections Community or a Folder in a Connections Community is defined as content
source for this widget. The source has to be an image with the file type:
 png
 jpg
 jpeg
 gif
 svg
 bmp
Since XCC Version 11 the MediaGallery also supports videos with the following file types:
 MP4
 flv
Expected format:
The Widget will show as many images or videos, as you defined in the Editor. They will be
displayed in a x4 Grid, x9 Grid or Slider. If you click at an image, it will open in a lightbox. In
the lightbox you can click through all the images of the widget in original size. You can also
have a paging for Grids. So you could have 20 Pictures with a paging of 9 or 4 Pictures. With
Version 11 the Widget displays the description of the image, if Slider is selected. The
Lightbox also features this enhancement.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
56 / 124

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
57 / 124
 Personalization
 Style: Grid or Slider
 Number of Items
 Community or Folder in Community
4.17 My Communities
Short description:
 Displays all Communities the user is a member of
 Links will open in a new tab
 Community description will be shown on click to the info label
Added in release:
13.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
58 / 124
Content source:
The Widget displays the Communities the current user is a member of. Each user will see a
different result set in the widget, depending on his personal Community memberships.
Each Community is displayed as a tile that shows the communities icon and the name of the
community. Clicking the Community will open it in a new tab. Hovering and clicking the
appearing badge icon in the top right corner will turn the tile and display the community
description if available.
If more Communities are available than fitting to one page, a pager is created allowing the
user to see the next page of communities.
 Widget title
 Widget height
 Number of communities per page
4.18 My Links
Short description:
 Displays all personal links
Added in release:
10.0
Content source:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
59 / 124
The widget will display links that are created in the IBM Connections Profile. Each user could
have different personal links.
Expected format:
The Widget should look like the normal “Links Widget”.
 Number of Items
4.19 My Notes
Short description:
 displays all to do’s/notes of a specific personal activity only visible to the current user
 offers to create, edit or delete note directly from the widget
 sort notes either by date of creation or deadline
Added in release:
12.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
60 / 124
Content source:
When editing the widget, you will be asked to add an “Activityname”. By adding a name, an
entry will be added in the IBM Activity application under “Notes App:Activityname”. This
functions as the content source for the respective widget and enables the user to implement
different personal to do’s/notes in multiple MyNotes widgets.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
61 / 124
Expected format:
The widget offers an “Add New Notes”-Button at the top and lists all notes in ascending order
either by date of creation or deadline. Hovering over a note, shows the edit- and delete-
buttons for each individual note. Each note can easily be marked as completed by clicking
the preceding circle-checkbox. Moreover, the MyNotes widget includes pagination, which can
also be configured in the widget editor.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
62 / 124
 Name/Identifier for the activity
 Number of items per page
 Number of items
4.20 My Quicklinks
Short description:
 Displays all links of the My Bookmarks view tagged with “my_links”
 Offers to create, edit or delete bookmarks
Added in release:
12.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
63 / 124
Content source:
The Widget will display links that are created in the IBM Bookmark application inside of the
My Bookmarks view tagged with “my_links”. This way each user can have different personal
links. This can be a link to a webpage or a community.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
64 / 124
Expected format:
The widget offers an “Add new Quicklink”-Button at the top and lists all the quicklinks in
ascending alphabetical order below. On hover edit- and delete-buttons pop up on every
quicklink. Moreover the widget includes pagination, which can be configured inside of the
widget editor.
 Number of Items per page

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
65 / 124
4.21 Navigation
Short description:
The Navigation Widget is working on the same way, like the normal XCC navigation is doing.
You can specify to have a right or left alignment navigation. Since version 12 you can also
select a specific page from a wiki, instead of showing the full wiki. The selected wiki page will
be shown with all their child-pages. If just one single wiki page, which includes children, is
selected, only these children will be displayed.
Added in release:
8.0
Content source:
For the channel a Connections Community is defined as content source for this widget. The
source has to contain at least one wiki entry.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
66 / 124
Expected format:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
67 / 124
 Personalization
 Orientation
 Show Page (All/Selected)
4.22 News Channel
Short description:
The News Channel Widget is a News Widget that is able to display up to 10 Channels.
Channels will be shown in a window on top of each other. Two short news teasers are
displayed for each channel, whereby the user can navigate to older entries via arrows. A
picture or video (the first one of the correlating blog entry) and a limited abstract are
displayed for each news entry.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
68 / 124
Added in release:
1.0
Content source:
For each channel a Connections Community or a Standalone Blog is defined as content
source for this widget. The source has to contain at least one blog entry.
Expected format:
A news channel is displayed for each selected Blog. The entries of the Blogs are shown
within the channel. The first picture of the blog entry, the headline and a plain text abstract is
displayed for each entry. If the post contains no picture, the community image is displayed
instead.
With a click on an entry an Embedded Experience Pop Up opens up on the right side next to
the widget. The pop-up contains the complete content of the blog entry, including all
comments and likes. Within the Embedded Experience the article can be liked/unliked and
commented. It also contains an “Open in Community...” link underneath the article that
forwards to the actual Blog entry.
channel name field.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
69 / 124
By checking the “Slide automatically”-checkbox (added with Version 13) you can make the
slider rotate through the blog entries automatically.
 Personalization
 Channel name
 Number of Items
 Content Creation
 Slide Automatically
Other:
Date and time are displayed in the following format: "31 July 2013 02:16". The format can be
changed within the language files. Therefore you can have a look at chapter 3.1.3.
4.23 News List
Short description:
Display the latest or selected posts of one or more community as a link.
Added in release:
4.1
Content source:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
70 / 124
A Connections Community or a Standalone Blog is defined as content source for this widget.
The Source has to contain at least one blog entry.Expected format:
The entries are shown with date and headline. If you have selected news, a “more News” link
will appear in the right corner at the bottom of the widget, which will link to this community.
Since XCC Version 9 you can aggregate news from different communities. If you will
aggregate news, there will be no “more News” link.
With a click on an entry an Embedded Experience Pop Up opens on the right side next to the
widget. The pop-up contains the complete content of the blog entry, including all comments
and likes. Within the Embedded Experience the article can be liked/unliked and commented.
It also contains an “Open in Community...” link underneath the article that forwards to the
actual Blog entry.
Widget title.
 Personalization
 Number of Items
Other:
4.24 News Overview
Short description:
Within this widget single news can be added. It’s suited especially for highlighting specific
news on a department level.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
71 / 124
Added in release:
4.1
Content source:
The source has to contain at least one blog entry.
Expected format:
The entries are shown with date, headline, picture or video and abstract. Pictures and videos
will be shown with a height of 100 pixels. If your blog entry has no picture and no image, the
Community image will be shown. In the lower right corner there is a “more news” link to the
original blog.
With a click on an entry an Embedded Experience Pop Up opens on the right side next to the
widget. The pop-up contains the complete content of the blog entry, including all comments
and likes. Within the Embedded Experience the article can be liked/unliked and commented.
It also contains an “Open in Community...” link underneath the article that forwards to the
actual Blog entry.
Widget title.
Since XCC Version 9.0 you can aggregate blog entries from different Communities. If you
aggregate them, the News will also have a link to this Community in the headline. You can
remove the link in the Admin Dashboard. After that only the name of the community will be
shown.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
72 / 124
 Personalization
 Number of Items
Other:
4.25 News Slider
Short description:
The News Slider Widget is a News Widget that is displaying only one Channel. Two short
news teasers are displayed for each channel, whereby the user can navigate to older entries
via arrows. A picture or video (the first one of the correlating blog entry) and a limited
abstract are displayed for each news entry.
Added in release:
8.0
Content source:
For the channel a Connections Community or a Standalone Blog is defined as content
source for this widget. The source has to contain at least one blog entry. You can aggregate
different communities or standalone blogs by adding more sources
Expected format:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
73 / 124
A news Slider is displayed for each selected Blog. The entries of the Blogs are shown within
the channel. The first picture of the blog entry, the headline and a plain text abstract is
displayed for each entry. If the post contains no picture, the community image is displayed
instead.
With a click on an entry an Embedded Experience Pop Up opens up on the right side next to
channel name field.
 Personalization
 Number of Items
 Multiple Sources
 Slide Automatically
Other:
4.26 News
Short description:
Within this widget single news or news channels can be added. It’s suited especially for
highlighting specific news on department level.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
74 / 124
We also created a video how to publish news in XCC here:
Alternative: https://www.youtube.com/watch?v=Pxom5UrOTCI

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
75 / 124
Added in release:
1.0
Content source:
This Community has to contain a blog and at least one blog entry.
Expected format:
It is possible to display more than one entry in this widget. The first entry is shown with date,
headline, picture or video and abstract. All further entries are indicated below with a linked
headline. Underneath the titles, the numbers of comments and likes can be indicated with the
“Show Comments and Likes” checkbox in the Widgets configuration. In the lower right corner
there is a “more news” link to the original blog.
At a click on an entry an Embedded Experience Pop Up opens up on the right side next to
You can also display entries in a slider. You simply need to switch from “List” to “Slider” in
the edit area. Of course you can select any posts you wish. If the option to show more than
one post is chosen, the widget displays a slider to navigate the different entries. By checking
the “Slide automatically”-checkbox (added with Version 13) you can make the slider rotate
through the blog entries automatically.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
76 / 124
Widget title.
Since Version 8.0 we included a feature which is called “News Aggregation”. This allows you
to add more than one Channel into the News Widget. This means, you can select more than
one community to show news from. The news entries will be shown sorted by date. Of
course you can also mix selected and latest posts, if you want to.
 Personalization
 Slider
 Number of Items
 Number of Channels
 Display comments and likes
 Slide automatically

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
77 / 124
4.27 People Birthday
Short description:
With this Widget you can display Persons, who have birthday today.
Attention: This widget requires a modification to your Profiles configuration (short
documented in the XCC- Technical User's Guide Documentation) and is offered as a service
asset from TIMETOACT.
Added in release:
6.0
Expected format:
People will be displayed with an image, phone number, job title, location and email. If you
click on a person, you will be forwarded to the according Connections profile. Hovering a
person will open a Business Card including useful quick links for the person.
Caution: This Widget isn’t available in Cloud mode of XCC.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
78 / 124
4.28 People Finder
Short description:
With this Widget you can search for persons within Connections. The search will start as you
type. If more than five people are found, a page navigation appears on the bottom of the
widget. A maximum of 100 persons can be displayed. Search is performed with a “fuzzy”
logic, i.e. the search is performed in the following fields of a person:
 Display name
 Telephone number
 Mobile number
 IP Telephone Number
 Job Responsibilities
 Department title
 Tags
 Physical Delivery Office
As a side effect you may find persons who have the letters you typed in within their tags or
their manager field.
Added in release:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
79 / 124
4.1
Expected format:
People will be displayed with an image, phone number and email. If you click on a person,
you will be forwarded to the according Connections profile. Hovering a person will open a
Business Card including useful quick links for the person (for an example see 3.23 People
Finder).
 Number of Items
 Number of Items per page
4.29 People Selector
Short description:
With this widget you can display persons from IBM Connections. A maximum of 100 persons
can be displayed. You can have multiple channels with a channel name to order people in
departments for example.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
80 / 124
Added in release:
6.0
Expected format:
People will be displayed with an image, phone number, job title, location and email. If you
click on a person, you will be forwarded to the according Connections profile. Hovering a

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
81 / 124
person will open a Business Card including useful quick links for the person (for an example
see 3.23 People Finder).
 Channel name
4.30 Picture
Short description:
This widget shows up to 9 pictures from the media gallery. By clicking on the picture you can
directly go to the picture. Also you have the option to like an image in the widget. The shown
pictures are always the last 9 of the media gallery.
Added in release:
5.0
Content source:
A Connections Community is defined as content source for this widget. This Community has
to contain a media-galley and at least one image.
Expected format:
The widget shows all entries in a media galley.
 Personalization: yes

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
82 / 124
Other:
The picture widget only can display pictures. If the media gallery contains a video this will
cause display problems in the picture widget. A workaround can be an extra community
where you upload only pictures.
Caution: This Widget isn’t available in Connections 5, Cloud or Anonymous mode of XCC.
4.31 Pinned Files
Short description:
 Displays all pinned files
 Displays link to all pinned files
 Download-button to direct download of this file
 Uploader and date will be displayed
Added in release:
10.0
Content source:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
83 / 124
The Widget will display files that are uploaded in Connections and will be pinned to my own
files. Each user could have different pinned files.
Expected format:
The Widget should look like the normal “Files Widget”.
 Number of Items
4.32 Popular Content
Short description:
 Widget shows different tabs for the most visited or liked Wiki, Blogs and Bookmarks in
Connections
Content source:
Source is IBM Connections. The widgets show the same result as Connections.
Expected format:
Five tabs, with links to the Blog/Wiki or Bookmark entry.
Caution: This Widget isn’t available in Cloud mode and Anonymous mode of XCC.
Added in release:
7.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
84 / 124
4.33 Preferences
Short description:
 Allows users to update their preferences for XCC, i.e. their preferences for the home-
& landing pages
In the following video we show how you can use this Widget for your intranet:
Alternative: https://www.youtube.com/watch?v=Fg-eh1zHg6Q
In the edit area you can select all fields you want to show in the Widget. These fields can be
a select box or an input field.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
85 / 124
Added in release:
7.0
Content source:
All fields in the profile edit area.
Expected format:
Input fields or select boxes with a save button.
Caution: This Widget isn’t available in Cloud or Anonymous mode of XCC.
 Fields to show
4.34 Profile Completion
Short description:
 Allows users to update their profile
 Widget shows only empty profile fields

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
86 / 124
In the edit area you can select all fields you want to show in the Widget. These fields can be
a select box or an input field.
Content source:
All fields in the profile edit area.
Expected format:
Input fields or select boxes with a save button.
Caution: This Widget isn’t available in Cloud or Anonymous mode of XCC.
Added in release:
7.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
87 / 124
 Fields to show
4.35 Profile Tagging
Short description:
 Shows your tags
 You can directly tag yourself
 Opportunity to delete tags
Added in release:
9.0
Content source:
All Tags of your profile will be shown.
Expected format:
The Widget will show your tags and a text area to directly add your tags. Also you can
directly remove your tags.
4.36 Profile Upload
Short description:
 Allows users to update their profile picture

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
88 / 124
The Widget will show your current photo. You can simply upload a new one. You can localize
and change the labels via the language files.
Content source:
Profile Picture
Expected format:
A small text with your current photo and an upload button.
Caution: This Widget isn’t available in Anonymous mode of XCC.
Added in release:
9.0
4.37 Saved Search
Short description:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
89 / 124
 Saved Custom Search with limited results
 Sort by relevance or date
 Search Box
You have different opportunities to use the Saved Search Widget. First you can enter a
normal search string in the query field like “Business”. Also you can search with a configured
Connections-Search. Therefore you have to enter the URL of the Search-Feed. You can get
this here:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
90 / 124
If you want to have a searchbar in the widget, you have to empty the query field.
Caution: The Search-API is used for this Widget. If the Search-Index isn’t up to date, it might
be that the widget will show you old content or nothing. This Widget will not be displayed in
mobile, because the mobile-app does not support this API.
Content source:
Connections
Expected format:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
91 / 124
Search results of connections content in a pager or a simple search bar.
Added in release:
8.0
 Items per Page
 Total Items
 Search-Query
4.38 Static Content - Blog
Short description:
 The entire Contents of a Blog entry will be displayed in the widget.
 It is possible to provide links with further information.
 Especially useful for Help Center Boxes or static information

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
92 / 124
Added in release:
1.0
Content source:
One Blog entry of a Community or Standalone Blog has to be selected, which then contains
the entire content.
Expected format:
The content of the Blog entry will be mirrored one on one in the widget.
Widget title.
 Personalization
4.39 Static Content - Wiki
Short description:
 The entire Contents of a Wiki entry will be displayed in the widget.
 It is possible to provide links with further information.
 Especially useful for Help Center or static information
Added in release:
4.0
Content source:
One Wiki entry of a Community or Standalone Wiki has to be selected, which then contains
the entire content.
Expected format:
The content of the Wiki entry will be mirrored as is in the widget.
Widget title.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
93 / 124
 Personalization
4.40 Suggestion
Short description:
 Helps your employees with IBM Connections on boarding and built their activity
stream
 People are suggested to invite to connect
 Communities are suggested to follow
The suggestions will be shown in a slider, if there is more than one suggestion. If you will
click on the “Remove” link, the suggestion will be removed. Within the “Invite to connect”
button, a dialog will open, where you can also follow the person and write a personal
message.
Caution: The Search-API is used for this Widget. If the Search-Index isn’t up to date, it might
be that the widget will show you persons, which you have already invited into your network.
This Widget isn’t available in Cloud or Anonymous mode of XCC.
Content source:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
94 / 124
Connections Profiles and Communities
Expected format:
The Widget will show a tab with people suggestion and a tab with community suggestions.
You can modify the tab title within the language files. There you will find the keys
"recommend_communities_tabtitle" and "recommend_people_tabtitle”.
Added in release:
7.0
4.41 Tag Cloud
Short description:
 Displays tags of a community
 Often used tags are highlighted
Added in release:
10.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
95 / 124
Content source:
All tags of a community will be displayed.
Expected format:
The Widget will display the tags of a community. The tags will link to a search for this tag in
the chosen community.
 Personalization
 Community
4.42 Teaser Widget
Short description:
This Widget allows you to display an image from another Site or uploaded in XCC. You can
also specify the image to link to another URL. In addition to that you can add an abstract or
teaser text.
Added in release:
12.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
96 / 124
Content source:
The image from another website or uploaded in XCC will be displayed.
Expected format:
The Teaser Widget displays the selected image from the source URL in XCC standard
formatting. If a destination is entered, the image and the text will link to this URL. Caption,
Destination, Abstract and New Window are optional.
 Destination
 Abstract
 Caption
 Image URL
 New window
4.43 Top News
Short description:
 Optional highlighting of specific news at a prominent location
 Extensive display of one single news
Added in release:
1.0
Content source:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
97 / 124
The source has to contain at least one blog entry. Since this widget only shows the content
of one blog entry, the last created blog entry will be selected. Alternatively, there is the option
to select a specific blog entry for the widget.
Expected format:
The first picture or video, publishing date, headline and abstract of the selected blog entry
will be shown.
At a click on the entry an Embedded Experience Pop Up opens up on the right side next to
You can also display the latest six entries in a slider. You simply need to switch from “List” to
“Slider” in the edit area. Of course you can select any posts you wish. If the option to show
more than one post is chosen, the widget displays a slider to navigate the different entries.
Widget title.
Since Version 8.0 we included a feature which is called “News Aggregation”. This allows you
to add more than one Channel into the News Widget. This means, you can select more than
one community to show news from. The news entries will be shown sorted by date. Of
course you can also mix selected and latest posts, if you want to.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
98 / 124
 Personalization
 Slider
 Number of Items
 Number of Channels
 Slide automatically
Other:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
99 / 124
5 Embedded Experience
Following Widgets got an Embedded Experience:
- Events
- Ideation Blog
- Forum
- News
- News Channel
- News List
- News Overview
- News Slider
- Navigation
- NavigationWidget
- Top News
If you want to have an Image-carousel in the Embedded Experience, you have to edit the alt-
Attribute for all of these Images in the blog entry. The Name of the alt-Attribute should be
“gallery”. Also you can specify the title of the picture. Therefore enter the title after “gallery”,
separated by a space or colon. If you click on the Images in the Slider they will open a
lightbox.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
100 / 124
In the Embedded Experience you can also like comments from blog entries, ideas or topics.
If you have a moderated Blog or another moderated community application, the Embedded
Experience can post comments, but will not show comments, that are not approved. If you
post a comment on a moderated community, it will display an information that the comment
was sent to the moderator.
If comments are forbidden for a blog or another community application, the Embedded
Experience will not show a text area to comment. If the blog or the community application
has no comments and it is not allowed to comment, there will be no comment area in the
Embedded Experience.
Since version 12 the Embedded Experience can be printed. Therefore you will find a small
print icon on the right corner of the header, next to the close icon. If you want to customize
the design of the printed content, you can upload a “print.css” file to the XCC Customization
Files.
You can close the Embedded Experience alternatively by a double right-click into the
Embedded Experience, maybe you will know this feature from Lotus Notes, or simply click
outside of the Embedded Experience.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
101 / 124
6 Content Creation
The Content Creation was added with Version 13 and allows for creating blog entries directly
throughout XCC.
The following widgets support creating new content:
- News
- News Channel
- News List
- News Overview
- News Slider
- Top News
Having checked the “Allow Content Creation”-checkbox inside the Widget editor, displays the
optional “Create Content”-Button to these Widgets.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
102 / 124
The Button opens a popup which contains the default rich-text-editor installed with IBM
Connections for creating the blog-entry. Source (HTML) and preview options are also
available. The blog-entry is afterwards directly posted to the selected source-community.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
103 / 124
If the Widget has more than one channel, you are able to select to which blog the entry
should be posted in the popup.
Caution: Because XCC uses various caching mechanisms, it might take up to 15 minutes
before the created entry will be shown in the widget.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
104 / 124
7 XCC4Communities
For each community in IBM Connections you can have a XCC page. Therefore you only
need to implement the XCC-iWidget, as documented in the “XCC – Technical User Guide”,
and add the XCC Widget to the Community, on the same way that you are adding other
Applications, like the Bookmark or Files Widget in communities.
You can simply remove the XCC page by clicking on “Delete Page” in the Page Settings tab
in the Adminpanel.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
105 / 124
You can administrate the XCC as Content Master if you are Community owner, Connections-
Admin or a normal Content Master of this XCC page.
Since version 12 you will not leave the Community if the XCC Navigation is linking to other
XCC-Pages. If you click on such a link, the XCC-Page will directly render in this community.
With the Browser next and back button you will be able to navigate through the XCC-Pages.
Also you can send this Link to colleges, and they will see the same XCC-Page.
Also we integrated XCC4Community for the Cloud-Mode.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
106 / 124
8 XCC4Cloud
If you configured the XCC for IBM Smartcloud, as documented in the “XCC – Technical User
Guide”, you can reach the XCC with the following URL:
www.yourDomain.com/xcc/cloud?page=<yourXCCpage>
You will have some limitation in the cloud. E.g. you will not have Connections-Widget or the
RightColumn/Activitystream. Also you cannot create some XCC Widgets. These Widgets are
documented here at Chapter 4 “XCC Widgets”.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
107 / 124
9 XCC4Anonymous
Please make sure, that you configured the XCC for anonymous access, as documented in
the “XCC – Technical User Guide”.
External Users can access the XCC page with the following URL:
www.yourDomain.com/xcc/global?page=<yourXCCpage>
You will have some limitations in the anonymous mode. E.g. you will not have Connections-
Widget, a Connections header or the RightColumn or Activitystream. Also some of the XCC
Widgets will not appear in the anonymous mode. These Widgets are documented here at the
chapter “XCC Widgets”.
It is not possible to like or comment on blog posts or wiki entries.
Caution: Anonymous access is not developed as an internet solution. Please use it
only for your “Blue Collar” workers as an intranet solution.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
108 / 124
10 XCC FlyOut Page
The XCC FlyOut Page is managed by the admin or content master. The FlyOut Page may
contain any of the over 30 XCC widgets and is available anywhere in Connections. You only
need to move your mouse over this icon.
The FlyOut Page can be easily set up: The FlyOut Page is a regular XCC Page and has the
same customization and grid options. You only have to select it within the XCC Settings in
the Adminpanel.
Caution: The FlyOut Page is not available in Cloud, Mobile or Anonymous Mode.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
109 / 124
11 XCC-Personalization
Short description:
Within the individual widgets, personalization can be activated. Upon activation there is the
option to configure different channels for different values of a profile. Additionally it is
possible to choose a default channel.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
110 / 124
It is possible to select more than one Attribute<->Value Match for a source to be used. That
way you can determine the sources for a widget very sophisticated. If you want to search for
a non existent or empty attribute, just leave the value empty.
Additionally you may test the result of your personalization settings for a specific user. Simply
type and select the user to test into the tester and see the result:
For profile extension values, you may check if the extension field has a value at all. This is
done by leaving the Profile-Value input empty.
For advanced users, it is possible to describe complex personalization use cases using a
JSON file in the advanced tab:
IMPORTANT: using the advanced option is very mighty. Using this option wrongly may
cause logical misconfigurations and even damage to the logical personalization data model.
Handle with care.
You can also have a look at our video about the personalization of XCC:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
111 / 124
Alternative: https://www.youtube.com/watch?v=yaHGg9oirvw
Added in release:
2.0
Replaces:
Personalization that was available since version 2.0
Content source:
The respective format is chosen per channel, depending on the widget.
Expected format:
The user will be shown different content (source) depending on the value of the predefined
profile field (attribute name).
The configuration options depend on the particular widget. Principally, a profile field (attribute
name) is defined, which serves as a basis for differentiation. First a content source is

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
112 / 124
selected for the default-user, which is displayed to all users without predefined value. Next
it’s possible to link different values to different content (source).
11.1 Personalize Homepage
Short description:
In the “XCC-Settings” tab in the admin panel you can personalize the homepage. The source
must be an existing XCC page.
As “Default” the normal XCC-Page is configured. The Default is editable. If there is no
“Default”-Attribute, you need to define one.
With the Checkbox you can enable or disable the personalized homepage.
Personalization can be defined on multiple attributes as described fro Widgets in Section 11:
.
Added in release:
6.0

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
113 / 124
12 Custom Widget API
As described in chapter “Include Custom.js” you can upload a Javascript File to have access
to the XCC. This is necessary for the Custom Widget API.
12.1 Register Custom Widget
To register your custom Widget you have to call the following Function in the init-function of
the custom.js:
The first parameter must be a string. It will represent the name of the Widget in the list of
widgets in the adminpanel if you click on the button “Create Widget”.
The second parameter must be also a string. It will represent the icon of the custom Widget
in the adminpanel. The icon set is from www.fontawesome.io . You only need to add the
name of the icon. E.g: If you want to have the “comment” icon, you have to write only
“comment” instead of “fa-comment”.
The third parameter should be your callback function, which will be called if the widget is
loaded. This function will get two parameters. The first parameter is the widget container as a
jquery-object. The second parameter is the widget configuration as an object.
The fourth parameter should be your callback function for the edit area. Here you can use a
lot of Libraries, like Bootstrap, Jquery UI, etc. Also there are some XCC functions, which will
help you to reach the same layout as the normal widget editors. A “Save” - button is
automatically rendered into the editor. Your callback function will get also two parameters:
The first is the edit area as a jquery-object, the second parameter is the widget configuration-
object. Within the widget configuration you can fill your input fields in the edit area, like title or
height.
The fifth parameter should be your callback function for the “Save” – button. Your callback
function will get two parameters. The first is the edit area as a jquery-object, the second
parameter is the widget configuration-object. You have to read out the data of your custom
editarea and save them into the widget configuration.
The sixth parameter is optional. Here you can specify in which XCC-Mode the Widget will be
shown. By default the Widget will be available in all XCC-Modes.
12.2 Example of Custom Widget
This is the whole Code you need to write for a “Hello World” Widget:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
114 / 124

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
115 / 124
13 IBM Forms Widget
XCC offers two Custom Widgets for implementing IBM Forms into XCC. These Widgets are
offered as a service asset from TIMETOACT. The following youtube video shows the
functionality of those widgets:
Alternative: https://www.youtube.com/watch?v=cKqUksrF6UY

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
116 / 124
14 Functions, Fields and Buttons
There are different fields and buttons available in the editing masks.
The following chart explains all functions:
Reading mode Action
Opens options for editing. With Shift + Click you can remove this
Widget. Press STRG + SHIFT + Click to remove all Widgets
Locks the Widget for editing bei ContentMasters. Only Admins of the
Page will be able to drag and drop and edit this widget. The lock icon
will indicate if the widget is locked or open.
Widget Title
If the widget contains a title in the header, it can be changed here. If
you enter “%sourceName%”, the Community-Title will be displayed if
possible. If you enter no title, the Widget header will be hidden.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
117 / 124
Height
Height of the widget – if the height of a widget is chosen too low,
content might be cut off or hidden.
Add Content
Stream
Adding of a channel
Personalize Activation of personalization
Will show the Widget editor in Fullscreen
Style Choose List or Slider
Attribute
Technical name of the profile field, which is used in order to
differentiate (e.g. work_location)
Value Value, which is expected in the profile field (e.g. Munich)
Source
Channel, for which the predefined value is supposed to be shown (e.g.
Munich cafeteria blog)
Show Likes and
Comments
Enable display of likes and comment next to the entries
Layout
Select default view for the events widget: Month, Week, Day, Day
(List)
Type Content source
Channel Name Title of the channel
Move Channel up, down or remove this Channel
Source
Selection of the source with a small icon to link to the selected
community or Standalone Blog
Show posts
Latest: Entries of the channel are shown in chronological order.
Selected: Individual entries of the channel can be selected and sorted.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
118 / 124
Search Latest
Additions
The default XCC search for posts or wikis uses the Connections
Search API. Too found new posts or wikis, this API needs up to 15
minutes. If you want to find Additions, that are created only a few
minutes ago, please click on “Search latest Additions” and try to find
them again.
# Items Items to be shown in the Widget
# per Page Items to be shown per Page in the Widget
Remove Widget
With STRG + SHIFT + Click on “Remove Widget”, you can remove all
Widgets from the page.
Save Widget Save the Widget-Configuration. You can also press STRG + S.
Customize
Open XCC administration

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
119 / 124
15 Best Practices for Content & Restriction Maintenance in IBM
Connections
Most of the content displayed by XCC pages will be created and maintained within IBM
Connections. Therefore we provide some useful best practices in this area to guide your
editorial teams to an effective content creation process.
15.1 Roles & Restrictions in Source Communities
If widgets are set to display the “latest” content of a Community each new post within this
community will be displayed on the corresponding XCC page. This enables an easy content
creation process. To make sure that only a defined set of people are allowed to publish
content within this sources there are different options.
Option 1: Set the Community access to moderated
Each owner can change the access level of a Community by switching in the edit mode and
changing the access configuration:
These way only defined users can join the Community and start contributing to the content.
All possible applications will be only usable by the defined members of the Community.
Option 2: Set single apps on a restricted mode

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
120 / 124
Within the edit mode of a Community most embedded applications can be further configured.
Access each tab to see the possible restrictions. For most applications members can be set
to reader role. Through this setting only Community owners can create and change new
content within an application.
Option 3: Approval workflow for all News Widgets
For Blogs there is the option to let members only create draft versions of an entry. The draft
is then submitted to the owners for approval or denial. This setting enables an approval
workflow.

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
121 / 124
15.2 Picture Guidelines
The different News Widgets display pictures in various ways. Depending on the CI adaption
and the layout there should be a maintenance guideline in place to ensure a consistent
layout. Following issues should be considered:
15.2.1 Picture Ratio
The Top News Widget, News Overview Widget and the News Widget will always display the
original image sized to the width of the used placeholder. Therefore the ratio of the pictures
will have a big impact on the layout outcome and should be predefined in a guideline. The
following examples should display the impact on the layout. The used widget and
placeholders are consistent, only the picture’s ratio is differing:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
122 / 124
The News Channel Widget always resizes the picture to a set width and cut the height after a
specific amount (150px x 155px). This ensures a specific and harmonic layout, but might cut
off pictures in unintended ways if not minded.
15.2.1 Picture Size
To ensure a better performance the embedded pictures should be resized to a fitting web
format before embedded in the blog entry. One way to eliminate the upload of too big
pictures is offered thru the general IBM Connections settings for blogs. The upload capability
for blogs can be set to a fitting size, so that no file extending the limit can be uploaded. With
the Connections Administration Toolkit, this is an easy set up:

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
123 / 124

TIMETOACT GROUP
Im Mediapark 2
D-50670 Köln
+49 221 97343-0
info@timetoact.de
www.timetoact.de
124 / 124
16 System Requirements
IBM Connections:
5.0
5.5
WebSphere Application Server:
All supported by IBM Connections
Databases:
All supported by IBM Connections (tested with DB2, MSSQL and Oracle)
Supported Browsers:
 Firefox - all major builds from 32.0 or higher
 Google Chrome – all major builds from 37.0 or higher
 Internet Explorer - 9 to 11
 Apple Safari – all major builds from 5.1.6 or higher

XCC Documentation Release 13.0

Recommended

More Related Content

What's hot (20)

Similar to XCC Documentation Release 13.0 (20)

More from TIMETOACT GROUP (14)

Recently uploaded (20)

XCC Documentation Release 13.0