Lab Exercise: Building your Site with IBM Digital Experience and CTC

Transcription

1 Lab Exercise: Building your Site with IBM Digital Experience and CTC Author: Herbert Hilhorst

2 Document History 3 April 2015 First release Name herbert_hilhorst@fr.ibm.com Copyright IBM Corporation, 2015 US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

3 Contents DOCUMENT HISTORY... OVERVIEW...4 INTRODUCTION...4 TIME ESTIMATE...5 LAB 1 DISCOVER CTC DEMO CONFERENCE SITE...6 LAB 2 CREATE A NEW INTERNET SITE...12 LAB 3 ADD AND UPDATE A NEW IT EVENTS PAGE...21 LAB 4 CONFIGURE, TEST AND UPDATE AN IT SATISFACTION SURVEY FORM...42 LAB 5 PERSONALIZATION AND MULTI-CHANNEL ACCESS...60 LAB 6 APPLICATION INTEGRATION...68 LAB 7 ANALYTICS INTEGRATION...71 APPENDIX A MORE APPLICATION INTEGRATION EXAMPLES...75 APPENDIX B NOTICES...79 APPENDIX C TRADEMARKS AND COPYRIGHTS...81 Contents Page 3

4 Overview IBM Digital Experience, available for customers in the Employee and Customer Experience suites, have further extended their exceptional digital experience capabilities with updates in IBM WebSphere Portal, IBM Web Content Manager (WCM), IBM Forms Experience Builder (FEB), IBM Web Experience Factory (WEF) and much more. In this lab, you will discover several out- of-box functionality of V8.5. Introduction The labs runs on an out of the box installation of WebSphere Portal 8.5 with the WCM Content Template Catalog (CTC) 4.3 installed. This solution is available for free to all WCM customers and installs on top of an existing WCM 8.5 installation (older versions are available since CF8, but are not as rich as the recent ones). More details may be found here: It also uses some of the ready to use free Starter Packs forms for FEB. These can be found on Further it uses out of the box multichannel and personalization functionality, based on the SmartPhone and Tablet segments, configured following lookupname=v8+update %3A+Supplemental+Documentation#action=openDocument&res_title=Example_Creating_a_segment_b y_device_class_wp8001&content=pdcontent and with Desktop User added as Otherwise. If you are not using our installation, you may set this up prior to starting this lab. It also uses the IBM Mobile Preview for Digital Experience software as well which can be found here: action=editdocument&documentid=be1d7aa2a79761c485257cf900607a35. The lab also introduces you to the Script Portlet and guides you through the ready to use samples from OpenNTF: %20IBM%20WebSphere%20Portal. In this lab, you play the role as Frank Adams, a Marketing Manager, and you will first discover the CTC Demo Internet Conference site which comes with CTC. Then, you will need to build and configure a complete new multichannel Internet web site. By doing this, you will experience how easy and powerful IBM's Digital Experience is today. You will also learn more on some of the many powerful search, integration, personalization, multichannel and analytics functionality. This lab should help you to understand how this solution benefits to your organization. These are the steps you will follow: (1) Explore the default CTC Demo site (2) Create a new Internet site (3) Add and change a IT Events Page, Component and Content (4) Add and enhance an IT Satisfaction Survey Form (5) Review Personalization and Multi-Channel options (6) Discover an integrated Application (7) Integrated Analytics Page 4 XDX 8.5 Digital Experience User Tour

5 And this gives you the following complete site with About Us, Products, Services, Medias, Events, Support and Contact Us, as well as your fully added and customized IT Events page, under Events. Time Estimate It should take approximately 75 minutes to complete this lab. Building your Site with IBM Digital Experience and CTC Page 5

6 Lab 1 Discover CTC Demo Conference site In this section, you will learn how to use the IBM Web Content Manager CTC Demo Conference site for WebSphere Portal to get a quick idea of what CTC may bring to your company. In this section you will discover some of its functionality and and how to navigate in this site. Once you have installed CTC on your machine, you will find the CTC Demo Conference site on the top of your navigation. 1. In a new browser window connect as an anonymous user to the site using the URL provided to you, such as This brings you directly to the home page of the CTC Demo site. The home page, based on the landing page template, shows a promotions component with some paging handling. It also shows several information coming from other places in the site. The Design and Developer Track information are coming from the Design and Developer Track page under Program. The Experience Blog comes from the Blog page and shows this in a different layout again. Below you see the sponsors. In the navigation you can go to these pages and you also have an additional Blog, Contact and Registration page. Most of this functionality is achieved with some configured components. 2. First have a look at the controls on the promotion component. It allows you to quickly walk through the different available promotions. Page 6 XDX 8.5 Digital Experience User Tour

7 3. Then select the second promotion Experiences. Two tracks with 12 lessons from the industry's most inspiring presenters. (or wait when it comes around) and click on the image above. This brings you to the Program page and introduces you to more details on the different Design and Developer tracks. Notice that the same promotion component is used as in the home page, but configured differently. This shows the reuse functionality of WCM. Now go directly to one of the tracks. Click on the second promotion Deliver engaging experiences that respond dynamically and intelligently to the user, their context and their devices. image. 4. Here you find details on this track. It is an event under the Program Development Track. It shows the full description in the main column on the left and event details and connect information on the right. Building your Site with IBM Digital Experience and CTC Page 7

