This document discusses how to integrate widgets into content pages in Jahia. It describes the functional requirements, including allowing users to customize pages by selecting from available widgets. It provides an example of a user customizing their widget area. The implementation section defines mixins and node types needed to support widgets. It describes how to turn components into widgets and create custom widgets. It also covers creating necessary views and administrating widgets. The document concludes by explaining how the widget area configuration is stored for each user.

1. How to integrate widgets in a content page ? 1
Jahia Meet-Up
How to integrate widgets in a content
page

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

3. How to integrate widgets in a content page ? 3
Conception
1

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

5. How to integrate widgets in a content page ? 5
1 Functional Requirement

6. How to integrate widgets in a content page ? 6
1 Functionnal use case
Page
Widget
Area
A user can (in live mode):
- Add widgets
- Remove widgets
- Configure widgets
Page
Main column
Widget
Area
Main column

7. How to integrate widgets in a content page ? 7
1 Integrating widgets : example of a user
customizing his widget area

8. How to integrate widgets in a content page ? 8
DEMO
Demo
2

9. How to integrate widgets in a content page ? 9
Implementation
3

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

11. 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)

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

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

14. 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 functions
The edit and full view icons
become available
If your widgets has edit and full
views JSP implemented

15. How to integrate widgets in a content page ? 15
3 Administrating the widgets
A dedicated admin panel becomes available at site level

16. How to integrate widgets in a content page ? 16
3 Administrating the widgets
Create a site settings template dedicated to widgets administration

17. 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)

18. How to integrate widgets in a content page ? 18
3 Source code
Download the source code from Github:
https://github.com/Jahia/demo-widgets

19. How to integrate widgets in a content page ? 19
THE END!
THANKS FOR LISTENING