A Non-Developer’s Intro to the Developer Toolbar: Scripting

Last week, we started in on a basic into to accessing your site’s elements via the Developer Toolbar.

This week, we will cover scripting with the Developer Toolbar, and all of its wonders. :) Don’t worry, we’re not going to actually write code, well, maybe one or two really simple lines of code. Trust me, it’ll be painless.

The developer toolbar in each browser supports step-through debugging JavaScript, viewing errors, and real-time scripting. Since this post is to serve as an intro, my assumption is that you’re not a developer, but maybe you grabbed some code from a blog and it’s not working.

Script Errors

With your developer toolbar opened, go to the Script tab. If your script is acting up, it should be pretty obvious. You may need to refresh the page to get the script to run again, and return an error.

Script Error

You will see the error on the right, and there should be a link right below it. In my example, the link is ”Home.aspx, line 622 character 20′. If you click that, that will take you to the corresponding line in the left pane. Pretty neat eh? As a non-developer this may mean nothing to you, but this info helps the developer who wrote the script a lot.

Real Time Scripting

The Script and Console tabs allow you to enter and run JavaScript on the fly. This is excellent for testing things against SharePoint and makes development time much faster.

You may or may not care much about this, stick with me for the sake of a quick example:

you’re interested in a set of code from a blog, but you’re not sure if you have jQuery installed, and if you do, what version.

Let’s find out!

Go to the Console tab. At the bottom of the window should be a textbox with >> in it. You’ll be entering your commands there.

Type in $ and press enter. Yes, just $, a dollar sign. (I told you this was going to be easy!)

If you don’t have jQuery installed, you’ll see an error, similar to:

no jquery

If you get something like:

has jQuery

Good news, jQuery is available! One more line of code will tell us the version. Type in

 $("body")

and press enter. That should return something like:

jQuery Version

If you look a few lines down, you’ll see jquery : “1.9.1″. There’s your version number.

I can’t stop myself, one more tiny line of code. Let’s hide something on the page, just for fun. Type in

 $("#s4-workspace").hide()

and press enter.

See what that does? Cool huh?

Oh no!

Relax. JavaScript only affects the immediate page, your changes are not applied to the back end. Want it back? Just refresh your page. This could be a fun prank to play on someone if you can get 2 seconds in front of their computer. Do it to one of your developers, let them know you know what they know, ya know?

Coming up next, performance!

What happened to debugging? Debugging script only comes in handy if you’re troubleshooting a script you’re writing. Since you’re not a developer, I’m not going down that road.

Til then, Happy SharePointing!

A Non-Developer’s intro to the Developer Toolbar: Element Inspection

If you’re a beginner in the world of customizing SharePoint, you should get to know the developer toolbar. Even if you’re only copying and pasting code from blog posts, knowing about, and using, the developer toolbar can save you a few cycles of banging your head on the keyboard.

The developer toolbar is key. Any SharePoint developer who is doing anything on the front end (JavaScript, jQuery, CSS, HTML, etc.) heavily relies on it. It does some really awesome stuff. I am going to run through some of the key things you can get out of the developer toolbar, like:

  • Element Inspection
  • Scripting
  • Performance
  • Other Advantages

I decided to break this up into a few posts since there’s a lot of info to cover.

How do you get a Developer Toolbar?

Most if not all major browsers have a variation of one:

Internet Explorer calls it the F12 Developer Tools, and can be accessed by pressing the F12 button.

Internet Explorer F12 Developer Toolbar

Chrome calls it Developer Tools, and can also be accessed by pressing the F12 button.

Chrome Developer Toolbar

Safari calls it Web Inspector and you can get to it by pressing CTRL+ALT+i.

Safari Web Inspector

FireFox calls it FireBug, and is quite different than the rest, but the same functionality exists. You can get to it by pressing SHIFT+F2.

FireFox Developer Tools

