B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > T o p i c P o i n t > Calculated-Columns-HTML  

Web Part Page Title Bar image
T o p i c P o i n t
T o p i c P o i n t - A centralized place for topics with an Overview, related posts from BlogPoint, specific examples from ExamplePoint, and related internet resources.

 T o p i c P o i n t
O
HomeUse SHIFT+ENTER to open the menu (new window).
>
Calculated-Columns-FormulaUse SHIFT+ENTER to open the menu (new window).
>
Calculated-Columns-HTMLUse SHIFT+ENTER to open the menu (new window).
>
Document-LibraryUse SHIFT+ENTER to open the menu (new window).
>
Javascript-JQueryUse SHIFT+ENTER to open the menu (new window).
>
ListsUse SHIFT+ENTER to open the menu (new window).
>
Meeting-MinutesUse SHIFT+ENTER to open the menu (new window).
>
NavigationUse SHIFT+ENTER to open the menu (new window).
>
SharePoint-Add-onsUse SHIFT+ENTER to open the menu (new window).
>
WikiUse SHIFT+ENTER to open the menu (new window).

 ‭(Hidden)‬ docTip

 ‭(Hidden)‬ T o p i c P o i n t (select)
View All Site Content
Topic:Calculated Columns - HTML
 
Christophe from PathToSharePoint.wordpress.com was the first site that taught me the value of the calculated column beyond the standard features found using the column to do excel calculations.  He developed a script that allows you to communicate information in a list in new ways.  Think of the many graphical ways on a web site that you communicate information.  Now with the calculated column, Christophe's java script you are able to bring HTML and style sheets to a column and base it on fields in that row.
 
To use and display HTML in a calculated column you will need the following script found at PathToSharePoint.wordpress.com
 
Please follow these steps to be able to use the calculated column with HTML:
  1. To have the HTML calculated column display properly you must add the javascript.  The code can be found below in one of my BlogPoint posts.
  2. I recommend that you have the javascript in text file in a document library, this way you can link the text file to the CEWP.
    • Benefit of this is that if you need to change the javascript to an updated version you only need to update it in one place.
  3. Add a CEWP to the page you want the calculated column HTML to be viewed.  Move it at the end of all your webparts.
  4. Link the javascript file to the CEWP that you added.  Now you can see the result of your HTML.
 Examples - 1-Standard - Calculated Columns - HTML, Calculated Columns - Formulas, CSS/Theme, Document Library, Javascript/JQuery, Lists, Meeting Minutes, Navigation, Project Management, SharePoint Add-ons, Tracking System
›Images - SharePoint /_layout/images/ Full List
Here is a list of all the images found in SharePoint /_layout/images/ directory.
 
 Examples - 2-Advance - Calculated Columns - HTML, Document Library, Javascript/JQuery, SharePoint Add-ons
›Print Clean Pages and Lists
Here are tricks to prinitng a clean page or to be able to print a list from a page.
 
›Status/Progress Bar
This example shows how a progress bar can be created from several fields in a list using javascript and calculated column,
 
  Internet Resources - 2-Advance - Calculated Columns - HTML
›The Html Calculated Column
 <div>First site you should review with regards to using calculated column for HTML.&nbsp; This is what started it for me.</div> 

 Legend
1-Standard
Solutions that utilize the standard out-of-the-box features that come with WSS or MOSS.
2-Advance
Solutions that utilize Javascript/JQuery
3-Designer/3rd Party
Solutions that require SharePoint Designer or installing a 3rd party tool.

 ‭(Hidden)‬ TopicPointLinks
Title
Calculated Columns - HTML