SharePoint 2010: Small workarounds for some big problems.

Sometimes we face challenges during development and customization for SharePoint applications and we find some really simple solutions to achieve required functionality. I also came across such situations and found some really small and simple workarounds to resolve the issues. This post is all about sharing my experience regarding that.


1. Read only Gantt view:
There are many people who are using Task list and want to display task details in Gantt view but they don't want to enable users to edit task items from Gantt view and permissions cannot be set at view level. They want their users to perform editing through edit forms because most of the times you don't include all the fields in Gantt view. I also came across such requirement. Although there are many solutions available on internet for this but I have found a simpler one and thought it to be worth sharing here.

In this solution all you have to do is to create calculated columns for all the fields required or you want to show in Gantt View. In my case those fields were Title, Start Date, End Date, so I created 3 calculated columns:

• Title_C

          Formula: =[Title]
          The data type returned from this formula is: Single line of text

• Start Date C

           Formula: =[Start Date]
          The data type returned from this formula is: Date and Time

• End Date C

           Formula: =[End Date]
          The data type returned from this formula is: Date and Time

After this I created a Gantt view with following sttings:

•  Columns:

     

• Gantt Columns: 

     
    

Here is the output I have got as a read only Gantt View


For Gantt View Toolbar, I have placed following code in a Content Editor Webpart:

css style to hide edit and delete options of GanttView:
<style>
        .ms-MenuUIRtL
        {
            display: none !important;
        }
        .clip16x16
        {
            display: none !important;
        }
        .clip9x6
        {
            display: none !important;
        }
    </style>
   
HTML to create Gantt view toolbar:
<a class="ms-cui-ctl-medium " id="Ribbon.List.GanttView.ZoomIn-Medium" role="button"
        href="javascript:WebPartWPQ2_JSGridController.ZoomInGantt();" unselectable="on"
        mscui:controltype="Button"><span class="ms-cui-ctl-iconContainer" unselectable="on">
            <span class=" ms-cui-img-16by16 ms-cui-img-cont-float" unselectable="on">
                <img src="/_layouts/1025/images/formatmap16x16.png" unselectable="on" alt="" style="top: -18px;
                    left: -58px" />
            </span></span><span class="ms-cui-ctl-mediumlabel" unselectable="on">Zoom In</span>
    </a><a class="ms-cui-ctl-medium " id="Ribbon.List.GanttView.ZoomOut-Medium" role="button"
        href="javascript:WebPartWPQ2_JSGridController.ZoomOutGantt();" unselectable="on"
        mscui:controltype="Button"><span class="ms-cui-ctl-iconContainer" unselectable="on">
            <span class=" ms-cui-img-16by16 ms-cui-img-cont-float" unselectable="on">
                <img src="/_layouts/1025/images/formatmap16x16.png" unselectable="on" alt="" style="top: -242px;
                    left: -178px" />
            </span></span><span class="ms-cui-ctl-mediumlabel" unselectable="on">Zoom Out</span>
    </a><a class="ms-cui-ctl-medium " id="Ribbon.List.GanttView.ScrollToTask-Medium"
        role="button" href="javascript:WebPartWPQ2_JSGridController.ScrollGanttToTask();"
        unselectable="on" mscui:controltype="Button"><span class="ms-cui-ctl-iconContainer"
            unselectable="on"><span class=" ms-cui-img-16by16 ms-cui-img-cont-float" unselectable="on">
                <img src="/_layouts/1025/images/formatmap16x16.png" unselectable="on" alt="" style="top: -34px;
                    left: -242px" />
            </span></span><span class="ms-cui-ctl-mediumlabel" unselectable="on">Scroll to Task
                Item</span> </a>

Note: "WebPartWPQ2_JSGridController" is object for Gantt View web part. This might be different in your case. So you have to find out the correct object (from view source or any development toolbar of web browser) and change the HTML accordingly for this solution.

2. HTML in calculated/single line of text field:

Once I had to place HTML links in XsltListViewWebPart and I had to send some data from list item in query string to the target page like ID of list item. I created a calculated column with following formula:

=CONCATENATE("<DIV><a href='http://mysite/pages/TargetPage.aspx?ItemID=", [ItemID] , "' > link text </a></DIV>")

This did not format HTML links in list item data so I needed to place following javascript in a Content Editor WebPart on same page to format links for all items in webparts:

<script type="text/javascript">
        function FromatHTML() {
            var theTDs = document.getElementsByTagName("TD");
            var i = 0;
            var TDContent = " ";
            while (i < theTDs.length) {
                try {
                    TDContent = theTDs[i].innerText || theTDs[i].textContent;
                    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
                        theTDs[i].innerHTML = TDContent;
                    }
                }
                catch (err) { }
                i = i + 1;
            }
        }

        FromatHTML();

</script> 

This script will format the HTML in list item fields of XsltListViewWebPart.

 

3. Hide Add New Item link from XsltListViewWebPart:

Once I needed to add some XsltListViewWebParts on a single page and I was asked to remove "Add new item" option from each web part. So I had to hide "Add new item" link from the bottom of every webpart. For this I just added following css style on the page and it made the link invisible from the page for all web parts:

<style type="text/css">
TD.ms-addnew {
    DISPLAY: none !important
}</style>

4. Hide edit/delete button from display/edit form's ribbon using javascript:

Here is another problem with a simpler solution. Display and Edit form Ribbon has edit and delete option. But in my case I had to disable editing and deletion for a particular list item once it has passed through a stage of approval workflow. Before that approval stage only owner and approvers can edit and delete the list item. So I had some conditions where I need to show edit and delete options and for the rest of the cases I had to disable or hide these options. Well this did not seem to be achieved through any Out Of The Box (OOTB) feature or options and I was also not interested to write any event receiver for this scenario.

This was accomplished through a custom web part having a panel with following javascript and this panel was rendered/made visible programatically:

<script type="text/javascript">

        function HideDeleteOption() {
            try {                    document.getElementById("Ribbon.ContextualTabs.InfoPathListDisplayTab.Manage.Controls.btnDelete-Medium").style.display = "none";
            }
            catch (ex) {
            }
        }

        function HideEditDeleteOption() {
            try {                document.getElementById("Ribbon.ContextualTabs.InfoPathListTab.Actions").style.display = "none"
            }
            catch (ex) {
            }
        }

        function HideEditButton() {
        try {
            document.getElementById("Ribbon.ListForm.Display.Manage.EditItem-Large").style.display = "none";
        }
        catch (ex)
        { }
    }
        setTimeout("HideDeleteOption();", 100);
        setTimeout("HideEditDeleteOption();", 100);

        setTimeout("HideEditButton()", 100);

</script>  

This webpart was added on Display and Edit Forms for the list.