Watson Customer Engagement
20. – 21. Juni 2017
IBM Labor Böblingen
Digital Data Connector
1
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
2
Agenda
Watson Customer Engagement3
Introducing the Digital Data Connector
Watson Customer Engagement
• Public framework to integrate data in portal sites from external sources
• Integrated into IBM Web Content Manager
– Use content items to specify the data to integrate
– Use design components to specify the presentation
– Support for previewing, projects, syndication, versioning, and
workflows
4
Defining the Digital Data Connector
Watson Customer Engagement
• Built-in support for consuming XML and JSON data
• Support for data creation and update operations
• Web designers have full control over the data visualization
• No coding or code deployment skills required in many cases
5
Defining the Digital Data Connector
Watson Customer Engagement
Integrating data with the Digital Data Connector
IBM Connections
WebSphere Commerce / Sterling Commerce
Kenexa
CMIS
Omnifind / Search
BPM (task list)
Custom Feed / Anything
BPM (task list)
Custom Feed / Anything
Omnifind / Search
BPM (task list)
Custom Feed / Anything
CMIS
Omnifind / Search
BPM (task list)
Custom Feed / Anything
Kenexa
CMIS
Omnifind / Search
BPM (task list)
Custom Feed / Anything
WebSphere Commerce / Sterling Commerce
Kenexa
CMIS
Omnifind / Search
BPM (task list)
Custom Feed / Anything
Content ManagementInteroperability Services
IBM Business Process Manager
IBM Connections
IBM Forms Experience Builder
IBM Omnifind
IBM Smarter Workforce
IBM WebSphere Commerce
IBM Web Content Manager
WCM DesignTemplates
Read, transform, and visualize remote data
Salesforce Sales Cloud CRM
WCM HTML Forms
Read, transform, and write to remote services
...
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
7
Agenda
Watson Customer Engagement8
Understanding the Generic DDC Plugins
WebSphere Portal and Web Content Manager
JSON/XMLDDC JSON/XML
Plugin
DDC
Profile
Generic List
Structure
WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Markup
Watson Customer Engagement9
Understanding the Generic DDC Plugins
WebSphere Portal and Web Content Manager
JSON/XMLDDC JSON/XML
Plugin
DDC
Profile
Generic List
Structure
WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Markup
(1) Use DDC list-rendering profiles to...
Define the data transformation into a generic list data structure, so-
called bean lists
Watson Customer Engagement10
Understanding the Generic DDC Plugins
WebSphere Portal and Web Content Manager
JSON/XMLDDC JSON/XML
Plugin
DDC
Profile
Generic List
Structure
WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Markup
(2) Use WCM presentation templates to...
• Establish the list-rendering context to perform the data transformation
• Access the bean lists using common WCM tags to produce markup
Watson Customer Engagement11
Understanding the Generic DDC Plugins
WebSphere Portal and Web Content Manager
JSON/XMLDDC JSON/XML
Plugin
DDC
Profile
Generic List
Structure
WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Markup
(3) Use DDC Connector content items to...
Specify the list-rendering context consisting of:
• Source URL of the data
• DDC list-rendering profile
• DDC plugin
Watson Customer Engagement12
Understanding the Generic DDC Plugins
WebSphere Portal and Web Content Manager
JSON/XMLDDC JSON/XML
Plugin
DDC
Profile
Generic List
Structure
WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Markup
(4) Use the Web Content Viewer portlet to...
Render bean lists in the right context on your portal pages
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
13
Agenda
Watson Customer Engagement14
Understanding List-rendering Profiles
acme.Name=acme.cms.xml
acme.BeanListProviderID=ibm.portal.ddc.xml
acme.ResourceBundleBaseName=acme.cms.ResourceBundle
acme.NamespaceMapping.atom=http://www.w3.org/2005/Atom
• Define name, DDC Plugin ID
and Localization information
Watson Customer Engagement15
Understanding List-rendering Profiles
• Define name, DDC Plugin ID
and Localization information
• Define the list item selection
statement
acme.Name=acme.cms.xml
acme.BeanListProviderID=ibm.portal.ddc.xml
acme.ResourceBundleBaseName=acme.cms.ResourceBundle
acme.NamespaceMapping.atom=http://www.w3.org/2005/Atom
acme.ListItemSelection=<selection statement>
Watson Customer Engagement16
Understanding List-rendering Profiles
• Define name, DDC Plugin ID
and Localization information
• Define the list item selection
statement
• Enumerate the attributes of
the items in the list
• Define item attribute value
selection statements
acme.Name=acme.cms.xml
acme.BeanListProviderID=ibm.portal.ddc.xml
acme.ResourceBundleBaseName=acme.cms.ResourceBundle
acme.NamespaceMapping.atom=http://www.w3.org/2005/Atom
acme.ListItemSelection=<selection statement>
acme.ItemAttribute.id=<selection statement>
acme.ItemAttribute.title=<selection statement>
acme.ItemAttribute.summary=<selection statement>
acme.ItemAttribute.authorName=<selection statement>
Watson Customer Engagement17
Understanding List-rendering Profiles
• Define name, DDC Plugin ID
and Localization information
• Define the list item selection
statement
• Enumerate the attributes of
the items in the list
• Define item attribute value
selection statements
• Enumerate the properties of
the list
• Define list property value
selection statements
acme.Name=acme.cms.xml
acme.BeanListProviderID=ibm.portal.ddc.xml
acme.ResourceBundleBaseName=acme.cms.ResourceBundle
acme.NamespaceMapping.atom=http://www.w3.org/2005/Atom
acme.ListItemSelection=<selection statement>
acme.ItemAttribute.id=<selection statement>
acme.ItemAttribute.title=<selection statement>
acme.ItemAttribute.summary=<selection statement>
acme.ItemAttribute.authorName=<selection statement>
acme.ListProperty.title=<selection statement>
acme.ListProperty.updated=<selection statement>
Watson Customer Engagement18
Defining the List Item Selection for JSON data
Watson Customer Engagement19
Defining the List Item Selection for XML data
Watson Customer Engagement20
Working with List-rendering Profiles in Web Content Authoring
Watson Customer Engagement
• Extract data from a related source with AssociatedItemAttributesxyz.ItemAttribute.detailsLink=entry.link[rel=details]
xyz.AssociatedItemAttribute.productFullDescription={$detailsLink}details.description
• Determine attributes values via Java code with ComputedItemAttributesxyz.ComputedItemAttribute.dynamicLink={$default}
xyz.ComputedItemAttribute.canCreateNewEntry={$lazy}
• Combine item attribute values with ConstructedItemAttributesxyz.ItemAttribute.imageLocation=entry.image.location
xyz.ItemAttribute.imageFileName=entry.image.name
xyz.ConstructedItemAttribute.imageURL={$imageLocation}/{$imageName}
• All 3 types are also available for List Properties
21
Advanced List-rendering Profile Concepts
Watson Customer Engagement
• Type, Format, and FormatLocale metadata keys:
xyz.ItemAttribute.updated=entry.updated
xyz.ItemAttribute.updated.Type=Date
xyz.ItemAttribute.updated.Format=yyyy-MM-dd'T'HH:mm:ss.SSS'Z'
xyz.ItemAttribute.updated.FormatLocale=de
• Default and ShowInAuthoringUI metadata keys:
xyz.ItemAttribute.fileSize=entry.size
xyz.ItemAttribute.fileSize.Default=0
xyz.ItemAttribute.fileSize.ShowInAuthoringUI=false
• Depends metadata key:
xyz.ComputedItemAttribute.link={$default}
xyz.ComputedItemAttribute.proxiedLink={$default}
xyz.ComputedItemAttribute.proxiedLink.Depends=link
22
Advanced List-rendering Profile Concepts
Watson Customer Engagement
• Escape metadata key:
xyz.ItemAttribute.tags=entry.tags
xyz.ItemAttribute.tags.Escape=json
• Shared metadata key for AssociatedItemAttributes:
xyz.ItemAttribute.detailsLink=entry.link[rel=details]
xyz.AssociatedItemAttribute.productFullDescription={$detailsLink}details.description
xyz.AssociatedItemAttribute.productFullDescription.Shared=true
• Processors metadata key to plug your custom AttributeValueProcessor:
xyz.ItemAttribute.author=entry.author
xyz.ItemAttribute.author.Processors=com.ibm.TransformAuthorToPersonCardLinkProcessor
23
Advanced List-rendering Profile Concepts
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
24
Agenda
Watson Customer Engagement25
Establishing the List-rendering Context
WCM Presentation Template
DDC Connector Content Item
Watson Customer Engagement26
Referencing the List Design Component
WCM Presentation Template
DDC Connector Content Item
Watson Customer Engagement27
Accessing List Properties and Item Attributes
DDC Connector Content Item
WCM Personalization Component
Watson Customer Engagement28
Rendering the Bean List
WCM Personalization Component
Watson Customer Engagement29
Creating a dynamic List-rendering Context using Render Parameters
List for dynamic
sorting criteriaTheme menus
setting filters
Portlet setting the
data sources
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
30
Agenda
Watson Customer Engagement31
Understanding custom DDC Plugin Implementation Patterns
WebSphere Portal and Web Content Manager JSON/XML
DDC JSON /XML
Plugin
Generic List
Structure
Markup
Custom DDC
Plugin WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Use a DDC plugin delegation pattern to...
• Compute the source URL dynamically
• Add computed item attributes and list properties
• Tweak the bean lists generated by the generic DDC plugins
DDC
Profile
Watson Customer Engagement32
Understanding custom DDC Plugin Implementation Patterns
WebSphere Portal and Web Content Manager
Any
Format
Generic List
Structure
Markup
Custom DDC
Plugin
WCM Presentation
Template
WebContentViewerPortlet
Portal Page
Use a custom DDC plugin to...
• Integrate arbitrary data from arbitrary sources
• Have full control over the bean list creation process
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
33
Agenda
Watson Customer Engagement34
Implementing Write Operations with the DDC Plug-in for XML
WebSphere Portal and Web Content Manager
XMLDDC XML
Plugin
DDC
Profile
WebContentViewerPortlet
Portal Page
XML
Use the generic DDC XML data sink to...
Implement operations targeting XML-based remote APIs:
• Create HTML forms to PUT, POST, and DELETE XML documents
• Use list-rendering profiles to create the payload XML documents
Watson Customer Engagement35
Implementing HTML Forms for Write Operations
<form id="..."
method="POST" enctype="multipart/form-data"
action="[Plugin:ActionURL copyCurrentParams="true"
param="resultSessionAttribute=myResult" compute="always"]">
<input type="hidden" name="_charset_" value="[Plugin:EvaluateEL
value="${pageContext.response.characterEncoding}" compute="once"]"/>
<input type="hidden" name="action.uri"
value="target_data_sink_URI"/>
<input type="submit" value="Submit" name="submitButton"/>
</form>
Data sink parameters
Watson Customer Engagement36
Implementing HTML Forms for Write Operations
<form id="..."
method="POST" enctype="multipart/form-data"
action="[Plugin:ActionURL copyCurrentParams="true"
param="resultSessionAttribute=myResult" compute="always"]">
<input type="hidden" name="_charset_" value="[Plugin:EvaluateEL
value="${pageContext.response.characterEncoding}" compute="once"]"/>
<input type="hidden" name="action.uri"
value="target_data_sink_URI"/>
<input type="submit" value="Submit" name="submitButton"/>
</form>
Data sink parameters
Specifies to post
multipart form data
Watson Customer Engagement37
Implementing HTML Forms for Write Operations
<form id="..."
method="POST" enctype="multipart/form-data"
action="[Plugin:ActionURL copyCurrentParams="true"
param="resultSessionAttribute=myResult" compute="always"]">
<input type="hidden" name="_charset_" value="[Plugin:EvaluateEL
value="${pageContext.response.characterEncoding}" compute="once"]"/>
<input type="hidden" name="action.uri"
value="target_data_sink_URI"/>
<input type="submit" value="Submit" name="submitButton"/>
</form>
Data sink parameters
Sends this form to the
Web Content Viewer
Watson Customer Engagement38
Implementing HTML Forms for Write Operations
<form id="..."
method="POST" enctype="multipart/form-data"
action="[Plugin:ActionURL copyCurrentParams="true"
param="resultSessionAttribute=myResult" compute="always"]">
<input type="hidden" name="_charset_" value="[Plugin:EvaluateEL
value="${pageContext.response.characterEncoding}" compute="once"]"/>
<input type="hidden" name="action.uri"
value="target_data_sink_URI"/>
<input type="submit" value="Submit" name="submitButton"/>
</form>
Makes the result available
in the portlet session
Data sink parameters
Watson Customer Engagement39
Implementing HTML Forms for Write Operations
<form id="..."
method="POST" enctype="multipart/form-data"
action="[Plugin:ActionURL copyCurrentParams="true"
param="resultSessionAttribute=myResult" compute="always"]">
<input type="hidden" name="_charset_" value="[Plugin:EvaluateEL
value="${pageContext.response.characterEncoding}" compute="once"]"/>
<input type="hidden" name="action.uri"
value="target_data_sink_URI"/>
<input type="submit" value="Submit" name="submitButton"/>
</form>
1st parameter defines
the form data charset
It is set to the page
character encoding
Data sink parameters
Watson Customer Engagement40
Addressing the Generic DDC XML Data Sink
<form id="..."
method="POST" enctype="multipart/form-data"
action="[Plugin:ActionURL copyCurrentParams="true"
param="resultSessionAttribute=myResult" compute="always"]">
<input type="hidden" name="_charset_" value="[Plugin:EvaluateEL
value="${pageContext.response.characterEncoding}" compute="once"]"/>
<input type="hidden" name="action.uri"
value="ddc:operation:blp:ibm.portal.ddc.xml"/>
<input type="submit" value="Submit" name="submitButton"/>
</form>
2nd parameter specifies
the target data sink that
receives the form data
For example the
DDC XML data sink
Data sink parameters
Watson Customer Engagement41
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Watson Customer Engagement42
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Specifies the template
document to be posted
Watson Customer Engagement43
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Specifies the list-rendering profile
for the template document
Watson Customer Engagement44
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Specifies the operation:
“set” item attribute “body”
Watson Customer Engagement45
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Specifies value for the
item attribute to set
Watson Customer Engagement46
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Specifies target URI for
the transformed template
document
Watson Customer Engagement47
Addressing the Generic DDC XML Data Sink
<input type="hidden" name="ddc.uri.template"
value="wcmrest:LibraryHTMLComponent/[Component
name="yourLibrary/interaction templates/create comment" format="id"]"/>
<input type="hidden" name="ddc.profile.in"
value="ibm.portal.sr.blogs.post.comments"/>
<input type="hidden"
name="ddc.itemattribute.operation.addComment"
value="action=set,itemAttributeName=body"/>
<textarea title="Content"
name="ddc.itemattribute.value.addComment"
placeholder=" "></textarea>
<input type="hidden" name="ddc.uri.target"
value="[AttributeResource attributeName="rawCommentsEditLink"]"/>
<input type="hidden" name="ddc.method" value="post"/>
Specifies HTTP method
for the target URI
Watson Customer Engagement
• Introducing the Digital Data Connector
• Introducing the generic DDC Plug-ins
• Understanding List-rendering Profiles
• Rendering List Properties and Item Attributes
• Implementing custom DDC Plugin-ins
• Implementing User Interactions
• Demo
48
Agenda
Watson Customer Engagement49
Enjoying the Digital Data Connector
Watson Customer Engagement
Vielen Dank!
Was Sie auch interessieren könnte:
• Lernen Sie Docker und entdecken
Sie IBM Digital Experience ...
• DX + Customer Engagement
Showcase
Matthias Falkenberg
Team Leader – IBM DX Development50
Top Related