SharePoint Archives : Page 2 of 5 : Binary Bits

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.

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/

Remove duplicate list items from SharePoint REST call result using JavaScript

May 17, 2017 / Kannan / 0 Comments

The following code snippet show how to remove duplicate list items in the JSON result of a SharePoint REST call using JavaScript.

Function Definition:

function RemoveDuplicateItems(items, propertyName) {
    var result = [];
    if (items.length > 0) {
        $.each(items, function (index, item) {
            if ($.inArray(item[propertyName], result) == -1) {
                result.push(item);
            }
        });
    }
    return result;
}

Function Usage:
In the below code, assumption is that, the REST call returns data.d.results and the column for which duplicate items need to be removed is Title

var items = data.d.results;
items = RemoveDuplicateItems(items, 'Title');

JSLink URL Tokens in SharePoint

May 17, 2017 / Kannan / 0 Comments

Following are some of the JSLink URL Tokens I have come across in SharePoint.

~site – reference to the current SharePoint site (or “Web”)
~sitecollection – reference to the current SharePoint site collection (or “Site”)
~layouts – version specific reference to the web application Layouts folder (so it will automatically swap out /_layouts/14 or /_layouts/15 for you)
~sitecollectionlayouts – reference to the layouts folder in the current site collection (e.g. /sites/team/_layouts/15)
~sitelayouts – reference to the layouts folder in the current site (e.g. /sites/teams/subsite/_layouts/15)

Few Examples:

~sitecollection/_catalogs/masterpage/
~site/siteassets/
~layouts/reputation.js

Source: https://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html

Refresh web part without refreshing page in SharePoint

May 16, 2017 / Kannan / 0 Comments

The following code shows how to refresh web part without refreshing page in SharePoint.

// Set Ajax refresh context
var eventAjax = {
    currentCtx: ctx,
    csrAjaxRefresh: true
};
// Initiate Ajax Refresh on the list
AJAXRefreshView(eventAjax, SP.UI.DialogResult.OK);

Source: https://pradiprathod.wordpress.com/2015/05/04/how-to-refresh-list-view-in-sharepoint-2013-using-javascript/

Load multiple JavaScript files in SharePoint JSLink

May 15, 2017 / Kannan / 0 Comments

To load multiple JavaScript files in SharePoint JSLink, insert a pipe symbol between multiple JavaScript file links in the JSLink field of webpart’s properties.

JSLink Field Example:

~sitecollection/SiteAssets/jquery.min.js|~site/SiteAssets/my-custom-file.js

A piple symbo is a “|” without quotes

Source: https://egilhansen.com/2013/03/11/jslink-the-simple-way-to-add-and-load-multiple-javascript-files/

Load scripts in SharePoint within custom Javascript or Workflow

May 11, 2017 / Kannan / 0 Comments

Following is the code which can be used to load JavaScript in sequence.

This code for example loads the reputation.js from SharePoint’s layouts folder & jQuery from site assets.

(function () {
    ExecuteOrDelayUntilScriptLoaded(function () {
        //sp.runtime.js has been loaded
        ExecuteOrDelayUntilScriptLoaded(function () {
            //sp.js has been loaded
            SP.SOD.registerSod('reputation.js', SP.Utilities.Utility.getLayoutsPageUrl('reputation.js'));
            SP.SOD.registerSod('jquery-3.2.1', '../SiteAssets/Scripts/jquery-3.2.1.min.js');
            SP.SOD.loadMultiple(['reputation.js', 'jquery-3.2.1'], function () {
                //reputation.js & jquery-3.2.1.min.js have been loaded.
                var context = SP.ClientContext.get_current();
                var web = context.get_web();
                //Check if jQuery has been loaded
                if (typeof jQuery != 'undefined') {
                    console.log("Jquery is loaded");
                }
                else {
                    console.log("Jquery is not loaded!");
                }
            });
        }, "sp.js");
    }, "sp.runtime.js");
})();

Source: https://sharepoint.stackexchange.com/questions/92082/uncaught-typeerror-cannot-read-property-get-current-of-undefined

1 2 3 4 5