skip to content
 
12/12/2016

Dynamic component

DynamicComponents are property files and most often an associated jsp file (or only HTML files). The properties file defines the set of fields, each field has a default rendering mode, if this mode is not suitable it is possible to rewrite it.

Structure file "properties"

the file always starts with the description of the component in general, with at least its name. It is possible to define a reference to the jsp file. Then the different fields can be defined in "dot notation". The "order" parameter defines the order.

component.type=article
component.label=article
component.css-class=article
component.renderer=components/article.jsp

field.full.type=boolean
field.full.label=full size
field.full.order=100

field.title.type=text
field.title.label=title
field.title.order=200

Field types

  • h1..h6 : a title from level 1 to 6
  • text : a simple text.
  • large-text : a bigger text
  • wysiwyg-text : a text with formatting.
    • editor-complexity : sets the option level for wysiwyg (middle, high, soft, normal)
  • file : static resource
    • file.filter : filter to apply to the file preview (defined in image-config.properties)
    • file.label : boolean that says whether to display the label or not
    • file.resourceUrl : direct link to the file
    • file.previewUrl : link to the file image filtered
  • image : an image (image.filter option)
    • image.filter : filter to apply to the image (defined in image-config.properties)
    • image.label : boolean that says whether to display the label or not
    • image.resourceUrl : direct link to the image file
    • image.previewUrl : link to the image filtered
  • boolean : value true / false, editing a checkbox (example: full to prevent an event from occurring) full)
  • open-list : an open list, that is to say it will propose a list with the contents of the site, but it will still be possible to add an element.
  • open-multi-list : as the open list, but you can select multiple elements.
  • external-link : external link. (URL: url, title: link label)
  • internal-link : link to a site page. (link, linkLabel)
  • list : text render as list
  • list-one : simple picklist
    • list : reference to the list
    • .first-empty : true = first empty element
  • size.small : sets the size under which the content will be marked as 'small'
  • size.large : defines the size beyond which the content will be marked as 'wide'
  • number : a number (.min and .max for value limits)
    • search.asrange : true search is from min to max
  • color: choose a colour (list of colours available if defined on the site)

Listing

It is possible to create lists:

format: list. [name] .path = path to the page whose children are listed (name = key, title = value)

or

format:

list. [name] .1.key = # value #
list. [name] .1 = # label #
list. [name] .1. [lg] = #label #

 

Refer to a resource in the renderer:

Example:

<img src="${info.rootTemplateURL}/img/facebook.png" />

JSTL integration

  • [field].viewXHTMLCode : default rendering of the field
  • [field].value : RAW value of the field
  • containerId : id of the component containing the fields
  • width-edit : with (in column) of edit field

Integrate HTML files directly

It is possible to create only an HTML file. In this HTML file it is possible to add fields with the following format:

$ {field. # Type #. # Name #. # Data #}

The fields will then be created automatically.

Example:

<div class="card">
    <span class="price">${field.text.title.XHTMLValue}</span>
    <div class="card-header">
        <h1>€
          <span class="price">${field.number.price.XHTMLValue}</span>
          <span class="h6 text-muted ml-2">${field.text.unity.XHTMLValue}</span>
        </h1>
    </div>
    <div class="card-body pt-0">
        ${field.wysiwyg-text.body.XHTMLValue}
        <a type="button" class="btn btn-outline-secondary" href="${field.internal-link.link.link}">
             ${field.internal-link.link.linkLabel}
        </a>
    </div>
      ${field.external-link.site.viewXHTMLCode}
</div>

special jstl variable

  • previewAttributes : id and class for previous component edition (if component.wrapped=false in the component definition)
  • previewCSS : css class for preview edition
  • previewID : id for preview edition
  • nextSame, previousSame : boolean if the component before and afther is the same.