This is the session me and Giancarlo Giannini gave at Social Connections 15

1. Copyright © 2019 HCL Technologies Limited | www.hcltechsw.com
What’s HCL Digital
Experience
&
How to Integrate it
with
HCL Connections

2. 2

3. Roberto Boccadoro
ELD Engineering
Sr. Consultant and Partner
Giancarlo Giannini
HCL
EMEA Digital Solutions Product Advocate

4. A Digital Experience Solution … Today
• Building a Digital Experience Solution is much more than creating an
attractive front-end experience
• Consumers’ expectations are shaped by
their best experiences across industries
• Enterprises must relate with a multi-faceted
& multi-stakeholder audiences in different
dynamic contexts that change over time
It means redefining how you do business across the value chain of your
key stakeholders through a new ⇢ Digital-First Strategy

5. Pursuing a Digital-First Strategy allows for …
Rapidly adapt and
improve
experiences for all
stakeholders
(customers, employees,
partners)
Innovate and reinvent
new business models
Re-imagine
operational processes

6. Digital-First Strategy : Key Requirements
Experiences that blend content,
apps and business processes
Navigating sensitive security and
compliance requirements
Managing multi-brand, multi-
market or multi-lingual
experiences
Delivering a consistent experience for
all stakeholders across multiple
touchpoints
Ensuring mission critical
experiences never fail
Personalizing experiences based
on behavior, role or segment

7. HCL Digital Experience – What is?
• HCL Digital Experience is a platform that
offers modern, flexible tools & technologies
to deliver a Digital Experience that provides
users with:
• a single point of personalized access to the
applications, services, information and social
contents …
• … always according with their needs and the
context in which they operate

8. HCL’s Digital Experience Platform Spans Across
All Use Cases
Marketing /
Content Sites
Online Stores &
Transactions
Self-Service Partners /
Agents
Social Intranet
Deliver great online brand
experiences
Build loyalty with relevant,
personal online self-service
Support partners with
integrated online self-
service
Empower staff with
relevant, personal online
self-service
Attract and convert with
great content
Claro Peru,
Primerica
Tracfone,
Soccer.com
State Bank of India,
HP, Cigna,
Goteborg
Pacific Life,
Bombardier
Federal Bank,
Cemex, Goteborg
HCL Digital Experience Platform

9. HCL Digital Experience – What does it provide?
• HCL Digital Experience simplifies complexity
9
Digital Experience offers industry-leading functionality Digital Experience leads with superior technology
Single
Platform
Highly
Customizable
Role Based
Experiences
Blend
Content,
Applications
& Business
Processes
Scalable
Performance
Flexible
Deployment
Model
Enterprise-Grade
Security
Modern
Architecture

10. Benefits of the HCL Digital Experience Platform
Accelerate
time to market
Faster ROI
Performance at
scale
Lower Total
Cost of
Ownership

11. DX Investment Themes & Upcoming Releases
Empower
users
Reduce
TCO
Increase
agility
• Media management (DAM)
• New user interfaces
• Kubernetes
• Microservices enablement
• APIs developers love
• Kubernetes
Feedback/Market/Technology Driving the HCL DX Strategy
Share your ideas about new capabilities ⇢ https://hclsw-dx.ideas.aha.io/

12. HCL Digital Experience Components
integrate applications,
services and content with
role based access
PLATFORM
build publish and update
personalized pages and
sites with visual editing
SITES
create, manage and
publish responsive
content to any channel
CONTENT
Full-featured digital experience capabilities
integrate applications,
services and content with
role based access
PLATFORM
build publish and update
personalized pages and
sites with visual editing
SITES
create, manage and
publish responsive
content to any channel
CONTENT
Infusing AI everywhere to increase Customer Experience
create sophisticated
multi-channel web
forms applications
FORMS

13. HCL DX – Platform
• It’s the basic framework to provide single
point of role-based access and rich user
experience that enable organizations to:
• Create, manage and deploy multiple digital sites
• Manage their digital brand
• Provides tools for intuitive page assembly,
dynamic navigation, and extensible design by
exploiting a componentization pattern
• Secures access to resources
• Offers:
• Standards-based functionality & Foundation
Services to support deep integration with any
external application

