XCC Documentation

© 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 [email protected] www.timetoact.de

1 / 76

XCC 8.0 Documentation

Web Content & Custom Apps

Extension for IBM Connections




2 / 76

Content

Introduction ........................................................................................................................... 5

1 Role concept .................................................................................................................. 6

1.1 Websphere Application Server-Admin (WAS-Admin) .............................................. 6

1.2 Admin ...................................................................................................................... 6

1.3 Content Master ........................................................................................................ 6

1.4 Reader .................................................................................................................... 7

2 Site Structure ................................................................................................................. 7

2.1 XCC-Layout............................................................................................................. 7

2.1.1 Include Customized CSS and Images .............................................................. 8

2.1.2 Generate Customized CSS .............................................................................. 8

2.1.2.1 CSS for all Pages ...................................................................................... 9

2.1.2.2 CSS by Page-ID ........................................................................................ 9

2.1.2.3 CSS by Grid-Layout .................................................................................. 9

2.1.2.4 CSS for Widgets .......................................................................................10

2.1.2.4.1 Type-Specific ........................................................................................10

2.1.2.4.2 Position-Specific ...................................................................................11

2.1.3 Include Custom.js ............................................................................................11

2.1.4 Customize the language file ............................................................................11

2.1.5 Include your Favicon .......................................................................................12

2.1.6 Create Widgets ...............................................................................................13

2.1.7 Choose Image teaser for News Widgets .........................................................13

2.2 Integration of the Navigation ...................................................................................14

2.2.1 Mobile Navigation ............................................................................................16

2.2.2 Active Navigation and Breadcrumb .................................................................16

2.3 Page Management .................................................................................................17

2.3.1 Creating New or Multiple Pages ......................................................................17

2.3.2 Page Import / Export .......................................................................................18

2.3.3 Set author rights and anonymous Access .......................................................19

2.4 License Key............................................................................................................20

3 XCC Widgets .................................................................................................................21

3.1 IBM Connections Widgets ......................................................................................22




3 / 76

3.2 ATOM/RSS Feed Widget .......................................................................................22

3.3 Clipping Widget ......................................................................................................24

3.4 Events Widget ........................................................................................................25

3.5 Files Widget ...........................................................................................................27

3.6 Forum Widget .........................................................................................................29

3.7 Ideation Blog Widget ..............................................................................................30

3.8 IFrame Widget ........................................................................................................32

3.9 Important Bookmarks .............................................................................................33

3.10 Links Widget...........................................................................................................34

3.11 Navigation Widget ..................................................................................................35

3.12 News Channel Widget ............................................................................................37

3.13 News List Widget ...................................................................................................39

3.14 News Overview Widget ..........................................................................................40

3.15 News Slider ............................................................................................................42

3.16 News Widget ..........................................................................................................43

3.17 People Birthday Widget ..........................................................................................46

3.18 People Finder Widget .............................................................................................47

3.19 People Selector Widget ..........................................................................................48

3.20 Picture Widget ........................................................................................................49

3.21 Popular Content .....................................................................................................50

3.22 Preferences Widget ................................................................................................51

3.23 Profile Completion ..................................................................................................53

3.24 Saved Search .........................................................................................................54

3.25 Static Content - Blog ..............................................................................................57

3.26 Static Content - Wiki ...............................................................................................58

3.27 Suggestion Widget .................................................................................................59

3.28 Top News Widget ...................................................................................................60

4 Embedded Experience ..................................................................................................61

5 XCC4Communities ........................................................................................................63

6 XCC4Cloud ...................................................................................................................64

7 XCC4Anonymous ..........................................................................................................65

8 XCC-Personalization .....................................................................................................66




4 / 76

8.1 Personalize Homepage ..........................................................................................68

9 Functions, Fields and Buttons .......................................................................................69

10 System Requirements ................................................................................................71

11 Best Practices for Content & Restriction Maintenance in IBM Connections ................72

11.1 Roles & Restrictions in Source Communities..........................................................72

11.2 Picture Guidelines ..................................................................................................74

11.2.1 Picture Ratio ...................................................................................................74

11.2.1 Picture Size .....................................................................................................75




5 / 76

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 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.

https://connections-apps.com/xcc

https://www.youtube.com/watch?v=Kc7qqVzQG9U

