månadsarkiv: mars 2014

How to stop the ItemUpdated-event from refiring itself in an remote event receiver

tl;dr: If you have trouble with stopping the updated-event from firing, compare what you want to change in the beforeProperties and afterProperties. If they are different, you should go ahead with your update, otherwise not.

This was my scenario: I had created a remote event receiver that was attached to a document library and was supposed to act whenever an item in the list was updated. The initialization of the event receiver looks like this:

And all was fine in the world. The event receiver was nicely attached and got busy when I uploaded a document. But then it started acting out and making trouble. I was trying to change permissions on an item and this was the part of my code that was creating the problems:

Inside my SPRemoteEventType.ItemUpdated I did an Update and making it trigger itself. Recursive SharePoint with no end in site.. If you’re dealing with a event receiver with access to server side code, this is not a problem.

Writing that makes your world pink and sparkly again. But this is the barren end empty world of the remote event receiver and no such this is available.

How I solved it

Googleing this helped me not one bit and my first solution was something I would like to hide at the bottom of some server (I don’t want to talk about it, let’s just say it had something to do with counting the seconds since the last update).

At your disposal on SPRemoteEventProperties you have afterProperties and beforeProperties, found by doing this:

And those were the key to the problem: how to act on the firing only when the user changes something and not when it updates itself? By comparing the values in the beforeProperties with the afterProperties I could see if they contained a difference. If it doesn’t, the updating event should not happen again.

In my case I was changing the value of a custom property named CMIsSecret, so if that property was the same in beforeProperties as in afterProperties (the values before and after the save) I should go on with the update, otherwise not. This was the method I created:

It checks if the property exists at all (it doesn’t if it is an ItemAdded-event and the property is custom made) and if it differs. It returns true if the property should be updated and the final usage looked like this:

Where ”ChangePermissionSettings” changes and updates the item.

Hope it helps!

Using CAML with SharePoint REST API

Do you prefer REST over CSOM as I do? I’ll skip the whys. Andrew Connell put it already in wrtiting so nicely. Well, if you do prefer REST, then you must have discovered some shortcomings of REST, or its incompleteness compared to CSOM. I think of:

  1. Inability to filter items based on multivalued taxonomy fields
  2. Inability to filter items based on user fields where user is added through a group, rather than directly, e.g. AssignedTo=[Me] combined with a SharePoint group.

In such situations I was forced to use CSOM. Until yesterday. Yesterday I learned that we can actually use CAML queries in REST requests.

 

This enables using REST in all situations. The REST API is still developed and many features are added. Maybe a particular operation that needs a CAML query today, can be supported in the core REST API and can be easily refactored then.

But until then, we can use CAML queries in REST requests. Here are the important things about it:

  • A REST request with a CAML query is always a POST request
  • A REST request with a CAML query has always to have X-RequestDigest http header (actually because it is a POST request)
  • A REST request with a CAML query should always have the attached CAML query in the request body (and not in a query string). We don’t want to mess with long urls, do we?
  • A REST request with a CAML query must have the http header “Content-Type: application/json;odata=verbose” unless you use xml in the request body.
Needed HTTP Headers in REST requests

HTTP headers you have to provide in REST requests with CAML queries

You can use jQuery or SP.RequestExecutor to make an ajax call. The REST endpoint is:

The request body (if you use json, and I bet, you do) is in this format:

Here is the boilerplate for a REST request with a CAML Query:

This function is just an example. It has no error handling, and it takes for granted that your list is in the root site for on your (sub-)domain (“/”). So take it as an example only.

Here is how the function can be invoked

Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

Before responsiveThe site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

  • Avoid scaling to be able to read text
  • Avoid scrolling back and forth to read every line
  • Move the right column down, it is better to use the space for the main content.
  • Hide the quick links to the individual letters
  • Shrink unused space in the header.



What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup.

I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result.

Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

Set witdh 100% when a scroll appears

Find the “break point” where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this “very responsive site”.

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let’s disable it. Just put this meta tag in the head session of your page:

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

I also added this css style and hid this div for bigger resolutions:

Here is the tiny javascript click event listener:

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

samah-004 samah-003

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

  1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the “root folder”.
  2. In the page markup I added this line inside the head element:

That’s it. So now when someone saves the website as a bookmark, it looks like this:

photo samahsar-001 Screenshot_2014-03-25-23-30-02

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

 

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

UPDATE 2014-05-12

I discovered a blog post about how to adjust a web app for best experience in iOS. This gist is a perfect example what you can add for properties.

What about the SharePoint app domain?

This is an open question about the domains for SharePoint apps. On Technet: Configure an environment for apps for SharePoint (SharePoint 2013) we can read the following:

You must configure a new name in Domain Name Services (DNS) to host the apps. To help improve security, the domain name should not be a subdomain of the domain that hosts the SharePoint sites. For example, if the SharePoint sites are at Contoso.com, consider ContosoApps.com instead of App.Contoso.com as the domain name.

Does it apply to SharePoint Online? Well, apparently not :) So why should we do it on premises?

subdomain

As we all know, sharepoint.com is used for our Office 365 tenancies and for apps.