Tag Archive for Apps

Microsoft Ignite key takeaways

Great Content, Great Vibe; Ignite is here to stay

The first thing I learned from Ignite is that it wasn’t a mistake to attend to this conference. What a vibe! It’s always good to be around people with same interests and passion when it comes to technology. At first I was a bit skeptic about the integration of different Microsoft events but it turned out to be a success. The high quality sessions, well organized location (WiFi still kinda sucked but let’s call that a tradition) and for the first time I felt the Expo hall was actually a great addition to the conference. Normally this is just a platform for vendors but this time Microsoft had the biggest stands which were really good. People from the product teams where walking around every day to give information and support on a level I hadn’t experienced before. Awesome! So what are the key takeaways for me as a SharePoint / Office developer?

 

Self-contained Applications Cross Platform using ASP.NET

During the conference it was made clear that to drive productivity to the next level, the experience Microsoft offers should not be bound to a particular brand of device or even Operating System. This is a very bold statement if you ask me. The verge wrote an excellent article comparing its vision to Apples vision on this matter: http://www.theverge.com/2015/5/5/8550321/apple-watch-microsoft-hololens-us-future-vision-compete

A big help in getting to that experience are Self-contained Applications. We know this principle from Java for quite some time now. Basically Self-contained Applications include their own runtime and are built in a way that they’re deployable to any kind of platform. For instance using NodeJS for server operations and using AngularJS to build a Single Page Application you can create a package that is deployable to every platform that runs NodeJS. On top of that the entire application model (server – client) is written in 1 common (cross platform) language: JavaScript. These are non-Microsoft technologies but are advertised by Microsoft to leverage the new API’s Microsoft is offering in Office 365. The Office Dev team even supported this by handing out Raspberry Pi’s to stimulate development for Office on different platforms.

