Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Footnote (Citation) component in AEM

Avatar

Level 2

What is the best way to create a Footnote component that works similar to citation in Wikipedia.

When you click on superscript it will go to references.

The author can remove a superscript number and the rest of the content should auto-number by itself.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

I would overlay the RTE in a way, that such footnotes are embedded inline into the text as JSON; and when displaying the content, some Javascript runs through it, extracts the JSON and displays it at the bottom of the page. Renumbering is then done completely dynamic and you also don't need to care about it at all.

Jörg

View solution in original post

6 Replies

Avatar

Level 1

We had a solution to this in Classic UI (AEM 6.2), however, as we are upgrading to 6.5 and the Touch UI the conversion is held up for us due to an issue with the Richtext resource type.

If you do not need rich text for the footnote, this post might help: Experiencing Adobe Experience Manager - Day CQ: AEM 65 - Touch UI RTE (Rich Text Editor) Plugin for ...

I implemented that and it worked until I tried to use richtext in the structured content modal/dialog.

Avatar

Employee

You can review WKND tutorial for header & footer creation: 7 - Header and Footer

Avatar

Level 1

As a clarification, the issue is not related to the HEADER or FOOTER of the site (the top and bottom site components).  The issue is with footnotes or citations as described in the original question posted.

Avatar

Correct answer by
Employee Advisor

I would overlay the RTE in a way, that such footnotes are embedded inline into the text as JSON; and when displaying the content, some Javascript runs through it, extracts the JSON and displays it at the bottom of the page. Renumbering is then done completely dynamic and you also don't need to care about it at all.

Jörg

Avatar

Level 1

This is precisely what we are doing. The problem is that the RTE overlay is not working.  The fields appear and allow text to be entered, but the results are not saved.  This is only an issue with [sling:resourceType="cq/gui/components/authoring/dialog/richtext" - All other resourceTypes will work.

Just to be clear, extracting the JSON is not an issue. It's simply the fact that the standard implementation of RTE does not work under the structured content 'modal' page implementation (see item #2 under the Solution here: Experiencing Adobe Experience Manager - Day CQ: AEM 65 - Touch UI RTE (Rich Text Editor) Plugin for ...

The example uses a textfield and textarea.  These resource types work fine, but the richtext does not.

Avatar

Employee Advisor

Can you open a ticket with Adobe support and ask for help for this specific problem? Detail your requirement, your approach and ask how you can solve it.

Thanks,

Jörg