Super  Widgets…  (planning  for  flexible  and  reusable  

pulls)  

Arnaud  Romary  Maria  Bouza  

Quick  Overview  

•  Purpose  •  Common  Uses  

•  Widget  vs.  ApplicaBon  Widget  

•  Macro  Widget:  Photo  Carrousel  

•  Super  Widget:  News  LisBng  

•  QuesBons  

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  

Widgets:  The  Basics  cont.  – Mechanism:    

•  Added  on  any  container  •  Parameters:  fields  on  widget  

       structure  • Widget  Code:  (VTL  widget  structure,  nested  for  paginaBon  

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  

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  

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  

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  

Example  2:  Photo  Carrousel    

•  Overview  •  Leveraging  macro  vs.  VTL  

•  Not  Bed  to  a  content  structure  

•  Basic  fields  •  Macro  parameters  

•  PotenBal  addiBonal  fields  

•  Working  example  

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