Upload
jahia-solutions-group
View
157
Download
0
Embed Size (px)
Citation preview
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