I’m trying to add a custom button to trigger a custom workflow (in N8N) to dynamically calculate a unit price of a line item and then insert it into the sales invoice form.
I already have connected N8N to the Manager API successfully using an Access Token.
Right now, I’m stuck on using Extensions to inject custom buttons by each line item (I’ve written HTML/PHP/Javascript in the past, but it has been a few years). I’ve already tested the Javascript in a test environment, so I’m fairly confident that works. I’m guessing I’m missing something how Manager injects the Javascript. Right now the button does nothing, but I was planning on using something like Fetch to trigger the N8N workflow and get a response that would then change the value of the unit price field.
NOTE: I’m not keen on using Extensions because it’s being deprecated, but I can’t figure out another way to trigger the N8N workflow until webhooks or some other active element is added.
USE CASE:
Sales price of inventory item includes a flat portion (like an administration cost) and a qty-variable portion. For example, 1 unit would be $10 + $5, and 10 units would be $10 + $5x10 = $60.
due to industry norms & client requirement, this has to be shown as a SINGLE cost, i.e., itemX 10oz $60 (i.e., the ‘flat portion’ of the cost cannot be shown as a separate line item, as it is known that this would trigger severe customer resentment & confusion, even if the total cost of flat portion + qty-variable portion is below the single line item cost of competitors)
my thought is to trigger the N8N workflow, which will then retrieve the current cost of the inventory item from Manager, calculate the qty-variable portion, add on the flat portion, and then divide by qty to get a ‘unit price’ that is then passed back to the sales invoice form.
Does anybody have any insight why I’m not getting any buttons showing on the sales invoice form?
Thanks in advance, and thanks to the Manager team for a great software!
document.addEventListener('DOMContentLoaded', function() {
// Create the button element
const button = document.createElement('button');
button.className = 'btn btn-secondary';
button.textContent = 'Your Button';
button.onclick = myFunction; // Assign the onclick event handler
// Find the input element with the "Reference" field
const referenceInput = document.querySelector('.form-group input[type="text"][placeholder="Optional"]');
// Check if the reference input element exists before appending the button
if (referenceInput) {
// Get the parent div of the input element
const referenceFieldParent = referenceInput.closest('.form-group');
// Append the button element after the parent div
referenceFieldParent.insertAdjacentElement('afterend', button);
} else {
console.error('Input for the "Reference" field not found.');
}
});
// Function to handle button click event
function myFunction() {
// Add your custom JavaScript functionality here
alert('Button clicked!');
}
i tried the same code but nothing shows, also asked chatGPT for a simple code but didn’t work
document.addEventListener('DOMContentLoaded', function() {
// Create a button element
var button = document.createElement('button');
button.textContent = 'Click me';
button.style.margin = '10px';
button.className = 'btn btn-primary'; // Assuming Manager.io uses Bootstrap, otherwise adjust the class
// Define what happens when the button is clicked
button.onclick = function() {
alert('Hi');
};
// Find a suitable place in the document to add the button
// This example adds the button to a specific container you need to define or select
var container = document.getElementById('yourContainerId'); // Adjust this ID to where you want the button
if (container) {
container.appendChild(button);
}
});
