Left-Aligning Html Output From Sharepoint Calculated Columns
Understanding Calculated Columns in SharePoint
SharePoint calculated columns enable users to carry out computations and transform data within SharePoint lists and libraries. The output text from calculated columns is right-aligned by default within SharePoint views and reports.
Key Attributes of Calculated Columns
- Allow calculations using mathematical and logical operators
- Enable data transformations such as concatenation, substrings, replacements
- Output values into views and reports for end users
- Format output values using text, numbers, currencies, dates, etc.
- Reference other columns and metadata values
Default Alignment Behavior
The formatted text output from SharePoint calculated columns is right-aligned by default in both views and reports. This default alignment applies when displaying calculated columns in:
- List and library views
- SharePoint web part pages
- Report Center reports and charts
- Power BI and Excel reports connected to SharePoint
Why Left Align Output?
The right-aligned output from SharePoint calculated columns can look unprofessional and out of place in many scenarios. Left-aligning the formatted text matches the alignment of other types of column data.
Improving Readability
In views, reports, and charts with multiple data fields, having a right-aligned calculated column disrupts scannability and readability. Left-alignment provides a more uniform structure for the eye to scan each row.
Professional Presentation
Right alignment causes calculated columns to stick out in an unappealing manner when presenting SharePoint list data in reports and dashboards. Left alignment makes the view more aesthetically pleasing.
Matching Other Columns
Since most text-based columns in SharePoint have left-aligned output, calculated columns with right-aligned text look inconsistent. Left aligning enables calculated columns to blend in visually.
Using HTML to Left Align Calculated Column Output
By using HTML tags and alignment styles within the calculated column formula, users can override the default right alignment. SharePoint calculated columns allow the use of a wide range of HTML formatting.
HTML Tags Allowed in Formulas
The key HTML tags that can be utilized in calculated column formulas for alignment and formatting include:
- <div> – Block element for applying alignment and styles
- <span> – Inline element for applying styles
- <b> – Bold text
- <i> – Italic text
- <font> – Font face and color
Alignment Styles
The main CSS style property that controls text alignment in HTML is:
- text-align – Values of left, right, center, justify
This can be applied in a few ways:
- Inline style attribute on elements – <div style=”text-align:left”>
- Internal CSS style block
- Classes and IDs referring to external CSS files
Example Left-Aligned Calculated Column
Here is a sample calculated column formula that left-aligns the output while allowing other transformations and calculations:
"<div style='text-align:left'>"+[Column1]+"</div>"
Formula Breakdown
- Encloses the column reference in a div with a left-aligned style
- Column1 value is concatenated with the HTML tags
- Allows additional formatting or logic around Column1
- Works with multiple columns and complex formulas
Usage Considerations
Some key points about using the HTML alignment technique in SharePoint calculated columns:
- Validate formulas to catch HTML errors
- Test alignment rendering in different reports and views
- Refactor very long formulas for readability
Additional Tips for Formatting Output
Besides aligning text, other formatting can improve calculated column output such as fonts, bolding, and colors.
Commonly Used HTML Tags
- <b> and <strong> – Bold font weight
- <i> and <em> – Italic font style
- <u> – Underline text decoration
- <font> – Font face and color styles
View Formatting Options
In SharePoint views, conditional formatting and JSON-based view formatting enable more advanced styling and layout options for calculated columns and their HTML output.
Summary
- Left align calculated column output with the HTML div tag and text-align style
- Improves readability compared to default right alignment
- HTML formulas allow calculations while controlling alignment
- Additional formatting via HTML tags increases display quality