14. HCL DX – Page & Site Management Tools
Site Manager
• Business user tool for an integrated page &
content view of the Site
• Tools for Creating, Managing and Configure
the Site Structure based on Page Templates
Site Builder
• Tool for creating and work with Site &
Section Templates
• Business Users can use existing
templates or they can create, change, as
well as distribute templates

15. HCL DX – Page & Site Management Tools
Site Toolbar
• Select the Content/Application
component
• Drag&Drop it into the page place holders
• Update and reconfigure as needed
In-line Content Targeting
• Hide Content for certain user segments
• E.g. create rule that only shows content to mobile users
• Show specific Content under defined Contexts
• E.g. create rule that shows smaller or different image to mobile
users
• E.g. Show different promotions during the year

16. HCL DX – Personalization & Targeting
• Different types of solutions:
• With different levels of efficiency & different implementation and usability
scenarios that you can mix&match according with the business requirements
TARGET
Contextual &
Real Time
Personalization
2
External
Marketing & Analytics
Engines
Integration with:
- Customer Experience Analytics
- Marketing Platform
- External Segmentation Engines
1
Personalization
Engine
PZN Rule Engine allows to create different
types of business rules: Profile, Select, Bind,
Visibility
PZN Application Object allows for integrating
external Resources & Rule Engines
Security &
Authorization
DX provides pervasive security
authorization features on all the resources:
pages, portlets, content, component and
more …
0
AI

17. HCL DX – Content Management
• Allows business users of all skill levels to create
and publish content
• Enables rapid development of sites through
reusable, out of the box components and
templates
• Separates content from presentation allowing
authors to create content independently from
the channel and how they will be rendered
• Manage content through Workflow and Project
• Improves customer experiences through
dynamic content delivery and a high level of
personalization to the web user
... But is also an integration tool !!!
End-to-End Web Content Management Solution

18. HCL DX – Textbox.io
The goals for Textbox.io:
• Create the best user experience
• Introduce advanced features
• No Java dependency – Java Script
• Seamless interoperability with MS products
• Standard, clean HTML generation across
platforms
• Easy deployment
• Modern, clean, uncluttered look and feel
• Mobile ready from day 1- fully responsive
design Make editing a breeze on any screen
The ‘Next Generation’ Online Rich Text Editor

19. HCL DX – Mobile & Multi-Channel
Responsive pages and content automatically adapt to the
device you are using from a single source, showing the
right formatting and navigation for the right experience
The pervasive concept of “Device Class” as
abstraction for common properties for
the device, allows for managing and
controlling the digital experience behavior
based on the user device

20. HCL – Leap ⇢ Creating Forms Application
• Designing forms is easy
• Pure WEB WYSIWYG tool
• Create dynamic web and mobile
friendly forms
• Collect, access and analyze data
• RESTfull solution
Drag widgets onto the canvas
Set their properties
Lets non-technical users (and
technical users too!) create
sophisticated web applications for
…
Collecting
Information
Tracking &
Updating
Information
Automate
Process
Reporting
& Analysis
Capabilities that make
Leap outstanding
Integrate with other
systems
Automate process
Access to and management
of your data and resources
Control over behavior, look
and extensibility
APIREST

21. HCL DX – Integration Capabilities
HCL
DX
Marketing
Insights
Commerce
Service
Advertising
Social
Each organization will have its own mix
of ecosystems (e.g. products)
And each ecosystem has their own
vantage point, specificity and strengths
HCL DX “glues” this nicely together
A Digital Experience Platform must integrate with all the ecosystems that
support the customer life cycle

22. The modern web development landscape
• The world of Web Development and Design has been advancing
rapidly and Web Development and JavaScript skills are the most
widely available skills today
• JavaScript frameworks and libraries are quickly evolving and improving
• Angular, React, Bootstrap, and many others provide rich capabilities that let developers
focus on application functionality
• Continuous Integration & Delivery tools and practices enable more frequent
release cycles with much less manual work
• Powerful development, build, and test tools such as Node-based tools give developers
and designers big boosts in productivity
• The integration patterns and application openness are increasingly based on
the use of REST APIs