Finally Microsoft adopts this principle with the new ASP.NET 5. The DNX (.NET Execution Runtime) is open source now that can be found on GitHub (https://github.com/aspnet/DNX) and can run on any kind of platform. Given this fact we don’t have to run an ASP.NET MVC Application on an IIS server but we can use a Linux based server with the ASP.NET 5 runtime! Making the runtime open source gives a lot of insight in the .NET platform and is a huge leap forward for Microsoft. See a great session from Glen Condron here: http://channel9.msdn.com/events/Ignite/2015/BRK4703

 

Office 365 as Data Hub (ePaas)

Is SharePoint going away? Expected is that the brand name “SharePoint” is fading but the SharePoint technology is very much alive. It is the very foundation of the Next Gen Portals in Office 365. These portals are offering a way better experience for End Users but also from a developers perspective this is a huge improvement. For a while now Microsoft is unifying its API for Office 365 into one endpoint. With this endpoint developers can get all the data out of Office 365 they want. There was an example in a developer session where Rob Howard rebuilt the Video Portal by just using the Unified API in his own app running on NodeJS. In this case Office 365 is used as a Data Hub and not as a platform where we try to customize the OOB experience. When a different experience is required, we can now built it ourselves by leveraging the API. Andrew Connell describes this as ePaaS (Enterprise Platform as a Service) in this excellent post:

http://www.andrewconnell.com/blog/office-365-is-a-development-platform-epaas

 

SharePoint 2016

Remember the SharePoint Conference in 2012? In my opinion this was quite a confusing one. Microsoft just bought Yammer and was hinting towards the Cloud first approach for SharePoint Online thereby leaving the development on the On-premises version a little bit in the open. There was a lot of speculation on if SharePoint would made it to a next On-Premises version or not. In 2014 it became clear that SharePoint 2016 will be the successor of SharePoint 2013 On-premises.

Now at Ignite, Bill Baer announced what SP2016 is going to offer us On-premises and a little hint (again) on the future. “SharePoint 2013 will be the Foundation of every future SharePoint version.” he said in a session full of SharePoint 2016 intell! Wait, does that mean we can expect a SharePoint vNext On-premises after 2016? That wasn’t confirmed but wasn’t denied either. The vision on this I think is to bring SharePoint On-premises and SharePoint Online more and more together and fade the boundaries between the two. The Hybrid scenario for instance now is part of the SharePoint Products configuration wizard with the Scenario picker. This will make it way easier for admins to configure a hybrid scenario between SharePoint On-Premises and Office 365.

Microsoft has done some outstanding work under the hood to make SharePoint 2016 “Cloud-like”. For instance they’re introducing zero-downtime patching (just like Office 365), a new server role called minRole (minimal server role to scale up fast) and again a stretch of the limits and boundaries.

On a telemetry perspective, SharePoint 2016 will introduce a complete new experience to monitor real-time usage data of the entire SharePoint Farm. Think Google Analytics interface with lots of graphs for indication. Things that are monitored for instance are 404 responses, browser / device info and latency statistics between client, server and SQL.

 

We need windows 10!

This was already a big factor in the Keynote. Windows 10 will give us a whole new level of user experience. With Cortana integrated in and a lot of new compliance and security features all indicates this will be the biggest release of the Windows operating system to date. A couple of features can be found here: http://windows.microsoft.com/en-us/windows-10/feature-images

Cross Device experience will be elevated to the next level with Continuum! https://www.youtube.com/watch?v=-oi1B9fjVs4 This Experience will bring mobile devices and desktop / laptop devices even closer together. This can finally leverage the mobile devices to a “work machine” instead of a “reading machine” when connecting to an external display.

From a developer perspective the thing I liked most is that Microsoft is coming with a Windows 10 Nano version that can be run from a SD card for instance on a Raspberry Pi. This move clearly indicates Microsoft is betting on the IoT (Internet of Things) world to use Windows 10 as a platform for this. There is already a preview available as part of the Windows 10 Insider program: https://ms-iot.github.io/content/GetStarted.htm

More of the new key Windows 10 features: https://www.youtube.com/watch?v=84NI5fjTfpQ

 

Summary

It was great to (re)connect to all my SharePoint friends worldwide and see a lot of excellent content, sessions and labs. Ignite was a great event for me and I hope to return next year! Here a some links to other sessions I saw that I think were very good.

Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices

Building Business Apps Like They Do in the Valley with AngularJS, Node.js, and More

Transforming Your SharePoint Full Trust Code to the Office App Model

MVP Panel: Sample Apps and Intelligent Solutions Showcasing Office Graph and Delve Extensibility

Developing Web and Cross Platform Mobile Apps with Azure Active Directory

Dealing with Application Lifecycle Management in Microsoft Office 365 App Development

Custom MasterPages and SharePoint Hosted Apps

We all know that Microsoft is moving away from the concept of Custom Masterpages (at least on Office 365). Chris O’Brien explains some considerations in this great blogpost http://www.sharepointnutsandbolts.com/2015/01/custom-master-pages-and-web-templates-in-office-365–thoughts.html. But say you already have this On Premises SharePoint 2013 Intranet with a nice custom MasterPage in place on a Publishing Site. When you have subsites and especially Team Sites, there is this scenario, when setting the MasterPage, you want to force the MasterPage on all subsites.

Inheritance of the MasterPage

When you stick to Publishing Sites, a new subsite will always inherit the MasterPage from its RootWeb by default. However when mixing publishing sites with a Team Site for instance, things get tricky. Because the publishing Web Feature is not activated on a Team Site, no MasterPage is inherited.

image

image

I also deployed a SharePoint Hosted App to the Root Web. Just an Hello World App to illustrate this issue.

image

If you activate the Publishing Web feature on the Team Site, inheritance is immediately restored. Unfortunately there is another, more harmful, way to force the MasterPage. If you go to Site-settings > MasterPage on the Root Web you can check the box “Reset all subsites to inherit this site master page setting”.

image

By doing this you can force the MasterPage upon all the subsites in this sitecollection. Because our subsite is a Team Site we need to set the System MasterPage as well. When I select my custom MasterPage at first sight nothing happens and everything is OK. (I only changed the SharePoint brand in the top left Suitebar into a custom text).

image

Oops! My Apps broke down

After I reset the MasterPage to all subsites when I open up my SharePoint Hosted App, suddenly this error appears (CustomErrors are off).

image

This error instantly tells us what’s wrong. By resetting the MasterPage to ALL subsites, the App Webs are updated as well, therefore introducing a reference issue because the MasterPage is now linked to the Host Web’s MasterPage instead of app.master on it’s own App Web.

Powershell to the rescue

The easiest solution is to remove the App and add it again to the site but in most cases this don’t want to do this. Especially when there is data in the App Web. Using powershell to repair the MasterUrl is the obvious solution here. The code I provide here is based on an On Premises environment. When using Office 365 you will have to write some additional code to make the connection.

Famous last words

This error occurs only in this very specific scenario and if the reset is applied for the System Master Page. When you reset all sites to use the Custom Master Page all apps will keep working. In my experience this specific scenario occurs when mixing up Publishing Sites with Team Sites. Because Team Sites don’t inherit and you can’t set a Team Sites MasterPage from the Site Settings.

4 Steps to smarter App Part resizing

Wow it feels like forever since I wrote something and finally I got some good new content. I started to research a little bit more on the resizing of App Parts in SharePoint Hosted Apps and came up with some really small changes in basic CSS and JS that make App Part resizing a lot more stable and X-browser compatible. #winning

 

1. No horizontal scrolling

In this example I’ll use an App that Lists Apps on the Host Web. This particular App displays a list of Title just below one another. Nothing fancy. However when we want to display the page in an App Part, this happens.

Capture1

Visually it seems that we have more then enough space between the Titles and the end of the IFrame (300px width by default). Still we see a nasty scrollbar! What happened? Inspecting some elements up in the DOM explains a lot. Very funny SharePoint.

Capture1-2

The defaultcss.ashx causes trouble! This control is loaded on the page by default in an ASPX page like Default.aspx or most likely by a dev in a plain HTML page to keep default SharePoint branding alive in the App. That is a good principle, but this width style is not really helping us out.

Full Width Power

In order to get rid of the scrollbars in this scenario there’s a simple CSS fix we can apply in our App.css.

#contentBox { min-width:100%; margin:0; }
#contentRow { padding:0; }

This way we make sure no weird margins or paddings will cause our App Part more pain and it’s also going to help us when resizing the WebParts height later on.

Capture2

Better! Now the content, that we know for sure should fit, actually fits. Width wise. Still the height of the App Part is not right.

 

2. Resize your App Part

Resizing App Parts using the postMessage technique is nothing new to most people. We need a function in our App that sends a message to the parent of the IFrame. SharePoint can pickup this message and then resizes the IFrame for you using a given width and height. I used the following code

resizeIFrame = function (height, width) {
 if (window.parent == null) return;
 var senderId = '';
 var params = document.URL.split("?")[1].split("&");
 for (var i = 0; i < params.length; i = i + 1) {
  var param = params[i].split("=");
  if (param[0].toLowerCase() == "senderid")
   senderId = decodeURIComponent(param[1]);
 }

 //Bug for self reference in href='#'.
 senderId = senderId.replace('#', '');
 var message = "<Message senderId=" + senderId + ">"
 + "resize(" + width + "," + height + ")</Message>";
 window.parent.postMessage(message, "*");
}

In this common piece of code I added a check for “#”. When this is used in the App (I came cross it once), the QueryString is extended with this “#”. This causes the SenderId, which is always last in the QueryString, to be compromised and the Resize function from SharePoint to fail!

Function call

To call this function we first determine the height of the DOM element that holds all the content. The width shall be “100%” to have an App Part that will always fill the entire space.

var height = jQuery('#OverView').outerHeight(true);
var width = "100%";
resizeIFrame(height, width);

This function resizes the entire iframe to the dimensions given.

Capture3

But wait! there is still a vertical scrollbar! Something must be wrong. In the Elements File of my ClientWebPart I removed the Height and Width properties of the App Part.

Capture3-1

Here is where a very weird phenomenon shows itself. Since we don’t have any requirements set regarding width or height, SharePoint sets a default width and height to the AppPart which is the same as the ClientWebPart xml states when it is just created.

Capture3-2

Here our default width is 300px. The funny bit is that because we use the ResizeIFrame method, the width is only set to 100% after the Resizing is done. To make it even more complex, the Height is meisuring the content that now is rendered within 300px width. Therefor the height also cannot be trusted. This makes the resizing of the App very buggy. Now we see it still as 300px width. Refreshing a couple of times shows 100% width but still with a vertical scrollbar and height that is just a couple of px off. Some DOM element must be holding back some padding info.

 

3. Body Container

Again the main obstacle here is some styling that comes from defaultcss.ashx. By default the CSS sets a padding-bottom:35px; on #s4-bodyContainer. This is why we add to our App.css this piece as well.

#s4-bodyContainer { padding:0; }

Capture4

Instantly this is starting to look good! The App Part now scales over the entire width of the Page using a correct height and most important: NO scrollbars! Since I placed my App Part in the text part of this SitePage it is displayed in full width. When I use a Publishing page with multicolon WebPart Zones, it will also adept to the width of the colons. This comes in very handy for instance with use of Bootstrap.

 

4. One last thing

One last nag, which is actually really tough. Thereby I don’t mean the fix, that ones easy. I’m talking about consideration on how to deploy the fix. The thing is, as I just explained, the height is calculated at the wrong time in rendering. In order to get the height right, the IFrame must have it’s width set to 100% first. We’ve seen SharePoint set it to a default value of 300px. When a dynamic list of <span>’s wrap over 3 lines for instance, the height at a 100% width is very different from the height at 300px width.

A fix here can be set all IFrames to a default width of 100%. I don’t see why you shouldn’t do that in the first place. But still it depends right.

Custom CSS

The best option in my opinion is to use the capability to upload and add your custom CSS when using Publishing Sites. You can do this in the MasterPage section of the Site Settings. Just create a blank CSS file and add

iframe{ width:100%; }

When you aren’t using publishing sites, there is another possibility.

UserCustomAction

You can add some code to your App to deploy a UserCustomAction to the HostWeb. In the UCA you can add a ScriptBlock that writes this CSS style to every page. This is a dangerous option when not done right. Waldek wrote about these things and explained why it can break your site. The following code will do so, but keep in mind that everytime this executes another UCA is created. You still have to create a “Run Once” type of mechanism.

P42.ScalingAppPart.setFrameWidth = function ($) {
 var execute = function () {
  var deferred = $.Deferred();
  var hostUrl = decodeURIComponent(P42.Utils.getQueryStringProperty("SPHostUrl"));
  var appWebUrl = decodeURIComponent(P42.Utils.getQueryStringProperty("SPAppWebUrl"))

  var context = new SP.ClientContext(appWebUrl);
  var factory = new SP.ProxyWebRequestExecutorFactory(appWebUrl);
  context.set_webRequestExecutorFactory(factory);
  var appContextSite = new SP.AppContextSite(context, hostUrl);
  var site = appContextSite.get_site().get_rootWeb();
  var userCA = site.get_userCustomActions();

  var customAction = userCA.add();
  customAction.set_location("ScriptLink");
  customAction.set_scriptBlock("document.write('<style>iframe{width:100%}</style>');");
  customAction.set_sequence(1000);
  customAction.update();

  context.executeQueryAsync(function () {
   deferred.resolve();
  }, function (sender, args) {
   deferred.reject(sender, args);
  })

  return deferred.promise();
 };

 return {
  execute: execute
 }
}(jQuery);

Famous Last Words

These steps will get you some smoother App Part resizing experience that will work cross-browser. By removing all the extra margins and paddings you are now in control over the exact width and height of your App Part. I never got it right untill I put some work in it, hopefully this post will help you too getting it right.

– Cas

My Key Takeaways from #SPC14

WOW is the first word that comes to mind when I’m thinking of the week I have had in Las Vegas during the SharePoint Conference 2014. IT. WAS. AWESOME. It’s also cool to see lots people felt the same way. The hashtag #spc14 was on fire! But still for the people that couldn’t go, I want to point out some new Key Concepts that are going to rock our Dev World!

Office Graph

Something we could have been expecting since MS bought Yammer is a Graph protocol that works with SharePoint, Office and Yammer objects. Yammer was already based on Open Graph (like Facebook is) and therefor it’s no surprise Microsoft has been working on this to cover the entire Office space. In the Keynote the Office Graph was anounced with a demo on Project Oslo. A new, personalized and highly interactive App based on this Office Graph principle. It really looks awesome and the Graph will also be part of a new API in Office! Learn more about this right here: http://blogs.office.com/2014/03/03/work-like-a-network-enterprise-social-and-the-future-of-work/

Unified API’s

With the addition of Office Graph and lots of other new Features, the API’s for Office (I’m including SharePoint as a part of Office) are starting to change. A thin red line that was to discover in the Development tracks this SPC is that Microsoft is unifying the API’s that Office 365 (including SharePoint) have to offer. By that I mean that Microsoft is clearly pushing 1 technique and that is by using REST and OData. Microsoft is heading for a model where every API is a RESTful service, wheter it is an Office API or a SharePoint API. Now this is a big deal! The vision here is that those API’s will be Entity Driven. When asking the API for files they will most likely come from SharePoint or OneDrive. When asking for contacts, they will come from Office. The Office / SharePoint team is now even talking to the Dynamics CRM guys and the goal is to achieve the same for Dynamics CRM Online. That would be sweet!

Examples of the new Office API’s and a list of new Features can be found here: http://officeams.codeplex.com/

The App Model

It may be clear to most of you that considering the API “Unification”, the App Model is still the way to go and is heading for adulthood! Good to hear the Product Team is hoping to get AutoHosted Apps out of Preview by the end of this year. This will be a nice addition to the App Store across the Globe. There already is a roadmap for the localization of the store for the next wave which will be somewhere Q2 of this year. The Netherlands is one of those first countries the App store will become available to.

In combination with the new Office API’s it is way easier to build Office Apps now. Microsoft rebranded these to “Contextual Apps” by the way. On top of this all, Microsoft has released an Open Source Android SDK to build Apps for Android devices. Didn’t see that one coming! You can get it here from GitHub: https://github.com/OfficeDev/Office-365-SDK-for-Android

Another thing that really surprised me was the presence of Google in the App Development tracks. One of my favorite frameworks Angular JS was used quite a lot in App Demo’s. Microsoft is not afraid anymore of Frameworks not build by Microsoft and the MVP’s are really promoting these new JavaScript Frameworks (Angular, KnockOut, Breeze).

Microsoft is opening up

Finally something that I think is the most important thing during these conferences. You can get a good idea of where Microsoft as a company is heading. My overal feeling with Microsoft this conference was that Microsoft is really opening up to it’s partners. Never was I so close to the people that actually built SharePoint and Office 365. As one of the Nordic Partners we had the opportunity to sit down with the productteam and ask questions about the present and future of SharePoint and Office 365.

Besides organizing these kinds of roundtables, it was clear that Microsoft is really happy with the Feedback they receive from everyone in the SharePoint community. There is a User Voice site to submit feedback from a developers perspective. And also Stack Exchange is an official channel used by Microsoft.

http://officespdev.uservoice.com/
http://sharepoint.stackexchange.com/

It was also good to hear that Microsoft is working on plans to re-introduce the Technology Adoption Program (TAP) for Cloud models. This would be a very welcome feature so Partners and Developers can test the new API’s, Features etc that will be released in Office 365 later on. Unfortunately Microsoft is still working on this idea and so my guess is that we will have to wait a little longer before this will come around. Lot’s of uncertainties here, but the important point here is that Microsoft is sharing more and more to it’s partners and developers. Go Microsoft!

Famous last words

When I compare this conference to the one in 2012 I can clearly see Microsoft has started listening to our feedback and they’ve done a great job on this conference. The sessions and speakers where top notch in my experience and everything was very well organized. Obviously I just covered a tiny part of all the stuff that was talked about in the breakout sessions. It’s not clear when all the content will be released, but for now there are lots of Post Conference Blogs you can read to get the information you need.

See you next time at SharePoint Conference!

SharePoint 2013 Apps: Back and Forth between Webs

I’ve been diving into Apps lately and was surprised on the User Experience and Interaction model in general. Don’t get me wrong I think Apps are cool, but they ask for a very different mindset from a User Experience point of view.

App Web vs. Host Web

Apps are small specific functions or applications (like we know from our Smart Phones). In SharePoint one App has a very small and restricted environment (App Web) where all functions for that App are available. To make the App available, it needs to be added to a Site or SiteCollection (Host Web). This loose coupling has a lot of advantages when it comes down to security and upgradability etc. However integration in your SharePoint User Experience can be a real pain. To keep users in the right context while using Apps there are some possibilities.

Custom Actions

First and easiest solution to this is a Custom Action. Just like we’re used to in SharePoint 2010 (and even 2007) it’s possible to extend SharePoint functionality to the ECB (Edit Control Block) and the Ribbon using a Custom Action. A good place to start is MSDN: http://code.msdn.microsoft.com/office/SharePoint-2013-Open-a-36d1598d

But even though we provision new functions into the Host Web, the Action still takes us to the App Web. We have to provide good interaction models for the User not to get lost in the process (show the App in a dialog is one). And unfortunately we cannot use the Custom Action to add a script to the ScriptLink as we could have done with the Sandbox Model.

Summary:
+ Good to provide a Contextual link to your App (Possible to open in Dialog)
+ Easy to implement
– Limited to ECB and Ribbon (Even Ribbon is limited. No custom Tabs can be added)

App Parts

An App Part is a WebPart that shows a Page from your App. Basically it’s just an iframe that loads your App. The nice thing is that Users are kept into the context of the Host Web they’re on. Still your code is running in you App and not on your Host Web. More on this: http://msdn.microsoft.com/en-us/library/fp179921.aspx

Summary:
+ Integrates on a SharePoint Page in the Host Web as a WebPart
+ Possible to use WebPart Settings as Properties that will be passed to your App
– When Upgrading your App, the App Parts need to be replaced and reconfigured.

Finally

User Experience has become way more important with this new release of SharePoint. The introduction of the App Model also introduces a new challenge on UX design. The two options I mentioned are steps in the right direction but still need good interaction design for Users to understand flow of the apps.

If you want to know more about Apps and UX challenges I can recommend this Blog Post: http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2012/08/02/optimizing-user-experience-for-sharepoint-2013-apps.aspx