feat: Allow iterating through records in a text widget (#2824)

Joselgc1 · AntoineRelief · web-flow · commit b8928ee036d2 · 2025-12-17T17:07:02.000+01:00
AB#121364

---------

Co-authored-by: Antoine Hurard &lt;antoine@reliefapplications.org&gt;
diff --git a/libs/shared/src/lib/services/data-template/data-template.service.ts b/libs/shared/src/lib/services/data-template/data-template.service.ts
@@ -53,6 +53,7 @@ export class DataTemplateService {
       ...this.htmlParserService.getDataKeys(fields),
       ...this.htmlParserService.getAggregationKeys(aggregations || []),
       ...this.htmlParserService.getCalcKeys(),
+      ...this.htmlParserService.getHelpersKeys(),
     ];
   }
 
diff --git a/libs/shared/src/lib/services/html-parser/html-parser-test-values.ts b/libs/shared/src/lib/services/html-parser/html-parser-test-values.ts
@@ -308,6 +308,22 @@ export const dataFormatElement = {
  `,
   after: `<p>66fa9502760ab688bf8508e9s</p><p>Published</p><p>I can't believe this is a title</p><p>Super duper dubi dat gua trikili dup description</p><p><input type="checkbox" style="margin: 0; height: 16px; width: 16px;" checked disabled></input></p><p><span style=''>9/28/2024, 0:21 PM</span></p><p><span style=''>9/30/2024</span></p> `,
 };
+/** Html with table generated through for-loop */
+export const forLoopTableElement = {
+  before: `
+  <table border="1">
+    <tbody>
+      {{for row in data.rows}}
+        <tr>
+          <td>{{row.title}}</td>
+          <td>{{calc.date(row.date ; 'dd/MM/yyyy')}}</td>
+        </tr>
+      {{endfor}}
+    </tbody>
+  </table>
+  `,
+  after: `<table border="1" style="border-width: 1px;"><tbody><tr><td>First row</td><td>28/09/2024</td></tr><tr><td>Second row</td><td>05/10/2024</td></tr></tbody></table>`,
+};
 /** Record data */
 export const optionsData = {
   __typename: 'TestsMockData',
@@ -319,6 +335,13 @@ export const optionsData = {
   modifiedAt: '2024-09-30T12:21:21.498Z',
   createdAt: '2024-09-28T12:21:21.498Z',
 };
+/** Record data for loop table */
+export const forLoopTableData = {
+  rows: [
+    { title: 'First row', date: '2024-09-28T12:00:00.000Z' },
+    { title: 'Second row', date: '2024-10-05T12:00:00.000Z' },
+  ],
+};
 /** Option data fields metadata to inject */
 export const optionFields = [
   {
diff --git a/libs/shared/src/lib/services/html-parser/html-parser.service.spec.ts b/libs/shared/src/lib/services/html-parser/html-parser.service.spec.ts
@@ -9,6 +9,8 @@ import {
   calcFormatElement,
   customDateFormats,
   dataFormatElement,
+  forLoopTableData,
+  forLoopTableElement,
   maxMinValues,
   notNumberValueExamples,
   optionFields,
@@ -363,4 +365,14 @@ describe('HtmlParserService', () => {
       );
     });
   });
+  describe('Parse HTML with for-loop generated tables', () => {
+    it('renders rows from iterable data and applies expressions inside the loop', () => {
+      const result = service.parseHtml(forLoopTableElement.before, {
+        data: forLoopTableData,
+        fields: [],
+      });
+      const normalize = (value: string) => value.replace(/\s+/g, '');
+      expect(normalize(result)).toEqual(normalize(forLoopTableElement.after));
+    });
+  });
 });