8 5. In the Connect part, you find options to share this information with Facebook and Twitter. If you have those accounts, you may select one of the options to share. For example, if you click on Tweet, and you will be prompted to share this link with Twitter. 6. You also find ways to send s to people and print the page, and place holders to implement even phone call integration, or add it to your favorite feed reader. 7. Now click on Development Track to see all the development tracks, based on the events template. Page 8 XDX 8.5 Digital Experience User Tour

9 8. Notice the track you just looked at is appearing in a different look and feel in the list. If you don't see any content in the list, you may need to update the search From field to an older date, eg. 1/1/ Now go the Registration page. Click on Registration. Building your Site with IBM Digital Experience and CTC Page 9

10 10. This shows the frequently asked questions with its questions and answers on the same page, based on the FAQ Index/Detail template. To see any answer, just click on the question, eg. 1. What is the refund policy? 11. And this site is multilingual. You may change the language for your browser to Spanish, German, Chinese or Arabic and will notice that the whole site is available in these languages. To test this, change the content language of your browser. With Firefox, you can use Tools Options (or Edit Preferences) Content Choose your preferred langue for displaying pages moved to the top, as shown (you may need to add another language first): Page 10 XDX 8.5 Digital Experience User Tour

11 12. Then you will see the same site in the chosen language. 13. Ensure, you switch back to English, as this will make it easier to follow this lab. This was the quick introduction to the default CTC Demo conference site. Now you will make your own site. Building your Site with IBM Digital Experience and CTC Page 11

12 Lab 2 Create a new Internet site In this section, you will build and customize a complete new internet site, similar to the CTC Demo one, and discover how easy this is, using primarely out-of-the-box functionality. To be able to make any changes, the site is configured to work with specific authors only. 1. Anonymous users are not allowed to create any site changes in this configuration, so you will first authenticate yourself. You will logging on as Frank Adams, with user name fadams. Click on one of the the Log In options on the top. 2. Then log on with User ID fadams and password passw0rd (with a zero). 3. Notice that you now have access to much more information. This is part of the many personalization features of our platform. Navigate to the Site Builder page. Page 12 XDX 8.5 Digital Experience User Tour

13 4. This is the place where you can benefit from existing site and section templates. Sections are sub-parts of a site. Both can easily be created by site administrators, using the Create and Import options. 5. Templates are available to create new empty sites from scratch or with ready to use content. They are based on best practices, and allow your developers to get a fast start with our solution. The template can be changed/edited, duplicated and exported to other environments, to adapt to your needs. As you need to build an internet site, scroll down to the Internet Site Template and click the Launch Site Wizard. Building your Site with IBM Digital Experience and CTC Page 13

14 6. This launches the wizard and brings you to step 1: Site Name. Note that you have support available for each entry. Click on?. 7. Change the unique site name, title and friendly URL name. If you are sharing the solution with other people, ensure you take something unique here. The friendly URL will appear in your URL name. Then go the next step using >. Page 14 XDX 8.5 Digital Experience User Tour

15 8. In step 2, Content Library, you can choose if you use a new content library or existing one. As you are creating a complete new site, you will create a corresponding content library. Give it a unique name and description and go to the next step. 9. Notice that in this last step, Site Structure, the internet site template contains a full hierarchy of pages and you are able to configure this now. You can easily deselect any of its pages for your new site, and edit each page. Edit the landing home page My Internet now. Click Edit as shown. Building your Site with IBM Digital Experience and CTC Page 15

16 10. It shows that this page takes the configuration information from step 1. The page title, URL and unique name. It also shows from where it will copy its new content from. The page itself is based on a specific page template Landing Home. You will learn more on this later. Click Cancel. 11. Then briefly check the Advanced Options. Page 16 XDX 8.5 Digital Experience User Tour

17 12. On the Site Experience panel, you can select a Portal theme (the graphical layout of your site), the Profile (indicating what options are available to site users) and the Style (color settings). Click Access Control to switch panels. Building your Site with IBM Digital Experience and CTC Page 17

18 13. On the Access Control panel you can grant/refine permissions for users and groups to be able to access your site as users or administrators. Leave those settings as-is and click Create Site. 14. You then get a summary of your new site. Now click OK, to create it. Page 18 XDX 8.5 Digital Experience User Tour

19 15. A quick validation takes place. 16. And the site gets created in the background. Be patient, as a complete new hierarchical site with 38 pages and corresponding content is now being created for you. 17. After a short while, your site should be ready for further customization. Click the Go to Site to open it. Building your Site with IBM Digital Experience and CTC Page 19

20 18. Your new site is now published. 19. It is also available under the site menu, in case you need to come back to it later. You have successfully created your first site and are now ready to further customize it. Page 20 XDX 8.5 Digital Experience User Tour

