{module_webapps}

Description

When placed onto a web page or a template it displays the web app items.

Syntax

{module_webapps render="item|collection" id="webappId|webappName" filter="item" itemId="123" targetFrame="" resultsPerPage="" hideEmptyMessage="false" rowCount="" sortType="ALPHABETICAL" collection="my_custom_collection_name" template="/folder/template.tpl"}

Note: When using named parameters always wrap the individual parameters in double quotes. Also, do note that modules using named parameters do not work for campaigns just yet.

Parameters

  • render - possible values are item or collection (the default is item). The render parameter indicates whether the template content is used to render a collection or to render a single item. Take a look at the render parameter's article for more details on how to use it
  • id - the web app name or the web app's ID
  • filter - filtering criteria for display and can be one of the following:
    • item - individual item
    • all - all items
    • latest - latest items
    • latestClassified - latest items in a category
    • random - random item
    • randomClassified - displays a random item in a particular category
    • classified - all the items in a category
  • itemId - the category ID or the category name
  • targetFrame - e.g. _blank. Specify the frame you want the item to open in
  • useBackupTemplate - specify true if you want to use the backup list template or leave empty. The value of this parameter is ignored if the template parameter is also present.
  • resultsPerPage - total number of items per page before pagination is used (limit of 500 items per page)
  • hideEmptyMessage - specify True if you don't want the No Items Found message to be displayed.
  • rowCount - will limit the number of items per row when items are displayed as a list. Default is 1 item per row.
  • sortType - will sort the web apps in specified order.
    • alphabetical (default) - items are sorted in alphabetical order form A-Z
    • date - will display the web app items newest to oldest
    • datereverse - will display the web app items oldest to newest
    • weightreverse - allows you to display the web apps by weight but in reverse, that is the item with the smallest weight is displayed first.
    • comments - display the items with the largest number of Comments first (can be used for a 'highest votes' type display).
  • collection - use this if you need to access the module's Liquid output tags
  • template - render the module using a custom template. You can leave the value of the template parameter blank to suppress the original output and use Liquid output tags instead

This module can be rendered using:

  • the webapp list layout - on this layout you can use either the legacy tags or Liquid output tags. Here is a list of all the tags you can use the Webapp List Layout's reference page
  • your own custom layout - take a look at the custom templates article for more details
  • Liquid collections - here are the Liquid output tags you can use:

Warning: if you need to access a liquid tag that has a space in its name, for example tag_large image_value use this syntax: {{cars1.items[0].["large image_value"]}} - Liquid does not allow for the name of its output tags to contain spaces. In this case the tag that contains a space needs to be wrapped in square bracketsĀ and quotes and preceded by the name of the collection (in this case cars1).

Liquid tag Legacy tag Description
{{itemid}} {tag_itemid}Item's system ID
{{address1}} {tag_address1}Address1
{{address2}} {tag_address2}Address2
{{city}} {tag_addresscity}City
{{country}} {tag_addresscountry}Country
{tag_addressglatlng}This tag provides a shortcut to generate GLatLng objects for use with the Google Maps API.
{{latitude}} {tag_addresslatitude}Latitutde of web app item address
{{longitude}} {tag_addresslongitude}Longitude of web app item address
{{state}} {tag_addressstate}State
{{zipcode}} {tag_addresszipcode}ZIP code
{tag_addtofavorites,add_Image, remove_Image} Add the news item to favorites list. Optionally customize to display your own custom image for adding and removing. Here is an example - {tag_addtofavorites,<img alt="" src="/images/add.gif" />,<img alt="" src="/images/remove.gif" />}<br/>
For additional information on how to render the output of this tag using Liquid take a look at the Enable other Liquid tags article.
{{button}} {tag_button,Your Text}will output a hyperlink with the text "Your Text" and when clicked will take the site visitor to the detail layout
{{commentCount}} {tag_commentcount}Number of comments for current post
{{counter}} {tag_counter}Incremental count of the item on the page
{{deleteUrl}} The URL that allows current customer to delete a web app item they have previously submitted (only available if customer logged in to a secure zone)
{{description}} {tag_description,number of characters}Description of item (editor content). On the "List Layout (Backup)" you can use {tag_description,10} to display the first 10 characters of the webapp item's description.
{{editUrl}} Creates a link that allows current customer to edit a web app item they have previously submitted (only available if customer logged in to a secure zone). Clicking this link will open up the edit layout
{{expiryDate}} {tag_expirydate}Expiry date of item in this format - 01-Jan-9999
{{lastUpdateDate}} {tag_lastupdatedate}Last update date of item in this format -01-Jan-9999
{{name}} {tag_name_nolink}Name of item (without hyperlink)
{tag_name}Name of the item - will have hyperlink that points to the item's detail layout
{{releaseDate}} {tag_releasedate}Release date of item in this format - 08-Sep-2014
{{weight}} {tag_weight}Weighting of item
{{urlWithHost}} {tag_itemurl_withhost}Full URL of the web app item including host for example http://mysamplesite.com/car-catalogue/ford-explorer
{{url}} {tag_itemurl_nolink}Relative URL of the web app item for example /car-catalogue/ford-explorer
  {tag_rowcss,myclass}Replate myclass with your own CSS class. Alternates between classes, such as "myclass" and "myclass_alternate"
{{image}} {tag_image} For "Image" type fields only - renders the image wrapped in a hyperlink
{{image_value}} {tag_image_value} For "Image" type fields only - renders the image's src
{{image_nolink}} {tag_image_nolink} For "Image" type fields only - renders only the image
{{datasource_id}} {tag_datasource_id} Renders the ID of the datasource field e.g. - if my datasource field is named country, the tag will be {tag_country_id}
{{datasource}} {tag_datasource} Renders a link to the datasource item e.g. - if my datasource field is named country, the tag will be {tag_country}

