Monthly Archives: October 2015

SharePoint JavaScript Multi Select Choice Field – return nice format

Getting some event items from SharePoint in JavaScript? Have a multiselect choice field for caragories? Here's some handy JavaScript for cleaning out the rubbish ';#' and returning a nice comma delimited list

function cleanArray(actual){
  var newArray = new Array();
  for(var i = 0; i<actual.length; i++){
      if (actual[i]){
        newArray.push(actual[i]);
    }
  }
  return newArray;
}

function getEventCategory(inCategoriesString)
{
        var eventCateory = '';
        var eventCategories = inCategoriesString.split(';#');
        eventCategories = cleanArray(eventCategories);
        
        if (eventCategories.length == 1)
        {
        	eventCateory = eventCategories[0];
        }
        else
        {
        	for (i = 0; i < eventCategories.length; i++)
        	{
        		if (i == eventCategories.length - 1)
        		{
        			eventCateory += eventCategories[i];
        		}
        		else
        		{
        			eventCateory += eventCategories[i] + ', ';
        		}
        	}
        }

        return eventCateory;
}

 

ContentByQuery not working with OrderBy

I had some issues where I put a content by query web part in a page and when I added the OrderBy clause, it just stopped showing anything with no errors. I ended up putting the whole query on one line with no spaces and it started working. Not that it worked with spaces and line breaks as a normal where query, but only stopped working when I added the orderby. Also if your data isn't showing, check the data mapping view fields :).  

 

<Publishing:ContentByQueryWebPart runat="server" 
            	        ChromeType="TitleOnly" 
            	        Title="Executive Team Update"
				        ItemXslLink="{{SITE_COLLECTION_URL}}/Style Library/site/stylesheets/itemstyle.xsl"
				        ItemStyle="ExecutiveUpdate"
                        ItemLimit="1"
                        DataMappingViewFields="{94f89715-e097-4e8b-ba79-ea02aa8b7adb},Lookup;{108fed99-9aa6-4776-9065-23c19a63b787},Image;{fa564e0f-0c70-4ab9-b863-0177e6ddd247},Text;{f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8},HTML;{f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8},HTML;{8c06beca-0777-48f7-91c7-6da68bc07b69},DateTime;{446b839b-6220-4c3d-8444-9041faf31257},Choice;"
				        DataMappings="TeamMember:{446b839b-6220-4c3d-8444-9041faf31257},ExecutiveTeamMember,Choice;|PublishingPageContent:{f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8},PublishingPageContent,HTML;|Description:{f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8},PublishingPageContent,HTML;|Title:{fa564e0f-0c70-4ab9-b863-0177e6ddd247},Title,Text;|LinkUrl:{94f89715-e097-4e8b-ba79-ea02aa8b7adb},FileRef,Lookup;|Created:{8c06beca-0777-48f7-91c7-6da68bc07b69},Created,DateTime;|ImageUrl:{108fed99-9aa6-4776-9065-23c19a63b787},FeaturedImage,Image;|"
                        QueryOverride="<OrderBy><FieldRef Name='Modified' Ascending='False' /></OrderBy><Where><Eq><FieldRef Name='ContentType' /><Value Type='Computed'>Executive Team Update Page</Value></Eq></Where>" />

 

Check if user is in a group in JavaScript

Useful if you want to show/hide buttons or html/controls on a page layout or in masterpage. Details from http://stackoverflow.com/questions/8841985/sharepoint-10-lists-want-to-limit-form-fields-per-user-groups/8847834#8847834

Link jquery 11 and spservices into your masterpage through script links or custom actions

function:

function IsGroupMember(GroupName)
{
    var isGroupMember = false;
    $().SPServices({
        operation: "GetGroupCollectionFromUser",
        userLoginName: $().SPServices.SPGetCurrentUser(),
        async: false,
        completefunc: function(xData, Status) {
            if($(xData.responseXML).find("Group[Name='" + GroupName + "']").length == 1)                
            {
                isGroupMember = true;
            }
        }
    });
    return isGroupMember;
}

Call function

Admin_Group = "Owners";
if (IsGroupMember(Admin_Group))
    $('.div').show;
else
    $('.div').hide();

 

Create a link in JavaScript to create a new page in pages library with custom content type

The following code should go in a page layout. This is useful for landing pages where users want to be able to quickly create pages.

Replace the content type id and url information. To find out the content type id you can navigate to the create page for your content page and look at the url. Note that this only works if you are deploying your content types with the same id every time. 

var siteCollectionUrl = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl;
                var returnURL = siteCollectionUrl + "/newsandevents/Pages";
                var url = '/newsandevents/_layouts/15/CreatePage.aspx?List=Pages&ContentTypeId=0x010100C568DB52D9D0A14D9B2FDCC96666E9F2007948130EC3DB064584E219954237AF3900DBB9F5D2AD4B436592E51AF81B2B2560007821B1F1235E524B982C1512AFCF515C' + returnURL;
                $('.jsCreateUpdate').html('<a href="' + siteCollectionUrl + url + '">+ Create Update</a>');

 

html:

<div class="create-update jsCreateUpdate">

</div>

 

Get radio button selected text from SharePoint choice field on page layout – JQuery, bind to change event

So I couldn't find anything obvious for this so chucked this together, hopefully useful for someone else 🙂

Page layout:

<div class="featured-breaking">
        <SharePoint:RadioButtonChoiceField FieldName="FeaturedBreaking" runat="server"></SharePoint:RadioButtonChoiceField>
</div>

JavaScript:

var selectedVal = "";
var selected = $(".featured-breaking input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.parent().attr('title');
}
console.log(selectedVal);

On load, bind to change event:

<script type="text/javascript">
	_spBodyOnLoadFunctionNames.push("LoadNewsEntryPage");
	function LoadNewsEntryPage() {
		$(".jsFeaturedBreaking input[type='radio']").bind("change", FeaturedBreakingChanged);
		FeaturedBreakingChanged();
	}

	function FeaturedBreakingChanged() {
		var selectedVal = "";
		var selected = $(".jsFeaturedBreaking input[type='radio']:checked");
		if (selected.length > 0) {
			selectedVal = selected.parent().attr('title');
		}
		if (selectedVal == "N/A") {
			$('.jsExpiresOn').hide();
		}
		else {
			$('.jsExpiresOn').show();
		}
	}
</script>