Hey there, Dave Parrish here, coming at you with another handy tip from Knack Builders. Today, I'm still out in Ecuador, so pardon the makeshift setup with just my laptop's camera and lighting. Nevertheless, I've got something useful to share with you—how to customize those stubborn default texts in your applications in your forms when it says "add new option".
The Challenge: Customizing 'Add New Option'
Clients often ask me, "Can we change that text?" Specifically, they're referring to the 'Add New Option' text you often see in dropdowns or forms. Unlike more straightforward elements like submit buttons, there's no easy built-in way to tweak this text within the app's native settings.
The Solution: A Bit of Custom Code
Let's dive into a practical example. Imagine an application that handles expediting maintenance supplies for hospitals. Users need to be able to add new hospitals to their orders if they're not already listed. Here's where we want to change 'Add New Option' to something more specific, like 'Add New Hospital'.
Step-by-Step Customization
Identifying the Target Text First, locate where the text appears in your app. For instance, you might find it labeled as 'Add New Option' in various dropdowns.
Implementing the Code Since the app doesn't provide a direct way to change this text, we turn to custom JavaScript code. Here’s a snippet you can use: javascript Copy code // Replace 'Add New Option' with 'Add New Hospital' skuid.snippet.register('replaceAddNewOption', function(){ skuid.$('.nx-skootable-add-new a').text('Add New Hospital'); }); This snippet targets any instance where 'Add New Option' appears and replaces it with 'Add New Hospital'. Simple and effective!
Applying the Customization
Navigate to your app's API or custom code section.
Paste the provided JavaScript snippet into the appropriate field.
Ensure it's set to apply universally across your app ('any') or specify specific views or scenes as needed.
4. Testing and Refining
Save your changes and refresh the app.
Verify that the text now reflects your custom label ('Add New Hospital') wherever applicable.
Fine-Tuning for Specific Cases
If your app has multiple instances of 'Add New Option' that need different labels (like 'Add New Contact'), you can further refine the code:
Identify specific scenes or views where you want the text change to apply.
Modify the JavaScript snippet to target those specific elements.
Going Beyond Basics
For more complex scenarios, such as differentiating 'Add New Option' labels based on specific fields or objects, consult your app's developer documentation. They often provide detailed methods to link custom text changes to specific data elements within your app.
Conclusion
And there you have it—a straightforward way to customize those pesky default texts in your applications using a bit of JavaScript magic. It's surprising that such a feature isn't natively built-in, but hey, that's where we developers come in handy, right?
I hope you found this tip helpful for enhancing your app's user experience. If you enjoyed this guide, don't forget to like, subscribe, and share the knowledge with your fellow developers. Thanks for tuning in!
Here's the actual code:
// Use for the Knack Standard Theme to change Add New Option Text
$(document).on('knack-scene-render.any', function(event, scene) {
$("a.kn-add-option").html("Add New");
});
Thanks!
You can check out my Knack database services here: https://www.knackbuilders.com/knack-database-consulting
Interested? Book an intro call: https://calendly.com/daveparrish/callwithdave
Comments