Source code - Fluid Topics - Latest

The following example relies on:

• The Map variable, which gives access to the ft:lastEdition value of the document.
• The FluidTopicsDateService.format(), which adapts the ft:lastEdition raw value (for example, 2025-06-17) to a format matching the user's language (for example, Jun 17, 2025 for English).

To add the same Custom component:

1. In the HTML panel, copy and paste the following:

   <ft-tooltip text="Last edition" delay="500" position="bottom">
       <ft-chip icon="EDIT" iconvariant="fluid-topics"><span>Date</span></ft-chip>
   </ft-tooltip>
   

2. In the CSS panel, copy and paste the following:

   const options = {
       longFormat: true
   };
   
   const formattedDate = FluidTopicsDateService.format(map.lastEdition, options);
   document.querySelector("span").innerText = formattedDate;
   

3. In the JS panel, copy and paste the following:

   ft-chip {
       --ft-chip-vertical-padding: 3.5px;
       --ft-chip-horizontal-padding: 4px;
   }
   

4. Save the component.

5. Save and publish the page.