building a utilities portal with magnolia 5 & sap

Building a utilities portal with Magnolia 5 and SAPMagnolia Conference 2014

Matteo Pelucco, Senior Software Engineer

Basel, 26th June 2014

2

Digital Technology with Emotion

3

Tinext integrated offer

4

199545+

650+

2 mio 800+

22

3000+ 24x7x365

Our first web project

Employees

Hosted websites

web pages clientsWe are in Switzerland and Italy

Datacenters

Managed mailboxes

Guaranteedassistance

Physical servers

Realized projects

160+

1500+

Facts and figures

5

About Tinext

Tinext combines the latest digital marketing expertise together

with the deep technical understanding of a seasoned

enterprise systems integrator. The end results are solid

enterprise web solutions that transform our clients’

businesses.

Since 2001, our teams have conceived, delivered, deployed and maintained more

than 500 successful projects, with clients including Al Arabiya News Channel, Royal

Caribbean International, Whirlpool Europe, City of Lausanne, Generali Group and

Swiss national broadcasters RSI.

With a comprehensive range of digital services delivered through our three core

practices, Tinext can deliver complete projects or flexible services working in

combination with other providers.

6

Clients

7

Matteo Pelucco, Senior Software Engineer

@matteopelucco

8

Aziende Industriali di Lugano (AIL)

CompanyPublic Utility companyProduces electricity & water. Imports gas.Retails electricity, gas & water in Ticino.

ProjectCMS Replacement: Magnolia100k potential users23 business processes to buildSensitive data

9

Open Suite Approach

www.royalcaribbean.it

25 Business Processes to model

Add a new contract

View billing documents

Communicate meter readings

View technical data

..and many more..

Each of them interacts with SAP in a different way (few common patterns)

Standard form builder was not enough!

Change user data

Just an example: what stakeholders think

Just an example: how things really are

13

USE YOUR HP!

Form builder reloaded

Standard Form Builder has been extended, several new features has been introduced:

• SAP-aware validators

• Multistep navigation bar

• Step Validators

• Scriptable default values for input (eval)

• Final summary step

• Dynamic mail processors

• Everything responsive!

A business process site tree

A business process interface bp#17: change payment method

Step validators

New form field types

Responsive multistep navigation

Responsive contextual help (STK)

y

y

Standard STK Components (stkLinkList, stkInternalLink)

Standard STK Components (stkTextImage)

Unobtrusive approach:

$(".ctx-menu-content").load (

$(this).attr("href") + " #mainArea .titleTextButton"

);

21

SAP INTEGRATION

Legacy SAP integration

Do you remember? We are moving an existing (live!) project, already on SAP.

Legacy SOAP-based SAP integration layer

Refactoring not in project scope!

No documentationOnly WSDL

jUnit as reverse engineering tool

Tests to reverse engineer SOAP layerJava WS client: built with jax-ws, filled with jUnit test cases.

Magnolia 5 IoC allowed our team to mock all the remote functionalities, without blocking front-end developers.

SAP URLs in magnolia.properties file No risk of accessing the wrong SAP environment.

jUnit as reverse engineering tool

Each jUnit test decomposed in FormProcessor and/or FormStepValidator

Quick debugging: just change few properties and launch the test

jUnit as reverse engineering tool

AbstractTest.java

LoginTest.java

ChangeUsernameTest.java

SendMeterReadingsTest.java

…

Flow simulation, real SAP calls, asserts,utilities tuning, …

Common methods / utilities

Prepares a «logged» context,@before method

26

DMS INTEGRATION: ALFRESCO

Legacy Alfresco DMS

Customer communications were stored in Alfresco (v. 2.x!)

SAP ask Alfresco to generate PDF, and to serve them to customers

Need to hide real Alfresco URLs..

Alfresco API

Used standard Alfresco API to download documents

A dedicated Magnolia «DocumentDownloadServlet» transparently proxies the document download request for a logged user, applying a security layer on top of it.

Alfresco API

User Document Archive

Search is performed

against SAP

Download links to

Alfresco PDFs

via Magnolia

servlet

yy

Authentication and authorization

Users are in SAP

No ACLs: everything is data-driven

Rules not applicable on a hierarchical resource tree

Page renderer

Page protection (for each page)

Security layer exposed to freemarkerconditional presentation layer statements user interface personalization

Agile: easy to test and debug[#if …] normal flow [#else] exception [/#if]

User Login

Freemarker Custom Util

Freemarker Security Statements

Conclusions

Magnolia «open suite approach» easily allows to «plug» your integration activity• So many «injection points»• Reliable: integration patterns

Form Builder is very powerful and customizable

Mock activity is foundamental in projects like this.

Magnolia IoC helps the project lifecycle and team work

User data security always on top of feature set

Future Improvements

Simplify Form building activity Now it is for superusersToo many Magnolia green bars, even for short forms

SAP represents a single point of failureExpose SAP data to a «look-aside» repository, periodically refreshed. This will allow also horizontal scaling..

Heavy usage of Http SessionNo cacheProvide a way to communicate between a form step and another

No single-page appForm builder should be exposed also to JS frameworks (Backbone, Angular..) for a better user experience and performance.

38

SVN Sync (app)Allows automatic synchronization of a SVN repository to Magnolia webapp (filesystem)

Bootstrap tasksClone Magnolia standard security, create pages, utilities

Java UtilsHTTP helpers, Calendar, Captcha, Text, Collections, Magnolia, ..

Freemarker UtilsCalendar, Text, Magnolia, STK shortcuts, …

Page Builder APIAllow to create pages simulating user interactions

CaptchaIntegration with Tinext Captcha System

NECTAR: A NEW TINEXT MODULE

That’s CE!

Choose a project

(yes, you can configure multiple

projects!)

SVN Sync will load your SVN

repository..

y

Nectar: SVN Sync App

Start file

copy

Check project config (path, remote source..)y

y

Nectar: SVN Sync App

Progress bar

Visual feedback

y

y

Nectar: SVN Sync App

42

Nectar: SVN Sync App

Demo time!y

Thank you for your attention.

Tinext SA

Viale Serfontana 7

6834 Morbio

Inferiore

Switzerland

+41 91 612 22 66

info@tinext.com

www.tinext.com

Tinext Italia Srl

Via Borghi 8

21013 Gallarate

Italy

+39 0331 667

747