23. HCL DX - HTTP Outbound Connection Service
Single Reverse Proxy
WAB
SFP
(SS Mode)
SFP.
(CS Mode)
Custom
Portlet
HTTP Outbound
Integration:
API, Servlet
Configuration:
WAB Manager UI
Owner:
WAB team
Ajax Proxy team
Features:
Sun Java engine,
Trust generation,
Trust Association,
SPNEGO,
Plug-in support,
User Impersonation,
HTTPS Tunneling
Services:
WAB Manager UI as Connection Manager
Host + Policy = Application
Connections as a PortletService
Connection Picker Component
Improved admin UI
Consistent & controlled accesses across all outbound connections
Browser
Digital
Experience
HTTP
Outbound
ExternalWeb
Application• To overcome CORS, HCL DX provides
a central point of administration for
all the outbound HTTP connections
• Support for authentication and cookie
handling
• Ajax Proxy

24. Both based
on WCM
This is where WCM acts as
Integration Tool !!!
HCL DX – Integration Tools Landscape
• Extended support for both “traditional” Java development and the
new development tools landscape (Web Developer focus)
• Traditional Approach
• Java based Coding (IDE : RAD, WEF)
• Robust, Quality of Service, certified
• Supporting Industry Standards (JEE, JSR286, Web Services, ...)
• Agile Approach
• Created and added on the fly by line of business (authoring)
• No-Code Deployment approach
• Digital Data Connector (DDC)
• Script Application

25. Digital Data Connector

26. What’s Digital Data Connector
• Digital Data Connector (→ DDC) is a Public & Open Framework to
integrate data from External Data Sources
• External Data Sources :
• More often → any external application that expose its own data in a XML or JSON
format (→ normally, as typical result of a Rest API call)
• For example:
• You can use DDC to render social data that you have on your HCL Connections server or on other
social platforms in the context of your portal pages
• You can point to other data sources like: news feeds, BPM task lists, Commerce product catalog, etc.
• In this specific case, XML or JSON are recognized as a powerful way to describe a data structure
• This power is the higher the more you are aware of the meaning of each element in the structure
and of how you can identify and use it
• In general → any arbitrary source of data you can “address” and “work with”,
through coding, to extract & retrieve data and “translate” them into reusable
information

27. DDC – High-Level Overview
HCL Digital Experience HCL Connections
Commerce
ERP Systems
Domino
External Search Engines
BPM (task list)
Any Custom Feed
Write data to Remote Services
data
Read & Visualize Remote Data
markup
XML
JSON
HCL Digital ExperienceMarkup
Web
Content
Viewer
Portlet
Portal Page
WCM
Presentation
Template
& Components
DDC
XML
Plugin
Generic Bean List
Data Structure
WCM
Content
item
List-Rendering
Profile
External Systems
REST API
The portlet is a WCM Content
Viewer Portlet
It works with a WCM Content
items

28. How you do work with DDC
• With Digital Data Connector, you will work with a WCM
Content Items to "describe”:
• which data to include
• … & maybe filter them
• how to manage the presentation by choosing between
different List Appearance components

29. Key Benefits of the DDC Approach
• In many cases, integrations built on DDC → do NOT require any Java coding skills
nor code deployment activity
• WCM Designers have full control over Presentation and you can display any external
data on any device, with a consistent look managed using WCM
• You can use all the WCM management facilities for managing your external data integration
• These facilities include content syndication, versioning, projects, workflow, preview and targeting
• Basically, you can manage the external data integration in the same way as your other WCM content
Web Content Management
News
Articles
Presentation
Title
Summary
Body
Picture
Data
Title
Summary
Body
Picture
ATOM,
RSS,
XML,
JSON
Digital Data Connector
Data
Name
Body
Price
Picture
Presentation
Name
Body
Price
Picture
List of
Products
External Systems
REST
API

30. Typical Use Cases & Samples for DDC
DDC Sample for WebSphere Commerce Feeds Atom & RSS

31.  HCL DX product feature
 Set of ready-to-use components for the
different Connections applications:
 Blog, Wiki, Files, Profiles,
Communities, etc.
 Implemented using a custom Social
Rendering DDC Plugin
 Additional computed attributes
contributed by Social Rendering DDC
plugin
 Delegating XML processing & loading
to the generic XML DDC plugin
 Fully Responsive web design
Typical Use Cases & Samples for DDC
HCL Social Rendering

32. HCL Social Rendering for
DDC – Samples

33. Script Application