https://www.youtube.com/watch?v=Kc7qqVzQG9U&feature=youtube_gdata_player




6 / 76

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

Connections user 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 a member (community member) of.

1.3 Content Master

Connections user 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.

https://www.youtube.com/watch?v=RbqZ6Ukq93c

https://www.youtube.com/watch?v=RbqZ6Ukq93c&feature=youtube_gdata_player




7 / 76

1.4 Reader

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.

2 Site Structure

2.1 XCC-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.




8 / 76

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.

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.

2.1.1 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 it will open a dialog, allowing for you to specify a CSS for each page.

2.1.2 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/.

http://www.w3schools.com/css/




9 / 76

You can customize the appearance of nearly every visible element of your XCC. CSS-

language depends on order and specifity. To detect which selector you have to use to

change an attribute (color, size, etc.) we recommend 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 specifity

does not result in the desired behavior the !important-keyword will grant you access to the

attribute.

Uploaded images are located in the same folder as the CSS. No path has to be specified.

2.1.2.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)

2.1.2.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)

2.1.2.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.

.xccstyle {

background-color: #f00;

}

.my-special-page {

background-color: #0f0;

}

https://developer.chrome.com/devtools

https://developer.mozilla.org/de/docs/Tools




10 / 76

Example: (setting up a blue background for all pages in grid-layout 17)

2.1.2.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.

2.1.2.4.1 Type-Specific

It is possible to apply styles to specific widget-types (e.g Top-News-Widget). We recommend

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)

.Layout17 {

background-color: #00f;

}

<div class=”widget” position=”{grid-positon}”>

<div class=”xccWidget” data-wtype=”{widget-type}”>

<div class=”wheader”>

<div class=”wtitle”>

<!-- Title here --!>

</div>

</div>

<div class=”wbody”>

<div class=”{widget-type}”>

<!-- Content here --!>

</div>

</div>

</div>

</div>

.xccstyle .xccWidget[data-wtype=“xccTopNews“] .wheader .wtitle {

color: #f00;

}




11 / 76

2.1.2.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 allways position=”0”.

Example: (setting up a red font-color for the title of the widget on grid-position 0)

2.1.3 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.

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.

2.1.4 Customize the language file

You can create a new language file, by downloading the template file and editing a copy of it.

.xccstyle [position=”0”] .xccWidget .wheader .wtitle {

color: #f00;

}




12 / 76

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

language is not available, the Messages used within XCC will remain in its English defaults.

Messages presented exclusively to ContentMasters 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.

2.1.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.




13 / 76

2.1.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.

2.1.7 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”. Than 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.




14 / 76

2.2 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.

Short description:

The vertical navigation of the custom homepage derives from the horizontal Wiki-navigation

of an editorial Community.




15 / 76

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. With a click on a navigation entry, the Embedded Experience will open and

show this Page.

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. To open the external link in a new window you only need

to select this option for this link in Connections.




16 / 76

Configuration options Admin:

Personalization

Navigation positioning

2.2.1 Mobile Navigation

You can have a look at our mobile navigation here:

Or alternative: https://www.youtube.com/watch?v=jv4CrO4DQHE

2.2.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.

https://www.youtube.com/watch?v=jv4CrO4DQHE

https://www.youtube.com/watch?v=jv4CrO4DQHE&feature=youtube_gdata_player




17 / 76

2.3 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.

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.

By clicking on the copy icon, a new page with the addition “-copy” will be created. It has the

same configurations as the original.

2.3.1 Creating New or Multiple Pages

You can create a new page in the “Page Management” tab of the admin panel. Click “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.




18 / 76

2.3.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 a “Import pages” button. If you click it your will see the

following modal box.

By clicking on “Choose file” you can select an XCC page XML data or ZIP file to import.

For exporting an XCC page you can find a download icon next to the site in the “Page

Management”.




19 / 76

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.

2.3.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, set editor access or

allow anonymous access to single XCC pages.




20 / 76

2.4 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.

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, the XCC will

display an error page for the admin.




21 / 76

3 XCC Widgets

Short description:

Widgets can be embedded randomly on the Custom 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.

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 in the source field. Therefor 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.

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.




22 / 76

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.

3.1 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:

Different for each widget

3.2 ATOM/RSS Feed Widget

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.




23 / 76

Caution: Be sure that you configured the AJAX-Proxy (XCC - Installation Instructions).

