Calculator on Record Detail

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
jonathan.ayres
Posts: 6
Joined: 2024-02-17 00:40

Calculator on Record Detail

Post by jonathan.ayres » 2025-08-12 03:27

Have an interesting scenario that's come about...

We have a table called "Quotes" and an additional table called "Quote Lines". As you can imagine, the quote lines are the actual line items on the quote. A quote record consists of multiple field, but for the sake of simplcity - we are only concerned with 3 fields today:
* MSRP
* Customer Price
* Our Cost

Would like to make a button (likely JavaScript?) that we can click on that says (Calculate Customer Price from Our Cost). It would take the existing Out Cost field and ask the user "What would you like the markup to be?" At which point, the user could plug in a percentage and the script would plug then number in to the "Customer Price" field. A similar function would be "Calculate Customer Price from MSRP". It would take the existing MSRP and the user "How much would you like to discount this product? The user would input a percentage, and the script would fill the Customer Price field. Any thoughts on easily implementing?

saymaad
AppGini Super Hero
AppGini Super Hero
Posts: 56
Joined: 2024-06-03 16:17

Re: Calculator on Record Detail

Post by saymaad » 2025-08-12 09:34

I am assuming that you already have the OurCost & MSRP fields populated with the sum of quote lines, either by another hook or manually, also that they are input fields. With that being the case and field names which you had mentioned being exactly the same on your application you can easily use this code to implement the required functionality.

P.S.: For the code to work correctly, you will need to place it in your project's hooks folder, in the file named quote_lines-dv.js. You may need to create this file if it doesn't already exist.

Code: Select all

// This code is intended to be placed in the hooks/quote_lines-dv.js file.

$j(function() {
    // Create and add the buttons to the detail view
    var btnToolbar = '#' + AppGini.currentTableName() + '_dv_action_buttons .btn-toolbar';
    var buttonContainer = $j(btnToolbar);

    if (buttonContainer.length) {
        // Create the "Calculate Customer Price from Our Cost" button
        var costButton = $j('<button type="button" class="btn btn-success" style="width: 100%;">Calc. from Cost</button>');
        costButton.click(function() {
            calculateCustomerPriceFromCost();
        });

        // Create the "Calculate Customer Price from MSRP" button
        var msrpButton = $j('<button type="button" class="btn btn-success" style="width: 100%;">Calc. from MSRP</button>');
        msrpButton.click(function() {
            calculateCustomerPriceFromMSRP();
        });

        // Prepend the new buttons to the container
        buttonContainer.prepend(costButton).prepend(msrpButton);
    }


    //  Calculates and updates the 'Customer Price' based on the 'Our Cost' and a user-provided markup percentage
    function calculateCustomerPriceFromCost() {
        // Get the value from the 'Our Cost' field. Assuming the field name is 'OurCost'.
        var ourCost = parseFloat($j('#OurCost').val());

        // Check if the 'Our Cost' value is valid
        if (isNaN(ourCost)) {
            alert("Please enter a valid number for 'Our Cost' first.");
            return;
        }

        // Prompt the user for the markup percentage
        var markupInput = prompt("What would you like the markup to be? (Enter a percentage, e.g., 25 for 25%)");

        // Check for null or empty input
        if (markupInput === null || markupInput.trim() === '') {
            return; // User cancelled or entered nothing.
        }

        var markupPercentage = parseFloat(markupInput);

        // Check if the markup percentage is a valid number
        if (isNaN(markupPercentage) || markupPercentage < 0) {
            alert("Please enter a valid non-negative number for the markup percentage.");
            return;
        }

        // Perform the calculation: Customer Price = Our Cost * (1 + Markup %)
        var customerPrice = ourCost * (1 + markupPercentage / 100);

        // Update the 'Customer Price' field with the new value
        // Assuming the field name is 'CustomerPrice'
        $j('#CustomerPrice').val(customerPrice.toFixed(2));
    }


    // Calculates and updates the 'Customer Price' based on the 'MSRP' and a user-provided discount percentage.
    function calculateCustomerPriceFromMSRP() {
        // Get the value from the 'MSRP' field. Assuming the field name is 'MSRP'.
        var msrp = parseFloat($j('#MSRP').val());

        // Check if the 'MSRP' value is valid
        if (isNaN(msrp)) {
            alert("Please enter a valid number for 'MSRP' first.");
            return;
        }

        // Prompt the user for the discount percentage
        var discountInput = prompt("How much would you like to discount this product? (Enter a percentage, e.g., 15 for 15%)");

        // Check for null or empty input
        if (discountInput === null || discountInput.trim() === '') {
            return; // User cancelled or entered nothing.
        }

        var discountPercentage = parseFloat(discountInput);

        // Check if the discount percentage is a valid number
        if (isNaN(discountPercentage) || discountPercentage < 0) {
            alert("Please enter a valid non-negative number for the discount percentage.");
            return;
        }
        
        // Perform the calculation: Customer Price = MSRP * (1 - Discount %)
        var customerPrice = msrp * (1 - discountPercentage / 100);

        // Update the 'Customer Price' field with the new value
        $j('#CustomerPrice').val(customerPrice.toFixed(2));
    }

});

