Sharepoint 2013 create custom callouts

Callout pop up is one more UI change in SharePoint 2013. Metro UI was introduced in share point 2013 and one of the new concept is Callouts. This is very light weight Ui that shows item, user information and shows actions.

here is the images shows some of the Callouts in SharePoint 2013.
For a document Library,

Task list,

Structure:
In the Callout structure, 

Title: Title area of the Callout 

Content: Content Area to show content.

Close: Close button, that to close the popup. we can close callout by using close button, clicking on out side the Callout and pressing escape button.

Beak: Way to show the callout. Here we have two options, Top to Bottom, Left to Right. Means when we click/hover on the link the way that callouts shows.  Callouts can show Top to Bottom, Left to right.

SharePoint 2013 - Callouts:
In SharePoint 2013, we have special JS files to run callouts. Callout.js, is the main JavaScript file for callouts in share point 2013. All the java script files will be located under 15/layouts folder.Here is image shows the values in debugging mode.

How to create: 
Create an Html element as launch point for the callout. This is the source (click/hover) for calling callout popups. 

<div id="calloutLaunchPoint">callout Launch Point</div>

Configure the options for callout. Choose the HTML element for callout and configure the options for callout. To Specify the configuration option we need to call CalloutOptions class.

<script type="text/javascript">
var calloutOptions = new CalloutOptions(); 
calloutOptions.ID = 'calloutID'; 
calloutOptions.launchPoint = calloutLaunchPoint; 
calloutOptions.beakOrientation = 'leftRight'; 
calloutOptions.content = 'content'; 
calloutOptions.title = 'title'; 
var callout = CalloutManager.createNew(calloutOptions);
</script>

here is the simple code to create a custom callout. Copy the code and paste the code in page.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CallOut, "callout.js");
function CallOut()
{
var targetElement = document.getElementById('calloutLaunchPoint');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'topbottom';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var callout = CalloutManager.createNew(calloutOptions);
}
</script>
<div id="calloutLaunchPoint">callout Launch Point</div>
Code must be placed in Embedded

Here is the image that shows the callout.

CallOut Actions: Actions options configured Through CallOutActionOptions object
In Actions we have options below, 

Text: Required Option.

OnClickCallBack: Is a function that handles the action click event. If we don't want any menu options, this is required. it has two parameters, slandered HTML DOM and 
action

Here is the code for launch Action item in Callouts.

<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");
function CreateCallOutPopup()
{
var targetElement = document.getElementById('LaunchCallout');
var calloutOptions = new CalloutOptions();
calloutOptions.ID = 'notificationcallout';
calloutOptions.launchPoint = targetElement;
calloutOptions.beakOrientation = 'leftRight';
calloutOptions.content = 'content';
calloutOptions.title = 'title';
var displayedPopup = CalloutManager.createNew(calloutOptions);
var customAction = new CalloutActionOptions();
customAction.text = 'Action 1';
customAction.onClickCallback = function(event, action)
{
alert("This is JavasCript alert on Custom Action");
};
var _newCustomAction = new CalloutAction(customAction);
displayedPopup.addAction(_newCustomAction);
}
</script>
<div id="LaunchCallout">Launch Callout</div>

[Code must be in Embedded as explained above.]

it will show the image as

I'll show drop down option in callouts in my next post.

Read More

Sharepoint Client Object Model anonymously accessing list items

Recently i have faced issue that i have unable to retrieve list items anonymously in Sharepoint client side model.So i  found behaviour that  for anonymous users, using the Client Object Model, are blocked from using

• GetItems and GetChanges on SPLists
• GetChanges and GetSubwebsForCurrentUser on SPWebs
• GetChanges on SPSites

but  the ClientCallableSettings value can be adjusted to allow anonymous user access to one or more of these methods.

Doing this with PowerShell:

$webapp = Get-SPWebApplication "http://sp10dev"
$webapp.ClientCallableSettings.AnonymousRestrictedTypes.Remove([microsoft.sharepoint.splist], "GetItems")
$webapp.Update()

Be sure to replace "http://sp10dev" with whatever url your target webapp has. After doing this, anonymous calls to GetItems will work for that web application. The changes are persisted in the SharePoint database, and last until you change the setting again, or recreate the web application.

Read More

Unexpected error on add from existing site columns in Sharepoint

I recently ran into an issue with trying to ‘Add from existing site columns‘ to one of my SharePoint lists on a specific SharePoint site.
When doing so I was presented with:

——————————————————————
Error
An unexpected error has occurred.
Correlation ID: GUID
—————————————————————–
Looking up that Correlation ID in the SharePoint 2010 ULS logs I saw this error:

“Unexpected System.ArgumentException:  No two choices should have the same ID at Microsoft.SharePoint.ApplicationPages.ChoiceCompareWithDefaultGroup.Compare”