Once we have the developer toolbar running, we can explore the DOM. DOM stands for the Document Object Model, more at Wikipedia: http://en.wikipedia.org/wiki/Document_Object_Model. Basically, the DOM is your page, and all the elements you see: text, colors, shapes, images, etc.

Element Inspection

Each of the toolbars have an option to Inspect or Select an element:

Safari

Safari

Chrome

Chrome

FireFox

FireFox

Internet Explorer

Internet Explorer

With the selection tool enabled, you can then hover over elements in your page. You’ll quickly see a border wrapping the elements. Click on an item and the CSS attributes assigned to that element will appear in the toolbar.

Select an element

Select an element and view its position in the DOM, and all CSS that affects it on the right.

View the element's CSS

Press Trace Styles (only in IE) to see a cleaner view of the CSS attributes.

Press Trace Styles for a cleaner view (only in IE). Edit CSS directly and see it change in the page!

Double click on a CSS value and see it change in the page! (See how the font size increased?)

Once you have played around with it, you can take what you know, and apply it to your custom CSS files, or in a web part. This part will require you to know CSS a little bit more, however if you mess with your CSS and decide you like a new look, you can send along your desired CSS  to your developers and surprise them.

A few notes:

  • Modifying the CSS is not permanent. When you refresh the page or browse to another, the CSS reverts back to what it was.
  • I use IE for CSS related inspection, as it has the cleaner Trace Styles option.
  • Popup dialogs and some menus are dynamically generated by a user clicking, IE doesn’t do a good job at inspecting these. I will usually use Chrome or FireFox to access these elements.

Coming up next, Scripting!

Til then, Happy SharePointing!

Using Linq in SharePoint InfoPath Code Behind

