Currently working on my first Kirby project, I love the simplicity and ease of development!
For my project, I need quite a few number fields which will receive high values ( in the millions) - I’d love to have an easy way of switching on digit grouping (e.g. 15.500.000 / 15 500 000 / 15’500’000).
I didn’t find anything on this so far… It would be great to have the possibility of changing the number representation within each field, e.g. with an option like numberformat: #.##0
Hello and welcome to the forum.
Would you also like to consider grouping by language?
In my project, I realised this with the JavaScript function ‘Intl.NumberFormat’.
Would that be an option for you?
That’s pretty much what I’m looking for. Did you implement a custom field for that?
I have integrated it as Javascript in the footer. I use it for a range slider where prices are displayed. In the Javascript, the field is addressed using a class.
Here is the script that doesn’t work for your question, but you’ll understand how it works better, and I’m sure there is a solution with Kirby functions. But I don’t know it.
const rangeSlider = function() {
const $sliders = $('.range-slider');
$sliders.each(function() {
const $slider = $(this);
const $range = $slider.find('.range-slider__range');
const $value = $slider.find('.range-slider__value');
const symbol = $slider.data('symbol');
// Intl.NumberFormat for the German formatting
const formatter = new Intl.NumberFormat('de-DE');
// Initialize the slider value display with the space and symbol
const updateValue = function(value) {
$value.text(`${formatter.format(value)} ${symbol}`);
};
updateValue($range.val());
// Update the value display with the space and symbol on input
$range.on('input', function() {
updateValue(this.value);
});
});
};
$(document).ready(rangeSlider);
The question was about displaying numbers in the Panel number field, not in the frontend.
Yes, basically, you can extend the number field though, so you don’t have to recreate everything.
Thanks for the heads up!
To get acquainted with the workflow, I just built my first custom field for selecting a year + quarter, basically working along the Field Plugin Crash Course on YouTube and, since the field will be used within fields of type: object, the article on Field Previews. Pretty happy with the results:
Had a little struggle setting up default values but figured it out eventually. Just putting this here in case someone else hits the same roadblock: When used within a field of type: object, setting a default value via the backend as shown in the Crash Course won’t work (I guess the same goes for fields of type: structure but haven’t tested).
I ended up setting the default value twice - don’t know if this is canon but it seems work.
First step: Set up your default value in the backend as shown in the Crash Course (this one will only show up when the field is used within a section of type: fields)
// Backend (index.php)
'props' => [
'value' => function ($value = null) {
$decodedValue = Yaml::decode($value);
return [
"quarter" => ceil(date('m') / 3),
"year" => date("Y"),
...$decodedValue
];
}
]
Second step: Set up your default value within your Vue-Component (this one will only show up when the field is used within a field of type: object)
// Vue-Component (WhateverFieldName.vue), with const now = new Date();
props: {
value: {
type: Object,
default: { quarter: Math.ceil(now.getMonth() / 3), year: now.getFullYear() }
}
}
Digit grouping will be one of my next little projects I guess.