Mobile First

You hear this term a lot. But what does “mobile first” mean? Sure, you design your webpages so they incorporate mobile and small format versions into them. Then when you actually lay out the site in Dreamweaver or whatever, you add the @media tags to make the layout responsive. That’s part of the issue, but not really what we mean.
Mobile first is when you are coding the CSS & HTML. You want to code the mobile version first, then add @media rules to handle the sizes typically displayed on desktop. This is because the desktop version can get incredibly complex – you add floats and absolute positioning to elements, modify their z-indexes etc. If you do desktop first, then you have to add rules to counteract all of the code you’ve written to make it appear nice in mobile.

For example, let’s say we’ve created CSS for “.quote-w-image” – in the desktop view, it takes up 50% of the screen width at anything over 768px, has a 3pixel wide red border and is 2 em from the top of the page. In addition, it has a z-index of 3, because it floats on top of other elements.

.quote-w-image{position:absolute;top:2em; border:3px solid #ff0000;z-index:3; width:50%}

In the mobile mode, the “.quote-w-image” has no border, takes up 100% width, is positioned static and the z-index and top don’t matter as it’s supposed to be within the document flow. In a desktop first approach, our code will look like this:

.quote-w-image{position:absolute;top:2em; border:3px solid #ff0000;z-index:3; width:50%}
@media screen and (max-width:768px){
.quote-w-image{position:static !important;top:0 !important; border:0px solid #ff0000 !important;z-index:0 !important; width:100%}
}

Since we previously defined the position, top, border and z-index properties, we had to overwrite them, when really the only property we cared about was the width and position. So we had to do double work to make our “mobile” version appear properly.

If we do our code “mobile first” however, you can just add properties as you want them to exist, like so:

.quote-w-image{position:static;width:100%}
@media screen and (min-width:768px){
.quote-w-image{position:absolute; top:2em; border:3px solid #ff0000; z-index:3; width:50%}
}

The mobile version is defined first – position:static; width:100%
Then we use the @media to define rules for the desktop – anything over 768px – and add in the absolute positioning, top placement, border, z-index. It’s still 2 lines of code – one for each screen format, but we add new properties and update the properties we want to change rather than redefine everything.

Yes, there will be instances where you still need to overwrite properties and use !important. Yes I’m probably missing something. In any case, I find this method easier for my coffee addled brain to read at 3AM when I’m trying to remember what I did to make an element appear a particular way.

JavaScript SharePoint People Picker

Yes.. JavaScript SharePoint People Picker… try saying that 3 times fast.

Anyway, I needed one for a form I was developing. It had to be client side, and it needed to work with SharePoint.

In SharePoint 2013, there’s already support for this: http://msdn.microsoft.com/en-us/library/jj713593.aspx

But I need something for SharePoint 2010. I found several articles on manipulating the data in the people picker, but very little on creating a people picker. I continued to google, and my googling bore fruit:

Tanmay Shahane has a neat little bit of code that uses the EntityEditor.js to create a people picker – obviously you should be including jQuery into your page for Tanmay’s script to work. The complete post is here: http://community.zevenseas.com/Blogs/Tanmay/Lists/Posts/Post.aspx?ID=7

But if the link is broken or something, Tanmay’s code as follows:

function EntityEditorHandleCheckNameResult(result, ctx) {
    ULSGjk: ;
    EntityEditorClearWaitCursor(ctx);
    EntityEditorCallback(result, ctx);
    //login name
    var loginName = $(“span.ms-entity-resolved”).attr(“title”);
    //display name
    var displayName = $(“span.ms-entity-resolved div:first-child”).attr(“displaytext”);
//Your custom code can go here for populating rest of the fields in the form calling user profile through client object model
}

Paul Tavares has some interesting widgets for People picking and Uploading that look promising, but I have yet to try them out:

http://paultavares.wordpress.com/2012/04/28/sharepoint-ui-widgets-upload-and-pickusers/

The Photoshop SDK Plugin Tutorial Fix

I downloaded the Photoshop SDK, which are currently free at the moment, to start creating my own plug-ins.The SDK comes with a convoluted tutorial, and it took me the better part of the evening to find the one that showed how to compile the provided source code into an .8bf file for windows.The HTML file in question is “pluginsdk/documentation/html/pgwinplugins.html” and is a travesty of HTML coding. The author neglected to close any

tags, and the images are referring to the wrong folder.

The first thing to do is make use of find/replace in your favorite HTML editor and get the images properly linking.

Now assuming you go through the tutorial – it was written for Visual Studio 2005, so half the settings are no longer applicable – and you compile the beast, you will get an error.

“error d8004 /tc requires an argument”

Not being a C++ programmer, or much of a console programmer at all, this drove me nuts.

The answer is NOT in any forum on MSDN. To find the answer I attempted to convert the existing project the tutorial tells you to copy everything from (“dissolve”). In the UpgradeLog.xml, I discovered the following:

This refers to the “Enter Custom Build Settings for PiPL” step. Item number 6 – where you Click on “Command Line” and create a temporary .rr file. This little guy is giving you the nasty d8004 error in your custom filter.
To fix it, when you go to enter the custom build settings for PiPL, enter the following code in the Command Line:
cl /I..\..\..\Common\Includes /I..\..\..\..\PhotoshopAPI\Photoshop /I..\..\..\..\PhotoshopAPI\PICA_SP /I..\..\..\Common\Resources /EP /DMSWindows=1 /DWIN32=1 /Tc”%(FullPath)” > “$(IntDir)%(Filename).rr”..\..\..\resources\cnvtpipl.exe “$(IntDir)%(Filename).rr” “$(IntDir)%(Filename).pipl”

del “$(IntDir)%(Filename).rr”

And for the Output, enter the following:

$(IntDir)%(Filename).pipl

When you compile, Visual Studio will be able to locate the necessary resource files, and you’ll finally get the .8bf file generated.

A tragic tale of mutliple lists and forms and IE9

I’ve been busy on a project for SharePoint. This particular environment is unique in that the developers do not have access to the farm, and must put any requests through a processed managed by the client to activate features, view ULS logs, etc. In addition, the client managed office has turned off several features, but cannot provide a list of features that are available. So sandboxed features that work in Dev, Test and Staging tend to die when they reach production of unspecified errors.

The use of SharePoint Designer is forbidden, so anything not “out-of the-box” must be created in Visual Studio. To avoid some of these headaches, I try to do everything I can out of box, or through JavaScript and web service calls.

This particular project had a customized form for 30 some lists. No Problem right? Just get the InfoPath form functioning correctly, create a content type, template and deploy, right?

Right…. until the client wants a change to that form, and the form is customized slightly for each list (e.g. pre-populating department name and disabling the field), and you don’t have access to save templates. – Yes, I am dealing with the nightmare of updating content types and then modifying each of the 30 lists back to it’s specific department customization. (Why 30 lists? there are 3 for each department, and no department wants the other one seeing it’s stuff). Oh and the customer wants to be able to import data from one form to another.

So..

  1. I can customize the InfoPath forms and add a list lookup to the other lists for that department.
  2. Creating a single InfoPath form to handle everything really isn’t an option, because the user permissions will prevent some lists from connecting and importing data – preventing the form from opening.
  3. Create a single form using HTML and REST calls and URL parameters to import the appropriate lists and submit the data to the correct list.

I went for option 3. Which works great, except for one tiny issue…. Attachments. The client uses IE9, which is NOT HTML5 compliant, and does NOT support fileReader. Access to a server that can parse PHP is out. So my options are back-end (sandbox hole of death), or something else…

So I tried using Actionscript. Quirky, yes I know, but I trust ActionScript… it usually behaves, and there is already a nice little library for integrating ActionScript and SharePoint: sharepoint-as3-connector
And it worked beautifully until Friday. I suspect network latency to be the goblin behind my SWF not being recognized by IE, and not receiving the actions I send it from JavaScript for the past 2 days.
So I’ve thrown in a little try catch to hide my beautiful attachments flash object if there are issues.
If I find a better solution I’ll post it here.

Using Rest For Everything

I’ve ceased using the “Out of the Box” forms. I don’t even use the WebParts unless I have to.

To me the most useful part of SharePoint is the REST API.

https://msdn.microsoft.com/en-us/library/office/jj164022.aspx#ReadingData

I organize my sites into little armies of lists and document libraries that hopefully the user will never see.

My user will experience the site the way I want them to. I force them into custom home pages and dashboards cultivated with bootstrapped themes. The data pulled via SharePoint services into widgets and forms and charts that dance merrily beneath their cursors.

Microsoft all but abandoned Chart web parts in 2013. The ones you can make with Excel services are clunky and static. So I pull my data from REST and push it into FusionCharts or GoogleCharts or YahooCharts.

You could still use the OOB list view for some things and hack the DOM to spruce up the rendered layout… or you can consume that List into a JSON object and use Angular to bind it to a view with sorting capability.

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js

For me it comes down to least amount of time involved… not just for set up, but for maintenance. If I know I’m going to be asked to group rows and columns, or add totals in a manner that isn’t possible with the OOB view, it’s worth it to set up the Single Page App to do it for you.

List Creation Naming Best Practice

When you create a new List or Document Library or “App” object in SharePoint, the name of Object is the new URL – in essence what we WordPress users would call the “slug” or permalink.

This is a pet peeve of mine. Users consistently create objects without consideration of this fact… Users who don’t understand that simply copying and pasting:

http://www.kitties.com/omg cute kittens!

Into an email will actually send the user to:

http://www.kitties.com/omg

This gives me heartburn because as the SharePoint admin, I get calls about the link being broken, the site missing, 404s, etc. When what is actually happening is the user or the email client did not encode the ” ” space as “%20” for a link. Why would they.. most users don’t understand why we do things like encode urls or characters.

To avoid this issue, I advise for object creation – ALL object creation, be they fields/columns or lists and apps – all objects should be initially named with numbers and letters – all lowercase, no spaces and no special characters if they can be avoided. It’s easy enough to change the Title or Friendly name of an object after creation, but often it is impossible to change the URL or real name of an object without access to the GAC.

Outlook Hangs at Loading Profile

This is another Graphics bug.

First try the Graphics Hardware Acceleration:

To disable hardware acceleration, follow these steps:

  1. Start any Office program.
  2. On the File tab, click Options.
  3. In the Options dialog box, click Advanced.
  4. In the list of available options, click to select the Disable hardware graphics acceleration check box.

You can also disable Hardware Acceleration through the registry:

  1. Press Windows Key + R combination, type put regedit in Run dialog box and hit Enter to open the Registry Editor.
  2. In the left pane, navigate here:
    HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Common
  3. Create a subkey to Common by right click over it and select New -> Key.
  4. Name this subkey as Graphics.
  5. In the right pane of Graphics subkey, create a new DWORD by right click on blank space and select New -> DWORD Value.
  6. Name the newly created DWORD as DisableHardwareAcceleration and double click on it.
  7. Change the Value data from 0 to 1. Click OK.
  8. Close the Registry Editor and reboot the machine to make changes effective.

I’ve found that in spite of doing all of this, Outlook will still hang while loading my profile. I did however figure out this only occurs when i’m on my laptop and i’m connected to an external monitor. If I disconnect the monitor and try to start Outlook, it will load… although sometimes I have to reboot to get it to load, it will load. I’ve gotten in the habit of booting the laptop, starting Outlook and THEN connecting the external monitor.
Chalk this up to the apparent incompatibilities between the latest Office products and video cards.

SP Services jQuery

So I was searching for a people picker (more on that later) to implement in my JavaScript form for my SharePoint project, when I stumbled across this:

http://spservices.codeplex.com/releases/view/92552

SPServices is absolutely wonderful. I love not having to code all the gooky CAML, GetList and onSuccess methods to retrieve list items via Web Service from SharePoint.

In my trials with it so far, it performs quickly too.

Some of the methods are only supported in SharePoint 2013, but I’ve success using it for several things in SP2010.

InfoPath Window Size Bug

This is also known as the “InfoPath cannot load the view. The view may have been modified to contain unsupported HTML such as frames” bug.

Like issues with the 2013 version of Outlook, this is possibly related to graphics acceleration. I suggest this because the following stupid trick will open your form anyway:

  1. Open InfoPath designer. Resize the window to take up less than 1/4 of your screen vertically & horizontally. Open your form in that tiny InfoPath Desinger window.
  2. When the form opens without that pesky error, you can now resize the InfoPath window and work on it normally.
  3. If the issue happens again, follow the same procedure.

The idea that we have to minimize the operating area of our program  is what makes me think it’s a graphics issue. I typically run on the highest resolution setting possible for my monitors. I haven’t tested if reducing to a 1000px or less resolution would eliminate the need to do this trick to open my forms. Another theory is that it is an issue with NVIDIA graphics cards… again… making it a graphics issue.

A Mini-Guide to Charts in SharePoint

This guide is primarily directed at SharePoint, but the method that uses REST can really be used on any site, or any CMS where you have access to data via REST.

There will come a day when someone will ask “Could you put that in a Graph?” or “This would be better in a Chart”.

Your first thought “I’m not a Graphic Artist”. Okay… maybe something in Excel will do…. then comes the follow up from the requester – “Oh, we want this for Boss-man’s dashboard” or “this will be on the company intranet”…. and… “it would be great if we could keep it updated in real time”.

I’ve been asked this question enough times by co-workers and managers that I just include chart capabilities standard in any SharePoint site or application I create.
To begin with, you are restricted in your charting capabilities based on:

  • Your SharePoint Environment Version
  • Your SharePoint Environment Location (Internal or External)
  • User Access to your site
  • Administrative file restrictions for your SharePoint Environment
  • Ability to upload and Activate custom WSPs for your SharePoint Environment
  • Your permission access level to the SharePoint site you’re placing the chart into
  • The location of the data you will be using for the chart
  • Type of Chart you want to create
  • Access level to public Shared Folder or location to place global resources (e.g. jquery)

SharePoint Charting Web Part
SharePoint 2010 and earlier have access to a Charting Web Part, which includes a wizard allowing you to browse for data sources within your SharePoint site and create charts from them. As this is a web part, you can set the part to Asynchronously update the chart using the Web Part Options panel. The Charting Web Part is NOT available in SharePoint 2013, however, if you have access to a 2010 instance (and the appropriate permissions) you can export the Charting Web Part, upload it into a 2013 instance and configure it like normal.Excel Charts
All versions of SharePoint support displaying Excel Charts. Excel Charts are useful for doing complex calculations, pivot tables in a local workbook file and displaying the results in a chart. The downfall of the Excel charts is editing and updating the data.