Rounding issue with Decimal data in AEM sly code

[HanL]

Hi
I am using the SLY templating language in AEM to display data on company page, and I have run into a problem with decimal rounding. Here's a snippet of the sly code I'm using.

<sly data-sly-test.fourDecimals="${'0.0000' @ i18n, locale=countryPage.language, hint='test page'}"></sly>

<sly data-sly-test.testcode="${fourDecimals @ format=properties['testcode'], locale=countryPage.languageCode, type='number'}"></sly>

When I input data like 4999.0520, it gets displayed on the page as 499.0518. Does anyone know if this is an issue related to show sly handles decimal numbers? Any suggestions or insights would be greatly appreciated.

thank you

[DPrakashRaj]

What outputs are you expecting. See below documentation for number formatting in aem using sightly.

https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#1223-numbers

[HrishikeshKa · Accepted solution]

Hi @HanL ,

The issue you're encountering with decimal rounding in AEM using the SLY templating language may be related to how the data is being formatted and displayed. There are a few areas to check and adjust to ensure that your decimals are rounded and displayed correctly.

Steps to Diagnose and Fix the Rounding Issue

1. Check Data Source Precision: Ensure that the source data you are pulling into the template has the correct precision. Sometimes, data retrieval or storage might alter the decimal precision.

2. SLY and I18N Formatting: The SLY templating language and the i18n formatting in AEM can sometimes introduce issues with number formatting, especially if the locale settings or the format type are not properly configured.

3. Number Formatting in SLY: Use AEM's number formatting capabilities to explicitly control the number of decimal places.

Example Fix Using Number Formatting

Here's how you can adjust your SLY code to ensure that numbers are formatted correctly to four decimal places:

<sly data-sly-use.numberFormatter="com.adobe.cq.wcm.core.components.internal.models.v1.number.NumberFormatter" />
<sly data-sly-test.fourDecimals="${'4999.0520' @ i18n, locale=countryPage.language, hint='test page'}"></sly>

<sly data-sly-test.testcode="${numberFormatter.format(fourDecimals, '0.0000', countryPage.languageCode)}"></sly>

Explanation:

1. Using NumberFormatter:
   • com.adobe.cq.wcm.core.components.internal.models.v1.number.NumberFormatter is an internal utility class in AEM that you can use to format numbers precisely.
2. Format Specification:
   • The format method in NumberFormatter allows you to specify the pattern '0.0000', ensuring the number retains four decimal places.
3. Locale Handling:
   • Pass the countryPage.languageCode to handle locale-specific formatting correctly.

Alternative Approach with JavaScript (if necessary):

If the above approach doesn't work as expected due to any restrictions or limitations within SLY, you might consider handling the formatting in JavaScript after the page loads. Here's an example of how you might do this:

<!-- In your SLY template -->
<sly data-sly-test.fourDecimals="${'4999.0520' @ i18n, locale=countryPage.language, hint='test page'}"></sly>
<span id="testcode">${fourDecimals}</span>

<!-- In your JavaScript file or script block -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var testCodeElement = document.getElementById('testcode');
        if (testCodeElement) {
            var originalValue = parseFloat(testCodeElement.textContent);
            testCodeElement.textContent = originalValue.toFixed(4);
        }
    });
</script>

By ensuring precise control over number formatting in your SLY templates and possibly using helper utilities like NumberFormatter, you can address rounding issues effectively. If necessary, complementing with JavaScript for front-end formatting can further ensure your decimals display correctly.

[HanL]

Sorry just noticed I missed one decimal, I meant "When I input data like 4999.0520, it gets displayed on the page as 4999.0518"