21 Lab 3 Add and Update a New IT Events Page You will first have a quick look at this new site and then create a new version in which you will add a page to manage IT Events under the existing Events page. Not only it should show all upcoming IT sessions, but you should allow your visitors to provide feedback on these sessions, using a customized IT Satisfaction Survey. First have a look at this page which is based on of of the many out of the box page templates: the landing home page template. 1. It contains a set of portlets with content, such as a slide show on the top, a teaser, promotions call-outs and a special features carrousel at the bottom. You can easily change all content of these pages, but you will first focus on the events, to add an IT Events page and make all kind of changes there. Go to the Events page, click Events. 2. Notice that there are two underlaying pages, Conferences and Briefings. Here you will add your IT Events. This page is also based on a landing page template. To better see what portlets are available on this page, go to the edit mode. Switch to the Edit Mode and you see these portlets appear with their content. Building your Site with IBM Digital Experience and CTC Page 21

22 3. Page 22 In the Edit Mode, you clearly see the titles of each portlet and all options to edit the content directly, or configure them differently. Notice the Automatic Landing Page (Specified) portlet that shows a summary of the underlaying pages. XDX 8.5 Digital Experience User Tour

23 4. In your new site, you can either make changes that are published directly, or prepare a new version jointly with your team, use the draft content, decide for each change if it should go through a workflow, preview the changes with different audience and finally schedule to publish the changes at a specific time in the future. This is done using projects. The projects can be used by contributors as well as developers and several projects can run in parallel. You will now create a new project to manage your new version. Under Published Site, select New Project. 5. If you want more inline help on this task. Just enable the information mode. This is a good way for new contributors to learn the solution. 6. The active information mode provides more details about each task and gives you options to learn more (in your language) by following the Learn more links. Feel free to click Learn more and then close the window to go back to this page. Then name your project My Internet V1.1 (or any name you want) and and click Create. Building your Site with IBM Digital Experience and CTC Page 23

24 7. You should now see a message confirming a creation of the new project and its selection as the current project. In the top toolbar you should now see this project name. The Projects panel provides the details and gives you options to Publish, Manage Project and Exit Project. Select More to see additional project options. 8. In the More pulldown window you should see options to add to the project, delete the project and create a project template from it (with all its current entries, which may be a good start for future modifications). Page 24 XDX 8.5 Digital Experience User Tour

25 9. You will now create a new page and make updates there. Create a new page based on the Events page template from CTC. First switch to the Create tab. Take a quick look at all templates delivered out of the box with the CTC (you have already seen several of them in the CTC Demo site, as Alerts and FAQs, for example). Next search for the Events template and then select Events. Notice you can preview it and show its details. Title your new page IT Events and keep the friendly URL unchanged. It was generated automatically for you. Keep the default page insertion point Last child of current page and click Create Page. 10. This will create an index and corresponding details page based on this template. Both are configured with a specific layout and pred-defined portlets with ready to use components and content to start with. Select View or edit page information to see more details on the index page you created. Building your Site with IBM Digital Experience and CTC Page 25

26 11. This shows you the general basic information about this page which you could directly edit. It also has the actions to publish it (as it is in draft now) and delete it. On the left you also have direct access to the page layout, style and vanity URLs. Click on Details. 12. This shows some more details on your page, like the project, theme and profile used. Now edit the Page Properties. Page 26 XDX 8.5 Digital Experience User Tour

27 13. Explore the Manage Page Properties options. Take a look at the General, Cache (single user/across users and interval), Security (with author and owner selection as well as workflow settings for this page), Localization (for page translations) and Advanced (with theme and profile selections, allowed portlets control, page versions and more). Click Cancel or close the window to exit without making any changes. 14. Then click Layout. These are default layouts you can select from. Notice the current selection and the column that would show hidden items if you would choose a layout with less columns/rows (allowing you to easily reconfigure). Building your Site with IBM Digital Experience and CTC Page 27

