Formatting Social List using WCM Personalization Simple List Design
Now, we will see how to change the look and feel of the Social Lists objects using WCM Personalization component Simple List design.
Follow the below steps to modify the image displayed inside Connections Files List:
1. Log into Portal using Connections user as email@example.com/passw0rd as user name/password.
2. Navigate to Home
. Under that click on any page where we want the Social Lists to be added.
3. Click on Edit Mode
4. Go to Content
Tab. Click on Social Content
5. Click on the button List of Files
as shown below in the Figure.
6. A pop-up window opens up and ask whether we want to add the portlet to the page or not. Click Add to page
7. Once, the portlet is added, click save
to save the changes to page.
8. Now, we can notice that the IBM Connections Files List is added to a page. Also, find that the image of the files displayed are based on its file type.
9. We can customize the image of the Connections Files using WCM Personalization component. To modify the image of these files, click
on the portlet. We can find that a small menu opens up. Click on Open Edit Form
in the menu.
10. A pop-up window of Edit Form
opens. Under List Appearance
, Click on IBM Connections / List Designs / Simple
. The Social List appearance can be formatted in two ways : Simple and Comprehensive list. Simple List as the name denotes displays only few attributes. Comprehensive List displays attributes of the Social List in detailed form.
11. Clicking on the Simple
List Design, opens up a Personalization element where we can modify the markup elements and specify how we want to render the Social Lists portlet inside Portal.
12. Under the Result design
section, there are few WCM and HTML tags which are used to render the different attributes of Social Lists portlet. We can identify that there is an image component listentryimage
. Click on the component as shown below.
13. It opens up another pop-up window where look for list entry file type image
. Click on it.
14. Click on Edit
. Delete the content of HTML element which contains several Markup to display image based on file type. We are now modifying the image of Files List and adding HTML elements to display the Author's Connections Profile photo. Click on Insert Tag
to add an image element.
15. It opens up a window as shown below. In the Insert a Tag
pop-up window, select the tag type as Attribute Resource
, target component as Social Objects
, resource tag type as Author's Image URL
. Click OK
16. In the HTML Element, you can notice that a tag element representing the AuthorImageLink
from Connections profile photo is
added. Wrap up the element by adding Image <img> tag manually to display a image referring to that Connections profile element in Portal.
17. Click Save and Close
. Click Close
in List Entry Image. Close
Simple List Appearance.
18. The Page where we added Files List reloads and we can find that the Files List portlet is now showing the photo of the author who added the file in Connections server as below.
This article is one of several describing how to configure the Social Rendering features:
5.1 Social Rendering Features