Added in release:

4.1

Content source:

External / RSS or ATOM Feed




24 / 76

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.


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.

3.3 Clipping Widget

Short description:

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

https://www.youtube.com/watch?v=GMvT-fUBg1g

https://www.youtube.com/watch?v=GMvT-fUBg1g&feature=youtube_gdata_player




25 / 76

If your Code needs external Images or CSS/JS-Sources, you have to edit the link to this

sources 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).

Added in release:

3.0

Content source:

Extern

Expected format:

HTML, JS, CSS

3.4 Events Widget

Short description:




26 / 76

Display of events or campaigns

Content is maintained by the events of a Community

View by month, week, day 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.

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.




27 / 76

The mouse-over shows a tool tip with further information about the event. A double click on a

calendar entry forwards to the event in the community.

To automatically display the source Community’s title add “%sourceName%” into the widget

title field.


Available Views in Settings: Month, Week, Day, Day List, Upcoming

3.5 Files Widget

Short description:

This Widget shows uploaded files with information about the author and upload 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 in alphabetical order.

Since Version 5.0 you can also select files from the community and display them in the order

you want to have.

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.




28 / 76

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.




29 / 76

Added in release:

3.0

Expected format:

All uploaded files of a Community.


Personalization

Channel name

Number of Items


Enable Search

Show details

Other:



3.6 Forum Widget

Short description:

Shows latest or selected entries of an forum in a community

Shows the status of the forum ( Open question, answered question, discussion)

Open the complete description in the Embedded Experience




30 / 76

Added in release:

6.0

Content source:

A Connections Community is defined as content source for this widget. This Community has

to contain a forum and at least one topic.

Expected format:

All topics of a community contain a small image to indicate the status of the topic, a headline

and a small abstract.


Personalization

Number of Items

3.7 Ideation Blog Widget

Short description:




31 / 76

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:


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.


Personalization

Number of Items




32 / 76

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.

3.8 IFrame Widget

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

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 are 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.




33 / 76


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.

3.9 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.




34 / 76

Expected format:

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:



3.10 Links Widget

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




35 / 76

Content source:

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.

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

Channel name

Number of Items


Other:



3.11 Navigation Widget

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.




36 / 76

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.

Expected format:




37 / 76

Caution: This Widget will not be displayed in mobile, because there is no option to show this

layout in mobile. Instead of this widget, use the normal navigation, which is optimized for

mobile.


Personalization

Orientation

3.12 News Channel Widget

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.




38 / 76

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.




39 / 76


Personalization

Channel name

Number of Items

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.

3.13 News List Widget

Short description:

Display the latest or selected posts of a community as a link.

Added in release:

4.1

Content source:

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.




40 / 76

Expected format:

It is possible to display up to three entries in a widget. The entries are shown with date and

headline. 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.

You can get the Community-Title as Widget title by entering “%sourceName%” into the

Widget title.


Personalization

Number of Items

Other:



3.14 News Overview Widget

Short description:

Within this widget single news can be added. It’s suited especially for highlighting specific

news on a department level.




41 / 76

Added in release:

4.1

Content source:


The source has to contain at least one blog entry.

Expected format:

It is possible to display up to three entries in a widget. 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.


Personalization

Number of Items




42 / 76

Other:



3.15 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:

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






43 / 76




channel name field.


Personalization

Number of Items

Multiple Sources

Other:



3.16 News Widget

Short description:

Within this widget single news or news channels can be added. It’s suited especially for

highlighting specific news on department level.




44 / 76

We also created a video how to publish news in XCC here:

Alternative: https://www.youtube.com/watch?v=Pxom5UrOTCI

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



https://www.youtube.com/watch?v=Pxom5UrOTCI

https://www.youtube.com/watch?v=Pxom5UrOTCI&feature=youtube_gdata_player




45 / 76



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.


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




46 / 76

Number of Channels

Display comments and likes

3.17 People Birthday Widget

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.

Caution: This Widget isn’t available in Cloud mode of XCC.




47 / 76

3.18 People Finder Widget

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 all fields of a person. 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:

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.


Number of Items

Number of Items per page




48 / 76

3.19 People Selector Widget

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.

Added in release:




49 / 76

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.


Channel name

3.20 Picture Widget

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:


to contain a media-galley and at least one image.

