Adding Fields to a Widget Content Type - Documentation topics on: widget content type,widgets,widget type,.

Adding Fields to a Widget Content Type

In addition to the four System Fields that are automatically created by a Widget Type, additional fields can be created by a dotCMS webmaster that can act as parameter fields that will be used in the Code/Pre-execute fields. In the example of a Widget Type below, parameter fields have been added to allow users of the Widget Type to create their own customized, re-usable widgets (dynamic pulls of content).  In the example below, users can customize their pull by setting the following:

  • Display Title - Allows users to create their own descriptive title that will appear above the dymamic listing
  • Product Type - allows users to select a category of product to pull in the listing
  • Number of Results to show - sets the total number of products to pull dynamically
  • Number of items per page - sets the max number of products to list per page
  • Display - check product fields to be displayed in listing
Widget Type

The widget code field does all the work in pulling the fields set by the content contributor using the widget. The widget code below can be found in the product listing Widget Type that is packaged with the starter site included when downloading dotCMS.

#if($UtilMethods.isSet($display))
  #set($showTitle = true)
  #set($showSD = true)
  #set($showImage = true)
  #if($display.indexOf("Title") == -1)
    #set($showTitle = false)
  #end
  #if($display.indexOf("SD") == -1)
    #set($showSD = false)
  #end
  #if($display.indexOf("Image") == -1)
    #set($showImage = false)
  #end
#end

#set($id = $request.getParameter("id"))
#if ($UtilMethods.isSet($id))  #getContentMapDetail($id)

<!--
$productType<br<
-->

  #foreach($cat in $content.productType)
    #set($auxCat = $categories.getCategoryByInode($cat))
    #set($catQuery = "$!catQuery +categories:$auxCat.key")
  #end
#else 
  #foreach($cat in $productType)
        #set($auxCat = $categories.getCategoryByInode($cat))
    #set($catQuery = "$!catQuery +categories:$auxCat.key")
  #end
#end

<!--
$catQuery<br<
-->

#if ($UtilMethods.isSet($title))
  <h2<$title</h2<<br/<
#end
#set($query = "+contentType:Product +live:true +deleted:false $catQuery")
<!--
$query<br<
-->
<ul class="product-list"<
  #pullContent ($query '0' 'Product.title')
  #foreach ($content in $list)
    #if (!$UtilMethods.isSet($id) || !$id.equals("$content.identifier"))
  
    <li<
      #if ($showImage == "true")
        #if($UtilMethods.isSet($content.image1))
  <span style="float:right;padding:10px"<
    <a href="/products/$content.urlTitle" name="$content.title"<<img src="/contentAsset/resize-image/$!{content.identifier}/image1?w=150" alt="$!{content.title}" width="150" <</a<
  </span<
#end
      #end
      #if ($showTitle == "true")
        <h3<<a href="/products/$content.urlTitle" name="$content.title"<$content.title</a<#editContentlet($content.inode)</h3<
      #end
      #if ($showSD == "true")
        <p<$content.shortDescription</p<
      #end
  
    </li<
    #end
  #end
</ul<

Now that the Widget Type has been prepared, a dotCMS content contributor can now add/re-use a Widget using the new Product Listing Widget Type on a page or add/edit a product listing widget using the Widget Type in the Content Search Manager.