Contents


Getting started with IBM Connections Engagement Center

An introduction for developers

Comments

IBM Connections Engagement Center (ICEC) provides an easy way to build a social intranet by creating a portal-like experience using various out-of-the-box and custom widgets. ICEC does not have its own content store, but aggregates content from different backend systems. Mostly, IBM Connections is the back-end system, since it is the underlying foundation for a set of key ICEC services, such as user authentication and authorization, personalization, top-level navigation, and news.

The goal of this article is to explain basic ICEC concepts and get you started using it, to give you a basic foundation on which you can build in later development work. To do this, we’ll use an example Community called “Global Communications”.

Community listing page
Community listing page

First login

ICEC is installed as an Add-On to IBM Connections. After you have been configured as an administrator or developer, you can log in to the ICEC page with one of the following URL extensions: /xcc/main (on-premise) /xcc/cloud (Cloud)

For example, for an on-premise installation on https://connections.acme.com, the ICEC starting page is https://connections.acme.com/xcc/main.

When you first log in, you see an empty page similar to this:

ICEC starting page
ICEC starting page

Adding your first widget

To customize the page, you click “Customize”. The following page appears.

Customize page
Customize page

To place your first widget on the page, you click “Create Widget”. In the dialog that appears, you click the Type dropdown and choose News.

Widget type dropdown
Widget type dropdown

You need to give the widget a unique name, and then click Create. The widget appears on the grid. To configure it, you click the icon in the top right corner of the widget.

The first content source for ICEC is IBM Connections. Most widgets delivered with ICEC use this repository and can be configured to work with one or more Connections Communities, to retrieve community content and present it in a more consumable way. To connect the widget to a community (ideally, one that already has content), you just start typing the community name in the Source edit field. Type-ahead helps you find the right community.

Source edit field
Source edit field

When you save the widget, it shows content from your linked community.

Community widget
Community widget

Adding navigation

Let’s add some navigation to the page. In ICEC, navigation is based on the structure of a wiki in a community. In our example community, the structure looks like this:

Wiki navigation
Wiki navigation

To add the navigation to ICEC, you click the page “Customize” button, then click the Page tab and select the Navigation checkbox. In the new section that appears, you specify the navigation source community.

Customize Page Navigation section
Customize Page Navigation section

When you click Save, a navigation bar appears in ICEC.

Navigation bar
Navigation bar

Currently, ICEC supports navigation up to 3 levels deep.

As stated before, the navigation structure is based on the one in the Wiki. To link to specific locations or to provide specific content under a navigation, links (relative and absolute) or content can be added to the underlying wiki pages. The following example uses an absolute link to point back to the home page of ICEC.

Absolute link
Absolute link

Adding more widgets to the page

Let’s add more widgets to the page to see what they can do. Let’s try an “Event” widget. The addition process is the same: Click “Create Widget”, select the type, and give the widget a unique name.

We’ll use the same “Global Communications” community for this new widget.

community_events dialog
community_events dialog

The widget now displays community events.

Community events widget
Community events widget

Next we’ll add a “Files” widget. This widget can be configured to point to the files in a specific community. If you want to display personal user files or other personal information, widgets such as “My Files” provide this functionality.

community-files dialog
community-files dialog

The Community widget can aggregate and display files from multiple communities. To make this work, we just need to add a second channel.

community files widget
community files widget

The next widget to add is the “People Selector”, providing a list of people and links to their profile pages. One use for this could be to show ICEC visitors whom to contact with specific questions.

When you configure this widget, you can name the list and add people, aided by type ahead.

People selector dialog
People selector dialog

The widget then looks like this:

People Selector widget
People Selector widget

The final widget being added to the page is “People Finder”.

People Finder dialog
People Finder dialog

Page Management

ICEC lets you create pages and manage each page. This is done through the Page Management section of the customizing page.

Page Management section
Page Management section

Here, administrators can edit key settings for any page.

You can also access any page directly through the page attribute in the URL. For example:

URL page attribute
URL page attribute

The page management tab provides these URLs and links.

Personalization

You can personalize any content in ICEC with various rules, mostly based on IBM Connection profile fields or memberships in Communities or LDAP groups. For example, let’s customize the ICEC homepage. To do that, you navigate to the “Engagement Center Settings” tab.

Engagement Center Settings tab
Engagement Center Settings tab

Here, you can select “Home Page Personalization” and then click “Edit Personalization”.

Home page personalization section
Home page personalization section

For personalization, the default page should be set. (For a cloud based deployment, the page is “cloud”). In this example, we are looking at a personalization by last name. Therefore, “surname” is selected from the attributes list and the value is provided--in this case, “Jones 13”. If this condition is met, the user sees a different source, a test page of all widgets.

Edit personalization dialog
Edit personalization dialog

You can test any personalization immediately, by entering a user name in the edit field at the bottom of the Edit Personalization page. Clicking “Test Personalization” evaluates the rule and shows you what the user will see.

Test Personalization edit field
Test Personalization edit field

Customize the look and feel

IBM Connections Engagement Center is highly customizable by design. This includes not only the look and feel but also the underlying JavaScript files. On the “Engagement Center Settings” tab, you select “Customization Files”. Here, you can edit files directly, or download files, update them in your editor of choice, and upload them again with the “Upload File” button. You can also use this feature not only to move content from an ICEC instance from development to production, but also to add new widgets from a soon to be designed page to share code and CSS files.

Customization files section
Customization files section

For example, suppose we want to change the color of the widgets heading. You click the wrench icon to open the editor.

Wrench icon

This opens the embedded ICEC editor.

ICEC editor
ICEC editor

Here, you can enter the following code.

.xccstyle .xccWidget .wheader .wtitle {
	color: red;
}

Conclusions on the css controls can be drawn by either looking up the CSS documentation or inspecting the web page through the browser features.

browser page inspector
browser page inspector

After saving and refreshing the page, the font color of the widget title is now red instead of blue.

red widget titles
red widget titles

You can also use an existing CSS stylesheet that is uploaded to your deployment and follows the requirements. You can upload the file with the upload button, and then select it in the dropdown. ICEC includes a few stylesheets to get you started.

You can also apply stylesheets to specific pages.

page settings
page settings

Changing the page grid

ICEC pages are based on grid layouts. To change the grid, you go to “Grid” in “Page Settings” and select the grid you want to use.

Page settings Grid field
Page settings Grid field

For example, “Grid 16” represents a one-column mobile layout.

layout choices
layout choices

After the change is saved, the page looks like this, with a fully responsive design.

page with responsive design
page with responsive design

Conclusion

This introduction should help you get started and understand a few key concepts. The intention is to provide more content over time and do further deep dives into areas only touched on here.


Downloadable resources


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Collaboration
ArticleID=1055439
ArticleTitle=Getting started with IBM Connections Engagement Center
publish-date=12142017