Digital Data Connector - IBM · Digital Data Connector 1. Watson Customer Engagement ... •Built-in support for consuming XML and JSON data ... Creating a dynamic List-rendering

Watson Customer Engagement

20. – 21. Juni 2017

IBM Labor Böblingen

Digital Data Connector

1


• 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


• 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


• 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


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)


Omnifind / Search

BPM (task list)


CMIS

Omnifind / Search

BPM (task list)


Kenexa

CMIS

Omnifind / Search

BPM (task list)


WebSphere Commerce / Sterling Commerce

Kenexa

CMIS

Omnifind / Search

BPM (task list)


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

Twitter

...








• Demo

7

Agenda


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





Plugin

DDC

Profile

Generic List

Structure

WCM Presentation

Template


Portal Page

Markup

(1) Use DDC list-rendering profiles to...

Define the data transformation into a generic list data structure, so-

called bean lists





Plugin

DDC

Profile

Generic List

Structure

WCM Presentation

Template


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





Plugin

DDC

Profile

Generic List

Structure

WCM Presentation

Template


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





Plugin

DDC

Profile

Generic List

Structure

WCM Presentation

Template


Portal Page

Markup

(4) Use the Web Content Viewer portlet to...

Render bean lists in the right context on your portal pages








• Demo

13

Agenda


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





• Define the list item selection

statement





acme.ListItemSelection=<selection statement>






statement

• Enumerate the attributes of

the items in the list

• Define item attribute value

selection statements






acme.ItemAttribute.id=<selection statement>

acme.ItemAttribute.title=<selection statement>

acme.ItemAttribute.summary=<selection statement>

acme.ItemAttribute.authorName=<selection statement>






statement

• Enumerate the attributes of

the items in the list

• Define item attribute value


• Enumerate the properties of

the list

• Define list property value







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>


Defining the List Item Selection for JSON data


Defining the List Item Selection for XML data


Working with List-rendering Profiles in Web Content Authoring


• 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


• 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



• 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









• Demo

24

Agenda


Establishing the List-rendering Context

WCM Presentation Template

DDC Connector Content Item


Referencing the List Design Component

WCM Presentation Template



Accessing List Properties and Item Attributes


WCM Personalization Component


Rendering the Bean List

WCM Personalization Component


Creating a dynamic List-rendering Context using Render Parameters

List for dynamic

sorting criteriaTheme menus

setting filters

Portlet setting the

data sources








• Demo

30

Agenda


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


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


Understanding custom DDC Plugin Implementation Patterns


Any

Format

Generic List

Structure

Markup

Custom DDC

Plugin

WCM Presentation

Template


Portal Page

Use a custom DDC plugin to...

• Integrate arbitrary data from arbitrary sources

• Have full control over the bean list creation process








• Demo

33

Agenda


Implementing Write Operations with the DDC Plug-in for XML


XMLDDC XML

Plugin

DDC

Profile


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


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



<form id="..."









</form>


Specifies to post

multipart form data



<form id="..."









</form>


Sends this form to the

Web Content Viewer



<form id="..."









</form>

Makes the result available

in the portlet session




<form id="..."









</form>

1st parameter defines

the form data charset

It is set to the page

character encoding



Addressing the Generic DDC XML Data Sink

<form id="..."







value="ddc:operation:blp:ibm.portal.ddc.xml"/>


</form>

2nd parameter specifies

the target data sink that

receives the form data

For example the

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

















Specifies the list-rendering profile

for the template document

















Specifies the operation:

“set” item attribute “body”

















Specifies value for the

item attribute to set

















Specifies target URI for

the transformed template

document

















Specifies HTTP method

for the target URI








• Demo

48

Agenda


Enjoying the Digital Data Connector


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

Documents

Digital Data Connector - IBM · Digital Data Connector 1. Watson Customer Engagement ... •Built-in support for consuming XML and JSON data ... Creating a dynamic List-rendering