Open SharePoint Office documents in modal dialog

November 13, 2017 / Kannan / 0 Comments

Sometimes we need Microsoft Office documents to be opened in dialogs instead of SharePoint’s default behavior which is opening the document in the same window or tab.

The following code helps in implementing this.

Note: This code only works for office documents. For pdf documents look at the previous article.

<!-- Put this code below the list view web part -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
    $hrefVal = $("a[onclick*='return DispEx'][target!='_blank']").attr("href");
    $siteUrl = _spPageContextInfo.webServerRelativeUrl;

    $("a[onclick*='return DispEx'][target!='_blank']")
        .removeAttr("onclick")
        .attr("href", "javascript:OpenDocumentInDialogue(\"" + $siteUrl + "/_layouts/WopiFrame.aspx?action=default&sourcedoc=" + $hrefVal + "\")");

    function OpenDocumentInDialogue(href) {
        var o;
        $("body").append("<div id='docTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='" + href + "' width='100%' height='100%'></object></div>");
        o = {};
        o.html = $("#docTemp")[0];
        o.showMaximized = true;
        o.title = href.substring(href.lastIndexOf("/") + 1);
        o.dialogReturnValueCallback = OpenDocumentinDlgCallback;
        SP.UI.ModalDialog.showModalDialog(o);
    }

    function OpenDocumentinDlgCallback() {
        // do something here when the dialog closes
    }
</script>

 

Open SharePoint PDF documents in modal dialog

November 13, 2017 / Kannan / 0 Comments

Sometimes we need PDF documents to be opened in dialogs instead of SharePoint’s default behavior which is opening the document in the same window or tab.

The following code helps in implementing this.

Note: This code only works for PDF documents. For office documents look at the next article.

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $("a[href$='.pdf']").each(function() {
        $(this).removeAttr("onclick").attr("href", "javascript:OpenDocumentInDialogue(\"" + this.href + "\")");
    });

    function OpenDocumentInDialogue(href) {
        var o;
        $("body").append("<div id='docTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='" + href + "' width='100%' height='100%' type='application/pdf' ></object></div>");
        o = {};
        o.html = $("#docTemp")[0];
        o.showMaximized = true;
        o.title = href.substring(href.lastIndexOf("/") + 1);
        o.dialogReturnValueCallback = OpenDocumentInDialogueCallback;
        SP.UI.ModalDialog.showModalDialog(o);
    }

    function OpenDocumentInDialogueCallback() {
        // Do something here when the dialog closes
    }
</script>

 

Displaying SharePoint’s “Please wait…” or “Working on it…” dialog box

November 3, 2017 / Kannan / 0 Comments

The following code helps in displaying the “Working on it…” dialog box available in SharePoint 2013 or SharePoint Online.

Before you being the background operation, call the function “RequestStarted“. Once the background operation has been completed, call the function “RequestEnded“.

function RequestEnded(sender, args) {
    try {
        waitDialog.close();
        waitDialog = null;
    } catch (ex) {}
};

function RequestStarted(sender, args) {
    var waitDialog;
    ExecuteOrDelayUntilScriptLoaded(ShowWaitDialog, "sp.js");
};

function ShowWaitDialog() {
    try {
        if (waitDialog == null) {
            waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress...', 120, 440);
        }
    } catch (ex) {}
};

Source: Sharepoint Stackexchange

Change new item text in SharePoint

July 17, 2017 / Kannan / 0 Comments

The following script changes the “new item” link button in SharePoint view form to whatever we desire.

Add either of the script to content editor web part.

Plain JavaScript version: (This code assumes that there is only one “new item” text in the entire page.)

<script>
    document.addEventListener("DOMContentLoaded",
        function () {
            ExecuteOrDelayUntilScriptLoaded(function () {
                var ReRenderListView_old = ReRenderListView
                ReRenderListView = function (b, l, e) {
                    ReRenderListView_old(b, l, e)
                    changeText()
                }
            }, "inplview.js")
            changeText()
        }
    );

    function changeText() {
        var element = document.querySelector('#idHomePageNewItem span:nth-child(2)')
        element ? (element.innerHTML = "Add item") : null
    }

</script>

jQuery version: (This code can replace any number of “new item” text)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
    $(document).ready(function () {

        var spans = document.getElementsByTagName("span");
        for (var i = 0; i < spans.length; i++) {
            if (spans[i].innerHTML == "new item") {
                spans[i].innerHTML = "add item";
                break;
            }
        }

    });

