super widget
DESCRIPTION
In this presentation from dotCMS Boot Camp 2010 you will learn about widgets and how to design them. Includes a step-by-step process of how to build a widget following dotCMS best practices.TRANSCRIPT
![Page 1: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/1.jpg)
Super Widgets… (planning for flexible and reusable
pulls)
Arnaud Romary Maria Bouza
![Page 2: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/2.jpg)
Quick Overview
• Purpose • Common Uses
• Widget vs. ApplicaBon Widget
• Macro Widget: Photo Carrousel
• Super Widget: News LisBng
• QuesBons
![Page 3: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/3.jpg)
Widgets: The Basics
– Purpose: • Minimize redundant code
• Facilitate creaBon of pulls for content editors UI • Permissioning (widgets vs. web page content)
– Common Uses (default widgets)
• Content LisBngs • Detail pages • Random pulls
• Macros UI
![Page 4: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/4.jpg)
Widgets: The Basics cont. – Mechanism:
• Added on any container • Parameters: fields on widget
structure • Widget Code: (VTL widget structure, nested for paginaBon
![Page 5: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/5.jpg)
Types of Widgets – Simple Widgets vs. Custom Widgets
• Simple Widget: forms, detail page, sitemap
• Custom Widget: used for pulls, reusable via parameters
Simple Widget: News Detail Widget: News LisAng
![Page 6: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/6.jpg)
When to create a widget
– Rule of thumb: 1 widget structure per content structure • Default content structures & widgets • Accelerators and addiBonal structures
News Item News LisBng
Widget
Need to Create Content for your
Site?
Need to Pull Content on the Front-‐End?
Structure
Purpose
Uses
• Home Page News • Top Headlines • Topic-‐Specific Latest News
![Page 7: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/7.jpg)
When to create a widget
– Checklist before creaBng a widget • Wireframes as foundaBon for structures
• IdenBficaBon of all dynamic pulls • DefiniBon of parameters
Widget Structures
Wireframes Content Structures
Widgets
What pages are displaying
profiles
What fields make up a profile
(required vs. opBonal)
Which parameters give flexibility to fit all pages
Example: Employment Profile
Create the pulls for pages
displaying profiles
![Page 8: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/8.jpg)
Example 1: News LisBng Widget Structure
– Overview • Uses and versaBlity • Default widget structure
– Fields • General • Forma[ng
• Detail page URL • Custom message when 0 results
• Filters
![Page 9: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/9.jpg)
Example 2: Photo Carrousel
• Overview • Leveraging macro vs. VTL
• Not Bed to a content structure
• Basic fields • Macro parameters
• PotenBal addiBonal fields
• Working example
![Page 10: Super widget](https://reader038.vdocuments.mx/reader038/viewer/2022102710/545c88deb1af9f460a8b4786/html5/thumbnails/10.jpg)
Recap
• Purpose and advantages of using widgets • Common uses for widgets
• Differences between simple and custom widget structures
• Super Widget: News LisBng
• Macro Widget: Photo Carrousel