HTML Template in expression rule

Certified Senior Developer

Hi Community,

i have a requirement to create a html template using expression rule to create a table.

i am able to create a table but i am unable to generate borders for each row and headers. please prefer below code snippet.

TIA

 

  Discussion posts and replies are publicly visible

Parents
  • +1
    Certified Lead Developer

    Try this
    Update values as per your need.

    a!localVariables(
      /* Sample data - replace with your actual data source */
      local!dataDict: {
        {id: 1, name: "John Doe", department: "Engineering", salary: 75000},
        {id: 2, name: "Jane Smith", department: "Marketing", salary: 65000},
        {id: 3, name: "Bob Johnson", department: "Sales", salary: 70000},
        {id: 4, name: "Alice Brown", department: "HR", salary: 60000}
      },
    
      /* Column definitions */
      local!columns: {
        {column: "ID", width: 10, field: "id"},
        {column: "Employee Name", width: 30, field: "name"},
        {column: "Department", width: 30, field: "department"},
        {column: "Salary", width: 30, field: "salary"}
      },
    
      /* Generate HTML Table - Choose one of the options below */
    
      /* Option 1: Fixed width (800px) */
      "<table style='width:800px; border-collapse:collapse; border:2px solid #333; margin: 0 auto;'>" &
    
      /* Option 2: Maximum width with auto sizing */
      /* "<table style='max-width:1000px; width:auto; border-collapse:collapse; border:2px solid #333; margin: 0 auto;'>" & */
    
      /* Option 3: Percentage width (80% of container) */
      /* "<table style='width:80%; border-collapse:collapse; border:2px solid #333; margin: 0 auto;'>" & */
    
      /* Option 4: Full width (current behavior) */
      /* "<table style='width:100%; border-collapse:collapse; border:2px solid #333;'>" & */
    
      /* Table Header */
      "<tr>" & 
      joinarray(
        a!forEach(
          local!columns,
          "<th style='width:" & fv!item.width & "%; border: 1px solid #333; padding: 10px; background-color: #e6e6e6; text-align: left; font-weight: bold;'>" & 
          fv!item.column & 
          "</th>"
        ),
        ""
      ) &
      "</tr>" &
    
      /* Table Body */
      joinarray(
        a!forEach(
          items: local!dataDict,
          expression: 
          "<tr>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & fv!item.id & "</td>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & fv!item.name & "</td>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & fv!item.department & "</td>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & 
          "$" & text(fv!item.salary, "#,##0") & 
          "</td>" &
          "</tr>"
        ),
        ""
      ) &
    
      "</table>"
    )

Reply
  • +1
    Certified Lead Developer

    Try this
    Update values as per your need.

    a!localVariables(
      /* Sample data - replace with your actual data source */
      local!dataDict: {
        {id: 1, name: "John Doe", department: "Engineering", salary: 75000},
        {id: 2, name: "Jane Smith", department: "Marketing", salary: 65000},
        {id: 3, name: "Bob Johnson", department: "Sales", salary: 70000},
        {id: 4, name: "Alice Brown", department: "HR", salary: 60000}
      },
    
      /* Column definitions */
      local!columns: {
        {column: "ID", width: 10, field: "id"},
        {column: "Employee Name", width: 30, field: "name"},
        {column: "Department", width: 30, field: "department"},
        {column: "Salary", width: 30, field: "salary"}
      },
    
      /* Generate HTML Table - Choose one of the options below */
    
      /* Option 1: Fixed width (800px) */
      "<table style='width:800px; border-collapse:collapse; border:2px solid #333; margin: 0 auto;'>" &
    
      /* Option 2: Maximum width with auto sizing */
      /* "<table style='max-width:1000px; width:auto; border-collapse:collapse; border:2px solid #333; margin: 0 auto;'>" & */
    
      /* Option 3: Percentage width (80% of container) */
      /* "<table style='width:80%; border-collapse:collapse; border:2px solid #333; margin: 0 auto;'>" & */
    
      /* Option 4: Full width (current behavior) */
      /* "<table style='width:100%; border-collapse:collapse; border:2px solid #333;'>" & */
    
      /* Table Header */
      "<tr>" & 
      joinarray(
        a!forEach(
          local!columns,
          "<th style='width:" & fv!item.width & "%; border: 1px solid #333; padding: 10px; background-color: #e6e6e6; text-align: left; font-weight: bold;'>" & 
          fv!item.column & 
          "</th>"
        ),
        ""
      ) &
      "</tr>" &
    
      /* Table Body */
      joinarray(
        a!forEach(
          items: local!dataDict,
          expression: 
          "<tr>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & fv!item.id & "</td>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & fv!item.name & "</td>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & fv!item.department & "</td>" &
          "<td style='border: 1px solid #333; padding: 10px;'>" & 
          "$" & text(fv!item.salary, "#,##0") & 
          "</td>" &
          "</tr>"
        ),
        ""
      ) &
    
      "</table>"
    )

Children
No Data