Expected format:

The widget shows all entries in a media galley.


Personalization: yes




50 / 76

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.

3.21 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 shows the same result as Connections.




51 / 76

Expected format:

Five tabs, with links to the Blog/Wiki or Bookmark entry.

Caution: This Widget isn’t available in Cloud mode of XCC.

Added in release:

7.0


3.22 Preferences Widget

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:




52 / 76

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. This fields can be a

select box or an input field.

Added in release:

7.0

https://www.youtube.com/watch?v=Fg-eh1zHg6Q

https://www.youtube.com/watch?v=Fg-eh1zHg6Q&feature=youtube_gdata_player




53 / 76

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

3.23 Profile Completion

Short description:

Allows users to update their profile

Widget shows only empty profile fields

In the edit area you can select all fields you want to show in the Widget. This fields can be a

select box or an input field.




54 / 76

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


Fields to show

3.24 Saved Search

Short description:

Saved Custom Search with limited results

Sort by relevance or date

Search Box




55 / 76

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:

If you want to have a searchbar in the widget, you have to empty the query field.




56 / 76

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 do not support this API.

Content source:

Connections

Expected format:

Search results of connections content in a pager or a simple search bar.




57 / 76

Added in release:

8.0


Items per Page

Total Items

Search-Query

3.25 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




58 / 76

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

3.26 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.




59 / 76


Personalization

3.27 Suggestion Widget

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:




60 / 76

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


3.28 Top News Widget

Short description:

Optional highlighting of specific news at a prominent location

Extensive display of one single news

Added in release:

1.0

Content source:


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








61 / 76

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.


Personalization

Slider

Number of Items

Number of Channels

Other:



4 Embedded Experience

Following Widgets got an Embedded Experience:

- Events Widget

- Ideation Blog Widget

- Forum Widget

- News Widget




62 / 76

- News Channel Widget

- News List Widget

- News Overview Widget

- Top News Widget

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.

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.




63 / 76

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.

5 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.




64 / 76

You can administrate the XCC as Content Master if you are Community owner, Connections-

Admin or a normal Content Master for this XCC page.

6 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>

http://www.yourdomain.com/xcc/cloud?page=%3cyourXCCpage%3e




65 / 76

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”.

7 XCC4Anonymous

XCC4Anonymous is only available in IBM Connections 5. This is caused by an old

WebSphere version in CNX 4.5.

External Users can access the XCC page with the following URL:

www.yourDomain.com/xcc/global?page=<yourXCCpage>

Please make sure, that you configured the XCC for anonymous access, as documented in

the “XCC – Technical User Guide”.

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

Chapter 4 “XCC Widgets”.

It is not possible to like or comment on blog posts or wiki entrys.

http://www.yourdomain.com/xcc/global?page=%3cyourXCCpage%3e




66 / 76

Caution: Anonymous access is not developed as an internet solution. Please use it

only for your “Blue Collar” workers as an intranet solution.

8 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.

You can also have a look at our video about the personalization of XCC:




67 / 76

Alternative: https://www.youtube.com/watch?v=yaHGg9oirvw

Added in release:

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

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).

https://www.youtube.com/watch?v=yaHGg9oirvw

https://www.youtube.com/watch?v=yaHGg9oirvw&feature=youtube_gdata_player




68 / 76

8.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 have to define one.

Within the Checkbox you can enable or disable the personalized homepage.

Added in release:

6.0




69 / 76

9 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

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.

Height Height of the widget – if the height of a widget is chosen too low, content might be cut off or hidden.




70 / 76

Add Content Stream

Adding of a channel

Personalize Activation of personalization

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 channel

Show posts Latest: Entries of the channel are shown in chronological order. Selected: Individual entries of the channel can be selected and sorted.

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.




71 / 76

# 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

10 System Requirements

IBM Connections:

4.5 CR1, CR2, CR3, CR4, CR5

5.0 CR1

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 14.0 or higher

Google Chrome – all major builds from 23.0 or higher

Internet Explorer - 8 to 11




72 / 76

11 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. Therefor we provide some useful best practices in this area to guide your

editorial teams to an effective content creation process.

11.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:

This 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




73 / 76

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. Thru 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.




74 / 76

11.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:

11.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. Therefor 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, just the picture’s ratio is differing:




75 / 76

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.

11.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:




76 / 76