XCC 12.0 - 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 / 116

XCC 12.0 Documentation Web Content & Custom Apps Extension for IBM Connections




2 / 116

Content

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

3.9.1 Creating New or Multiple Pages .......................................................................... 21




3 / 116

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

4.1 IBM Connections Widgets ............................................................................................ 32

4.2 ATOM/RSS Feed .......................................................................................................... 33

4.3 Banner Widget .............................................................................................................. 35

4.4 Clipping ......................................................................................................................... 36

4.5 Community Description ................................................................................................ 39

4.6 Community Overview ................................................................................................... 39

4.7 Events ........................................................................................................................... 41

4.8 Files .............................................................................................................................. 42

4.9 Files Explorer ................................................................................................................ 44

4.10 Forum ......................................................................................................................... 46

4.11 HTML .......................................................................................................................... 47

4.12 Ideation Blog ............................................................................................................... 50

4.13 IFrame ........................................................................................................................ 51

4.14 Important Bookmarks ................................................................................................. 52

4.15 Links ........................................................................................................................... 53

4.16 MediaGallery .............................................................................................................. 54

4.17 My Links ..................................................................................................................... 57

4.18 My Notes .................................................................................................................... 58

4.19 My Quicklinks ............................................................................................................. 60

4.20 Navigation ................................................................................................................... 63

4.21 News Channel ............................................................................................................ 65

4.22 News List .................................................................................................................... 67

4.23 News Overview ........................................................................................................... 68

4.24 News Slider ................................................................................................................ 69




4 / 116

4.25 News ........................................................................................................................... 71

4.26 People Birthday .......................................................................................................... 74

4.27 People Finder ............................................................................................................. 75

4.28 People Selector .......................................................................................................... 76

4.29 Picture ........................................................................................................................ 78

4.30 Pinned Files ................................................................................................................ 79

4.31 Popular Content .......................................................................................................... 80

4.32 Preferences ................................................................................................................ 81

4.33 Profile Completion ...................................................................................................... 82

4.34 Profile Tagging ........................................................................................................... 84

4.35 Profile Upload ............................................................................................................. 84

4.36 Saved Search ............................................................................................................. 85

4.37 Static Content - Blog ................................................................................................... 88

4.38 Static Content - Wiki ................................................................................................... 89

4.39 Suggestion .................................................................................................................. 90

4.40 Tag Cloud ................................................................................................................... 91

4.41 Top News ................................................................................................................... 92

5 Embedded Experience ..................................................................................................... 94

6 XCC4Communities ........................................................................................................... 96

7 XCC4Cloud ...................................................................................................................... 98

8 XCC4Anonymous ............................................................................................................. 99

9 XCC FlyOut Page ........................................................................................................... 100

10 XCC-Personalization .................................................................................................... 101

10.1 Personalize Homepage ............................................................................................ 104

11 Custom Widget API ...................................................................................................... 105

11.1 Register Custom Widget ........................................................................................... 105

11.2 Example of Custom Widget ...................................................................................... 105

12 IBM Forms Widget ........................................................................................................ 107

13 Functions, Fields and Buttons ...................................................................................... 108

14 Best Practices for Content & Restriction Maintenance in IBM Connections ................ 111

14.1 Roles & Restrictions in Source Communities ........................................................... 111

14.2 Picture Guidelines .................................................................................................... 113




5 / 116

14.2.1 Picture Ratio .................................................................................................... 113

14.2.1 Picture Size ..................................................................................................... 114

15 System Requirements .................................................................................................. 116




6 / 116

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.




7 / 116

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.




8 / 116

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.




9 / 116

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.




10 / 116

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.




11 / 116

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




12 / 116

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 [email protected].

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.




13 / 116

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)




14 / 116

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




15 / 116

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.




16 / 116

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.




17 / 116

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.




18 / 116

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.




19 / 116

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




20 / 116

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.




21 / 116

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.




22 / 116

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.




23 / 116

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.




24 / 116

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




25 / 116

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.




26 / 116

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:




27 / 116

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.




28 / 116

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




29 / 116

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.




30 / 116

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




31 / 116

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.

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.




32 / 116

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.

If you want to position a text on the image, please use the following Code in addition to the Code-Example:

4.1 IBM Connections Widgets Short description:

Apart from XCC-widgets those Connections in-built widgets can be added that are available for “My Page”.

Text




33 / 116

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

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




34 / 116

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.




35 / 116


• 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.3 Banner 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




36 / 116

Content source:

The image from another website or uploaded in XCC will be displayed.

Expected format:

The Banner 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 and Abstract are optional.


