Of course, the whole point of widgets is that they’re meant as a method of code-
less block adding. While it’s good toknow
you can edit the widget directives
directly, something more is needed if this feature is going to fulfill its promise.
In your widget config, add a
<parameters/>node as defined below.
<! - - # F i l e : a p p / c o d e / l o c a l / N o f r i l l s / B o o k l a y o u t / e t c / w i d g e t . x m l - - >
< widgets >
< n o f r i l l s _ l a y o u t b o o k _ y o u t u b e t y p e = " n o f r i l l s _ b o o k l a y o u t / y o u t u b e " > < name > Y o u T u b e E x a m p l e Widget </ name >
< d e s c r i p t i o n t y p e = " d e s c " >
</ d e s c r i p t i o n > <! - - S T A R T new s e c t i o n - - > < p a r a m e t e r s > < v i d e o _ i d > < r e q u i r e d >1 </ r e q u i r e d > < visible >1 </ visible >
< value > E n t e r ID Here </ value > < label > Y o u T u b e V i d e o ID </ label > < type > text </ type >
</ v i d e o _ i d > </ p a r a m e t e r s >
<! - - END new s e c t i o n - - > </ n o f r i l l s _ l a y o u t b o o k _ y o u t u b e > </ widgets >
Clear your cache, and then click on the
Insert Widget
button again. Select
your widget from the drop-down, and you will now see a UI for entering a video
ID, (seeFigure 7.3)
Figure 7.3
Enter an ID (we recommend
qYkbTyHXwbsto keep with the theme) and click
onInsert Widget. The following directive code should be inserted into the
content area.
{{ w i d g e t t y p e = " n o f r i l l s _ b o o k l a y o u t / y o u t u b e " v i d e o _ i d = " q Y k b T y H X w b s " }}
Easy as that, you now have a widget for inserting any YouTube video into any
page. Let’s take a look at the XML we added to our widget config
< p a r a m e t e r s > < v i d e o _ i d >
< r e q u i r e d >1 </ r e q u i r e d > < visible >1 </ visible >
< label > Y o u T u b e V i d e o ID </ label > < type > text </ type >
</ v i d e o _ i d > </ p a r a m e t e r s >
This node will
formally
add data parameters to our widget, and allow us to
specify a field type for data entry. The
<video id>tag heredoes havesemantic
value, it’s the name of the attribute that will be added to the directive tag
{{ w i d g e t t y p e = " n o f r i l l s _ b o o k l a y o u t / y o u t u b e " v i d e o _ i d = " [ V A L U E ] " }}
The
<required>tag allows a level of data validation, setting this to ”1” will force
the Admin Console user to enter a value before inserting the widget.
The
<visible/>node allows you to hide the input field for this data parameter,
and have the inserted widget directive tag automatically include an attribute
every time its used, with a value provided by the
<value/>tag. When
<visible/>is set to 1 the
<value/>tag will be used as a default ID.
The value in
<label>will be used to provide your rendered HTML form with a
label, and
<type/>controls what sort of form element is rendered. See Appendix
G for a full list and explanation of form rendering configurations.
Important: Be careful changing data parameters of a deployed widget. Once
a
{{widget...}}directive tag has been added to a CMS page, it become ”de-
tached” from its definition. That is, if we changed the
<video id/>above to be
<youtube id/>
, our CMS page would still have the
{{ w i d g e t t y p e = " n o f r i l l s _ b o o k l a y o u t / y o u t u b e " v i d e o _ i d = " [ V A L U E ] " }}