How To Insert Doctype In Visual Studio 2013

1. Go to top of the page

2. Right Click > Insert Snippet > HTML

3. Select HTML or XTHML doctype

jQuery - Checkbox Check and Uncheck

There are two ways to check or uncheck checkbox using jQuery
1. The first one by using property

// to check
$('#theCheckbox').prop('checked',true)

// to uncheck
$('#theCheckbox').prop('checked',false)

This sets the property like:

checkboxObject.checked=true;

2. The second one by using attribute

// to check
$('#theCheckbox').attr('checked','checked')

// to uncheck
$('#theCheckbox').removeAttr('checked')

Office 365 SharePoint 2013 - Blog Customization - Show Posts By Author - Part 1

Recently I worked on blog customization project which required to show the posts by authors in Office 365 SharePoint 2013 public facing site blog.

Here is the guide you can use to do same for yourself.
Part 1: Create a page that shows the authors posts
Part 2: Show authors list on left navigation on blog page

Step 1: Get ListId, ListName and WebId from Posts.aspx

Open your site in SharePoint Designer 2013
Go to "All Files" on left and then "Pages" library

Right click on "Posts.aspx" and choose "Edit Fie in Advance Mode"

Use find tool to find "ListId" and then grab the ListId and ListName value

Use find tool to find "WebId" and then grab "WebId" value

Step 2: Make WebPart ready

Download the WebPart and edit it (for example Notepad++).
Replace the ListId, ListName and WebId value that we grabbed in Step1, take a look at following screenshot of replacement done:

Save this WebPart now.

Step 3: Create a page to show author's post

Create a new page and name it "authorposts"

While the page in Edit mode, Go to "Insert" > "WebParts" > "Upload Web Part" and browse to the WebPart that you created in Step2. When prompted click "OK" to save the page.

The WebPart is still not added, once again go to "Insert" tab > "WebPart" >  "Imported Web Parts" > "AuthorPosts.webpart" and finally click on "Add" button (on right)

Now save the page

We are done with this step now, so far we have created a page that has WebPart that actually shows the posts.
Now it turns to show the authors list on the left navigation so that users can browser. Let's move to Part 2

Office 365 SharePoint 2013 - Blog Customization - Show Posts By Author - Part 2

Part 1: Create a page that shows the authors posts
Part 2: Show authors list on left navigation of blog page

Step 1: Download the XSL file and upload it to "Site Assets" library and finally grab the url of that uploded XSL file.

Step 2: Now repeat all the steps mentioned in this step to following pages:

1. siteurl/Pages/Blog.aspx
2. siteurl/Pages/Posts.aspx
3. siteurl/Pages/Post.aspx

Edit the page and click on "Add Webpart" on left navigation

Add "Posts" WebPart

Edit the WebPart
Paste the XSL link in Miscellaneous > XSL Link

Specify title in Appearance > Title

Specify url and description in Advance > Title Url & Advance > Description
(This will help not to user navigate away from the page)

Hit OK and Save the page

SharePoint 2013 Fixed Width Content

I am modifying the oslo.master to show the content in fixed width.

1. Edit the required MasterPage

In SharePoint Designer 2013 open your site.

Click on MasterPage under Objects on left.

Edit the oslo.master

2. Find the div tag having id="s4-workspace"

Add following attribute

class="s4-nosetwidth"

style="margin:1px;"

3. Find the div tag having id="s4-bodyContainer"

Add following attribute

class="s4-nosetwidth"

style="width:960px; margin:0 auto;"

Ensure it looks like following:

Finally save the MasterPage and you are done!

SharePoint 2013 REST API - Get File URL From Document And Picture Library

By default RESP API query for document or picture library result does not include file URL, you need to include field FileRef to return it.

https://techamit.sharepoint.com/_api/web/lists/getbytitle('Style%20Library')/items?$select=FileRef,ID

SharePoint Branding - Add CSS / Stylesheet to MasterPage And Layout Page

I just wanted to make this small note for myself:

Add stylesheet to MasterPage

Put the code within head tag

<link rel="stylesheet" runat="server" type="text/css" href="<%$SPUrl:~SiteCollection/Style Library/Branding/css/styles.css%>" />

In case of layout pages:

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<link rel="stylesheet" runat="server" type="text/css" href="<%$SPUrl:~SiteCollection/Style Library/Branding/css/styles.css%>" />
</asp:Content>

Nintext Form - Custom Date Input Control

I was assigned to do a Nintext Form and when it came to date of birth input, relaying on date picker control was not a good idea, so decided to take input in custom way.

Here is is how I did it.

Step 1: Create control

Put three controls each for Date, Month and Year
Date and Year is Textbox
Month is dropwown list. Open settings for this dropdown and specify choices with following and also specify first choice as default value otherwise dropdown will have "Please selection one..." as first option.

