integrate widgets into content pages (dx) - developers meetup - october 2016

How to integrate widgets in a content page ? 1

Jahia Meet-UpHow to integrate widgets in a

content page

How to integrate widgets in a content page ? 2

Even if services such as MyYahoo or iGoogle have quietly fallen out of fashion, our customers still sometimes require, usually in the context of an Enterprise Extranet application, users to be able to manage their own personalized page with a catalogue of widgets.

How to integrate widgets in a content page

How to integrate widgets in a content page ? 3

Conception1

How to integrate widgets in a content page ? 4

1 Functional Requirement

• Allow logged in users to customize an area selecting widgets components that they want to display, based on a customized list of available widgets

• Allow widgets to be used in a classic DX page

• Make it simple to use and create custom widgets

How to integrate widgets in a content page ? 5

1 Functional Requirement

How to integrate widgets in a content page ? 6

1 Functionnal use case

Page

WidgetArea

A user can (in live mode):- Add widgets- Remove widgets- Configure widgets

Page

Main column

WidgetArea

Main column

How to integrate widgets in a content page ? 7

1 Integrating widgets : example of a user customizing his widget area

How to integrate widgets in a content page ? 8

DEMO

Demo2

How to integrate widgets in a content page ? 9

Implementation3

How to integrate widgets in a content page ? 10

3 Definitions 1/2

Create a category mixin for you widget components

[jmix:widgetCategory] > jmix:droppableContent, jmix:editorialContent mixin

Create a widget mixin

[jmix:widget] > jmix:widgetCategory mixin

How to integrate widgets in a content page ? 11

3 Definitions 2/2

Create a node definition defining a widget Area

[jnt:customWidgetArea] > jnt:content, jmix:widgetCategory orderable + * (jmix:widget)

How to integrate widgets in a content page ? 12

3 Turning a standard component into a widget

Add the jmix:widget mixin

Examples :

[jnt:historicalChartWidget] > jnt:historicalChart, jmix:widget

[jnt:youtubeFeedWidget] > jnt:youtubeFeed, jmix:widget

[jnt:stockWidget] > jdnt:stockWidget, jmix:widget

How to integrate widgets in a content page ? 13

3 Creating a widget

Add the jmix:widget mixin to your custom widget component

[mynt:myComponentWidget] > mynt:myComponent, jmix:widget

How to integrate widgets in a content page ? 14

3 Creating needed views

On top of adding the jmix:widget mixin to your widget component, some views can be implemented to have all the available features :

- The edit view- The full view

Remove a widget

Move a widget

The move and remove icons are by default available functionsThe edit and full view icons become available

If your widgets has edit and full views JSP implemented

How to integrate widgets in a content page ? 15

3 Administrating the widgets

A dedicated admin panel becomes available at site level

How to integrate widgets in a content page ? 16

3 Administrating the widgets

Create a site settings template dedicated to widgets administration

How to integrate widgets in a content page ? 17

3 storing user personalization of a widget area

The widget area configuration of a user is stored at his profile level, creating a node with the uuid of the related widget area

Config is stored under /users/{user}/contents/widgets path (live ws)

How to integrate widgets in a content page ? 18

3 Source code

Download the source code from Github:

https://github.com/Jahia/demo-widgets

How to integrate widgets in a content page ? 19

THE END!THANKS FOR LISTENING