How to add Money Format in Backpackforlaravel

[christmex]

*note :

1. I’m sorry about my english, english its not my first language.
2. If you get an error or get confused feel free to comment.

Hi there, in this tutorial I'm about to share with you guys how to add a new custom money format field in backpackforlaravel, without any further ado let's begin.

Steps

Step 1. Install Laravel Vite

first, we need to install [laravel vite], make sure you already have node js and npm, for checking if is it already there you can use this command

node -v
npm -v

I assume you already have it, if you're not then please install it first, you can find the tutorial on the internet, alright, next open your terminal inside your backpackforlaravel project and use this command. (I highlight recommend you open the vite documentation if you’re new)

npm install

after the installation is finished, open and edit your vite.config.js file, so it will look like this,

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],//change this line
            refresh: true,
        }),
    ],
});

Step 2. Create money_format.js

the next step is to create a js file that can help you to format the number become money format, in this case, I'm using the Rupiah money format from Indonesia,

document.querySelectorAll('input[type-currency="IDR"]').forEach((element) => {
    element.addEventListener('keyup', function(e) {
    let cursorPostion = this.selectionStart;
      let value = parseInt(this.value.replace(/[^,\d]/g, ''));
      let originalLenght = this.value.length;
      if (isNaN(value)) {
        this.value = "";
      } else {    
        this.value = value.toLocaleString('id-ID', {
          currency: 'IDR',
          style: 'currency',
          minimumFractionDigits: 0
        });
        cursorPostion = this.value.length - originalLenght + cursorPostion;
        this.setSelectionRange(cursorPostion, cursorPostion);
      }
    });
  });

after you create the money_format.js file, open and edit your app.js file inside “resources/js/app.js”

import './bootstrap';
import '../src/js/money_format'; //[+] add this line

Step 4. Final step

Now you need to register your app.js inside “config/backpack/base.php”, find this line

// JS files that are loaded in all pages, using Laravel's @vite() helper
    'vite_scripts' => [ // resource file_path

    ],

and add 'resources/js/app.js', inside "vite_scripts" array

// JS files that are loaded in all pages, using Laravel's @vite() helper
    'vite_scripts' => [ // resource file_path
        'resources/js/app.js', //[+] add this line
    ],

last, compile your assets with laravel vite, again open your terminal and paste this command,

npm run dev

wait for the process to finish and now you are ready to go.

Next

• Convert this as a custom field in backpackforlaravel

[tabacitu]

Thanks for posting about this @christmex ! I'm sure someone will need this and find it helpful!

[tubbynl]

We are currently also using backpack PRO and are are tinkering with a Money type field integrating https://github.com/brick/money as a laravel AttributeCasts https://andy.cowan.me.uk/handling-money-types-in-laravel)

But i think this should be a really goed standard field type; could this be promoted to an idea? @tabacitu , cc @Tuoww

[pxpm]

@tubbynl thanks for the interest.

Please just be advised that we LOVE everything that removes dependencies, but we are somewhat skeptical of merging stuff that brings more dependencies.

That said, if https://github.com/brick/money is a dependency, it probably will be better accepted in Backpack ecosystem if it were a separate package. (We can still promote it in our addons page etc, as long as it's maintained by the original author).

Maybe even an in-house package, but adding more dependencies to our core, only if there is no way around it. We'd rather remove dependencies than add new ones.

Cheers