1. A Modern Approach to Mobile Friendly
Widget Development in CQ
Andy Czerwinski
British Gas
Deepan Aiyasamy
Cognizant Technology
Solutions

2. 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

3. 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

4. Components & Widgets in CQ

5. Widget essentials
Data Presentation
Behaviour
Communication

6. Frameworks

7. Presentation
•Merge adaptive presentation and author generated content by
generating underscore templates dynamically on the server
•Dependency management using clientlibs

8. 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

9. Communication
•Event based communication model for interaction with other
widgets
Appointment_slot_selected
Filter_enabled
Refresh_appointment_slots

10. Data
Client-side API Gateway
Get
Subscribe
Get Restful
/data
Get SOAP Response XML
Response
JSON
Populate
Model
Retrieve
Model

11. Live Demo

12. Thank You