FreedomUI - Format number in list view without commas

Hello,

The only possible working way to achieve this was using this code in the section list handlers:

{
				request: "crt.LoadDataRequest",
				handler: async (request, next) => {
					var allElements = document.getElementsByTagName("td");
					for (var i = 0; i < allElements.length; i++) {
						if (allElements[i].className.indexOf("PDS_UsrIntegCol") != -1) {
							var valueToReplaceElement = allElements[i].getElementsByClassName("crt-data-table-cell-value ng-star-inserted")[0];
							var valueToReplaceValue = valueToReplaceElement.innerText;
							valueToReplaceElement.innerText = valueToReplaceValue.replace(",", "");
						}
					}
					return next?.handle(request);
				}
			}

you need to replace PDS_UsrIntegCol with PDS_your column code in the code to test. But - it works only on the initial section list load and also sometimes not triggered upon changing the sorting. If someone has a better approach on this topic please share your ideas.

Oleg Drobina,

Is this still the case in Freedom UI? The ability to specify that it should be displayed without thousands separators was available in Classic UI.

It would be very useful if we could specify some of these default formatting options on the entity as well - year fields will always want to be an integer but also want to prevent thousands separators for example, and having to modify every page schema that may display them is not great.

Harvey Adcock, 

A thousand separators depend only on the culture. There is no additional setting that can control it.

We've registered the suggestion to our R&D team to manage the separators from the User's side.  

Harvey Adcock,

Additionally, there are four options of the "Your profile" for number format:

It's possible to remove the separators by manually adding such an option to the "Number format" object.

Oleg Drobina, Harvey Adcock,

Below is the updated version to work on the cell content using DOM rendering.

{
  request: "crt.LoadDataRequest",
  handler: async (request, next) => {
    const result = await next?.handle(request);
 
    const COLUMN_CODE = "PDS_UsrIntegCol"; // column code
 
    // Scope to the grid if available; fallback to document
    const grid =
      document.querySelector('.mat-table[role="grid"]') ||
      document.querySelector('.mat-table') ||
      document;
 
    const stripCommas = () => {
      const tds = grid.getElementsByTagName("td");
      for (let i = 0; i < tds.length; i++) {
        const td = tds[i];
        const cls = td.className || "";
        if (
          cls.indexOf('cdk-column-${COLUMN_CODE}') !== -1 ||
          cls.indexOf(COLUMN_CODE) !== -1
        ) {
          const el =
            td.querySelector(".crt-data-table-cell-value");
          if (!el) continue;
 
          const txt = el.textContent || "";
          if (txt.indexOf(",") !== -1) {
            el.textContent = txt.replace(/,/g, "");
          }
        }
      }
    };
 
    // Initial pass after data loads
    stripCommas();
 
    // Re-apply after sort/paging/virtual scroll, then auto-stop
    const observer = new MutationObserver((mutations) => {
      for (const m of mutations) {
        if (m.type === "childList") {
          requestAnimationFrame(stripCommas);
          break;
        }
      }
    });
 
    observer.observe(grid, { childList: true, subtree: true });
 
    // Safety: stop observing after a short window
    setTimeout(() => observer.disconnect(), 5000);
 
    return result;
  }
}

Notes:

1. Selector is brittle
   • You target .crt-data-table-cell-value ng-star-inserted. The ng-star-inserted class is added/removed by Angular and is not reliable.
   • Use .crt-data-table-cell-value only.
2. No re-apply after sort/paging
   • Angular re-renders rows on sort/paging/virtual scroll, so your initial pass doesn’t run again.
   • Add a short-lived MutationObserver on the grid to re-run after those redraws.
3. Avoid layout cost & errors
   • Prefer textContent over innerText.
   • Guard for missing nodes to prevent undefined errors.
   • Batch updates with requestAnimationFrame and auto-disconnect the observer to avoid leaks.