Mar 02 2020 12:12 PM
Hello,
i have a sharepoint online custom list with number column(s) with decimals and thousands separator. As far as I understand, numbers should be aligned right by default?
However in my case all numbers are aligned left which looks a bit odd (see screen shot).
What am I doing wrong?
Thanks for your help!
Sinan
Mar 03 2020 01:32 AM
Hi
Default Sharepoint aligns left!
If you want to align the text to the right, you should copy the following code and paste it in the
JSON Formatting to Customize
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "table",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"display": "table-cell",
"text-align": "right",
"vertical-align": "middle"
}
}
]
}
Thanks
Mar 03 2020 08:28 AM
Many thanks for your quick reply!
I copy/pasted your solution. Result is that the numbers are now aligned right but I lost the thousand separator and decimals with zeros (not showing). See screen shot below.
Basically it looks like numbers are converted into text? Is there a solution to align right AND keep the number formatting including thousand separator and number decimals for all rows?
I feel like we are almost there... :)
Cheers
Mar 04 2020 01:16 AM
I'm sorry but it takes more steps!
Sharepoint doesn't have the possibility to set decimal numbers.
As first thing to do you need to create a column, computed with the following formula:
=TEXT([column],".00")
Then insert the following code
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "table",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"display": "table-cell",
"text-align": "right",
"vertical-align": "middle"
}
}
]
}
Thanks
Mar 04 2020 03:13 AM - edited Mar 04 2020 03:15 AM
Again, many thanks for taking time to help me with my question. I tried it and it is very close. The only missing part is now the thousand separator: Is that possible?
And will I be still able to make number calculations with this type of column?
Cheers
Sinan
Mar 04 2020 03:33 AM
Solution
Yes, you need to replace the formula:
=TEXT([Column],"###,###.00")
This type of modification doesn’t have any impact on the original column
Thanks
Mar 04 2020 03:42 AM
You rock! It works, many many thanks :)
For the benefit of all, here comes a summary of the steps:
- create a new calculated column with this formula: =TEXT([Column],"###,###.00")
- format this new calculated column with:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "table",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"display": "table-cell",
"text-align": "right",
"vertical-align": "middle"
}
}
]
}
Jul 09 2020 02:24 AM
This is great information but does it mean that the user has to enter the value in one column and then we use this calculated column to present the data right aligned?
So then the users would have to be aware of this if making any edits afterwards?
When I created a new column called "Amount" and entered the formula =TEXT([Amount],"###,###.00")
I get an error saying the column doesn't exist?
Thanks!
Jul 14 2020 05:05 AM
@markikav Hi, cannot help you with the error message, I am not technical expert. Your other question to make the user aware of the two columns: actually I use the the "second" column in a specific view or readers only so no issue there with having "duplicated" the columns.
Jul 15 2020 03:55 AM
Would you mind sending the screenshot showing the formula that you insert and the errors that you get?
Thanks
Feb 03 2021 06:47 PM
@Sinan621 - I've stumbled across a cleaner solution to keep the thousands formatting (or any other formatting you have set) - just add .displayValue after @currentField. That returns a formatted string, using the columns format settings.
For example:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "table",
"width": "100%"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField.displayValue",
"style": {
"display": "table-cell",
"text-align": "right",
"vertical-align": "middle"
}
}
]
}
Feb 04 2021 06:54 AM
@Mike_Honey Thanks for sharing, I have applied you formatting proposal to a number column, then numbers just "disappear", when I remove the formatting the numbers are visible again but not formatted as desired. Maybe this is applicable for "calculated columns" only?
Feb 04 2021 04:20 PM - edited Feb 04 2021 04:48 PM
@Sinan621 - my tests so far are regular number columns, so it can work. Sorry it didn't work for you. .displayValue is mentioned on this page:
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
If I find out more I'll post back here.
Mar 27 2021 09:53 AM
I have a calculated column of dollar amounts. In the data type returned from this formula, I've selected currency. How can I have my column, right align, with $ sign, and thousands commas, stay in tact? I have chosen 0 decimal points.
Thank you!
Apr 20 2021 08:53 PM
Mar 04 2020 03:33 AM
Solution
Yes, you need to replace the formula:
=TEXT([Column],"###,###.00")
This type of modification doesn’t have any impact on the original column
Thanks