Session ID: DDX-15 Session Title: Building Rich, OmniChannel Digital Experiences for Enterprise, Social and Storefront Commerce Data with Digital Data Connector Part 2: Social Rendering Instructors: Bryan Daniel Senior Technical Specialist, IBM Charles Price (Primary) Advisory Software Engineer, IBM Matthias Falkenberg DX Development Team Lead, IBM Copyright IBM Corporation 2016. All Rights Reserved. 1
2
Lab Details: The VMWare image on your machine includes Portal 8.5, IBM Connections 5.5. Everything is using IBM Directory Server for Directory Services. The goal of this doc with the lab is make your users work experience in Portal more productive by adding real time collaboration and social software tools. Contents 1 Creating a social experience... 4 1.1 Access initial page... 4 1.2 Investigating List portlets and Community Pages... 5 1.3 Frequently Asked Questions...11 1.3.1 Custom Presentation templates... 17 1.4 Important Information...26 1.5 Adding Search and Tag portlets...34 1.5.1 Social List Search... 35 1.5.2 Tag Cloud Portlet... 36 2 Configuring where to open information...43 3 Extend the Social Templates for DDC...49 This lab focuses on a community we have in our Connections Environment. We will use the Social Rendering templates for Digital Data connector (https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetdetails.xsp?action=editdocument&docume ntid=666d72234ca1d57685257cee0050009a) to bring in specific content from the Community to pages in our Digital Experience. The idea is this is a Community we keep in Connections for new hires to help them get quickly integrated into our company (greenwell). We would like to bring over specific parts of the community to a New 2 Digital page in our company intranet site running on WebSphere Portal, so it quickly accessible as soon as someone starts at the company. Ok, enough with the intro, let's do some work... 3
1 Creating a social experience What we tasked with is to give new hires an easy way to get up to speed with our company, bringing in specific content from the Community I just showed you from Connections. To save time, I ve gone ahead and created a few of the pages we will use for this integration. So let s start there and see how IBM Digital Experience provides for a more compelling and engaging experience for your site visitors. If you will remember from the community, there are a few things I d like to use on our initial page. I created a page using the Top column 2 column uneven design The idea is to have a page with details of what this community is for and the ability for new users to join the community across the top of the page. Next on the left side of the page, a large section with frequently asked questions and their answer ready for users accessing this content. Finally, the community has a number of important bookmarks, wiki articles, blog posts and files that give valuable information to, so on the right side we d like to give quick access to the most important details of that content. 1.1 Access initial page 1. 2. Open a browser to the portal server (http://madrid##.xdxlabs.com/wps/myportal where ## is the machine assigned to you) and login as our portal administrator (fadams : passw0rd) Go to DDX-15 Social page 4
3. At the top of the page, set Enable Edit Mode On 1.2 Investigating List portlets and Community Pages 4. On the left side of the page, click the Add page components and applications + button 5. Click the Applications tab 6. Search for Community 5
7. Click the + to add the Community Details portlet to the top of the page 8. Close the Add Applications slide out 9. Notice, at this point the portlet does not work. That s because this portlet relies on knowing what Community it should show the details for. 6
10. Open the site manager slide out by clicking on the Right arrow on the left side of the browser 11. To set this we will configure this page to be a community page. In the Site Manager slide out, Click on the 3 lines next to the Social page, and select Open Page Settings 7
12. Click Associated Community 13. Click Select Community 14. Search for New 8
15. Select the New 2 Digital Welcome to Greenwell! Community and click Select 9
16. Select when you configure a community page, you can go ahead and set any child pages under this to be associated with the same community, let s go ahead and select that so we don t have to go through these steps again later. NOTE: The other option Limit access to this page to only community members is a nice feature of the Portal / Connections integration. If this is selected, Portal will treat this Community as a group in portal security. So when a user logs in, Portal will query Connections Communities to find out what Communities this user has access to. If they have access to the New 2 Digital community, they would see this page in the navigation. If they don t have access, they wouldn t see the page. In this way a user can update the community and determine who would have access to the page in Portal, no need to update Portal as well. In our case, this is a community for new users, and we want them to always have access and join when they want, so we will leave Limit access. Unchecked. 17. Close the New 2 Digital Page settings 10
18. You should now see the Community Detail portlet displaying the information from this Community 1.3 Frequently Asked Questions Now that we have the Community detail information, and ability to Join the community across the top of the page, let s set up the Frequently Asked Questions to try to answer some of our most common issues from new hires. For this we are going to pull specific information from our Community forum into the left column of our community page. 19. Click on the Add page + button on the left side of the browser 11
20. Under page Components, and Select Social Content 1.1 12
21. To bring in the specific forum topics we want, we will use the List of Forum Topics portlet. We could have use List of community Topics, and it would have been the same thing, but already scoped to this pages community, and I thought it would be better to see how that s done and understand what changes in the portlet, so we will drag and drop the List Of Forum Topics portlet to the left side column 13
22. Once the portlet is added to the page, it will return a list of forum topics across all of Connections, not just the specific ones we want from the new 2 digital community 23. So now, let s scope this portlet to specific content. At the top right, click on the Configure Spot menu button, and select Open Edit Form 14
24. In the Edit Form dialog, I made a few changes. First, set the Name and Description to something more informative to users, I chose Frequently Asked Questions 25. Content Sources will be something we discuss in more detail later, but the only content we want for Frequently Asked questions is from Forums, so we will leave Forums as the only one checked, and scroll down to Filer By Community. Here we can scope the contents of this forum to a specific community, or all of Connections. We want the community that we already associated with this page (New 2 Digital), so we will select Limit to the community that is associated with this page NOTE: We are not limited to this page s community, if wanted, we could use Limit to selected community, and pick a completely different Community in the environment other than this Community page. 15
26. At this point we will see only forum topics from this community, but we want to see only frequently asked question and not just the latest questions asked in the forum. For that we have 2 additional options to scope the content. First, we can scope based on a search term, so we could add a search term and only get back information specifically found with that search term Second, we could scope based on a tag, so the owners of this community could simply tag the forum posts that they see most often, and those specific topics will appear in this portlet. The tag is the option we are going to use. The Community owners told me they use the tag faq to identify the most important forum entries. So we want to only show topics taged faq Set Filter by Tags to faq 27. Once these are set, scroll down to the bottom and chose Save and Close 16
28. Now the list only returns Forum Topics from this community, tagged faq 1.3.1 Custom Presentation templates Now that we have the list of topics we want for the Frequently Asked Questions, I d like to update the display. You ll notice we are using the default Comprehensive presentation template to show the details of each topic. That includes, a forum icon, title, updated by, tags, summary of the question for the topic, 17
number of comments, number of likes and a link to View the Topic: Using WCM s presentation templates we can modify this and show only the content we want that returned from Connections, so the next step would typically be done by a site designer to create a new presentation template. We will modify the comprehensive presentation template we are currently using, and remove the details about the number of comments, likes and View Topic link NOTE: If you make extensive changes to the designs of the Social Rendering portlets, we recommend you copy the entire library and import it again with a new name to make your customizations. For this lab we will not do that in able to give you time to see the customizations. The following documentation has details on how to copy the entire library: http://www.ibm.com/support/knowledgecenter/ssyj99_8.5.0/wcm/wcm_config_wcmlibrary_exportcopy. html 29. Click on the Display content menu icon at the top right of the portlet and click Open Edit Form 30. Scroll to the bottom and note the List Appearance component, that s the one we will need to edit. 31. Click Close to close out of the Edit Form window 18
32. At the top of the browser, click on Open applications menu icon and click Content 33. Click Web Content Authoring tab 34. Click on Library Explorer 19
35. We need to modify the Social Lists1.1/List Appearances/Social Object/Comprehensive component, if Social Lists1.1 is not in the library, Click Preferences Edit Shared Settings 36. Open Library Selection, scroll down to Social Lists 1.1 and click Add> 20
37. Once added, click OK 38. Back in Library Explorer, click on Social Lists1.1 21
39. Click Components 40. Component Designs 41. And Comprehensive 22
42. In our example, we are working with the List of Forum Topics portlet, so it s the Forum Topic Entry design being used, select the check box next to List of Forum Topics and click Edit 23
43. Here you can see the HTML used to display the content returning from Connections. If we want to bottom bar containing comments, likes, and view topic link we simply need to remove that code from this page so remove the following line, and everything below it <tr id="tr4_[plugin:portlet key="namespace" compute="once"] [AttributeResource attributename="id" separator=","]"> remove what s in red below: 24
44. Once that s removed, click Save and Close 45. Click on the World Icon, and chose DDX-15, to go back to our Social page 46. Click the Social Tab 25
47. Frequently Asked Questions should now just contain the title and content summary 1.4 Important Information Finally, on this page, we want to capture some of the important getting started information from the rest of the Community, the blog, wikis, bookmark and files content. For that we will start with one of the List of portlet (we will use list of blog posts) and edit it to show not only blogs, but wikis, files and bookmarks as well, 26
48. Click on the Add Page components + icon on the left side of the browser, scroll over and select Social Content1.1 49. Drag List of Community Blog Posts to the right side column 27
50. At this point you should see a list of Blog posts from this community, let s edit the content to get only the information we want, click the display context menu button and select Open Edit Form 51. Update the Name and Display Title to something meaningful (I used Getting Started) 28
52. In the Content Sources, this time we do want to bring in more than just blogs, so select Blogs, Bookmarks, Files and Wikis, also make sure Filer by Community is set to Limit to the community that is associated with this page 53. Also, just like the last time, I don t want to get a comprehensive list of who updated the information, the number of comments, likes etc, so let s change the List Appearance to one we provide out of the box, called Simple a. Under List Appearance, Click Select Component 29
b. Set it to show 25 c. Scroll down and select Simple and click OK (note if there are 2 Simple choices, click the bottom one. I didn t clean up the 1.0 version well enough, sorry) 30
d. Then back in the Edit Form, click Save and Close e. You should see a list of wikis, blogs, bookmarks and files from our Community Another change I d like to make is to increase the number of entries in this list. By default, we show 5 results, let s change that to 10 54. Click on the Display Content Menu icon, and click Open Edit Form 31
55. Scroll all the way to the bottom and select the List Component we are using 56. Click Edit 57. Scroll down about a quarter of the way to the List Paging Options, and change Results per page from 5 to the number of items you want to show (10) 58. Scroll all the way to the bottom and click Save and Close 32
59. Back in the Getting Started page, click Save and close again 33
60. Now the Getting Started list will have 10 results 1.5 Adding Search and Tag portlets Now that we have a homepage that brings in the most commonly asked questions (List of Forum Topics), and the latest information across the community (List of Blogs posts) let s give users the ability to search and find the content they need from these sources. We will do that with 2 portlets, Social List Search and Tag Cloud. 34
1.5.1 Social List Search 61. Click on the Add page components and applications + sign at the top right corner 62. Select the Applications tab, and search for search 63. Drag the Social List Search portlet just above Getting Started 35
64. At this point you can search for anything and the results will display in the Getting Started list and Frequently Asked Questions list portlets. For example search for mentor 65. You will see the Getting Started updated with blogs, wikis, files and bookmarks that has content in it containing the text mentor 1.5.2 Tag Cloud Portlet 66. Another way to search is using tags created in Connections, to see this, go back and click on the add page components and application + button at the top left corner of the screen 36
67. Click on Applications and search for tag 68. Drag Tag Cloud between Search Form and Getting Started 37
69. By default, the Tag Cloud portlet bring in tags from across Portal, in this case, we want to see the tags generated by Connections, so in the top right corner of the Tag Cloud portlet, click the menu option and click Edit Shared Settings 70. Set Tag display modes to Transmitted tags only Action modes to Expose public render parameter 71. Scroll down and click OK 38
72. We also need to tell the Getting Started portlet to publish its tag information, click on the Display content menu icon at the top right corner of Getting Started and chose Open Edit Form 73. Under Tag selection support (about ¾ of the way down), select Enable tag selection support 74. Scroll down and click Save and Close 39
75. Now you will see a list of Tags as found on Connections. 76. All 3 portlets actually work together, so because we searched earlier for mentor, you are actually seeing a list of tags only from the results of the mentor search, if you go to the Search Form portlet and click Clear 40
77. Not only will the Getting Started portlet now show all content from this community, but the Tag Cloud will show all tags as well 78. Also, with the Tag cloud portlet, the end user can use the slider to decide if it wants only the most popular tags, or wants to see more in the list, slide that back and forth now 41
79. Slide the tags most of the way back to the left, and click on the top10 tag to see the blogs, wikis, files and bookmarks with that tag (top10) 80. If you click another tag you can narrow the results down even further, for example scroll all the way to the right and click on Sametime 42
81. You will only have 1 result, that has been tagged both top10 and Sametime 2 Configuring where to open information At this point we ve done a good job of setting up a page that new users can quickly find information the community organizers want them to use as they start working at Greenwell. Now we want to look at the behavior when you click on links in the portlets we added to the page. 82. The link in the Getting Started page is a blog entry Top 10 Sametime Actions for New Hires, click on that link 43
83. Notice it opens directly to Connections 84. 85. 86. The way this works is the social rendering portlet looks for a blogs detail portlet to send the request to, if there isn t one, it opens the request directly to Connections. Many times that s the behavior you want, and customer will configure Web Application Integrator so that even though you go to Connections, the navigation stays the same and it looks like you are in Portal. In our case, I couldn t set this up for the lab, but will discuss and demo it during my presentation. What we want to do for this lab, is configure the portlets to remain in Portal, and go to a Detail portlet to show the content. We will create this on a child page of the overview we ve just finished. I ve already created the child page, called it Blog Click back on the browser to get back to Portal, then click Blog page 44
87. This is the page I will have blog links open to. Click on the add page + icon, click on the Applications tab and search for blog 88. Drag and drop the Current Blog Post Details portlet to the page 89. Go back to the Social page 45
90. In the Getting Started portlet, click on the Display content menu icon, and click Open edit form 91. Click on the Show Hidden Fields button 46
92. Scroll all the way to the bottom of the page, and set Custom Link Resolution Root page to current, and click Save and Close There are a few options here. Setting it to current means when you click on the link, we will attempt to find a details portlet either on the page we are currently using, or any child pages of that page. If it can t find one it will open directly on Connections Another option is to populate this field with the unique name of the page containing the detail portlet. 47
93. Once the portlet is saved, click on Top 10 Sametime Actions for New Hires again, this time you should be sent to the page we just created 94. In addition to bringing back the content of the blog post, the detail portlet gives you the ability to update content as well. For example, in this portlet, scroll down to the bottom, you will have options to like or comment on the entry. Click Add a comment 48
95. Enter some text and click Submit (be careful, all portal servers are using the same connections server. Everyone will see what you post, so don t make fun of your neighbor making from of Bryan or Matthias is perfectly fine) then click Submit 96. 97. You can configure the same behavior for other components as well details 3 Extend the Social Templates for DDC This exercise shows how you can use the IBM Social Rendering Templates for Digital Data Connector (https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetdetails.xsp? action=editdocument&documentid=666d72234ca1d57685257cee0050009a) to build further custom IBM Connections connectors. In this exercise you will create a connector that renders the details of a specific stand alone blog. Note: In the following sections, new items are added to the Social Templates library. This is for the purpose to save some time in this lab. Best practices are to copy the library first and work within the copy. For more details, see: http://www- 01.ibm.com/support/knowledgecenter/SSHRKX_8.5.0/mp/wcm/wcm_config_wcmlibrary_exportco py.dita?lang=en The idea for this is one I see fairly regularly from customers. They would like to set their homepage of Portal to Display Messages from the CEO, so they want to show a specific blog and contents as a user accesses the system. Here is a way this can be done to bring over the blog entries from the CEO s blog. The first thing you need to know is the url to the specific blog you want. In this example we are using the following: 49
http://tsc.xdxlabs.com/blogs/ceo?lang=en_gb The important piece is the handle of the specific blog (the text after /blogs) in our case that s ceo. Remember that, we ll use it later. 1. In Portal, click on the Social CEO page 50
NOTE: In the interest of time, I ve gone ahead and added the portlet to the page (current Blog Details) 2. Click on the Display context menu icon at the top right of the portlet and click Open Edit Form 3. Click the Show Hidden Fields button 51
4. Scroll down to the Data Source section, and click the Social Lists Design / Data sources/ Current Blog link 5. Click the Edit button 6. Click the arrow next to Save and close, and click Save As 52
7. Set New name to Fixed Blog and set New display title to Fixed Blog then Click Select if you want to change the location where you save the Data source, I left it in Social Lists Design / Data Sources, so just clicked OK 8. Remove the content of the HTML Element and replace it with the following: [Plugin:ResourceURL param="sortorder=desc" url="[plugin:connectionscontext type='service' key='blogs']/ceo/feed/entries/atom"] NOTE: ceo in the ConnectionsContext is the blogs handle from earlier. NOTE: You can get this text from the text file on the desktop of your machine (ddx15.txt) 53
9. Click Save and Close 10. Back in the Data Source section, click Select Component 54
11. Click on Show 25, then select Fixed Blog and click OK 12. Scroll to the bottom and click Save and Close 55
13. You will see the blog posts from this Blog In summary, what we have accomplished is building a Social Portal Community by integrating and curating specific content from IBM Connections into Digital Experience. I hope this lab helped give you some ideas on how you can integrate Connections and Portal at your company, let me know if there is anything else you had questions on. I hope you enjoyed the lab and please fill out a survey. 56