Variable replacement inside components

[rogerblanton87]

Hello,

I was looking to see if any one had any recommended approaches for a solution we are trying to implement.

We are looking to use variable replacement inside AEM.  The variable replacement would be from within authorable components.  For example if I wanted to use the RTE to replace {institution} with the institution name.  This would not be a one time replacement.  Essentially the variable needs to remain whenever they are in authoring but when they are on publish they would need to see the replaced variable.  Otherwise I could just trigger an event on the component to search the text and replace the variable on the fly but since the variable needs to remain this is where I am struggling.  I know I can use the i18N to do variable replacement but I don't think that would work for an author inside the RTE component (or any component that I am writing text in).

We are attempting to do this as we have multiple site which essentially have the exact same content with a different skin but we would like to be able to replace site names and other variables on the fly to eliminate having to make authoring changes to the live copy.

Any ideas would be greatly appreciated.

Thanks!

Roger

[Runal_Trivedi · Accepted solution]

There may be more better approaches to it, but below is what first clicked to me.

I could currently think of 2 possible approaches.

First you need to centralize your source of getting dynamic values, make it provide you a map (will be used if you opt for server side logic) or JSON (will be used if you opt for client side logic) of possible dynamic key and values, this you would need for both approaches I am going to suggest.

Doing it server side:

• You can use output rewriting mechanism of Sling to do it.
• Basically it is used to process the content before the content is flushed to page and after the DOM is formed.
• Take a look at - sling.apache.org/site/output-rewriting-pipelines-orgapacheslingrewriter.html
• Define a pattern for your dynamic content and process that pattern in your output rewriter.
  • Here is where you will refer to the centralized dynamic data provider which I mentioned a point one.

Doing it client side:

• You can use standard jquery onload function and values from map to do dynamic data replacement, only issue here is you will need to parse the entire DOM first collect all dynamic_placeholder, identify their values from JSON and then replace the holders.

I would stress on doing it server side.

- Runal

[XumaKJosh]

One big advantage of performing this type of operation on the client side is that it's easier to support variables that might contain content that is dynamic (e.g. available products, geolocation, current date & time, or some specific value about the browser).

This could certainly be done on the server side, but that would, among other things, increase the complexity of effective caching and introduce the need for additional security precautions. There are countless libraries available for client-side templating that range from feature rich & complex (e.g. AngularJS), to minimalist & focused (e.g. DustJS or Mustache). This allows the page's HTML to be delivered via cache. The values can simply be derived from one or more JSON calls (Sling even provides many OOtB), and the cache can be tuned differently for the markup vs the data. This would have negligible impact on page load time -- especially if the browser also caches the HTML & JSON.

Them's my two cents.