dcm.ListWidget

The <dcm.ListWidget> tag provides a CMS-ready approach to displaying templated content.

Attributes

• Size: uses standard dcCMS sizing, see examples here [link] Default is 1-3

• PropertyEditor: the name of the file, located in www/dcm/cms/list-widget-entry/ , that lists any additional properties that should be used in the template. Title , Description , and Alias will be available by default.

The following attributes can be used with images but the GalleryWidget might be better suited to image based templates

• Path: path to the image folder, the /galleries is assumed, so / is the root gallery folder. Do not include the .v from the image folder, so if the folder is at /home/icon-1.v the Path would be /home/icon-1 .

• Variant: which variant of the image to use, defaults to full ;

• Extension: which file extension of the image to use, defaults to jpg ;

Children

Entry

The Entry tag has at least the attributes Title , Description , and Alias available by default and others can be added via the PropertyEditor file. See Usage notes for more info.

Usage Notes

The ListWidget needs to be paired with a PropertyEditor file to gain the most use, which allows a variety of fields to be added. The template concept is a very important, and significantly large, topic that it is handled separately. Please review the image templating page.

Examples

Be sure to also review how image templates work, see above.

Separate PropertyEditor file:

<dc.MixIn> <dc.Fragment> <dcf.Text Name="State" Label="State" /> <dcf.Text Name="City" Label="City" /> <dcf.Text Name="ZipCode" Label="Zip Code" /> </dc.Fragment> </dc.MixIn>

Code on page:

<dc.RowLayout Collapse="Medium" data-dcm-alias="{$Entry.Alias}"> <dcm.ListWidget Size="1-3" PropertyEditor="example"> <Template> <dc.Column class="storeInfo" Pad="None" Size="1-3"> <div> <h3>{$Entry.Element.attributes.Title}</h3> <p>{$Entry.Element.attributes.Description}</p> <p>Location: {$Entry.Element.attributes.City}, {$Entry.Element.attributes.State}, {$Entry.Element.attributes.ZipCode}</p> </div> </dc.Column> </Template> <Entry Description="Store One's services and products" State="WI" City="Madison" ZipCode="53719" Alias="10" Title="Store One" /> <Entry Description="Store Two's services and products" State="MN" City="Eagle River" ZipCode="59788" Alias="20" Title="Store Two" /> </dcm.ListWidget> </dc.RowLayout>

This example would display two blocks of content dictated by the template, and could be further expanded with more Entry tags.

Here is that code output:

By adding two more Entry tags, we can easily add more content.

<Entry Description="Store Three's services and products" State="WI" City="Marinette" ZipCode="54143" Alias="30" Title="Store Three" /> <Entry Description="Store Four's services and products" State="MI" City="Menominee" ZipCode="49898" Alias="40" Title="Store Four" />

Output:

See Also

• CMS Enable a Linked Image