</script>

Source: sharepoint.stackexchange.com

Hide SharePoint list column

July 13, 2017 / Kannan / 0 Comments

Sometimes we need to hide specific SharePoint columns in a list view webpart. The following code will help with that.
Make sure this code is placed in a JS file and referenced using JSLink webpart property.
Just replace the HideColumn function’s array parameters [“Title”, “Created By”] with necessary column’s display names.

(function () {
    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.OnPostRender = PostRenderer;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();

function PostRenderer(ctx) {
    HideColumn(["Title", "Created By"],true);
}

function HideColumn(columns, hideOnlyHeader) {
    columns.forEach(function(columnName) {
        headerParentFirstNode = document.querySelectorAll("[displayname='" + columnName + "']")[0];
        if (headerParentFirstNode != undefined) {
            var header = headerParentFirstNode.parentNode;
            header.style.display = "none";
            if (!hideOnlyHeader) {
                var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
                for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) {
                    cells[i].style.display = "none";
                }
            }
        }
    });
}

 

SharePoint New Item Form Actions

June 23, 2017 / Kannan / 0 Comments

The following post describes 3 of the many new Form Actions available in SharePoint.

Cancel:
This example shows how to return to home page after user cancels creating the item.

$(document).ready(function() {
    $('input[value=Cancel]').click(function() {
        window.location.replace("https://<siteurl>/sites/Site/SitePages/Home.aspx");
    });
});

Pre-Save:
This example shows how to show an alert and wait for OK or Cancel action.

function PreSaveAction() {
    if (confirm("Proceed with saving the item?"))
        return true;
    else
        return false;
}

Post-Save:
This example shows how to return to home page after user creates the item.

function PostSaveAction() {
    window.location.replace = "https:///sites/Site/SitePages/Home.aspx";
    return true;
}

Do make a note that above code requires the Jquery is referenced in the page.

Sharepoint list quick edit not available?

June 20, 2017 / Kannan / 0 Comments

When you are vieweing a custom view and don’t see the “Edit” menu also called as “Quick Edit”, make sure that particular view has the “Tabular View” configured. This is one of the reasons why sharepoint list’s quick edit is not available in custom viewes.

Steps to configure “Tabular View” to enable quick edit.

  1. Goto -> List Settings -> Views -> Click on the view where the “Edit” doesn’t show up
  2. In the view edit page, expand “Tabular View” if not already expanded
  3. Check the “Allow individual item checkboxes ” checkbox.
  4. Click “OK” to save the view settings

Now the quick edit should have been enabled.

Note: This is applicable for modern view available in Office 365, SharePoint 2016 & SharePoint 2013.

Display attachments using JSLink in SharePoint

May 30, 2017 / Kannan / 0 Comments

Recently I had a requirement where the customer wanted to show the actual attachment’s URL in the list view instead of default Icon. Following JSLink code will help to do that.

(function () {
    var linkFiledContext = {};
    linkFiledContext.Templates = {};
    linkFiledContext.Templates.Fields = {
        "Attachments": { "View": OverrideAttachmentFieldRendering }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFiledContext);
})();

function OverrideAttachmentFieldRendering(ctx) {
    var itemId = ctx.CurrentItem.ID;
    var listName = ctx.ListTitle;
    return GetAttachments(listName, itemId);
}

function GetAttachments(listName, itemId) {
    var url = _spPageContextInfo.webAbsoluteUrl;
    var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
    var htmlString = "<span style='white-space: nowrap;'>No attachment(s)</span>";

    $.ajax({
        url: requestUri,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        async: false,
        success: function (data) {
            for (var i = 0; i < data.d.results.length; i++) {
                htmlString += "<a style='white-space: nowrap;'  href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
                if (i != data.d.results.length - 1) {
                    htmlString += "<br/>";
                }
            }
        },
        error: function (error) {
            console.log("An error occured while fetching attachment details. Details: " + JSON.stringify(error))
        }
    });

    return htmlString;
}

Source: https://social.msdn.microsoft.com/Forums/office/en-US/29f7998f-ffc5-4877-b975-a49631b53ba2/show-attachments-with-jslink?forum=sharepointdevelopment

Change SharePoint’s “there are no items to show in this view” message

May 25, 2017 / Kannan / 0 Comments

When a list has not data to be shown in the view, we see the following message.

There are no items to show in this view of the “<ListName>” list.

The following JSLink script helps to change this message.

(function () {
    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.Templates.OnPreRender = changeNoListItemMessage; //OR overrideCurrentContext.OnPreRender = changeNoListItemMessage;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();

function changeNoListItemMessage(ctx) {
    ctx.ListSchema.NoListItem = "No data";
}

Source: http://www.idubbs.com/blog/2015/jslink-csr-to-override-there-are-no-items-to-show-in-this-view/

Displaying SharePoint user presence indicator in CSR

May 23, 2017 / Kannan / 0 Comments

The following are code snippets which can be used to show a user’s Lync/Skype for Business presence status in SharePoint Client Side Rendering (CSR).

Default Render

<span>
    <span class="ms-imnSpan">
        <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
            <span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
                <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
            </span>
        </a>
    </span>
    <span>
        <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
            <img name="imnmark" title="" ShowOfflinePawn="1" class=" ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_2,type=sip"></img>
        </a>
        <span>User</span>
    </span>
</span>

With Picture Detail View

<div>
    <div class="ms-tableRow">
        <div>
            <span class="ms-imnSpan">
                <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
                    <span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
                        <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_661,type=sip"></img>
                    </span>
                </a>
            </span>
        </div>
        <div class="ms-tableCell ms-verticalAlignTop">
            <div class="ms-peopleux-userImgDiv">
                <span class="ms-imnSpan">
                    <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
                        <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_3452,type=sip"></img>
                    </a>
                    <span>
                        <img style="width:62px; height:62px; border:none" src="http://userimageurl" alt="User"></img>
                    </span>
                </span>
            </div>
        </div>
        <div class="ms-tableCell ms-peopleux-userdetails ms-noList">
            <ul style="max-width:150px">
                <li>
                    <div class="ms-noWrap">
                        <span>
                            <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
                                <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_34523,type=sip"></img>
                            </a>
                            <span>User</span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

With Picture

<div>
    <div>
        <span>
            <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
                <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
            </a>
            <span>
                <img style="width:62px; height:62px; border:none" src="http://userimageurl" alt="User"></img>
            </span>
        </span>
    </div>
    <div class="ms-floatLeft ms-descriptiontext">
        <span class="ms-verticalAlignTop ms-noWrap ms-displayInlineBlock">
            <span class="ms-imnSpan">
                <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
                    <span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
                        <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_2,type=sip"></img>
                    </span>
                </a>
            </span>
            <span class="ms-noWrap ms-imnSpan">
                <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
                    <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_3,type=sip"></img>
                </a>
                <span>User</span>
            </span>
        </span>
    </div>
</div>

Presence Only

<span class="ms-imnSpan">
    <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
        <span class="ms-spimn-presenceWrapper ms-imnImg ms-spimn-imgSize-10x10">
            <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-10x10x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
        </span>
    </a>
</span>

Picture Only

<div>
    <div>
        <div class="ms-tableCell">
            <span class="ms-imnSpan">
                <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink ms-spimn-presenceLink">
                    <span class="ms-spimn-presenceWrapper ms-spimn-imgSize-8x72">
                        <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-spimn-img ms-spimn-presence-disconnected-8x72x32" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_1,type=sip"></img>
                    </span>
                </a>
            </span>
        </div>
        <div class="ms-tableCell ms-verticalAlignTop">
            <div class="ms-peopleux-userImgDiv">
                <span class="ms-imnSpan">
                    <a href="#" onclick="IMNImageOnClick(event);return false;" class="ms-imnlink" tabIndex="-1">
                        <img name="imnmark" title="" ShowOfflinePawn="1" class="ms-hide" src="/_layouts/15/images/spimn.png?rev=23" alt="User Presence" sip="user@domain.com" id="imn_2,type=sip"></img>
                    </a>
                    <span class="ms-peopleux-imgUserLink">
                        <span class="ms-peopleux-userImgWrapper" style="width:72px; height:72px">
                            <img style="min-width:72px; min-height:72px; clip:rect(0px, 72px, 72px, 0px); max-width:72px" src="http://userimageurl" alt="User"></img>
                        </span>
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>

Source: http://www.sharepointcolumn.com/lync-presence-indicators-code-snippets-in-sharepoint-2013/

1 2 3 4 5 6 … 9