34. Why script-based applications for HCL DX
• Web programming skills – using HTML/JS/CSS – are very prevalent and widely
available
• Many JavaScript libraries and frameworks are available and widely known
• Angular, React, Bootstrap, and many others provide rich capabilities that let developers
focus on application functionality
• Powerful development, build, and test tools such as Node-based tools give developers and
designers big boosts in productivity
• Continuous delivery tools and practices enable more frequent release cycles with much
less manual work
• Many organizations are moving toward a client-side application architecture
• The application code runs in JS on the client, accessing data via REST services
• A client-side application architecture can have performance and user experience benefits

35. HCL DX – Integration Tools: Script Application
• Web developers build standard web applications
(“Single Page Applications”) that run alongside
other content and applications as part of a
complete Digital Experience site
• Developers use their favorite frameworks:
Angular, React, Vue.js, Bootstrap, etc.
• …and their favorite tools: editors, Node-based
tools such as Bower, grunt/gulp, LESS/Sass
• Applications are stored in WCM
• Use Portlet & Portal features such as targeting,
conditional rendering, Shared Render Parms, Portlet
Preferences, Portal AJAX proxy, Portal Styles, etc.
• No code deployment

36. Creating Script Application in HCL DX
• Build in the browser with the Script
Application Editor
• Used only for very simple applications,
(no Source Code Management support)
• Type or copy/paste into the tabbed editor
• Applications are limited to single HTML,
JavaScript, and CSS elements
• Build on your workstation with your
preferred tools, then use ⇢ “sp push” to
move/upload the application to the server
• Used for any simple or complex applications,
integrated with Source Code Management
• Applications can have any number of files
including JS, images, HTML fragments, etc.

37. Script Application: Test & Staging
• All the HTML/JS/CSS/etc. for Script applications, can be maintained in a source
code repository
• Command line or GUI tools can push files to a development or staging server
• Script applications can be syndicated from staging to production server
Git, SVN,
RTC, etc.
Developer or designer
workstation
Build or integration
system
Source Code
Repository
Push to server
Push to server
with automated tools
Developer Test Portal
WCM or
WebDAV
Staging/Integration Portal Production Portal
WCM or
WebDAV
Syndication
WCM or
WebDAV

38. Key benefits of the Script Application approach
• You can build portlets using skills you can easily hire (JS/HTML/CSS, jQuery, etc.)
• Line of Business is less dependent on central IT - a small team of script
programmers can make new portlets and customizations quickly and easily
• You can build portlets without deploying any new code on the server
• Both the use of the ⇢ Script Application Editor and the ⇢ sp push script command line
result in the creation of a ⇢ WCM content item
• All the features of WCM can be used for managing applications
• Projects and workflow can be used for approval by business and/or IT before applications
go live through Syndication
• Many of HCL Digital Experience’s key value-add features are available​
• Eventing, multi-channel delivery, responsive design, public render parameters, portlet
preferences, etc

39. Configuring the Application through the
Portlet Preferences
• You can use Portlet Preferences to provide application configuration at the
portlet instance level
• Applications can be configured from the browser by business users, page authors, or
administrators
• Preference data is stored as JSON
• A JavaScript helper object has functions to store and retrieve preference data
A “Stock Tracking”
application can be
configured for
which stocks to
show
A “Customer List”
can be configured
for which columns
to display

40. Typical Use Cases & Samples for Script
Applications
• Any type of Single-Page
Applications
• Any JS libraries and frameworks can
be used
• Data is accessed with REST/JSON
services
• Any type of application UI
• Forms, views, charts, etc.
• HCL Connection Services
• According with the available Rest API

41. Integrating HCL DX with HCL Connections
• HCL DX provides different integration paths:
• HCL Social Rendering (⇢ Digital Data Connector)
• Script Applications
• Community Pages
• This integration happens at the DX Page level
• With this integration path you can integrate HCL Communities into a DX site by associating a DX
Page (or a set of DX pages) with a specific Community
• By doing this, all the connection integration portlets in those pages automatically render their content
within the context of the selected community
• The HCL Connections’ Community contributes to set the context of the DX Page
• When using Community Page Templates, you can configure the solution to automatically create
a new Community in Connections, based on the name of the new DX Page.
• Finally, you can "Mix&Match" Community membership and DX authorization model
• Remote Content – create link to Connections files into the RTE
• Social Media Publisher – publish to Connections for WCM
• Federated Tags
• Search