28 15. Then select Style. These are default styles you can choose from. 16. Finally, you can assign specific short 'vanity' URL names for your page, in specific languages, if needed, control what content to show in that page and whether to enforce authentication. Type ITEvents in the Vanity URL Name and click Save. This will allow users to access your page directly using a much simpler URL, such as: (and if using a proxy, you would simplify it even further: You should now see a confirmation message and you could continue creating more vanity URLs, eg. one for each language. Your page should now be correctly configured. Close the toolbar as shown. Page 28 XDX 8.5 Digital Experience User Tour

29 18. You see all your new page is added under Events (last child, as selected) and is ready to be configured with promotions, a section header, search filter, events corresponding to the filter results, as well as social connect and recent events. he page is still in the draft state as indicated by its name surrounded by parenthesis, in your case (IT Events). 19. You will now also make a few changes to the Index Page Signpost and Promotions Slideshow component. First, you will add a few promotions to external events and manage how they will show. The first promotion will point to the upcoming IBM Digital Experience event found here: pagetype=page&c=b891487g04094a53. (Hint: you may also you your own examples). Enter the promotion description first. Hoover over the text and select Edit (or edit directly by typing into the field). 20. Enter your description, e.g. IBM Digital Experience 2015: Building your Site with IBM Digital Experience and CTC Page 29

30 21. Page 30 Then Save it (or leave the field) and insert a promotion image. Click on Insert promotion image and then Select to select a locally stored image. Your web designers control this. They could also allow you to select an existing image component or get it from the Digital Asset Management solution. XDX 8.5 Digital Experience User Tour

31 22. In the File Upload window, drill down to Desktop/Lab Files/DX User Tour and select IBM_Digital_Experience_2015_ATL_banner_980x300.png file. Click Open to upload the file. Your selected image should now be visible in the window as shown below. If you want you can add other images to be rendered specifically for the desktop, tablet and/or smartphone. The current image should adapts itself nicely itself, so in our case no additional renditions would be needed. Note that you can adjust the image dimensions and the alternate text. Click Save. Building your Site with IBM Digital Experience and CTC Page 31

32 23. Now you want to add a link to this event. This information is not directly exposed and you need to edit the item (you may ask your design team to expose this directly as an additional inline editing option, so you will never have to go to the full content item). Click on the Edit icon. 24. Notice the information you already entered and the option to use an existing image. Scroll down and enter the following URL under Link: If you wanted a link to some internal content, you would use the browse option. This way the link would be prevented from breaking automatically. Further down, you'll also see a campaign ID which allows you to track campaigns and optimize them. And you can see a Multi Lingual Solution that is used to manage multilingual entries when it is configured to be multilingual, which is not the case for your site. Your content is draft and you will now publish it. Click Save and Publish as shown: Page 32 XDX 8.5 Digital Experience User Tour

33 25. This will put it in pending state, to be published when the whole project is published. This may go through a dedicated workflow of course. Now add a second promotion. Click Create new promotion. 26. This is for all IBM technical events & conferences shown in Enter the name, title and description as follows: Building your Site with IBM Digital Experience and CTC Page 33

34 27. Then go down and add an image from the image library. Click Select Component. 28. You may use an existing promotion image in the CTC Content library. Select CTC Content as the library, and then Promotion Images as site. This allows you to select the Botanical 03 image, as shown below. Click OK. Page 34 XDX 8.5 Digital Experience User Tour

35 29. Insert the link Scroll up and Save and Publish this new promotion and Close. 31. Notice that a control is now appearing which allows you to manually select any of the promotions. Try this out and watch how the promotions transitions. Go to the view mode to see this on the published site. Turn the Edit Mode off. 32. You should see your promotions displayed using crossfading style transitions, changing every 5 seconds and containing a left/right controls at the bottom. Now go back to the edit mode again. Building your Site with IBM Digital Experience and CTC Page 35

36 33. You will change this behavior. From the popup window, select Open Edit Form. 34. Change the transition to Wipe Left, the slide duration to 1000 milliseconds and controls to Previous, Play/Pause, Numbers and Next, as shown below. Page 36 XDX 8.5 Digital Experience User Tour

37 35. To save these settings, scroll up and click Save and Close. 36. Go to the View Mode again (switch off the Edit Mode) and notice your changes. 37. Now you will change the title of the IT events section to IT Events. Switch back to Edit Mode and, as you can see, you are guided in configuring the contents of the page. For example to enter the events section name and corresponding body of all events that will be filtered using the upcoming items index list options. Hover your mouse over the portlet and you will see the inline tools appearing. Select the Title: Edit option, as shown, or type directly in the existing text. Building your Site with IBM Digital Experience and CTC Page 37

38 38. Change the Display Title to IT Events first and click Save (or leave the text). 39. Then scroll down to the Body rich text field and click Body: Edit and enter Come and see these interesting IT events and take some time to fill out the IT Satisfaction Survey and click Save again. 40. You can change other fields of this content using the option Show Non-displaying fields or Open Edit Form (and view with Open Read Form). While these fields do not show directly in this page, it may appear in other places where the content is reused. Page 38 XDX 8.5 Digital Experience User Tour

39 41. Now you will enter an example event that you will manage. You can edit the details of the placeholder directly here or click on its title or More Information and go to a dedicated page with more information to cover. Click on Enter event name. Building your Site with IBM Digital Experience and CTC Page 39

40 42. This brings you to a page where you have more space to provide details on this content. You can also enter the content in different ways. The main fields of the content are shown on the left and additional information on the right, such as the event contact location and details. Both work with the same content. Under the Enter event name where you can find also the hidden fields that are not displayed and under Item Details. The way you can enter the content is under full control of your designers. You may ask them to use this kind of approach for the promotion you entered previously, for example to allow you to enter the link more easily without the need of a popup window. Change the title to Exceptional IT Event and if you wish you may change other fields as well and event create new items. 43. Now go back to your IT Events page. Click on any of the IT Events links, shown below. Page 40 XDX 8.5 Digital Experience User Tour

41 44. Next you will add an IT Satisfaction Survey form to your page. Click Create in the toolbar and select Applications from the left navigation area. Type forms as the search string in the search box and observe search results. You should see Forms Experience Portlet application name listed in the returned results. Click on the + sign to add the Forms Experience Portlet to your page or drag and drop it. 45. Add it at the bottom of the page, as it requires the full width in the page, as shown. 46. Now you are ready to configure it. You have successfully created additional IT Event pages with specific content and components. Building your Site with IBM Digital Experience and CTC Page 41

42 Lab 4 Configure, test and update an IT Satisfaction Survey Form In this section, you will configure your added Form Experience Portlet with an existing IT Satisfaction Survey and adapt it for your users. This portlet gives access to business users with easy tools to create and manage dynamic forms. Once configured, you will test the form and go to the backoffice to make changes to it. 1. Select the portlet option Edit Shared Settings. Notice the other options, like Site Promotions and Analytics Tags that are to increase visibility, and Manage Endpoints, used to make portlets communicate to each other. 2. Click Browse Applications to select and of the ready to use forms. 3. If you are sharing the instance with other people, you may first want to create a copy of the existing IT Satisfaction Survey form (one of the many ready to use examples from the starter pack) which you may modify. If not, got directly to step 7. Click Manage Applications. Page 42 XDX 8.5 Digital Experience User Tour

43 4. Then click Manage. 5. Search for the form called IT Satisfaction Survey (it may be on a next page) and then make a copy using Duplicate. 6. Give it a unique name again and click OK. 7. Ensure it is deployed. If the View Responses and Launch are greyed out, you need to deploy it. If this is not greyed out, go directly to step 9. Click Deploy. Building your Site with IBM Digital Experience and CTC Page 43

44 8. Click Start. 9. Then close the window. 10. And select the right IT Satisfaction Survey, (use Next to find it) and click OK. Page 44 XDX 8.5 Digital Experience User Tour

45 11. Then click OK to save the settings. 12. Then fill out the IT Satisfaction Survey. Notice the formulas that add up the percentage total and validate whether your input adds up to 100%. 13. Submit your form. Click Submit. Building your Site with IBM Digital Experience and CTC Page 45

46 14. You get a confirmation of successful submission. Click OK to get back to the page. 15. Submit at least one more form using different employee names. 16. Select Edit Shared Settings again. 17. Click Browse Applications. 18. Select the right IT Satisfaction Survey again and then Manage Applications. Page 46 XDX 8.5 Digital Experience User Tour

47 19. Note : if you wish, you may open the Forms administration interface directly in a dedicated browser window. This is typically the current host (if it is installed on the same server) with /forms, eg.: This opens the same content as normally using the Manage Applications directly in the FEB portlet. You may also use CTRL + and CRTL to control the size of your browser screen. Look for the IT Satisfaction Survey in the list of forms and click View Responses to see the submitted data. Building your Site with IBM Digital Experience and CTC Page 47

48 20. This gives you a summary page of all responses. You can customize it, create filters and share it. Click on Customize. 21. Click Cancel. Optionally have a closer look to the Create Filters and Share options as well. Then go to the list of responses. Click Responses. Page 48 XDX 8.5 Digital Experience User Tour

49 22. You can customize the table again and create filters. Click on individual responses to see the actual form as submitted. You can export data to a spreadsheet from the database and the data is also available using REST API in other applications. Click More Actions and Export Data. 23. You can now export it to different formats to create your reports. 24. This analysis information can also be included directly on a page, specific for the survey responsibles. Click Cancel and close the IT Satisfaction Survey window or tab by clicking on the 'X' to return to the Manage Application Modal Dialog. Then click Manage to go to make changes to your application. Building your Site with IBM Digital Experience and CTC Page 49

50 25. This is where you create new applications, or import any of the many examples that are provided to get a fast start. You will now enhance your IT Satisfaction Survey. Click on Edit so we can start editing the form. 26. Acknowledge the message that this form is already deployed. Click Yes to continue. Page 50 XDX 8.5 Digital Experience User Tour

51 27. This brings you to the designer. Here you can manage the fields and pages of your forms, the style, access control, as well as the workflow with corresponding stages. 28. You will add one question to the survey. Go to last question and click the + icon to add a new question to the list. 29. Type Overall IT Services as the question. You can type it in directly or first click on the Properties icon. Building your Site with IBM Digital Experience and CTC Page 51

52 30. If the user answered Somewhat dissatisfied or Very dissatisfied, you would like to know why. Therefore, you will add a field to capture the reasons and this field should be visible only if the user was (somewhat or very) dissatisfied. Select the Multi-Line Entry field on the palette and drag it just below the list of questions, then release the mouse button to place the field. 31. Click on the properties icon for the new field. Page 52 XDX 8.5 Digital Experience User Tour

53 32. Type in the Title, eg. Reasons why I am dissatisfied, and make the field width Full width. Then click OK. 33. To hide the field under certain conditions, click Edit Rules. 34. First add a new rule. Click Add Rule. Then select your Overall IT Services question and choose the Very dissatisfied answer. To choose the other option click on +. Building your Site with IBM Digital Experience and CTC Page 53

54 35. Select At least one is true (Or) as the Type of condition. Click Apply. 36. Click Apply and add the condition for selected value equals Somewhat dissatisfied. Click OK to return to the form. 37. You are ready with the form and deploy it to use it in your new site (notice you can review it). Click on the Save icon top-right of your screen. Page 54 XDX 8.5 Digital Experience User Tour

55 38. Go back to the Manage tab and select Deploy to re-deploy the form. 39. On the deployment dialog, notice you can plan this deployment and get notified. Just accept the default settings and click Update. Building your Site with IBM Digital Experience and CTC Page 55

56 40. Now you can go back to the IT Events Portal page. Close the overlay-screen window with the top-right small X icon. 41. Click OK on the Browse Applications dialog and OK to save your new settings. The form now shows the new question. 42. Now check how this newly created page will look like in your parent Event page. Click Events. Page 56 XDX 8.5 Digital Experience User Tour

57 43. And notice that your the navigation with a summary to your new IT Events with IT Sessions page has been added automatically. 44. Now you want to publish your changes, as this is still all in draft, part of your project. If you want, you could preview it for specific and anonymous users, using Menu and any of the preview options shown. 45. In the purpose of time, you will consider that all is working correctly and publish the project with all its current items. Click on the Toolbar icon, shown below. Building your Site with IBM Digital Experience and CTC Page 57

58 46. Then click Projects and you will see your current project with all items that are part of it and were created during the page creation and your edits. It also shows their corresponding workflow status.. Click Manage Project. 47. You want to approve all items now. Normally, you would select each item in the above bar, review it and approve it individually. However, for this exercise, you will use a fast track. Select all 50 items per page first, so you can select all items of this project. 48. Then select all items (left to Type), More and Approve. Page 58 XDX 8.5 Digital Experience User Tour

59 49. This brings all your items to the status Publish Pending, meaning it is ready to be published, but waiting for the project to become really published. Click Publish Project to publish it now. 50. Now all your changes for your next version of Internet V1.1 are published. You now have successfully created and published a new version of your Internet site where you added the IT Events page with your content, components and form. Building your Site with IBM Digital Experience and CTC Page 59

60 Lab 5 Personalization and Multi-channel Access In this section, you will see how you can personalize content, how the web page adapts itself automatically to different devices with it's inbuilt multichannel functionality and use the built-in mobile preview. 1. First you will add a new web content that may show different contents depending on the device types. If a SmartPhone or Tablet hits your site, that user should download your mobile application in the app store. This time, you will make this change directly (not within a project). Ensure, you are still in the Events page. 2. Then switch to Edit Mode, then using the Toolbar, Create - Content Teaser. Page 60 XDX 8.5 Digital Experience User Tour

61 3. Add it, using the +, or drag and drop the Teaser content to the top of the page above the promotions. 4. Now edit it with a text, and images f you want, that only mobile users should see, for example as shown. Then you will hide it from desktop users. Click Configure Spot. Building your Site with IBM Digital Experience and CTC Page 61

62 5. Change the configuration of the spot from Specified Content to Targeted Content and the click Hide Spot. 6. Then use Add Segment to add the desktop users. 7. Select the Desktop User and Done. This should show as follows. Click Done again. Page 62 XDX 8.5 Digital Experience User Tour

63 8. You will see the summary of your new configuration. You can apply this to any content and with any segments configured in your environment. Click Save. 9. As expected the content is now hidden, as you are working on a desktop device. Notice you can always show it again easily, if you need to update it. Building your Site with IBM Digital Experience and CTC Page 63

64 10. Now turn back to View Mode. Your new mobile content is now showing. Diminish little by little the width of your browser to show that your page adapts itself automatically to it. 11. Watch carefully how images, texts and finally columns change to optimize it to your screen size. Page 64 XDX 8.5 Digital Experience User Tour

65 12. And if you access the same site with specific mobile phones, it further adapts it. To test this, you may use the Mobile Preview option. Click Actions Preview As Mobile User. 13. This opens the Mobile Browser Simulator with by default an iphone 5 as smartphone device. If you haven't done yet, you need to enable the Useragent switching to simulate the selected devices correctly once. If you have already done this, you can directly go to step 17. Select Enable Useragent Switching. 14. This opens the installer. If you are in Firefox, you need to open the browser extension in a new Window. Right click on Install Browser Extension and then Open Link in New Window. On other browsers, this may be slightly different. Building your Site with IBM Digital Experience and CTC Page 65

66 15. The click on Allow. 16. Then Install Now. 17. And finally Restart Now. Page 66 XDX 8.5 Digital Experience User Tour

67 18. It now shows your mobile targeted content again, as the server recognizes the device that is used. It also has changed the whole navigation, so with thick fingers you can still navigate easily. There are different options available, such as showing the QR code of your current page to read it with an external device and rotate it. 19. You can easily test with other devices as well. Click Add Device and choose any of the preconfigured devices, eg. ios ipad Apple ipad Close this window to get back to the desktop view. In addition to this integrated mobile preview, it is possible to embed the personalized content within mobile applications on one or multiple app stores (eg. iphone, Android), using Worklight. This allows you to have flexible ways of using the web site, and keeping everything centrally managed. Building your Site with IBM Digital Experience and CTC Page 67

68 Lab 6 Application Integration A key functionality of the Exceptional Digital Experience is the possibility to integrate different applications and make them work together. In this part you will be discovering the Script Portlet which allows you to build real client rendering portlets that can communicate with each other, using simple HTML, JavaScript and CSS skils. It is part an extensive list of development tools and out of the box portlets that gives you a fast start for your digital experience implementation. Another good example, you may want to look at is the Greenwell Internet from the recorded demo in Youtube, where a marketing manager manages a site with content coming from Connections forums, Commerce products, etc. 1. First navigate to the Integration Examples site which has been previously setup. 2. You can find many out of the box integration examples, like with Connections, Forms Experience Builder, etc. In addition to the out of the box Welcome and Getting Started pages, you will discover a few other pages with integrated applications. Go to Script Portlet. 3. This shows a simple customer list with corresponding details. Now click on any customer on the left Page 68 XDX 8.5 Digital Experience User Tour

69 4. And you see the customer information is sent directly to the customer details portlet which shows details on it. 5. These are portlets created using the Script Portlet. The Customer List creates a list based on a data set of customers. These can be obtained from external applications directly, or using specific web services that could be generated for example by Web Experience Factory. Switch to Edit Mode and have a look at how this is working. You can see that both portlets are Script Portlet Content Items and can be edited. Click Edit on the Customer Details portlet. 6. This opens up the Script Portlet editor. It shows your content, a place to edit and preview pane (which allows to preview in a dedicated window or enlarged one). Building your Site with IBM Digital Experience and CTC Page 69

70 7. If you wish, feel free to look around and make some changes. Under the Actions, you will have access to functions to manage render parameters, which allow to share data between different portlets. It also allows your end users to set any portlet preferences that you may use in the script. And you can export it to use in other environments. Click Save to see your changes in the preview pane. When done, close the editor. 8. If you are more interested in the Script Portlet, have a look at the other examples that come from OpenNTF: %20for%20IBM%20WebSphere%20Portal. And you may have a look at the IBM Connections, Forms Experience Builder and Opportunities (combined Connections and Forms Experience Builder) pages, as detailed in Appendix A. 9. Providing business pages with applications and content coming from many different places, nicely integrated allowing your business users to get their work easier and faster is the typical way of using our Digital Experience. As a business user, all information you need to make the right decisions are put together in a simple user interface, can be act on and updated easily and are accessible in your preferred device. You have successfully discovered the Script Portlet. IBM's Digital Experience has many other development and integrations tools to integrate your applications into your sites fast and easy. Page 70 XDX 8.5 Digital Experience User Tour

71 Lab 7 Analytics Integration In this last section, you will learn how to your web site is being used, using the analytics integration. This allows you to understand how many people are visiting your site and its tendency. You will see that you can easily create site promotions and additional analytics tags to closely track your site. 1. All analytics tools are under your actions. Ensure, you are in the Script Portlet page and click Actions Site Promotions. 2. This allows you to put your content, pages, portlets, etc. to a specific promotion, part of your marketing campaign, and follow this in your analytics tool. A site promotion is part of a marketing campaign that has the objective to introduce a new product, service, or event, or better position an existing one. A marketing campaign can consist of mailings, posters, banners, articles, games or other web content. In our solution, a site promotion covers the web content part of the marketing campaign. For example, a site promotion named Digital Experience 2015 can reference pictures, blogs, and gift-shops on a web site. Click Done to close. 3. Now select Actions Analytics Tags. Building your Site with IBM Digital Experience and CTC Page 71

72 4. Notice the interface allowing you to manually add more tags to your page. You can obtain specific analytics information from your site by using these analytics tags for your site resources. You might want to know which types of users visit your site most frequently, for example by age group or other characteristics. If you want to address mostly young professionals, you can create an analytics tag targetaudience:youngprofessionals; you can then associate the tag with all resources that contain content for this target user group. By looking at the visits on these pages you can determine whether the main user group of your site is young and new in their job. Click Done to exit. 5. The same functionality is available for each portlet. For example in your CRM Customer List portlet, you can access to it dedicated site promotions and analytics tags. Page 72 XDX 8.5 Digital Experience User Tour

73 6. Finally, have a look at the overlay reports. This works if you use and have IBM Digital Analytics (ex. Coremetrics) configured to analyze your data. You can select to have them for your page and individual portlets. Select Actions Show Portlet Reports to get the information for each portlet. 7. Notice that you can choose from different display styles. Now click on Details of the Customer List portlet. Building your Site with IBM Digital Experience and CTC Page 73

74 8. This brings you to the IBM Digital Analytics web site where you can further analyze your data you provided and use that to further optimize your site. You need a client ID to manage this. If you are interested in learning more on this or any other topic, feel free to contact your IBM contact person. 9. In little time, you can build you own customized multichannel intranet and internet web sites. In this lab you have discovered the CTC Demo conference site, learned how to build a complete new web site using site templates, add and update new pages, portlets, components and content. Specially, you learned how to customize forms and analyze the user input. Often changes to a website will be made by several users including business users, administrators and designers. Once all the changes have been made, previewed and approved, a final approval for all the changes can be made so that all the changes are published to the production site. Again, a Project can be used to prepare these changes and publish them at the right moment. You also discovered how different applications can be easily created based on applications, components, forms, content that may communicate to each other and are adapting itself to different devices with its personalization and multichannel support, and integrated analytics. You have successfully completed this lab and your site is ready for reuse. Feel free to use different site, page and content templates and add your own applications and content to extend your site and/or build new ones! END OF LAB Page 74 XDX 8.5 Digital Experience User Tour

75 Appendix A More Application Integration examples In this appendix, you may learn about a few other integration examples. You will first find the standard IBM Connections integration and then a combination of Forms Experience Builder and Connections. 1. First close the overlay. Click Close All and then select IBM Connections. 2. You see the Activity Stream portlet managing the status updates, and other out of the box Connections portlets. 3. Then go Social Rendering Templates. These are more out of the box portlets to integrate Connections into your Digital Experience. Appendix Page 75

76 4. Next go to Forms Experience Builder. This has the starter pack deployed. You may have a look at any of these ready to use and/or customize forms. 5. And finally go to Opportunities. This shows a Forms Experience Builder based Opportunities application and an IBM Connections Profiles portlet. You can filter down the opportunities list by Rep Name and Product line. Click on an opportunity in the list, eg. the one shown which has a Camping product line. Page 76 XDX 8.5 Digital Experience User Tour

77 6. This will show you the details of the opportunity in the FEB application and any expert in Connections who is tagged with that product line, Camping in this example. sends the Product Line parameter to the Connections Profiles portlet as a filter parameter. You notice that the Profiles portlet now shows employees that are tagged with the Product Line information who act as an expert or contact for further information. 7. From here you can easily start collaborating with Heather. Click on her name Heather Reeds. Appendix Page 77

78 8. This gives you access to more information of her. You have a few additional examples of integration on this platform. Additional labs may provide you more details on these and other topics around IBM Digital Experience. Page 78 XDX 8.5 Digital Experience User Tour

79 Appendix B Notices This information was developed for products and services offered in the U.S.A. IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-ibm product, program, or service. IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing of this document does not grant you any license to these patents. You can send license inquiries, in writing, to: IBM Director of Licensing IBM Corporation North Castle Drive Armonk, NY U.S.A. For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property Department in your country or send inquiries, in writing, to: IBM World Trade Asia Corporation Licensing 2-31 Roppongi 3-chome, Minato-ku Tokyo , Japan The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NONINFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement may not apply to you. This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice. Any references in this information to non-ibm Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk. IBM may use or distribute any of the information you supply in any way it believes appropriate without incurring any obligation to you. Appendix Page 79

80 Any performance data contained herein was determined in a controlled environment. Therefore, the results obtained in other operating environments may vary significantly. Some measurements may have been made on development-level systems and there is no guarantee that these measurements will be the same on generally available systems. Furthermore, some measurements may have been estimated through extrapolation. Actual results may vary. Users of this document should verify the applicable data for their specific environment. Information concerning non-ibm products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-ibm products. Questions on the capabilities of non-ibm products should be addressed to the suppliers of those products. All statements regarding IBM's future direction and intent are subject to change or withdrawal without notice, and represent goals and objectives only. This information contains examples of data and reports used in daily business operations. To illustrate them as completely as possible, the examples include the names of individuals, companies, brands, and products. All of these names are fictitious and any similarity to the names and addresses used by an actual business enterprise is entirely coincidental. All references to fictitious companies or individuals are used for illustration purposes only. COPYRIGHT LICENSE: This information contains sample application programs in source language, which illustrate programming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operating platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs. Page 80 XDX 8.5 Digital Experience User Tour

81 Appendix C Trademarks and copyrights The following terms are trademarks of International Business Machines Corporation in the United States, other countries, or both: IBM Cube Views Informix Rational System z AIX DB2 Lotus Redbooks Tivoli CICS developerworks Lotus Workflow Red Brick WebSphere ClearCase DRDA MQSeries RequisitePro Workplace ClearQuest IMS OmniFind System i System p Cloudscape IMS/ESA Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications Agency which is now part of the Office of Government Commerce. Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries. Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the United States, other countries, or both. ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet Office, and is registered in the U.S. Patent and Trademark Office. UNIX is a registered trademark of The Open Group in the United States and other countries. Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or its affiliates. Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other countries, or both and is used under license therefrom. Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp. and Quantum in the U.S. and other countries. Appendix Page 81

82 NOTES

83 NOTES

84 Copyright IBM Corporation 2015 The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. This information is based on current IBM product plans and strategy, which are subject to change by IBM without notice. Product release dates and/or capabilities referenced in these materials may change at any time at IBM s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, and ibm.com are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at Copyright and trademark information at