Flex Formatters

Flex formatters

Flex formatters can be used to create output that requires special formatting which is not available from a default formatter. Flex formatters use the powerful StingTemplate engine and allow to create custom HTML with access to the content element values and support for if...else...endif conditionals. With a little exra effort, even direct edit in the page is supported in flex formatters.

This page shows examples of flex formatters. On the left a sample output is shown, while on the right details about the same content element is displayed. Check out the source code of the flex formatters used on this page in order to see how these can be extended. 

Flex content section background image formatter

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Flex content section formatter with ADE support

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

More information
Flex element info formatter

Design

Information about the element
/mercury-demo/.content/section-m/cs_00114.xml
Type: m-section

Content structure

  • Image[1]
  • Image[1]/Image[1]
  • Link[1]
  • Link[1]/Text[1]
  • Link[1]/URI[1]
  • Text[1]
  • Title[1]
Flex demo formatter

m-section

/mercury-demo/.content/section-m/cs_00114.xml

This content has no Headline

Title: Design

Setting selected: Option one

Information from the context:
Current user: Guest
Request time: Wednesday, 18.12.2024 09:40 PM
Flex event teaser formatter

Mindful Members Mingling

Thursday, 01.01.1970 12:00 AM
Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. ...
Read more
Flex element info formatter

Mindful Members Mingling

Information about the element
/mercury-demo/.content/event-m/ev_00007.xml
Type: m-event

Content structure

  • AddressChoice[1]
  • AddressChoice[1]/Address[1]
  • AddressChoice[1]/Address[1]/Country[1]
  • AddressChoice[1]/Address[1]/Locality[1]
  • AddressChoice[1]/Address[1]/Name[1]
  • AddressChoice[1]/Address[1]/PostalCode[1]
  • AddressChoice[1]/Address[1]/StreetAddress[1]
  • Category[1]
  • Dates[1]
  • Intro[1]
  • Paragraph[1]
  • Paragraph[1]/Caption[1]
  • Paragraph[1]/Image[1]
  • Paragraph[1]/Image[1]/Image[1]
  • Paragraph[1]/Image[1]/Title[1]
  • Paragraph[1]/Link[1]
  • Paragraph[1]/Link[1]/Text[1]
  • Paragraph[1]/Link[1]/URI[1]
  • Paragraph[1]/Text[1]
  • Paragraph[2]
  • Paragraph[2]/Caption[1]
  • Paragraph[2]/Image[1]
  • Paragraph[2]/Image[1]/Copyright[1]
  • Paragraph[2]/Image[1]/Image[1]
  • Paragraph[2]/Link[1]
  • Paragraph[2]/Link[1]/Text[1]
  • Paragraph[2]/Link[1]/URI[1]
  • Paragraph[2]/Text[1]
  • Title[1]
  • Type[1]
Flex blog teaser formatter

OpenCms is just fun

Sun 15.12.2019
Claire Dunphy
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. ...
Read more
Flex element info formatter

OpenCms is just fun

Information about the element
/mercury-demo/.content/article-m/a_00002.xml
Type: m-article

Content structure

  • Author[1]
  • Category[1]
  • Date[1]
  • Image[1]
  • Image[1]/Image[1]
  • Image[1]/Title[1]
  • Intro[1]
  • Order[1]
  • Paragraph[1]
  • Paragraph[1]/Image[1]
  • Paragraph[1]/Image[1]/Image[1]
  • Paragraph[1]/Image[1]/Title[1]
  • Paragraph[1]/Link[1]
  • Paragraph[1]/Link[1]/Text[1]
  • Paragraph[1]/Link[1]/URI[1]
  • Paragraph[1]/Text[1]
  • Paragraph[2]
  • Paragraph[2]/Text[1]
  • Paragraph[3]
  • Paragraph[3]/Caption[1]
  • Paragraph[3]/Image[1]
  • Paragraph[3]/Image[1]/Copyright[1]
  • Paragraph[3]/Image[1]/Image[1]
  • Paragraph[3]/Image[1]/Title[1]
  • Paragraph[3]/Text[1]
  • Paragraph[4]
  • Paragraph[4]/Caption[1]
  • Paragraph[4]/Text[1]
  • Paragraph[5]
  • Paragraph[5]/Caption[1]
  • Paragraph[5]/Image[1]
  • Paragraph[5]/Image[1]/Copyright[1]
  • Paragraph[5]/Image[1]/Image[1]
  • Paragraph[5]/Image[1]/Title[1]
  • Paragraph[5]/Text[1]
  • Preface[1]
  • TeaserData[1]
  • TeaserData[1]/TeaserPreface[1]
  • Title[1]
Flex link sequence formatter

Standard link sequence

There are 3 links in this sequence.
Flex element info formatter

Standard link sequence

Information about the element
/mercury-demo/.content/linksequence-m/ls_00001.xml
Type: m-linksequence

Content structure

  • LinkEntry[1]
  • LinkEntry[1]/NewWindow[1]
  • LinkEntry[1]/Text[1]
  • LinkEntry[1]/URI[1]
  • LinkEntry[2]
  • LinkEntry[2]/NewWindow[1]
  • LinkEntry[2]/Text[1]
  • LinkEntry[2]/URI[1]
  • LinkEntry[3]
  • LinkEntry[3]/NewWindow[1]
  • LinkEntry[3]/Text[1]
  • LinkEntry[3]/URI[1]
  • Title[1]