• Destination • Abstract • Caption • Image URL

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




37 / 116

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




38 / 116

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




39 / 116

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




40 / 116

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




41 / 116

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.




42 / 116

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.




43 / 116

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.




44 / 116

Added in release:

3.0

Expected format:

All uploaded files of a Community.


• Personalization • Channel name • Sort by • Number of Items • Number of Items per Page • 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.




45 / 116

Added in release:

12.0

Expected format:

The root folder level of a Community will be displayed.


• Personalization • Channel name • Sort by




46 / 116

• Number of Items • Number of Items per Page • 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




47 / 116

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:




48 / 116

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




49 / 116

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




50 / 116

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.





51 / 116


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.




52 / 116


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




53 / 116

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 • Number of Items per Page

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:




54 / 116

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.



• Personalization • Sort by • Channel name • Number of Items • Number of Items per Page

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




55 / 116

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.




56 / 116




57 / 116


• Personalization • Style: Grid or Slider • Number of Items • Community or Folder in Community

4.17 My Links Short description:

• Displays all personal links • Links will open in a new tab

Added in release:

10.0

Content source:

The widget will display links that are created in the IBM Connections Profile. Each user could have different personal links.




58 / 116

Expected format:

The Widget should look like the normal “Links Widget”.


• Number of Items

4.18 My Notes Short description:

• Displays all todos/notes of a specified personal activity, that is only visible to the current user

• Offers to create, edit or delete note right from the widget • Sort options are by date of creation or deadline

Added in release:

12.0




59 / 116

Content source:

The widget will display todos as notes that are created in the IBM Activities application inside of the defined activity. The name of the activity can be configured inside of the widget editor and is preceded by “Notes App:”. This way each user can have different personal notes in different My Notes widgets.

Expected format:

The widget offers a “Add new Notes”-Button at the top and lists all the notes in ascending order sorted by date of creation or deadline below. The date on which the notes are sorted




60 / 116

can be chosen. On hover edit- and delete-buttons pop up on every note. The notes can easily be marked as completed by clicking the preceding circle-checkbox. Moreover the widget includes pagination, which can be configured inside of the widget editor.


• Name/Identifier for the activity • Number of items per page • Number of items

4.19 My Quicklinks Short description:

• Displays all links of the My Bookmarks view tagged with “my_links” • Offers to create, edit or delete bookmarks • Links will open in a new tab

Added in release:

12.0




61 / 116

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.




62 / 116

Expected format:

The widget offers a “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




63 / 116

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




64 / 116

Expected format:




65 / 116


• Personalization • Orientation • Show Page (All/Selected)

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




66 / 116

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.






67 / 116

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

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

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.




68 / 116

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.




Other:


4.23 News Overview Short description:

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

Added in release:

4.1




69 / 116

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.

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.


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.



Other:


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




70 / 116

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



• Personalization • Number of Items • Multiple Sources

Other:




71 / 116


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

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




72 / 116

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

Added in release:

1.0

Content source:

A Connections Community or a Standalone Blog is defined as content source for this widget. 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 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.




73 / 116

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.


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




74 / 116

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




75 / 116

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




76 / 116

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




77 / 116

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




78 / 116

person will open a Business Card including useful quick links for the person (for an example see 3.23 People Finder).


• Channel name

4.29 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




79 / 116

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




80 / 116

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





81 / 116

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




82 / 116

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.33 Profile Completion Short description:

• Allows users to update their profile • Widget shows only empty profile fields




83 / 116

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





84 / 116

• Fields to show

4.34 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.35 Profile Upload Short description:

• Allows users to update their profile picture




85 / 116

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.36 Saved Search Short description:




86 / 116

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




87 / 116

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:




88 / 116

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




89 / 116

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.



• Personalization

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





90 / 116


• Personalization

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




91 / 116

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.40 Tag Cloud Short description:

• Displays tags of a community • Often used tags are highlighted

Added in release:

10.0




92 / 116

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

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




93 / 116

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.


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:





94 / 116

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.




95 / 116

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.




96 / 116

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




97 / 116

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.




98 / 116

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




99 / 116

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




100 / 116

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




101 / 116

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




102 / 116

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:




103 / 116

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




104 / 116

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

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

Added in release:

6.0




105 / 116

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

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

11.2 Example of Custom Widget This is the whole Code you need to write for a “Hello World” Widget:




106 / 116




107 / 116

12 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




108 / 116

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




109 / 116

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.




110 / 116

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




111 / 116

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

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




112 / 116

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.




113 / 116

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

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




114 / 116

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.

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




115 / 116




116 / 116

15 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