Tuesday, February 25, 2014
Wednesday, February 19, 2014
jQuery - Checkbox Check and Uncheck
There are two ways to check or uncheck checkbox using jQuery
1. The first one by using property
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')
Friday, February 14, 2014
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
Go to "All Files" on left and then "Pages" library
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.
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 2013Go to "All Files" on left and then "Pages" library
Right click on "Posts.aspx" and choose "Edit Fie in Advance Mode"
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.
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)
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
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:
- siteurl
/Pages/Blog.aspx
- siteurl
/Pages/Posts.aspx
- siteurl
/Pages/Post.aspx
Add "Posts" WebPart
Edit the WebPart
Paste the XSL link in Miscellaneous > XSL Link
(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.
2. Find the
Add following attribute
3. Find the
Add following attribute
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;"
Finally save the MasterPage and you are done!
Wednesday, February 5, 2014
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
Tuesday, February 4, 2014
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 withinhead
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>
Monday, February 3, 2014
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.
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.
Date control:
Month control:
Year control:
Paste following code in "Custom Javascript" section input box.
Here is is how I did it.
Step 1: Create control
Put three controls each for Date, Month and YearDate 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
// 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.
Paste following code in "Custom CSS" section input box:
Here is design and final rendered look of the test form:

Step 4: Hide default datepicker control
Open the form's setting page by going to tab Nintext Form > SettingsPaste 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:
dmy
for d/m/yyyymdy
for m/d/yyyyymd
for yyyy/m/d
Sunday, February 2, 2014
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
After searching I found a blog where it was listed, thanks to: http://heathersolomon.com/blog/articles/1116.aspx
/_catalogs/wp/Forms/AllItems.aspx
Saturday, February 1, 2014
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
Example:
The complete code:
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');
Subscribe to:
Posts (Atom)