Getting started with IBM Connections Engagement Center An introduction for developers Christian Holsing December 14, 2017 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. 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. Copyright IBM Corporation 2017 Trademarks Page 1 of 16
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: Adding your first widget To customize the page, you click Customize. The following page appears. Page 2 of 16
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. 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. Page 3 of 16
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. When you save the widget, it shows content from your linked community. Page 4 of 16
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: 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. Page 5 of 16
When you click Save, a navigation bar appears in ICEC. 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. Page 6 of 16
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. The widget now displays community events. 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. Page 7 of 16
The Community widget can aggregate and display files from multiple communities. To make this work, we just need to add a second channel. 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. The widget then looks like this: Page 8 of 16
The final widget being added to the page is People Finder. Page Management ICEC lets you create pages and manage each page. This is done through the Page Management section of the customizing page. 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: The page management tab provides these URLs and links. Page 9 of 16
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. Here, you can select Home Page Personalization and then click Edit Personalization. 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. Page 10 of 16
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. 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. Page 11 of 16
For example, suppose we want to change the color of the widgets heading. You click the wrench icon to open the editor. This opens the embedded 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. Page 12 of 16
After saving and refreshing the page, the font color of the widget title is now red instead of blue. Page 13 of 16
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. 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. For example, Grid 16 represents a one-column mobile layout. Page 14 of 16
After the change is saved, the page looks like this, with a fully responsive design. Page 15 of 16
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. Copyright IBM Corporation 2017 (www.ibm.com/legal/copytrade.shtml) Trademarks (www.ibm.com/developerworks/ibm/trademarks/) Page 16 of 16