01 (Jan)
02 (Feb)
03 (Mar)
04 (Apr)
05 (May)
06 (Jun)
07 (Jul)
08 (Aug)
09 (Sep)
10 (Oct)
11 (Nov)
12 (Dec)

Step 2: Assign CSS class to controls

Nintext default date picker control: custom-dob
Date control: custom-dob-dd
Month control: custom-dob-mmm
Year control: custom-dob-yyyy

Step 3: Add Javascript to Form's settings

Bring up the form's settings by going to tab Nintext Forms  > Settings

Paste following code in "Custom Javascript" section input box.

// Update Nintext DOB calendar control on input / chages of our custom control
var customDateInput = [];

NWF$(document).ready(function () {
    customDateInput.push({
        dt: NWF$('.custom-dob input'),
        d: NWF$('.custom-dob-dd input'),
        m: NWF$('.custom-dob-mmm select'),
        y: NWF$('.custom-dob-yyyy input'),
        format: 'dmy'
    });
});

function CustomDateInputHandler(idx) {
    // This function updates the date picker control
    // Find the controls from collection
    var item = customDateInput[idx];
    // Get date,month and year
    var d = item.d.val();
    var m = item.m.prop('selectedIndex') + 1;
    var y = item.y.val();
    // Build the date in specified format
    var dt;
    if (item.format==='mdy'){
        dt = m + '/' + d + '/' + y;
    }
    else if (item.format==='ymd'){
        dt = y + '/' + m + '/' + d;
    }
    else{
        dt = d + '/' + m + '/' + y;
    }
    // Update date picker control
    item.dt.val(dt);
}
NWF$(document).ready(function () {
    if (customDateInput.length === 0) return;
    for (var i = 0; i < customDateInput.length; i++) {
        curItem = customDateInput[i];
        // Save index of this item in attribute
        curItem.d.attr('custom-date-index', i);
        curItem.m.attr('custom-date-index', i);
        curItem.y.attr('custom-date-index', i);
        
        // Bind change event to date,month and year.
        // On change it will call a function with index
        // in the collection
        curItem.d.change(function () {
            CustomDateInputHandler(NWF$(this).attr('custom-date-index'))
        });
        curItem.m.change(function () {
            CustomDateInputHandler(NWF$(this).attr('custom-date-index'))
        });
        curItem.y.change(function () {
            CustomDateInputHandler(NWF$(this).attr('custom-date-index'))
        });
    }
});

Save the form and test if changing custom control is updating default datepicker control value correctly.

Step 4: Hide default datepicker control

Open the form's setting page by going to tab Nintext Form > Settings
Paste following code in "Custom CSS" section input box:

.custom-dob{
   visibility:hidden;
}

Here is design and final rendered look of the test form:

If more than one control is required

If you want to have more than 1 custom date picker, you need to copy the following code and replace the css class with your own. Also, take a look at the screenshot below:

The code you can use:

customDateInput.push({
    dt: NWF$('.custom-dob input'),
    d: NWF$('.custom-dob-dd input'),
    m: NWF$('.custom-dob-mmm select'),
    y: NWF$('.custom-dob-yyyy input'),
    format: 'dmy'
});

Changing the format of date

You might have notice format: 'dmy', you can change the value of dmy to following:

1. dmy for d/m/yyyy
2. mdy for m/d/yyyy
3. ymd for yyyy/m/d

WebPart Gallery Url - SharePoint 2010 / 2013

I could not found a link to navigate to webpart gallery in Office 365 SharePoint 2013 public facing site.
After searching I found a blog where it was listed, thanks to: http://heathersolomon.com/blog/articles/1116.aspx

/_catalogs/wp/Forms/AllItems.aspx

Load jQuery If Not Loaded

The following script loads the jQuery from specified source if jQuery is not already loaded on page.

You need to call the function ensurejQuery with parameter of source jQuery to used.
Example:

ensurejQuery('http://code.jquery.com/jquery-1.11.0.min.js');

The complete code:

function ensurejQuery(src) {
    if (typeof window['jQuery'] == 'undefined') {

        // if HTML5 url
        if (src.substring(0, 2) === '//') {
            writeScriptTag(src);
            return;
        }

        // If this page is requested as secure ('https://') 
        // use same for script source
        if (location.protocol === "https:" && src.substring(0, 6) !== 'https:') {
            var httpsUrl = src.replace('http://','https://')
            writeScriptTag(httpsUrl);
            return;
        }

        writeScriptTag(src);
    }
    function writeScriptTag(jslocation) {
        document.write('<scr' + 'ipt type="text/javascript" src="' + jslocation + '"></sc' + 'ript>');
    }

}

// Example:
// ensurejQuery('http://code.jquery.com/jquery-1.11.0.min.js');