UI Error Messages — Authoring Guide

This guide documents how validation and error message tables are structured and rendered using JSON data imports in this project.

How JSON Import Was Used in This Project

This README documents the exact approach used in this folder to render validation and error tables from a JSON file, as implemented in this directory.

Step-by-Step Example

1. Table Data in JSON

   • The table data is stored in ach-validation-data.json in the same directory. Each field object includes a modes property to indicate whether it should be shown in "add", "edit", etc. mode. Example:

     [
       {
         "fieldName": "Name on Account",
         "modes": ["add", "edit"],
         "validationRules": [
           "This field is required.",
           "Should contain only alphabets and special characters."
         ],
         "errorMessages": [
           "Name on account is required.",
           "Name on account is invalid. Please make sure name field includes alphabet and special characters only."
         ]
       },
       {
         "fieldName": "Routing Number",
         "modes": ["add"],
         "validationRules": [
           "This field is required.",
           "Must be 9 characters long.",
           "Must only have numerical values."
         ],
         "errorMessages": [
           "Routing number is required.",
           "Routing number is incomplete.",
           "Enter a valid routing number."
         ]
       },
       // ...other fields
     ]

2. Importing JSON in the Document

   • At the top of the MDX file, import the JSON data:

     import achValidationData from './ach-validation-data.json';

3. Rendering the Table Based on Modes

   • To show only the fields relevant to a specific mode (e.g., "add" or "edit"), filter the JSON data before rendering:

     // For add mode:
     {achValidationData.filter(row => row.modes.includes('add')).map((row, index) => (
       <tr key={index}>
         <td>{row.fieldName}</td>
         <td>
           {row.validationRules.map((rule, i) => (
             <React.Fragment key={i}>
               {i + 1}. {rule}
               <br />
             </React.Fragment>
           ))}
         </td>
         <td>
           {row.errorMessages.map((msg, i) => (
             <React.Fragment key={i}>
               {i + 1}. {msg}
               <br />
             </React.Fragment>
           ))}
         </td>
       </tr>
     ))}

     // For edit mode:
     {achValidationData.filter(row => row.modes.includes('edit')).map((row, index) => (
       <tr key={index}>
         <td>{row.fieldName}</td>
         <td>
           {row.validationRules.map((rule, i) => (
             <React.Fragment key={i}>
               {i + 1}. {rule}
               <br />
             </React.Fragment>
           ))}
         </td>
         <td>
           {row.errorMessages.map((msg, i) => (
             <React.Fragment key={i}>
               {i + 1}. {msg}
               <br />
             </React.Fragment>
           ))}
         </td>
       </tr>
     ))}

4. Detailed Table Rendering Logic

   • The table is built using standard HTML <table>, <thead>, and <tbody> tags.
   • The data rows are generated dynamically using achValidationData.map, which iterates over each object in the imported JSON array.
   • For each row:
     • The field name is rendered in the first column.
     • The validation rules are rendered in the second column. Each rule is numbered and separated by a line break, using:

       {row.validationRules.map((rule, i) => (
         <React.Fragment key={i}>
           {i + 1}. {rule}
           <br />
         </React.Fragment>
       ))}

     • The error messages are rendered in the third column, also numbered and separated by line breaks:

       {row.errorMessages.map((msg, i) => (
         <React.Fragment key={i}>
           {i + 1}. {msg}
           <br />
         </React.Fragment>
       ))}

   • This approach ensures that each rule and error message is clearly listed and numbered for readability.
   • The use of <React.Fragment> allows multiple elements to be rendered without introducing extra DOM nodes.
   • The final table is fully dynamic: any changes to the JSON data will automatically update the rendered table.

Why This Approach?

• Consistency: All validation/error tables use the same data source and rendering logic.
• Reusability: The JSON file can be imported in other MDX/React documents for similar tables.
• Maintainability: Update the JSON file and all tables using it will reflect the changes.

Reference

• See add-payment-method-ACH.mdx for the actual implementation.

---

For further improvements, update this README or contact the documentation maintainers.