Last updated timestamp

Use last updated timestamp when a page should show its last modified date and time in English or French.

Live demo

Visitors see when the current page was last changed, in English or French, so they can judge freshness of facts or policies. Authors only set alignment; the date and time come from the page itself.

Technical behaviour

Add Last Updated Timestamp from the Concordia component group. The component renders a paragraph with the class text-large (Bootstrap utility) and inline colour and alignment. The visible string is built in Java from the page language and cq:lastModified.

Anatomy

Last updated timestamp anatomy

  1. Root: class="c-last-updated" (from _cq_htmlTag).
  2. Paragraph: <p class="text-large"> with inline style for colour #4b4b4b and text-align from the dialog (left or right).
  3. Inner span: Contains formattedDateTime from the Sling model (includes the words Last updated: or Dernière mise à jour : and the formatted date and time).

(Placeholder asset: left-aligned English example and French example.)

Content

Dialog fieldPropertyPurpose
Text align./textAlignLeft (default) or Right.

Help: dialog.xml helpPath points to the design-system help page for this component (last-updated-timestamp.html under the design content path).

Date source and copy

Logic is implemented in LastUpdatedModel (concordia-core):

  • Page language comes from currentPage.getLanguage(false); fr selects French strings, otherwise English.
  • Timestamp comes from cq:lastModified on the current page. If that resolves to a date, formatting runs as below. The model also contains fallback strings when the modified date is null (for example Last updated: unpublished page / Dernière mise à jour : page non publiée), though in typical flows a default date may be used when the property is absent (see source if you need exact edge cases).

English

  • Prefix: Last updated:
  • Date and time use a month–day–year and 12-hour clock SimpleDateFormat in the model, then DateFunctions.toUcsTimeFormat, which adjusts the string to a UCS-style form (for example :00 stripped on the hour, AM/PM replaced with a.m. / p.m.). See LastUpdatedModel for the exact pattern.

French

  • Prefix: Dernière mise à jour :
  • Date: DateFunctions.getFrenchDate (long French date).
  • Time: SimpleDateFormat("k'h'mm") appended after a comma (24-hour style with an h before minutes, for example 14h30).

When to use

  • Footers or article bottoms where readers should see when the page was last saved in AEM.

When not to use

  • When cq:lastModified should not be shown (legal or policy reasons); remove the component or use manual copy instead.

Guidelines

Do

  • Place the component where metadata does not interrupt the main task (often end of main content or aside).
  • Align right when it must line up with other right-aligned metadata on the template.

Don't

  • Don’t treat the string as a live “last reviewed” claim unless editorial process aligns with cq:lastModified.

Related

  Resource
LastUpdatedModel branch-maven/concordia-core/.../LastUpdatedModel.java
DateFunctions toUcsTimeFormat, getFrenchDate in DateFunctions.java
  • Typography: Uses Bootstrap text-large on the <p> (defined in the design’s Bootstrap build, not in a dedicated last-updated LESS file in the component).
  • Colour: Inline #4b4b4b on the paragraph (not a CDS custom property in the HTL).
  • Alignment: Inline text-align from textAlign (styleToken context in HTL).

Design tokens

The component does not reference CSS custom properties in markup; future refactors could replace the hex with a token for muted text.

Variants

  • Left vs right alignment only.
  • Semantic structure: A single paragraph is appropriate for a sentence of metadata.
  • Colour: Grey text on the page background should meet contrast requirements; verify if #4b4b4b is used on non-white surfaces.
  • Language: The French and English strings are fixed in Java; they should match the page locale from currentPage.getLanguage.

Screen reader

  • The full phrase (Last updated: …) is read as one text node inside the paragraph.

Testing

Test Status
EN and FR pages show the expected prefix and format Recommended
Contrast for #4b4b4b on the template background Recommended

WCAG / guidelines

Related

  Resource
!AEM Component: apps/concordia/components/last-updated; model: concordia/components/last-updated.

CRXDE Lite query

Use this query in CRXDE Lite to find instances of this component.

/jcr:root/content//*[@sling:resourceType = 'concordia/components/last-updated/last-updated.html']
  • Resource type: concordia/components/last-updated.
  • View: HTL last-updated.html (no JSP).
  • Model: org.concordia.wcms.core.models.LastUpdatedModel with resourceType = "concordia/components/last-updated".
  • Clientlib: None in the component; styling relies on global CSS (for example text-large).

Implementation

File Purpose
apps/concordia/components/last-updated/last-updated.html Binds LastUpdatedModel, outputs <p> and span.
apps/concordia/components/last-updated/dialog.xml Text align and helpPath.
apps/concordia/components/last-updated/_cq_htmlTag/.content.xml Root class c-last-updated.
concordia-core/.../LastUpdatedModel.java Date formatting and i18n strings.

HTL context

  • ${lastUpdated.formattedDateTime @ context='html'} allows HTML entities if the model ever emitted them; today the model returns a plain formatted string.

Dependencies

  • Sling Models and Page API for cq:lastModified.
  • concordia-core DateFunctions for UCS time formatting and French date.