What this initially told me was there were two Site Columns in my Site that was using the same internal name, and that Site column was associated with my list which is preventing me from adding any additional columns.
By browsing to the Site Collection Site Columns (http://portal/site/_layouts/mngfield.aspx) I noticed under one of my Site Column Groups that there were two Site Columns listed with the same InternalName, Type and Source.
After verifying  that this Site Column was not being used in my List I removed one of the Site Columns from that Site Column Group.
Once I removed that Site Column I went back to my list, and was now able to ‘Add from existing site columns‘ without error.

Hopefully this helps others who have encountered the same issue.

Read More

The search results with %5C see more Sharepoint Bug

In our Intranet we got this nasty double encoding error that was introduced in SharePoint April 2014 CU. In July 2014 CU the problem is still there. I often hear the suggestions to update files directly in the hive (the root folder for SharePoint: C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\) In that blog post it is described what the problem is and what files are affected and what code must be altered in order to get it to work (which I like). But it is also suggested to update the Search.ClientControls.js directly on the server (which I don’t like). So my advise is:

Do not mess with the SharePoint hive

Even though you have access, treat it as a black box, because

• you don’t want to update the full file and the minified version of it on all servers and keep track of possible changes
• you don’t want to loose Microsoft support because you have messed up the application folder
• you want to think Cloud and Cloud-Ready. In Office 365 you’ll never get access to the hive.

What to do then?

Allright, enough said about the theory. What should we do to solve this issue? Here is my suggestion

1. Find out how critical it is, perhaps you can wait until the next CU is released
2. Contact Microsoft and let them fix it
3. Find an alternative solution.

A solution without messing with the hive

To solve this particular problem, we can inject our fix into the Search.ClientControls.js on the fly using the SP.SOD framework. The problematic function is the $urlHtmlEncode. Before the April 2014 CU it looked as follows:

function $urlHtmlEncode(str) {    return $htmlEncode(Srch.U.ensureAllowedProtocol(str)); }

So now we can reset it back through our code. Just add these lines of code to a javascript file that is loaded on all pages (within a custom master page, or a custom user action):

/// @author Anatoly Mironov SP.SOD.executeOrDelayUntilScriptLoaded(function () {     $urlHtmlEncode = function (str) {         return $htmlEncode(Srch.U.ensureAllowedProtocol(str));     } }, "Search.ClientControls.js");

This code will register code for resetting the problematic function and execute when Search.ClientControls.js is loaded. On pages where Search.ClientControls.js is not loaded (on the majority of the pages except the Search Center), this function will not execute.

Read More

SharePoint 2010 Publishing Sites and Mobile Views Authentication Issue

OPTION  1:

We recently faced an issue with our SharePoint Internet Portal. The Site was published on Internet, but when browsed on Mobile phones, especially Iphone. Whenever you browsed the portal through a mobile device, its throws the authentication window, where you need to provide user id and password.

By default, making a site in SharePoint anonymous not works for mobile users. But this is a very common requirement for Internet Facing web sites, meaning we cannot use SharePoint for Internet? As I started googling, I came to this msdn discussion which concluded same, but there should be some way. There is saying, “Where there is a will there is a way” and there is a way:).

Disable ViewFormPagesLockDown feature from your site collection, since it is by default enabled on publishing sites. Lockdown mode is a feature that you can use to secure published sites. When lockdown mode is turned on, fine-grain permissions for the limited access permission level are reduced. When this feature is enabled, it stops anonymous users accessing any of the layout pages. In case of mobile view, when auser accesses Intranet site,  SharePoint redirects the user to /_layouts/mobile/mblwp.aspx to determine the correct rendering template to be applied. Since it is an application page, LockDown mode will not let the anymous user access the page and he/she will get 401 unauthorized.

Now you know the solution for this, disable the ViewFormPagesLockDown using below powershell command, re-apply permissions (enable anonymous access) and finally recycle IIS to be on safe-side.
Disable-SPFeature -Identity "ViewFormPagesLockDown" -URL http://internet


OPTION  2:

Another workaround, which is a little less drastic, is to disable the recognition of mobile browsers only. It can be done by adding the following snippet in the system.web section of the web.config of your Web Application:

<system.web> <browserCaps>   <result type="System.Web.Mobile.MobileCapabilities, System.Web.Mobile, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>   <filter>isMobileDevice=false</filter> </browserCaps>

Read More

The partial project item type does not have a value for this property

When you faced error  "The partial project item type does not have a value for this property."

Its due to
"Visual Studio is now released, so you might want to consider upgrading to RTM. It was released a while ago. This is most likely a bug in the VS2012 RC "

Solution:
Modified the "SharePointProjectItem.spdata" to  added the value SupportedTrustLevels="All"  SupportedDeploymentScopes="Web, Site"   in the <ProjectItem>.

Read More

Attaching specific W3WP Worker Process during debugging in sharepoint

While debugging your custom code in the SharePoint instead of attaching all worker processes(w3wp.exe) this is the command to attach/identify only the current application specific w3wp process

Command to get the correct w3wp process

C:\wondows\System32\inetsrv\appcmd list wp

 

Here I have written my custom code on Sharepoint-1122 site and debugging the same. So the processor which attached to this application  is 4736(see above fig).

So attach only one process which is associated (like below) instead all

or You can directly get process id in IIS

To get list of running  worker process, Open IIS Manager ( Run > Inetmgr ), Select root level from left site navigation tree and from “Features View Panel” select “Worker Processes”

Click on the “Worker Processes” to get details of all worker process which are currently running as shown in below.

So from the above list of worker processes you can get the details of Application Pool Name, Process ID, state of worker processes along with CPU uses and memory uses.

Read More