English:

Conditional formatting now becomes easier using SharePoint Designer 2010. We can create intelligent view which able to highlight some important pointer in the display. There are 3 types of conditional formatting:

1. Show content , show content based on the pre-specified conditions
2. Hide content , hide content based on the pre-specified conditions
3. Apply formatting , apply formatting based on the pre-specified conditions.

Visual Touch for Easy Reading

Imagine, that you have developed a workflow that uses task list to assign task to the users. The standard task list, may look like this:

Actually there is nothing wrong with the task list web-part. However, since there isn’t any pointer on important information in the task list – then the message may not be conveyed efficiently to the reader.

Using conditional formatting, we will be able highlight overdue tasks, so that the task will get more attention from the user. In the picture below, we add red hand icon, if the task is overdue.

So, how would we do that?

Following step-by-step will show how to create conditional formatting using SharePoint Designer 2010. I will demonstrate how to add red-hand icon to the overdue task.

1. Open original task list view in SharePoint Designer 2010.

2. Select Title column tag and then create conditional formatting by selecting Apply formatting….

3. Define formatting condition as follows:

Due Date  <  [Current Date]     And

Status      <>  ‘Completed’

and then click Set Style.

4. I have uploaded the icon in Site Assets gallery, so that I can use it as background-image.

And finally I have configure my style to:

background-image: url(‘../../SiteAssets/Pointer_red_22x17.gif’); background-repeat: no-repeat; background-position: left bottom; text-indent: 20px

5. Save the changes, and you’ve done with the conditional formatting.

Finally, adding visual touch using conditional formatting is also adding more value to the user. It will make the information more knowledgeable than plain presentation.

English

In previous post I have demonstrated “How to create cascading lookup field” in SharePoint 2010 using InfoPath. I will extend the possibility by utilizing Client Object Model and SharePoint Designer; therefore we don’t need InfoPath to have the cascading lookup field.

Using same scenario where City is cascading lookup field from the selected Country, we’ll see together how Client Object Model solve the problem. In this solution we need to create JS referral to SP.js for Client Object Model and JQuery to help us working with DOM.

Some key points in the video:

1. Put JQuery distribution in 14hive\Layouts.

2. Add Javascript link referral in the AdditionalPageHead place holder.

   1: <SharePoint:ScriptLink Language="Javascript" Localizable="False" runat="server" Name="jquery-1.4.4.min.js"/>

   2: <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false"/>

3. Add Javascript code to modify cascading selector and create Client Object Model call to retrieve cascaded value in Main conten place holder.

   1: <script type="text/javascript">

   2: // JQuery_Script

   3: 

   4: var spListItems;

   5: 

   6: // Cascading lookup main function

   7: function FilterLookup(filterSource,lookupList)

   8: {

   9:    var filterElement = $("select[title='" + filterSource + "'] option:selected");

  10:    if(filterElement.length == 0) return;

  11: 

  12:    var selectedFilterText =  filterElement.text();

  13:    var selectedFilterValue = filterElement.value;

  14:

  15:    var clientCtx = new SP.ClientContext.get_current();

  16:    var spList = clientCtx.get_web().get_lists().getByTitle(lookupList);

  17:

  18:    var camlQuery = new SP.CamlQuery();

  19:    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\''+ filterSource +'\'/>' +

  20:         '<Value Type=\'Text\'>'+ selectedFilterText +'</Value></Eq></Where></Query></View>');

  21:

  22:    this.spListItems = spList.getItems(camlQuery);

  23:    clientCtx.load(spListItems);

  24:    clientCtx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

  25:

  26: } // 

  27: 

  28: function onQuerySucceeded(sender, args) {

  29: 

  30:    alert(this.selectedFilterText);

  31:    // Get CityElement Select or Input

  32:    var cityElement = $("select[title='City']");

  33:    if(cityElement.length == 0) { alert('Unknown'); }

  34: 

  35:     var options = '';

  36:     var listItemEnumerator = spListItems.getEnumerator();

  37:

  38:     while (listItemEnumerator.moveNext()) {

  39:         var oListItem = listItemEnumerator.get_current();

  40:         options += '<option value="' + oListItem.get_id() + '">' + oListItem.get_item('Title') +'</option>';

  41:     }

  42:    cityElement.html(options);

  43: }

  44: 

  45: function onQueryFailed(sender, args) {

  46:     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

  47: }

  48: 

  49: 

  50: // Attach function on document ready

  51: $(document).ready(

  52:    function() {

  53:       ExecuteOrDelayUntilScriptLoaded(FilterLookup,"sp.js");

  54:       //FilterLookup("Country","City");

  55:

  56:        // Get CountryElement Select or Input

  57:       var countryElement = $("select[title='Country']");

  58:       if(countryElement.length == 0)

  59:       {

  60:            countryElement = $("input[title='Country']");

  61:       }

  62:       if(countryElement.length != 0) {

  63:        if(countryElement[0].optHid) {

  64:           $("input[id='" + countryElement[0].optHid + "']").bind("propertychange", function() { FilterCity(); });

  65:

  66:        } else{

  67:           $("select[title='Country']").change(function() { FilterLookup("Country","City"); });

  68:

  69:        }

  70:

  71:    }

  72:

  73: 

  74:    }); // Document ready

  75: 

  76: </script>

4. Finally save and set the new form as default form.

English

I’ve found this question in forum – but since it was not easy to explain by sentences, I would like to create a sample working option here.

For example you have this list as data source:

In the data source you have 24hr format (I use string type for my sample, but you can use normal DateTime).

In SharePoint, to display the 24hr format in 12hr format, you need to use DataFormWebpart + proper ddwrt function like this:

The ddwrt function you need to play is:

ddwrt:FormatDate(string([Field]),1033,5)

[Field] is the field where you have the data, in this case internal name of “24hr format”.
1033 is the culture
5 is the predefined format , you can use ‘M/d/yyyy hh:mm:ss tt’ instead.

And the final result will be,

Happy design!