A Modern Approach to Mobile Friendly Widget Development in CQAndy CzerwinskiBritish Gas

Deepan AiyasamyCognizant Technology Solutions

Potted History of CQ in britishgas.co.uk

•Using CQ 5.4•Implemented initial phase of development in 2011•Hosts 600+ static content pages•80+ “functional” journeys/pages•White labelled sites include www.sainsburysenergy.com and www.mobileenergy.co.uk •Completed a responsive retrofit in 2013•Can’t migrate to new versions due to CQ CRX now an OSGi bundle

Widgets

•“In computing, a web widget is a software widget for the web. It's a small application with limited functionality that can be installed and executed within a web page by an end user. A widget has the role of a transient or auxiliary application, meaning that it just occupies a portion of a webpage and does something useful with information fetched from other websites and displayed in place.” – Wikipedia

•"a piece of software that is used on a page of a website to give the user changing information of a particular type in a small area of the computer screen" - Cambridge dictionary

Components & Widgets in CQ

Widget essentials

Data Presentation

BehaviourCommunication

Frameworks

Presentation

•Merge adaptive presentation and author generated content by generating underscore templates dynamically on the server

•Dependency management using clientlibs

Behaviour

•Encapsulated into the jQuery widget specification providing organization, lifecycle and instance management capabilities

•Self contained and highly reusable

•Lends itself naturally to communication with RESTful APIs

Communication

•Event based communication model for interaction with other widgets

Appointment_slot_selected

Filter_enabled

Refresh_appointment_slots

Data

Client-side

API Gateway

Get

SubscribeGet Restful/data Get SOAP Response XML

ResponseJSON

PopulateModel

Retrieve Model

Live Demo

Thank You