I’m a huge fan of Linq (in C#, not the chat client Lync which I am also a fan of). It allows me to quickly query an array and manipulate my data SO much faster than loops and datasets.

One of my favorite things to do is to grab an array of items, and create a collection of anonymous objects with just the properties I need. Similar to:

var comps = from XPathNavigator r in compRows
 group r by r.SelectSingleNode("my:CompTitle", NamespaceManager).Value.ToString() into g
 select new
 {
 Title = g.Key,
 Total = g.Sum(c => Convert.ToInt32(c.SelectSingleNode("my:CompsUsed", NamespaceManager).Value.ToString()))
 };

In the above, I just needed a quick array of items which are to be later loaded into a repeating table. This works great through the InfoPath client, and the use of anonymous objects works great everywhere else. It appears the InfoPath Form Services in SharePoint 2013 (I’d be willing to bet 2010 as well) doesn’t like it as much. When I upload the form, it errored and the ULS logs reported:

ConstructFromXsnFile failed with unhandled exception System.NullReferenceException: Object reference not set to an instance of an object. at Microsoft.Office.InfoPath.Server.Converter.DetectUnsupportedNamespaces. VerifyNamespace(String ns, String nodeName, ICollection`1 problems) at ....

Such a helpful error isn’t it? I went ahead, using .Net Reflector, and decompiled and debugged Microsoft.Office.InfoPath.Server.dll. This clarified things a lot. When the InfoPath form is verified, SharePoint checks all of the methods and namespaces, and one check is for anonymous types. There didn’t appear to be an option to override so I updated my code to not use anonymous types.

I created a quick class file with the same properties, and updated my code above by simply changing one line

select new CompTotal

so now my code looks like

var comps = from XPathNavigator r in compRows
 group r by r.SelectSingleNode("my:CompTitle", NamespaceManager).Value.ToString() into g
 select new CompTotal
 {
 Title = g.Key,
 Total = g.Sum(c => Convert.ToInt32(c.SelectSingleNode("my:CompsUsed", NamespaceManager).Value.ToString()))
 };

BLAMO! It worked, and quite well. I hope this helps someone in the future who might be chasing down a similar issue.

Happy SharePointing!

SharePoint Browser Support… Improved with 2013, really?

I wrote a post a little while ago about Microsoft’s boasts on supporting all browsers in SharePoint 2010. The fact is, SharePoint 2010 does not. What about SharePoint 2013? Let’s see:

Right off the bat, I see this when using Chrome, but not in FireFox.

Microsoft add on for Chrome

I went ahead and ignored it and tested out some items (below). As soon as I hit the first time that didn’t work as planned in Chrome, I enabled it, and it didn’t help things. Not sure what this is for.

The following tests were completed with Internet Explorer 10.0.9200.16540, Chrome 23.0.1271.64 m, and FireFox 16.0.2. See the bottom for IE8 or IE9.

Within a document library…

Try uploading multiple documents… this has changed since SharePoint 2010. There is no longer an option to upload multiple from the ribbon. Instead, you can drag your files into the library.

Funny enough, this doesn’t always work in IE, works great in Chrome and FireFox. Have you experienced the same in IE? I’m betting this is a bug in my IE with one of the add ons.

ie_dragdrop

Drag and Drop in IE

firefox_dragdrop

Drag and Drop in FireFox

Drag and Drop in Chrome

Drag and Drop in Chrome

Try opening the library in Windows Explorer, only works in IE still.

Open with Explorer in FireFox

Open with Explorer in FireFox

Open with Explorer with Chrome

Open with Explorer with Chrome

Open with Explorer with IE

Open with Explorer with IE

Try opening a Word doc and have it connect and save back to SharePoint. This was terrible in SharePoint 2010, only worked in IE. It appears it works amazingly well on SharePoint 2013!

Live editing in Chrome

Live editing in Chrome

Live editing in IE

Live editing in IE

Live editing in FireFox

Live editing in FireFox

Then there’s lists…

SharePoint 2010 had the datasheet view, which only worked in IE. SharePoint 2013 has updated it to Quick Edit. This appears to work in each browser, however copy/paste from Excel doesn’t work in Chrome and FireFox. The two rows I added in IE were copied from Excel. Couldn’t get it to work in the others.

Quick Edit in FireFox

Quick Edit in FireFox

Quick Edit in IE

Quick Edit in IE

Quick Edit in Chrome

Quick Edit in Chrome

A photo library works so much better in all three browsers. This is a big improvement over SharePoint 2010.

Photo library in IE

Photo library in IE

Photo library in Chrome

Photo library in Chrome

Photo library in FireFox

Photo library in FireFox

Let’s give Excel a go…

Beautiful, can you tell the difference between the three?

Excel Web Services in FireFox

Excel Web Services in FireFox

Excel Web Services in IE

Excel Web Services in IE

Excel Web Services in Chrome

Excel Web Services in Chrome

As you can see, browser support has greatly improved with SharePoint 2013, with the only disappointment being the Open with Explorer feature. Overall, most if not all of the features work cross browsers. Microsoft removed the ActiveX controls that once controlled most of the above features, now SharePoint uses HTML5 for most of its interfaces. This allows equal access and treats the other (non-IE) browsers are first class citizens.

What about Internet Explorer 8 and 9? Natively, they don’t support HTML5, however, if you have Office 2013 installed, it should all work. For more info, see TechNet blog: http://blogs.technet.com/b/wkng/archive/2012/11/07/sharepoint-server-2013-drag-and-drop-contents-to-library.aspx.

This is excellent news!

For more information on Microsoft’s official stance on browser support: http://technet.microsoft.com/en-us/library/cc263526(v=office.15).aspx. Also Joel Oleson has put together a SharePoint 2013 Browser Comparison Report Card.

Let’s try mobile browsers next…

‘Til then, Happy SharePointing!

Overview of SharePoint 2013′s Services

With the new version, we get new features and functionality. The following lists off the services available with SharePoint 2013 Enterprise, and briefly explains what they do. I made this for my own reference, but thought I’d share.

I’ve also added links to TechNet articles on how to install/configure. There is a great article which covers these services, and how they could be deployed on an ideal farm topology http://technet.microsoft.com/en-us/library/jj219591.aspx.

Enjoy!

Access Database Service 2010

Access Services 2010 is a service application that allows users to modify and publish in SharePoint Server 2013 an Access web database that was previously created in SharePoint Server 2010. http://technet.microsoft.com/en-us/library/ee748653.aspx

Access Services

Access Services enables you to create and customize Access apps for SharePoint. http://technet.microsoft.com/en-us/library/jj714714.aspx

App Management Service

App Management Service is part of the new App support within SharePoint 2013. This service, along with the Microsoft SharePoint Foundation Subscription Settings Service, have to be configured properly to support the new App model. http://technet.microsoft.com/en-us/library/fp161236.aspx#ConfigureAppServices

Business Data Connectivity Service

Business Data Connectivity Service allows you to pull in external data sources into SharePoint, and treat them much like a normal SharePoint list. This allows businesses to connect to existing line of business applications with minimal effort. http://technet.microsoft.com/en-us/library/ee681491.aspx

Central Administration

This service is what provides Central Administration on the server. Make sure at least one server in your farm has this running. I don’t know if you can stop this on all servers, I haven’t tried, and I don’t recommend it!

Claims to Windows Token Service

The Claims to Windows Token Service (c2WTS) is a feature of Windows Identity Foundation (WIF). The c2WTS extracts user principal name (UPN) claims from non-Windows security tokens, such as SAML and X.509 tokens, and generates impersonation-level Windows security tokens. This allows a relying party application to impersonate the user. This might be needed to access back-end resources, such as Microsoft SQL Servers, that are external to the computer running the relying party application. http://msdn.microsoft.com/en-us/library/ee539091.aspx

Distributed Cache

The Distributed Cache service provides caching features in SharePoint Server 2013. The microblog features and feeds rely on the Distributed Cache to store data for very fast retrieval across all entities. The Distributed Cache service is built on Windows Server AppFabric, which implements the AppFabric Caching service. Windows Server AppFabric installs with the prerequisites for SharePoint Server 2013. http://technet.microsoft.com/en-us/library/jj219700.aspx#cache http://technet.microsoft.com/en-us/library/jj219613.aspx

Document Conversions Launcher Service

This service schedules and initiates the document conversions. When SharePoint Foundation passes a document conversion request to the document conversion launcher service, the service must call the appropriate document converter. http://msdn.microsoft.com/en-us/library/aa979484(v=office.14).aspx

Document Conversions Load Balancer Service

This service balances the document conversion requests from across the server farm. When it receives a converter request from SharePoint Foundation, the document conversion load balancer service must return a URI to the appropriate document conversion launcher service. SharePoint Foundation connects to the specified launcher via .NET Remoting and requests that it convert the specified document. http://msdn.microsoft.com/en-us/library/aa979484(v=office.14).aspx

Excel Calculation Services

Excel Services is a SharePoint Server 2013 service application that allows users to share and view Excel workbooks. The service application also enables data-connected Excel workbooks and work sheets to be refreshed and updated from a variety of data sources. http://technet.microsoft.com/en-us/library/jj219698.aspx

Lotus Notes Connector

Lotus Notes Connector provides connectivity for search to crawl Lotus Notes content within a Domino database. http://technet.microsoft.com/en-us/library/jj591606.aspx

Machine Translation Service

Machine Translation Service provides automatic machine translation of files and sites. When the Machine Translation Service application processes a translation request, it forwards the request to a cloud-hosted machine translation service, where the actual translation work is performed. http://msdn.microsoft.com/en-us/library/jj163145.aspx

Managed Metadata Web Service

The managed metadata service application makes it possible to use managed metadata and share content types across site collections and web applications. A managed metadata service publishes a term store and, optionally, content types; a managed metadata connection consumes these. http://technet.microsoft.com/en-us/library/ee424403.aspx

Microsoft SharePoint Foundation Incoming E-Mail

The Incoming E-Mail service allows for users to send emails to libraries within your sites. http://technet.microsoft.com/en-us/library/cc262947.aspx

Microsoft SharePoint Foundation Sandboxed Code Service

A sandbox is a restricted execution environment that enables programs to access only certain resources and keeps problems that occur in the sandbox from affecting the rest of the server environment. Solutions that you deploy into a sandbox, which are known as sandboxed solutions, cannot use certain computer and network resources and cannot access content outside the site collection they are deployed in. Because sandboxed solutions cannot affect the whole server farm, they do not have to be deployed by a farm administrator. If sandboxed solutions have been enabled on at least one server in the farm, a site collection administrator can deploy solutions to a run in a sandbox on any server in the farm. http://technet.microsoft.com/en-us/library/ff535775(v=office.15).aspx

Microsoft SharePoint Foundation Subscription Settings Service

This service was primarily used for multi-tenency support in SharePoint 2010. In SharePoint 2013, it is also necessary for apps.  http://technet.microsoft.com/en-us/library/fp161236.aspx#ConfigureAppServices

Microsoft SharePoint Foundation Web Application

This is the core service for running your sites. It configures IIS to host the sites providing the SharePoint to end users.

Microsoft SharePoint Foundation Workflow Timer Service

This service supplements the main Timer service with configuration settings for timed workflow events.

PerformancePoint Service

PerformancePoint Services in SharePoint Server 2013 is a performance management service that you can use to monitor and analyze your business. By providing flexible, easy-to-use tools for building dashboards, scorecards, and key performance indicators (KPIs), PerformancePoint Services can help individuals across an organization make informed business decisions that align with companywide objectives and strategy. http://technet.microsoft.com/en-us/library/ee424392.aspx

PowerPoint Conversion Service

PowerPoint Conversion Service provides unattended, server-side conversion of presentations into other formats. http://msdn.microsoft.com/en-us/library/fp179894.aspx

Request Management

Request Manager is functionality in SharePoint Server 2013 that enables administrators to manage incoming requests and determine how SharePoint Server 2013 routes these requests. http://technet.microsoft.com/en-us/library/jj712708.aspx

Search Host Controller Service

This service manages the search topology components. The service is automatically started on all servers that run search topology components. http://technet.microsoft.com/en-us/library/gg502597.aspx

Search Query and Site Settings Service

This service load balances queries within the search topology. It also detects farm-level changes to the search service and puts these in the Search Admin database. The service is automatically started on all servers that run the query processing component. http://technet.microsoft.com/en-us/library/gg502597.aspx

Secure Store Service

The Secure Store Service is an authorization service that runs on an application server and provides a database that is used to store credentials. These credentials usually consist of a user identity and password, but can also contain other fields that you define http://technet.microsoft.com/en-us/library/ee806866.aspx

SharePoint Server Search

This service crawls content for the search index. This service is automatically started on all servers that run search topology components. The service cannot be stopped or started from the Services on Server page. http://technet.microsoft.com/en-us/library/gg502597.aspx

User Profile Service

The User Profile service application stores information about users in a central location. Social computing features use this information to enable productive interactions so that users can collaborate efficiently. http://technet.microsoft.com/en-us/library/ee662538.aspx

User Profile Synchronization Service

The User Profile Synchronization Service facilitates the creation of user profiles by importing data from directory services, such as Active Directory Domain Services (AD DS). You can augment user profiles by importing data from business systems, such as SAP or SQL Server. http://technet.microsoft.com/en-us/library/gg188041.aspx

Visio Graphics Service

The Visio Graphics Service allows users to share and view Visio diagrams by using Visio Services. The service application also enables data-connected Visio 2013 diagrams to be refreshed and updated from different data sources. http://technet.microsoft.com/en-us/library/ee524059.aspx

Word Automation Services

Word Automation Services enables unattended, server-side conversion of documents that are supported by Microsoft Word. http://msdn.microsoft.com/en-us/library/ee558278(v=office.14).aspx

Work Management Service

The Work Management Service automates consolidating tasks from SharePoint, Exchange and Project Server. http://technet.microsoft.com/en-us/library/jj554516.aspx

Happy SharePointing!