diff --git a/libs/shared/src/lib/services/html-parser/html-parser.service.ts b/libs/shared/src/lib/services/html-parser/html-parser.service.ts
@@ -292,9 +292,10 @@ export class HtmlParserService {
    * Apply the calc functions on the html body.
    *
    * @param html The html body on which we want to apply the functions
+   * @param data available data for nested placeholders
    * @returns The html body with the calculated result of the functions
    */
-  private applyOperations(html: string): string {
+  private applyOperations(html: string, data?: any): string {
     const regex = new RegExp(
       `${CALC_PREFIX}(\\w+)\\((.*?)\\)${PLACEHOLDER_SUFFIX}`,
       'gm'
@@ -305,18 +306,34 @@ export class HtmlParserService {
       // get the function
       const calcFunc = get(this.calcFunctions, result[1]);
       if (calcFunc) {
+        // Pre-process arguments for any nested placeholders
+        let processedArgs = result[2];
+        if (data) {
+          const placeholderRegex = /\{\{([^}]+)\}\}/g;
+          processedArgs = processedArgs.replace(
+            placeholderRegex,
+            (match, placeholder) => {
+              const value = get(data, placeholder.trim());
+              return value ?? match;
+            }
+          );
+        }
+
         // get the arguments and clean the numbers to be parsed correctly
         const args =
-          result[2]
+          processedArgs
             .replace(/&nbsp;/g, ' ') // Replace &nbsp; with a regular space
             .match(/(?:<[^>]+>|[^<;]+)+/g)
             ?.map((arg) => {
               /** Make sure that the new date case does not break any previous clean up */
-              return result?.[1] === 'date'
-                ? arg.trim()
-                : // Replace below replaces the space space between span and style property from arg as elements,
-                  // breaking any style application from given element
-                  arg.replace(/[\s,]/gm, '');
+              if (result?.[1] === 'date') {
+                const trimmedArg = arg.trim();
+                // Strip optional surrounding quotes from format/value while preserving inner quotes
+                return trimmedArg.replace(/^['"](.*)['"]$/, '$1');
+              }
+              // Replace below replaces the space space between span and style property from arg as elements,
+              // breaking any style application from given element
+              return arg.replace(/[\s,]/gm, '');
             })
             .filter((arg) => !!arg) || [];
         // apply the function
@@ -333,6 +350,205 @@ export class HtmlParserService {
     return parsedHtml;
   }
 
+  /**
+   * Adds iteration of values within templates using for-loops. Supports data.* or aggregation.*
+   *
+   * @param html String with the content html.
+   * @param collections Available collections
+   * @param collections.data Available record data for iteration
+   * @param collections.aggregation Available aggregation data for iteration
+   * @returns formatted html.
+   */
+  private replaceForLoops(
+    html: string,
+    collections: { data?: any; aggregation?: any }
+  ): string {
+    if (!html) {
+      return html;
+    }
+
+    const forLoopRegex =
+      /\{\{for\s+(\w+)\s+of\s+([^}]+)\}\}([\s\S]*?)\{\{endfor\}\}/gm;
+    const dataForRegex =
+      /<(\w+)([^>]*?)\s+data-for="(\w+)\s+of\s+([^"]+)"([^>]*?)(?:\/>|>([\s\S]*?)<\/\1>)/gm;
+
+    let resultHtml = html;
+    let loopsFound = true;
+
+    // Continue processing as long as we find loops to replace
+    while (loopsFound) {
+      const matches = [
+        ...Array.from(resultHtml.matchAll(forLoopRegex)).map((m) => ({
+          match: m,
+          type: 'for',
+        })),
+        ...Array.from(resultHtml.matchAll(dataForRegex)).map((m) => ({
+          match: m,
+          type: 'data-for',
+        })),
+      ];
+
+      if (matches.length === 0) {
+        loopsFound = false;
+        continue;
+      }
+
+      // Sort by start index to process from the inside out
+      matches.sort((a, b) => (b.match.index ?? 0) - (a.match.index ?? 0));
+
+      for (const { match, type } of matches) {
+        if (match.index === undefined) {
+          continue;
+        }
+        let expandedValue = '';
+        let fullMatch: string;
+
+        if (type === 'for') {
+          const [, itemVar, sourceExpr, innerTemplate] = match;
+          fullMatch = match[0];
+          const sourceExprTrimmed = sourceExpr.trim();
+          const dataCollection = this.getLoopDataCollection(
+            sourceExprTrimmed,
+            collections
+          );
+
+          if (Array.isArray(dataCollection)) {
+            for (const el of dataCollection) {
+              expandedValue += this.applyItemTemplate(
+                innerTemplate,
+                itemVar,
+                el
+              );
+            }
+          } else if (dataCollection && typeof dataCollection === 'object') {
+            for (const key of Object.keys(dataCollection)) {
+              expandedValue += this.applyItemTemplate(
+                innerTemplate,
+                itemVar,
+                dataCollection[key],
+                key
+              );
+            }
+          }
+        } else {
+          // data-for
+          const [
+            fm,
+            tag,
+            attrsBefore,
+            itemVar,
+            sourceExpr,
+            attrsAfter,
+            innerTemplate = '',
+          ] = match;
+          fullMatch = fm;
+          const sourceExprTrimmed = sourceExpr.trim();
+          const dataCollection = this.getLoopDataCollection(
+            sourceExprTrimmed,
+            collections
+          );
+
+          if (Array.isArray(dataCollection)) {
+            for (const el of dataCollection) {
+              const itemTemplate = this.applyItemTemplate(
+                innerTemplate,
+                itemVar,
+                el
+              );
+              expandedValue += `<${tag}${attrsBefore}${attrsAfter}>${itemTemplate}</${tag}>`;
+            }
+          } else if (dataCollection && typeof dataCollection === 'object') {
+            for (const key of Object.keys(dataCollection)) {
+              const itemTemplate = this.applyItemTemplate(
+                innerTemplate,
+                itemVar,
+                dataCollection[key],
+                key
+              );
+              expandedValue += `<${tag}${attrsBefore}${attrsAfter}>${itemTemplate}</${tag}>`;
+            }
+          }
+        }
+
+        resultHtml =
+          resultHtml.slice(0, match.index) +
+          expandedValue +
+          resultHtml.slice(match.index + fullMatch.length);
+      }
+    }
+
+    return resultHtml;
+  }
+
+  /**
+   * Gets the data collection for a loop from the given fields.
+   *
+   * @param sourceExprTrimmed The trimmed source expression.
+   * @param collections Available collections
+   * @param collections.data Available record data
+   * @param collections.aggregation Available aggregation data
+   * @returns The data collection.
+   */
+  private getLoopDataCollection(
+    sourceExprTrimmed: string,
+    collections: { data?: any; aggregation?: any }
+  ): any {
+    let dataCollection: any;
+    if (sourceExprTrimmed.startsWith('data.')) {
+      dataCollection = get(
+        collections.data,
+        sourceExprTrimmed.replace(/^data\./, '')
+      );
+    } else if (sourceExprTrimmed.startsWith('aggregation.')) {
+      dataCollection = get(
+        collections.aggregation,
+        sourceExprTrimmed.replace(/^aggregation\./, '')
+      );
+    } else {
+      dataCollection = get(collections.data, sourceExprTrimmed);
+      if (dataCollection === undefined) {
+        dataCollection = get(collections.aggregation, sourceExprTrimmed);
+      }
+    }
+    return dataCollection;
+  }
+
+  /**
+   * Replaces provided element with the item value.
+   *
+   * @param template Template string
+   * @param itemVar Item variable
+   * @param itemValue Item value
+   * @param index Index
+   * @returns Item value
+   */
+  private applyItemTemplate(
+    template: string,
+    itemVar: string,
+    itemValue: any,
+    index?: string | number
+  ): string {
+    let output = template;
+
+    // More specific regex to avoid conflicts.
+    const nestedRegex = new RegExp(`\\{\\{${itemVar}\\.([^}]+)\\}\\}`, 'g');
+    output = output.replace(nestedRegex, (_m, p1) => {
+      const v = get(itemValue, p1.trim());
+      return v == null ? '' : `${v}`;
+    });
+
+    const fullItemRegex = new RegExp(`\\{\\{${itemVar}\\}}`, 'g');
+    output = output.replace(fullItemRegex, () =>
+      !isNil(itemValue) ? itemValue.toString() : ''
+    );
+
+    if (index !== undefined) {
+      output = output.replace(/\{\{index\}\}/g, `${index}`);
+    }
+
+    return output;
+  }
+
   /**
    * Replaces the html resource fields with the resource data.
    *
@@ -531,6 +747,10 @@ export class HtmlParserService {
         options.aggregation
       );
     }
+    formattedHtml = this.replaceForLoops(formattedHtml, {
+      data: options.data,
+      aggregation: options.aggregation,
+    });
     if (options.data) {
       formattedHtml = this.replaceRecordFields(
         formattedHtml,
@@ -540,7 +760,7 @@ export class HtmlParserService {
       );
     }
     formattedHtml = applyTableStyle(formattedHtml);
-    return this.applyOperations(formattedHtml);
+    return this.applyOperations(formattedHtml, options.data);
   }
 
   /**
@@ -613,6 +833,20 @@ export class HtmlParserService {
     }));
   }
 
+  /**
+   * Returns an array with the helper keys.
+   *
+   * @returns List of helper keys
+   */
+  public getHelpersKeys(): { value: string; text: string }[] {
+    return [
+      {
+        value: '{{for item of collection}}...{{endfor}}',
+        text: '{{for item of collection}}...{{endfor}}',
+      },
+    ];
+  }
+
   /**
    * Return an array with the page keys.
    *

Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,7 @@ export class DataTemplateService {`
`53`	`53`	`...this.htmlParserService.getDataKeys(fields),`
`54`	`54`	`...this.htmlParserService.getAggregationKeys(aggregations \|\| []),`
`55`	`55`	`...this.htmlParserService.getCalcKeys(),`
	`56`	`+ ...this.htmlParserService.getHelpersKeys(),`
`56`	`57`	`];`
`57`	`58`	`}`
`58`	`59`