Summary Box Structure using Inline HTML field

To create a box structure similar to summary box to store values in a record, we can use HTML to create the box structure.

• Add hidden fields to store the values which need to be populated inside the box.
• Create the box structure with HTML with the values from the field sourced to it.
• Create a custom field of type Inline HTML in the record.
• In the Validation & Defaulting subtab, set the HTML code snippet as the default vale of the field.

HTML

<style>
       .container {
          display: flex;
          gap: 20px;
          background-color: #f9f9f9;
          padding: 20px;
       }
       .card {
          background: #fff;
          width: 300px;
          font-family: Arial, sans-serif;
          border-radius: 8px;
          border: 1px solid #ddd;
          padding: 15px;
       }
       .card h3 {
          margin: 0;
          padding-bottom: 8px;
          text-align: center;
          font-size: 14px;
          border-bottom: 1px solid #ddd;
          color: rgb(1, 1, 1);
       }
       .card table {
          width: 100%;
          border-collapse: collapse;
          background: #fff;
       }
       .card td {
          margin: 1px;
          padding: 5px;
          color: rgb(15, 14, 14);
          font-size: 12px;
       }
       .card td:last-child {
          color: rgb(11, 11, 11);
          text-align: right;
       }
</style>
<div class="container">
   <div class="card">
        <h3>Box</h3>
        <table>
             <tr><td>Field Name 1</td><td>{custrecord_field_id_1}</td></tr>
             <tr><td>Field Name 2</td><td>{custrecord_field_id_2}</td></tr>
             <tr><td>Field Name 3</td><td>{custrecord_field_id_3}</td></tr>
             <tr><td>Field Name 4</td><td>{custrecord_field_id_4}</td></tr>
             <tr><td>Field Name 5</td><td>{custrecord_field_id_5}</td></tr>
        </table>
   </div>
</div>