Sharepoint Online, number column NOT aligned right

[Sinan621]

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

[#2]

@Sinan621 

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

[#3]

@FabioO365GoD 

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

[#4]

@Sinan621 

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

[#5]

@FabioO365GoD 

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

[#6 · Accepted solution]

@Sinan621 

Yes, you need to replace the formula:

=TEXT([Column],"###,###.00")

This type of modification doesn’t have any impact on the original column

Thanks

[#7]

@FabioO365GoD 

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"
}
}
]
}

[#8]

@Sinan621 

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!

[#9]

@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.

[#10]

@markikav 

Would you mind sending the screenshot showing the formula that you insert and the errors that you get?

Thanks

[#11]

@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"
}
}
]
}

[#12]

@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?

[#13]

@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.  

[#14]

@Mike_Honey 

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!

[#15]

@Hiker10 - did you try my example above? It should work in your scenario.