gpnf-sort-nested-form-entries.js: Added support to sort nested form entries.
#1060
Conversation
WalkthroughA new JavaScript snippet has been added to sort nested form entries in Gravity Forms. This snippet employs the Changes
Sequence Diagram(s)sequenceDiagram
participant GF as Gravity Forms
participant Sorter as Nested Form Sorter
GF ->> Sorter: Trigger "gpnf_sorted_entries" filter with entries
Sorter ->> Sorter: Sort entries using localeCompare on label
Sorter -->> GF: Return sorted entries
Suggested Reviewers
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
gp-nested-forms/gpnf-sort-nested-form-entries.js (2)
15-15: Clarify context parameterThe 'emails' context parameter isn't explained. It's important to document what this parameter means and when this sorting will be applied.
Add a comment explaining the 'emails' context:
-}, 10, 'emails' ); +}, 10, 'emails' ); // Apply this filter only in the 'emails' context. Change or remove this parameter to apply in different contexts.
11-15: Consider supporting different sorting directionsThe current implementation only supports ascending alphabetical sorting. Users might need descending sorting or numeric sorting based on their requirements.
Here's a more flexible implementation that supports both directions:
-window.gform.addFilter( 'gpnf_sorted_entries', function( entries, formId, fieldId, gpnf ) { - // Replace "3" with the field ID of the field you would like to sort by. - // JavaScript provides several ways to sort arrays, including different sorting functions like localeCompare(), numeric sorting, and custom sorting based on object properties. Use the one that best fits your needs. - return entries.sort((a, b) => a["3"].label.localeCompare(b["3"].label)); +// Configuration +const sortConfig = { + fieldId: "3", // The field ID to sort by + direction: "asc", // "asc" for ascending, "desc" for descending + numeric: false // Set to true for numeric sorting +}; + +window.gform.addFilter( 'gpnf_sorted_entries', function( entries, formId, fieldId, gpnf ) { + // Return early if no entries + if (!entries || !entries.length) return entries; + + return entries.sort((a, b) => { + // Handle missing fields gracefully + if (!a[sortConfig.fieldId] || !a[sortConfig.fieldId].label) return 1; + if (!b[sortConfig.fieldId] || !b[sortConfig.fieldId].label) return -1; + + let comparison; + if (sortConfig.numeric) { + // Numeric sorting + comparison = parseFloat(a[sortConfig.fieldId].label) - parseFloat(b[sortConfig.fieldId].label); + } else { + // Text sorting + comparison = a[sortConfig.fieldId].label.localeCompare(b[sortConfig.fieldId].label); + } + + // Reverse for descending order + return sortConfig.direction === "desc" ? -comparison : comparison; + }); }, 10, 'emails' );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
gp-nested-forms/gpnf-sort-nested-form-entries.js(1 hunks)
🔇 Additional comments (1)
gp-nested-forms/gpnf-sort-nested-form-entries.js (1)
1-10: Documentation looks comprehensive!The header documentation clearly identifies the purpose of the snippet and provides installation instructions with appropriate links.
malayladu
force-pushed
the
malay/add/79476-sort-nested-form-entries
branch
from
beafe7b to
cf065cd
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
gp-nested-forms/gpnf-sort-nested-form-entries.js (2)
26-26: Missing priority and context parametersThe filter is missing the priority and context parameters that would typically be included in a
gform.addFilter()call.-window.gform.addFilter('gpnf_sorted_entries', function (entries, formId, fieldId, gpnf) { +window.gform.addFilter('gpnf_sorted_entries', function (entries, formId, fieldId, gpnf) { // Check if entries exist and have the specified field. if ( !entries || !entries.length || !entries[0][sortByFieldId]) { console.warn(`GPNF Sort: Field ID ${sortByFieldId} not found in entries or entries are empty. Returning unsorted entries.`); return entries; } // Sort entries by the specified field's label. return entries.sort((a, b) => { if ( !a[sortByFieldId] || !a[sortByFieldId].label) return 1; if ( !b[sortByFieldId] || !b[sortByFieldId].label) return -1; return a[sortByFieldId].label.localeCompare(b[sortByFieldId].label); }); -}); +}, 10, 'emails');
27-28: Consider adding a usage example commentTo further improve this snippet, consider adding a brief usage example or expected output comment to help users understand how the sorting will affect their forms.
}); }); +// Usage example: +// This will sort child entries alphabetically by the value in field 3. +// For example, if field 3 is "Name", entries will be sorted by name A-Z.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
gp-nested-forms/gpnf-sort-nested-form-entries.js(1 hunks)
🔇 Additional comments (4)
gp-nested-forms/gpnf-sort-nested-form-entries.js (4)
1-10: Well-structured documentation headerThe documentation header effectively communicates the purpose and installation instructions for this snippet. It provides clear guidance on how to use the Custom JavaScript plugin for implementation.
11-12: Good implementation of configurable field IDYou've successfully implemented the suggestion to make the field ID configurable with a clear comment indicating it should be from the child form. This approach makes the snippet more user-friendly and reduces the chance of implementation errors.
13-18: Effective error handling for edge casesThe code properly checks for empty entries and missing field IDs, providing a helpful console warning when issues are detected. This prevents silent failures and makes troubleshooting easier for users.
20-25: Robust sorting implementation with fallback handlingThe sorting function correctly handles cases where fields or labels might be missing, ensuring the sort operation won't throw errors. The use of
localeCompare()provides proper alphabetical sorting with language sensitivity.
Context
⛑️ Ticket(s): https://secure.helpscout.net/conversation/2876515303/79476
Summary
This snippet uses
gpnf_sorted_entriesJS filter to sort nested form entries in frontend.