none
Color Coding SharePoint List Views or Data Views RRS feed

  • Question

  • Hi All,

    I have been engaged to modify existing customisations on several SharePoint sites.

    The Setup:

    • Each site has custom lists which are rendered through a view on web part on a dashboard.aspx page.
    • Each list has a status field with the following fields ('InProgress','Complete' and 'Incomplete')

     

    My Objective is to color code the status field rows depending on the value i.e if Status is 'Complete' then highlight 'Green' on the list view.

    My question is what would be the best approach since the data is sitting on views? I had thought of using jquery script and calculated columns but I hit a snag as i thought that solution best works with lists.

    Any ideas? would appreciate being pointed in the right direction.

    How can this be done using SharePoint Designer?


    The Best thing in Life is Life
    Thursday, December 15, 2011 7:56 AM

Answers

  • Hello,

    Yes you can do that in SharePoint Designer. Please have a look into this link:

    office.microsoft.com/en-us/sharepoint-designer-help/customize-data-views-and-forms-using-sharepoint-designer-HA101631678.aspx

    Hope it helps.


    Thanks & Regards, Chandra Shekhar
    • Marked as answer by GuYuming Friday, December 23, 2011 7:51 AM
    Thursday, December 15, 2011 9:42 AM
  • Here is a way that you can do that with Designer

    http://office.microsoft.com/en-us/sharepoint-designer-help/apply-conditional-formatting-to-a-data-view-HA010099624.aspx


    -victor

    Be a part of the community, please remember to indicate if your question/comment has been answered or is helpful.

    • Marked as answer by GuYuming Friday, December 23, 2011 7:47 AM
    Thursday, December 15, 2011 2:52 PM

All replies

  • Hi All,

    I have been engaged to modify existing customisations on several SharePoint sites.

    The Setup:

    • Each site has custom lists which are rendered through a view on web part  on a dashboard.aspx page.
    • Each list has a status field with the following fields ('InProgress','Complete' and 'Incomplete')

     

    My Objective is to color code the status field rows depending on the value i.e if Status is 'Complete' then highlight 'Green' on the list view.

    My question is what would be the best approach since the data is sitting on views? I had thought of using jquery script and calculated columns but I hit a snag as i thought that solution best works with lists.

    Any ideas? would appreciate being pointed in the right direction.

    How can this be done using SharePoint Designer?

     


    The Best thing in Life is Life
    • Merged by GuYuming Monday, December 19, 2011 4:36 AM duplicate
    Thursday, December 15, 2011 7:43 AM
  • We can easily achive that by using combination Calculated Column and Javascript / jquery.

    First Create a Calculated Column, and add the html code based on Status.

    Then using javascript or jQuery to render the html in form.

    Check following links to get some idea,

    http://blog.pathtosharepoint.com/2008/09/01/using-calculated-columns-to-write-html/

    http://blog.pathtosharepoint.com/2008/09/01/apply-color-coding-to-your-sharepoint-lists/


    Regards,
    Shantha Kumar .T | MCPD - SharePoint Developer 2010 | MCITP - SharePoint Administrator 2010
    (B) Shantha Kumar's Blog | (T)Follow me
    Thursday, December 15, 2011 8:34 AM
  • Hi Kumar,

    I am already familiar with the posts in the links you posted.

    I would like to know how i can achieve this by using SharePoint Designer.

    Mind you the color coding has to be executed on list views which rendered on a webpage via web part.

    Hope this outlines what I would like to achieve in a nutshell.

    Thanks.


    The Best thing in Life is Life
    Thursday, December 15, 2011 9:17 AM
  • Hello,

    Yes you can do that in SharePoint Designer. Please have a look into this link:

    office.microsoft.com/en-us/sharepoint-designer-help/customize-data-views-and-forms-using-sharepoint-designer-HA101631678.aspx

    Hope it helps.


    Thanks & Regards, Chandra Shekhar
    • Marked as answer by GuYuming Friday, December 23, 2011 7:51 AM
    Thursday, December 15, 2011 9:42 AM
  • Thanks Shekar,I had already reviewed that one as well.I was looking for something that I could manipulate more at code level.

    I think I will try your suggestion.I guess more ideas will flow in as I work on it.


    The Best thing in Life is Life
    Thursday, December 15, 2011 11:12 AM
  • Here is a way that you can do that with Designer

    http://office.microsoft.com/en-us/sharepoint-designer-help/apply-conditional-formatting-to-a-data-view-HA010099624.aspx


    -victor

    Be a part of the community, please remember to indicate if your question/comment has been answered or is helpful.

    • Marked as answer by GuYuming Friday, December 23, 2011 7:47 AM
    Thursday, December 15, 2011 2:52 PM
  • There are several ways to achieve this. I've written an article on our company blog that provides links and background information on each on these options:

    How to do list highlighting in SharePoint

    In summary, these options are:

    Client based

    • JavaScript: Put some JavaScript code into a Content Editor Web Part (perhaps not so useful, as you've mentioned you've already tried this)
    • Designer: Use SharePoint Designer to set up Conditional Formatting (the article has a link to a good guide by Frederique Harmsze)

    Custom Field Type

    • Code it yourself: Make your own custom field type from scratch (better for a code-level solution)
    • Buy: Purchase a pre-made solution (we happen to sell one of those :) )
    • Marked as answer by GuYuming Friday, December 23, 2011 7:47 AM
    • Unmarked as answer by GuYuming Friday, December 23, 2011 7:49 AM
    Tuesday, December 20, 2011 8:55 AM