Archive

Posts Tagged ‘SharePoint’

How to replace the SharePoint date calendar control with more user friendly jQuery calendar control

April 26, 2014 1 comment

When you use the SharePoint date and time type for date of birth field, you will notice that the calendar control is extremely non-user-friendly. You can only navigate month by month as shown below. To resolve the issue, you can customize the list form page using SharePoint designer and replace the OOB calendar control with popular jQuery control. The solution works for both SharePoint 2010,2013 and office365.

Here are the steps for how to achieve this.

1. Open SharePoint designer and create a New List Form called customNew and set as default form for the selected type.

2. Open style library in file explorer and copy jQuery and jQuery UI files into the style library in SharePoint site.

You can download the jQuery and jQuery UI from the web and the content of the contactPersonCustomNewForm.js is as below. I use the dd/mm/yy format as my locale in Regional Settings is English(New Zealand). You need to change this if you live in another country with different date format

$(document).ready(function() {
    	$("img#ctl00_m_g_540b9a50_52dc_4400_a58d_1db99555fddf_ff41_ctl00_ctl00_DateTimeField_DateTimeFieldDateDatePickerImage").parent().hide();
 		$("img#ctl00_m_g_540b9a50_52dc_4400_a58d_1db99555fddf_ff41_ctl00_ctl00_DateTimeField_DateTimeFieldDateDatePickerImage").hide();
	    $("input#ctl00_m_g_540b9a50_52dc_4400_a58d_1db99555fddf_ff41_ctl00_ctl00_DateTimeField_DateTimeFieldDate").datepicker({
		    changeMonth:true,
		    changeYear:true,
		    showOn: "button",
			buttonImage: "/_layouts/images/calendar.gif",
			buttonImageOnly: true,
			defaultDate:"01/01/1970",
			yearRange: "c-20:c+20",
			dateFormat: "dd/mm/yy"
	    });
});

In order to get the image and textbox selector above , you can open IE developer toolbar(click F12) and find the control ID as below:

3. Open SharePoint designer and edit the newly created New List Form customNew.aspx in advance mode. Then copy and paste the following links in the PlaceHolderAdditionalPageHead.

	<SharePoint:CssRegistration name="<%$SPUrl:~SiteCollection/Style Library/themes/ui-lightness/jquery-ui.css%>" runat="server"/>
	<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/jquery-1.10.2.js" Defer="false" runat="server"/>
	<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/jquery-ui-1.10.4.custom.min.js" Defer="false" runat="server"/>
	<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/contactPersonCustomNewForm.js" Defer="false" runat="server"/>

 

4. Now go to the list and click add, you will see the new calendar control as shown below

Advertisements

Truly understand the threshold for document set in document library in SharePoint

January 27, 2013 Leave a comment

Recently, I am working on an issue with threshold. The problem is that when the user navigates to a view of the document library, it displays the error message “list view threshold is exceeded”. However, in the view, it has no data. The list view threshold limit is 5000 by default for the non-admin user. This limit is not the number of items returned by your query; it is the total number of items the database needs to read to calculate the returned result set. So although the view does not return any result but to calculate the result (no data to show), it needs to access more than 5000 items in the database. To fix the issue, you need to create an index for the column that you use in the filter for the view. Let’s look at the problem in details. You can download a solution to replicate this issue here.

1. Go to Central Admin ==> Web Application Management ==>General Settings==> Click on Resource Throttling

2. Change the list view threshold in web application from 5000 to 2000 so that I can show the problem without loading more than 5000 items into the list.

FROM

TO

3. Go to the page that displays the approved view of the Loan application document set. It displays the message as shown below although I do not have any data returned for this view.

4. To get around this, you need to create an index column. Go to list settings and click on the Index columns.

012613_2210_Trulyunders5.png

5. Click on the “Create a new index” link.

012613_2210_Trulyunders6.png

6. Select the LoanStatus field as I use this filed as the filter to create the view.

012613_2210_Trulyunders7.png

7. After the index is created now I can access the approved view, as you can see it does not return any data.

012613_2210_Trulyunders8.png

Notes:

List View Threshold: Specify the maximum number of items that a database operation can involve at one time. Operations that exceed this limit are prohibited.

References:

SharePoint lists V: Techniques for managing large lists

Manage large SharePoint lists for better performance

http://blogs.technet.com/b/speschka/archive/2009/10/27/working-with-large-lists-in-sharepoint-2010-list-throttling.aspx

How to set the item level permission using Nintex2010 in SharePoint

January 7, 2013 Leave a comment

Recently, I need to use Nintex workflow to configure the item level permission. The requirement is that a SharePoint group “member group” have contribute permission to the item before manager approved the item and “member group” have read only permission to the item after the manager approved the item. This can be done quite easily using Nintex workflow as shown below.

Drag and Set item permissions and configure the item as shown below. (Note: you need to first remove the “member group” permission and then re-assign a different permission.)