jonathan.ayres
Posts: 6
Joined: 2024-02-17 00:40

Re: Calculator on Record Detail

Post by jonathan.ayres » 2025-08-13 12:50

Saymaad, thank you very much! This worked perfectly!
saymaad wrote:
2025-08-12 09:34
I am assuming that you already have the OurCost & MSRP fields populated with the sum of quote lines, either by another hook or manually, also that they are input fields. With that being the case and field names which you had mentioned being exactly the same on your application you can easily use this code to implement the required functionality.

P.S.: For the code to work correctly, you will need to place it in your project's hooks folder, in the file named quote_lines-dv.js. You may need to create this file if it doesn't already exist.

Code: Select all

// This code is intended to be placed in the hooks/quote_lines-dv.js file.

$j(function() {
    // Create and add the buttons to the detail view
    var btnToolbar = '#' + AppGini.currentTableName() + '_dv_action_buttons .btn-toolbar';
    var buttonContainer = $j(btnToolbar);

    if (buttonContainer.length) {
        // Create the "Calculate Customer Price from Our Cost" button
        var costButton = $j('<button type="button" class="btn btn-success" style="width: 100%;">Calc. from Cost</button>');
        costButton.click(function() {
            calculateCustomerPriceFromCost();
        });

        // Create the "Calculate Customer Price from MSRP" button
        var msrpButton = $j('<button type="button" class="btn btn-success" style="width: 100%;">Calc. from MSRP</button>');
        msrpButton.click(function() {
            calculateCustomerPriceFromMSRP();
        });

        // Prepend the new buttons to the container
        buttonContainer.prepend(costButton).prepend(msrpButton);
    }


    //  Calculates and updates the 'Customer Price' based on the 'Our Cost' and a user-provided markup percentage
    function calculateCustomerPriceFromCost() {
        // Get the value from the 'Our Cost' field. Assuming the field name is 'OurCost'.
        var ourCost = parseFloat($j('#OurCost').val());

        // Check if the 'Our Cost' value is valid
        if (isNaN(ourCost)) {
            alert("Please enter a valid number for 'Our Cost' first.");
            return;
        }

        // Prompt the user for the markup percentage
        var markupInput = prompt("What would you like the markup to be? (Enter a percentage, e.g., 25 for 25%)");

        // Check for null or empty input
        if (markupInput === null || markupInput.trim() === '') {
            return; // User cancelled or entered nothing.
        }

        var markupPercentage = parseFloat(markupInput);

        // Check if the markup percentage is a valid number
        if (isNaN(markupPercentage) || markupPercentage < 0) {
            alert("Please enter a valid non-negative number for the markup percentage.");
            return;
        }

        // Perform the calculation: Customer Price = Our Cost * (1 + Markup %)
        var customerPrice = ourCost * (1 + markupPercentage / 100);

        // Update the 'Customer Price' field with the new value
        // Assuming the field name is 'CustomerPrice'
        $j('#CustomerPrice').val(customerPrice.toFixed(2));
    }


    // Calculates and updates the 'Customer Price' based on the 'MSRP' and a user-provided discount percentage.
    function calculateCustomerPriceFromMSRP() {
        // Get the value from the 'MSRP' field. Assuming the field name is 'MSRP'.
        var msrp = parseFloat($j('#MSRP').val());

        // Check if the 'MSRP' value is valid
        if (isNaN(msrp)) {
            alert("Please enter a valid number for 'MSRP' first.");
            return;
        }

        // Prompt the user for the discount percentage
        var discountInput = prompt("How much would you like to discount this product? (Enter a percentage, e.g., 15 for 15%)");

        // Check for null or empty input
        if (discountInput === null || discountInput.trim() === '') {
            return; // User cancelled or entered nothing.
        }

        var discountPercentage = parseFloat(discountInput);

        // Check if the discount percentage is a valid number
        if (isNaN(discountPercentage) || discountPercentage < 0) {
            alert("Please enter a valid non-negative number for the discount percentage.");
            return;
        }
        
        // Perform the calculation: Customer Price = MSRP * (1 - Discount %)
        var customerPrice = msrp * (1 - discountPercentage / 100);

        // Update the 'Customer Price' field with the new value
        $j('#CustomerPrice').val(customerPrice.toFixed(2));
    }

});

Post Reply