gpnf-sort-nested-form-entries.js: Added support to sort nested form entries.
#1060
Conversation
WalkthroughThis pull request introduces a new JavaScript snippet that sorts nested form entries in Gravity Forms. The snippet uses 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
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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.
| 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)); | ||
| }, 10, 'emails' ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Hardcoded field ID needs attention
The sorting implementation uses a hardcoded field ID "3" which requires manual editing by each user. While there is a comment instructing users to replace it, this approach could lead to errors if users don't update it correctly.
Consider implementing one of these improvements:
- Make the field ID configurable using a variable that's clearly defined at the top of the file
- Add error handling to gracefully handle cases where the specified field doesn't exist in entries
-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 - Change this value to the field ID you want to sort by
+const sortByFieldId = "3";
+
+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' );📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 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)); | |
| }, 10, 'emails' ); | |
| // Configuration - Change this value to the field ID you want to sort by | |
| const sortByFieldId = "3"; | |
| 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' ); |
There was a problem hiding this comment.
@malayladu I like this suggestion. You?
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| 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)); | ||
| }, 10, 'emails' ); |
There was a problem hiding this comment.
@malayladu I like this suggestion. You?
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.