ItemLevelPermissionNintex

Publish your workflow and run your workflow it will set the unique item level permission. You can download the workflow here.

How to create SharePoint2013 workflow using visual studio

December 5, 2012 2 comments

If you like to use Visual Studio to create workflow in SharePoint2013, here are the steps on how to get started.

1. Create a SharePoint sandbox solution.

2. Add a list workflow

3. I add a WriteToHistory to the workflow.

4. Here is the final solution looks like:

5. Deploy the sandbox solution to your Office 365 Preview and activate the site collection feature first

6. Then you can activate the site features in the following orders

7. You can run your work as shown below

8. Navigate to your workflow history list, you will see the workflow is successfully completed.

You can download the solution here.

Categories: SharePoint Tags: ,

How to fix “Add Host to Workflow Farm problem” when installing Windows Azure Workflow in SharePoint2013 Preview

July 23, 2012 Leave a comment

Problem:

When I try to configure the windows Azure workflow in SharePoint2013 preview, I got the following error see screenshot below. Detailed log can be found here.

Solution:

I asked the question in SharePoint StackExchange , Rajat’s help me to fix the problem .The solution for this is quite simple, instead of using the short form for your RunAs account, you should use the fully qualified name. So change administrator@YBBEST to administrator@YBBEST.COM
make the problem go away as shown below.

Additional problems you may face:

1.You also need to create an App Management  Service application and make sure App Management Service is started as shown below,otherwise you can not publish your SharePoint2013 workflow.

Having other problems , check out AC’S blog on trouble-shooting the installation.

References:

How to: Set up and configure SharePoint 2013 workflows

How to use SharePoint modal dialog box to display Custom Page Part3

June 4, 2012 Leave a comment

In the second part of the series, I showed you how to display and close a custom page in a SharePoint modal dialog using JavaScript and display a message after the modal dialog is closed. In this post, I’d like to show you how to use SPLongOperation with the Modal dialog box. You can download the source code here.

1. Firstly, modify the element file as follow

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="ReportConcern"
RegistrationType="ContentType"
RegistrationId="0x010100866B1423D33DDA4CA1A4639B54DD4642"
Location="EditControlBlock"
Sequence="107"
Title="Display Custom Page"
Description="To Display Custom Page in a modal dialog box on this item">
<UrlAction Url="javascript:
function emitStatus(messageToDisplay) {
statusId = SP.UI.Status.addStatus(messageToDisplay.message + ' ' +messageToDisplay.location );
SP.UI.Status.setStatusPriColor(statusId, 'Green');
}
function portalModalDialogClosedCallback(result, value) {
if (value !== null) {
emitStatus(value);
}
}
var options = {
url: '{SiteUrl}' + '/_layouts/YBBEST/TitleRename.aspx?List={ListId}&amp;ID={ItemId}',
title: 'Rename title',
allowMaximize: false,
showClose: true,
width: 500,
height: 300,
dialogReturnValueCallback: portalModalDialogClosedCallback };
SP.UI.ModalDialog.showModalDialog(options);" />
</CustomAction>
</Elements>

2. In your code behind, you can implement a close dialog function as below. This will close your modal dialog box once the button is clicked and display a status bar. Note that you need to use window.frameElement.commonModalDialogClose instead of SP.UI.ModalDialog.commonModalDialogClose

protected void SubmitClicked(object sender, EventArgs e)
{
//Process stuff
using (SPLongOperation longOperation = new SPLongOperation(Page))
{
string message = "You clicked the Submit button";
string newLocation = "http://www.google.com";
string information = string.Format("{{'message':'{0}','location':'{1}' }}", message, newLocation);
longOperation.LeadingHTML = "Processing the  application";
longOperation.TrailingHTML = "Please wait while the application is being processed.";
longOperation.Begin();
try
{
Thread.Sleep(5*1000);
var closeDialogScript = GetCloseDialogScriptForLongProcess(information);
longOperation.EndScript(closeDialogScript);
}
catch (ThreadAbortException)
{
//http://peterheibrink.wordpress.com/2009/09/07/splongoperation/
// Don’t do anything, this error can occur because the SPLongOperation.End
// performs a Response.Redirect internally and doesnt take into account
// that other code might still be executed
}
catch (Exception)
{
// When an exception occurs, the page is redirected to the error page.
SPUtility.TransferToErrorPage("There is a problem to process your application.");
}
}

protected static string GetCloseDialogScriptForLongProcess(string message)
{
var scriptBuilder = new StringBuilder();
scriptBuilder.Append("window.frameElement.commonModalDialogClose(1,").Append(message).Append(");");
return scriptBuilder.ToString();
}

Common problems:
If you misspell your dialogReturnValueCallback TO dialogReturnValueCallBack, your Callbakc will not work.

References:

How to: Display a Page as a Modal Dialog Box
Using SPLongOperation

 

Categories: ModalDialog Tags: ,