Random background body images in SharePoint

Just had an interesting question…How do you get random background images on your SharePoint site. We needed it for a demo site and proved vaguely interesting. The problem is that SharePoint sets the CSS class for the body after the page has loaded in the method AllowCSSFiltersOnIE8. This is the method which sets the ms-backgroundImage class on the body tag. This method is called when the body is loaded by using the _spBodyOnLoadFunctionNames() method. So, this is a quick example of how to randomly change the background image. You’ll probably want to tidy it up for production (checking that certain scripts are loaded, moving the CSS into a file, etc), but it worked for our demo. First you’ll need to modify the master HTML page and add the following to the <head> section… <!--MS:<style type="text/css">--> <!-- .backOne{background-image:url('/images/img1.png')} .backTwo{background-image:url('/images/img2.png')} .backThree{background-image:url('/images/img3.png')} --> <!--ME: </style>—> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Thanks to Eric Overfield at PixelMill for the way to add a style to your HTML master page. Then add a bit of script to the end of the page, just before the </body> tag… <script> _spBodyOnLoadFunctionNames.push("swapBodyImage"); function swapBodyImage(){ var r = Math.random() * 3; var img = "backOne"; if (r > 2) img = "backTwo"; else if (r > 1) img = "backThree"; CSSUtil.AddClass(document.body, img);} </script> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The script will then randomly choose one of your styles and so set the background.

Dev/Test with multiple accounts on SharePoint

When developing a SharePoint App you quite often have to use multiple accounts to perform different tasks, different views or test security. Today that process really annoyed me and I had to find a better way than multiple browsers. Generally I would use a mixture of InPrivate, Firefox and Chrome(yuk!) and log in as different accounts in each. When I have three copies of Visual Studio, multiple copies of IE, Outlook and many other windows, which browser is logged into which account can get confusing. At least switching to the correct one took a bit of time. There must be a better way? A bit of Binging didn’t provide any realistic results (Googling didn’t help either), so I had a go at writing an App to do it. This wasn’t as straight forward as I thought it might be (just thought I could swap the cookies), but it did lead me to think about running IE under a different user account, which in turn lead me to multiple desktops. My Solution So my solution is basically running IE (or any other browser for that matter) under different user credentials in separate windows desktops. The first step was to install an application to allow me to have multiple desktops. I chose Desktops 2.0 from SysInternals. Its limited to four desktops but there are a number of other ones which provide more (VirtuaWin (free), Dexpot) desktops. Four was enough for my purposes. I configured Desktops to switch on ALT+FunctionKey to easily switch between desktops. With that in place I switched to a new desktop ALT+F2 I have a number of Microsoft outlook.com accounts already setup for different types of user and so I added them as users on my laptop (you actually have to login with them before you can use them). This then allowed me to run IE as that user from my new (empty) desktop. Holding down Shift while right clicking on the IE icon (or any other program) will allow you to run as a different user. I created four desktops, one for each type of user (Owner - Me, Accounts, Approver, User) and now I can easily switch to each type of user by hitting ALT+FunctionKey from anywhere. I just have to remember which number for which user. Obviously there is a bit of an issue with having to add the users to your laptop, but I’m cool with that and life is slightly less complicated now.

Adding static content and HTML files to your SharePoint App at runtime using JSOM

Just a quick one about an issue I faced yesterday. Basically I wanted to create some HTML content for my SharePoint App and then be able to link to that content via an IFrame. Creating a new document library and uploading the HTML files is easy, but SharePoint won’t let you display HTML files directly in the browser. It forces the browser to download the HTML files as if it were a document. This behaviour can be changed in the farm or web application, but I can’t (and wouldn’t want to) change that from within my App. I certainly didn’t want to make it a requirement in order to use it. The solution Add them to the Pages folder, the one where all your SharePoint App pages are stored. I added a folder to the Pages module, this means that the folder will be available when my App is deployed. The key now is getting access to the new folder and adding files to it. The ‘Pages Library’ is not really a document library, its just a simple folder at the root of the web. This means you can’t use var ctx = SP.ClientContext.get_current(); var pages = ctx.get_web().get_lists().getByTitle("Pages"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } You need to get the folder directly and then add files to it. So, the solution is… var ctx = SP.ClientContext.get_current(); var relUrl = ctx.get_web().get_serverRelativeUrl() + "/pages/custom"; var folder = ctx.get_web().getFolderByServerRelativeUrl(relUrl); var fileCreateInfo = new SP.FileCreationInformation(); fileCreateInfo.set_url("NameOfPage.html"); fileCreateInfo.set_content(new SP.Base64EncodedByteArray()); fileCreateInfo.set_overwrite(true); var fileContent = "<html><head></head><body>Some HTML here</body></html>"; for (var i = 0; i < fileContent.length; i++) { fileCreateInfo.get_content().append(fileContent.charCodeAt(i)); } var newFile = folder.get_files().add(fileCreateInfo); ctx.load(newFile); ctx.executeQueryAsync(function (o, a) { alert("OK, file added"); }, function (o, e) { alert(e.get_message()); }); This method should work for any content (Images, Scripts, CSS, etc) and so could prove useful if you want to provide additional style/options for your SharePoint App. Note: The example is taken from my code and I have actually already loaded the Web elsewhere. I didn’t change this snippet for brevity, but you may need to load the Web before using the method ctx.get_web().get_serverRelativeUrl()

SharePoint on Windows Phone

AgilisPoint a free App for your Windows Phone