Examples

  • {module_webapps id="56" filter="all" targetFrame="_blank" useBackupTemplate="true" resultsPerPage="12" hideEmptyMessage="true" rowCount="3"} - this module will display 12 web app items according in the list view in the new window in three items per row way and the web app will use the backup layout.
  • {module_webapps id="123" filter="all" rowCount="12" } - will only display 12 items per page
  • {module_webapps id="123" filter="latest" rowCount="5"} - will only display the latest 5 items (by date) on the page
  • {module_webapps id="56" filter="all" resultsPerPage="10" rowCount="1" template="/layouts/custom/walist.html"} - will only display 10 items using the walist.html custom template
  • {module_webapps id="123" collection="collection1" template=""} - in this case nothing will be displayed, however the module's Liquid tags will become available in the collection1 collection.

The previous and next links can be customized using CSS. Each link has its own custom CSS class. To see the CSS class assigned to these links view the web page source where these links appear. The CSS class name format is: WebAppIDPrev and WebAppIDNext where ID is the internal ID assigned to your Web App. You can easily find the ID using Firebug once on the live page.

Syntax

{module_webapps,ID,filter,itemID,notUsed,target,bkp,results,hideEmpty,rowLength,Sort}
  • ID or Name - system generated web app id or replace with the web app name
  • filter - filtering criteria for display and can be one of the following:
    • i - individual item
    • a - all items
    • l - latest items
    • r - random item
    • c - all items in a particular category
    • cl - latest items in a particular category
    • cr - displays a random item in a particular category
  • itemId - the category ID or the category name
  • notUsed - leave empty
  • target - e.g. _blank. Specify the frame you want the item to open in
  • bkp - specify True if you want to use the backup list template or leave empty
  • results - total number of items per page before pagination is used (limit of 500 items per page)
  • hideEmpty - specify True if you don't want the No Items Found message to be displayed.
  • rowLength - will limit the number of items per row when items are displayed as a list. Default is 1 item per row.
  • Sort - will sort the web apps in specified order
    • alphabetical (default) - items are sorted in alphabetical order form A-Z
    • date - will display the web app items newest to oldest
    • datereverse - will display the web app items oldest to newest
    • weightreverse - allows you to display the web apps by weight but in reverse, that is the item with the smallest weight is displayed first.
    • comments - display the items with the largest number of Comments first (can be used for a 'highest votes' type display).

Layouts

Examples

  • {module_webapps,56,a,,,_blank,true,12,true,3} - this module will display 12 web app items according in the list view in the new window in three items per row way and the web app will use the backup layout.
  • {module_webapps,123,a,,,,,12} - will only display 12 items per page
  • {module_webapps,123,l,5} - will only display the latest 5 items (by date) on the page
  • {module_webapps,56,a,,,,,10,,1 template="/layouts/custom/walist.html"} - will only display 10 items using the walist.html custom template

The previous and next links can be customized using CSS. Each link has its own custom CSS class. To see the CSS class assigned to these links view the web page source where these links appear. The CSS class name format is: WebAppIDPrev and WebAppIDNext where ID is the internal ID assigned to your Web App. You can easily find the ID using Firebug once on the live page.