Backbone Stickit Handler for SharePoint and CKEditor

For those of you using Backbone.js and Backbone.Stickit for client-side SharePoint development, this is a quick article describing how to add a global Stickit handler for SharePoint HTML mult-line text fields rendered using the inline HTML editor CKEditor.

In this example, we have a SharePoint field with an internal name of WorkDescription (and a corresponding attribute in our Backbone model) that we want to render using CKEditor through our Backbone view.

The following screenshot shows the end result:

In Stickit, we can create a global handler for specific elements (identified using standard selectors) that eliminates the need to manually create and attach 3rd-party controls outside of the normal Backbone and Backbone.Stickit flow.

Basic Steps

1. Define the HTML in your view template.
2. Add the global Stickit handler in your view.
3. Define your Stickit bindings as you normally would. When stickit(this.model, this.bindings) is called in your view's render() function, the control is automatically created and attached to the appropriate element.

The same technique can be used for a variety of client-side controls and plugins to simplify and add consistency to your SharePoint CSOM/JSOM code.

The molecule icon in the screenshot above made by Freepik from www.flaticon.com is licensed under CC BY 3.0

Backbone Stickit Handler for SharePoint Client People Picker

For those of you using Backbone.js and Backbone.Stickit for client-side SharePoint development, this is a quick article describing how to add a global Stickit handler for SharePoint client People Picker controls.

In this example, we have a SharePoint Person or Group field with an internal name of WorkFor (and a corresponding attribute in our Backbone model) that we want to render using the client People Picker control through our Backbone view.

The following screenshot shows the end result:

Though the client People Picker control is often helpful and has become a de-facto standard for SharePoint users, it does present some challenges when used with backbone and the SharePoint REST API:

• A SharePoint Person or Group field stores the numeric SharePoint ID of the selected user (not the user's account name).
• The client People Picker API doesn't return the SharePoint ID of the selected user.
• In order to set the appropriate SharePoint list item property or backbone model attribute, the selected user's ID must be fetched from SharePoint whenever the selected user is changed.
• The SharePoint REST API returns the Person or Group field with 'Id' appended to the end of the field's actual internal name (see User, Person or Group Fields with REST in SharePoint 2013 for more details). So for this example, we must use 'WorkForId' whenever we need to reference the WorkFor field.

In Stickit, we can create a global handler for specific elements (identified using standard selectors) that eliminates the need to manually create and attach 3rd-party controls outside of the normal Backbone and Backbone.Stickit flow.

Basic Steps

1. Define the HTML in your view template.
2. Add the global Stickit handler in your view.
3. Define your Stickit bindings as you normally would. When stickit(this.model, this.bindings) is called in your view's render() function, the control is automatically created and attached to the appropriate element.

The same technique can be used for a variety of client-side controls and plugins to simplify and add consistency to your SharePoint CSOM/JSOM code.

Backbone Stickit Handler for SharePoint and the Chosen Plugin

For those of you using Backbone.js and Backbone.Stickit for client-side SharePoint development, this is a quick article describing how to add a global Stickit handler for SharePoint Choice field rendered using the Chosen plugin for jQuery.

In this example, we have a SharePoint field with an internal name of WorkType (and a corresponding attribute in our Backbone model) that we want to render using the Chosen jQuery plugin through our Backbone view.

The following screenshot shows the end result:

In Stickit, we can create a global handler for specific elements (identified using standard selectors) that eliminates the need to manually create and attach 3rd-party controls outside of the normal Backbone and Backbone.Stickit flow.

Basic Steps

1. Define the HTML in your view template.
2. Add the global Stickit handler in your view.
3. Define your Stickit bindings as you normally would. When stickit(this.model, this.bindings) is called in your view's render() function, the control is automatically created and attached to the appropriate element.

The same technique can be used for a variety of client-side controls and plugins to simplify and add consistency to your SharePoint CSOM/JSOM code.

Backbone Stickit Handler for SharePoint and the jQuery UI Datepicker Plugin

For those of you using Backbone.js and Backbone.Stickit for client-side SharePoint development, this is a quick article describing how to add a global Stickit handler for SharePoint DateTime fields rendered using the jQuery UI datapicker control.

In this example, we have a SharePoint field with an internal name of WorkDueDate (and a corresponding attribute in our Backbone model) that we want to render using the jQuery UI datepicker through our Backbone view.

The following screenshot shows the end result:

In Stickit, we can create a global handler for specific elements (identified using standard selectors) that eliminates the need to manually create and attach 3rd-party controls outside of the normal Backbone and Backbone.Stickit flow.

Basic Steps

1. Define the HTML in your view template.
2. Add the global Stickit handler in your view.
3. Define your Stickit bindings as you normally would. When stickit(this.model, this.bindings) is called in your view's render() function, the control is automatically created and attached to the appropriate element.

The same technique can be used for a variety of client-side controls and plugins to simplify and add consistency to your SharePoint CSOM/JSOM code.

User, Person or Group Fields with REST in SharePoint 2013

Setting the value of a user field in SharePoint 2013 using REST is straight-forward once you know how to reference the field.

Let's say you have a list named Work Requests with a Person or Group column named AssignedTo. Normally, to add or update an item you construct a JSON object with all the field/value pairs similar to:

{
  "__metadata": {
      "type": "SP.Data.WorkRequestsItem"
  },
  "Title": "Important Work Needed",
  "Description": "This is very important work.",
  "AssignedTo": 1
}

You stringify the object and send the request with $.ajax, but receive a 400 Bad Request response from SharePoint. Huh?

{
  "error": {
    "code": "-1, Microsoft.SharePoint.Client.InvalidClientQueryException",
    "message": {
      "lang": "en-US",
      "value": "A 'PrimitiveValue' node with non-null value was found when trying to read the value of
           a navigation property; however, a 'StartArray' node, a 'StartObject' node, or a
           'PrimitiveValue' node with null value was expected."
    }
  }
}

Next, you try all the various combinations of possible user values, but keep receiving an error.

• "domain\username"
• { "results": [ 1 ] }
• "1;#user@domain.com"
• "i:0#.w|domain\username"

THE SOLUTION is to add "Id" to the end of the field name and use the numeric ID of the user. So, the AssignedTo field becomes AssignedToId. You can verify the field names by requesting a specific item from the list. Try http://<site>/_api/web/lists/getbytitle('Work Requests')/items(2) in a browser to see the actual field names - where items(2) is the ID of an actual list item.

"AssignedToId": 1

That's it. The same technique is also used for lookup fields.

SharePoint 2013: Setup a Local Virtualized Development Environment

There are a number of hosted development options available to SharePoint 2013 developers - Microsoft Azure, CloudShare and many others.  I do the majority of my solution and app development in Azure, but what if you need a local development machine (for farm solution or app development)?

This article contains detailed instructions for installing and configuring a local virtualized SharePoint 2013 development environment in the desktop version of VMware Player.

Please note that newer versions of SQL Server are also supported and there may be some naming variations, depending on the configuration of your VM.

Step-by-Step Instructions

1. Although you can also use Hyper-V or VirtualBox, VMware Player is used in this example.  Download the latest version of VMware Player - VMware Player 6.0.4 (32-bit and 64-bit).
2. Run the WMware Player Setup executable and click Next.
   
3. Accept the License Agreement and click Next.
   
4. Accept the default location and click Next.
   
5. Enable Check for product updates on startup (optional) and click Next.
   
6. Enable Help improve VMware Player (optional) and click Next.
   
7. Select the shortcuts you want to create and click Next.
   
8. Wait while the VMware Player is installed.
   
9. When the Setup Wizard completes, click Finish.
   

   Virtual Machine Creation

10. Click Create a New Virtual Machine.
    
11. Enter or select the following Easy Install Information:

    Setting	Value	Comments
    Windows product key		MSDN, Evaluation, your organization's EA, etc.
    Version of Windows to install	Windows Server 2008 R2 Enterprise
    Full name	Administrator
    Password / Confirm

    
12. Enter the Virtual machine name and Location, then click Next.
    
13. Enter a Maximum disk size of 140 GB and select Split virtual disk into multiple files, then click Next.

    Note

    You can specify a smaller or larger disk size here, but remember you'll need enough to install and run SharePoint, SQL Server and Visual Studio.

    
14. Uncheck Power on this virtual machine after creation and click Customize Hardware.
    
15. Select Memory from the left pane and enter 5,836 for Memory, then click Close.

    Note

    You may need to adjust the memory setting depending on the amount of memory available on the host. Essentially, you want to set this as close to the maximum recommended without causing the host to become unresponsive. I have also successfully set this as low as 4,096 for a SharePoint 2013 VM.

    
16. On the New Virtual Machine Wizard, click Finish.
    
17. Select your new VM from the left pane, then click Play virtual machine.
    
18. You may receive an error related to Intel VT-x being disabled. In my case, I simply enabled the option in my machine's BIOS. Once enabled, simply reboot and run WMware Player again. If you need help with this, click the link at the bottom of the error dialog.
    
19. Click Download and Install to install the VMware Tools for Windows.
    
20. At this point, you simply wait on WMware to perform an Easy Install of Windows Server.
    
21. After the installation is complete, wait while the Windows desktop is created.
    

    Active Directory Installation & Configuration

22. In Customize this server of the Initial Configuation Tasks window, click Add Roles. New roles can also be added by clicking Add Roles in the Roles Summary section of the Server Manager.
23. Select the Server Roles section from the left pane, check Active Directory Domain Services, then click Next.
    
24. On the Active Directory Domain Service wizard dialog, click Next.
    
25. Click Install on Confirm Installation Selections.
    
26. Click Close this wizard...launch dcpromo.exe from the Installation Results dialog.
    
27. On the Active Directory Domain Services Installation Wizard, click Next.
    
28. Click Next.
    
29. Select Create a new domain in a new forest and click Next.
    
30. Enter your Fully Qualified Domain Name (FQDN) and click Next.
    
31. Select Windows Server 2008 as the Forest functional level and click Next.
    
32. Check DNS Server for additional options and click Next.
    
33. If you would like to use static IPs, assign them at this time. Otherwise, click Yes. Although dynamic IPs are not recommended, they will most likely work in this scenario, depending on your network configuration.
    
34. If the following dialog is presented, click Yes.
    
35. Accept the default folder locations and click Next.
    
36. Enter and confirm Restore Mode Administrator Password and click Next.
    
37. On the Summary dialog, click Next.
    
38. Wait for the DNS installation to finish.
    
39. Click Finish to close the Installation Wizard.
    
40. Restart the VM by clicking Restart Now.
    

    Service Accounts Creation

41. Open the Active Directory Users and Computers application from the Start Menu.
    
42. Right click Users, then the New context menu and User.
    
43. On the New Object - User dialog, enter sql_service as the Full name, then verify User logon name matches, then click Next.
    
44. Enter and confirm the Password, then uncheck User must change password at next logon and check Password never expires, then click Next.
    
45. Click Finish to create the new account.
    
46. Duplicate the account creation steps to create the following accounts:
    

    Name	Purpose
    sql_service	Used to run SQL Server.
    sp_install	Local Admin account used to install SharePoint.
    sp_farm	SharePoint farm account.
    sp_pool	Runs the associated Web Application Pools
    sp_services	Runs the Service Application Pool

    SQL Server Installation & Configuration

47. Run SQL Server setup.exe from your installation media.
48. Select the Installation option on the left pane, then click New installation or add features to an existing installation.
    
49. Verify all the Setup Support Rules successfully passed, then click OK. Any failures must be corrected before the installation can continue.
    
50. Enter the product key, then click Next.
    
51. Check I accept the license terms and click Next.
    
52. Click Install to install the Setup Support Files.
    
53. Wait while the Setup Support Files are installed.
    
54. Verify there are no failed rules, then click Next. Any failed rules must be corrected before the installation can continue.
    
55. Select SQL Server Feature Installation, then click Next.
    
56. On the Feature Selection dialog, click Database Engine Services, Management Tools - Basic and Management Tools - Complete, then click Next.
    
57. Verify none of the Installation Rules have failed, then click Next.
    
58. Select Named instance and enter SP2013SQL, then click Next.
    
59. On the Disk Space Requirements, click Next.
    
60. Enter the sql_service account and password for the SQL Service Agent and SQL Server Database Engine services.
61. Change the Startup Type of the SQL Server Browser service to Automatic.
    
    
    • In addition to manually entering the service accounts directly into the Configuration Wizard, you can also select the service account users from Active Directory by selecting Browse, then entering sql_service and clicking Check Names.
    
62. To use Mixed Mode authentication, select the Mixed Mode option and enter the sa password. Windows authentication is the default mode and either will work in this environment.
    
    Click Add the Domain Admins and Local Administrators AD groups, then click Next.
    
63. On the Error Reporting step, click Next.
    
64. Verify the Installation Configuration Rules have passed, then click Next.
    
65. Verify the features to install, then click Next.
    
66. Wait while the SQL Server features are installed.
    
67. Once the setup has completed successfully, click Close.
    
68. Download and install SQL Server 2008 R2 Hotfix - http://support.microsoft.com/kb/2554876.

    SharePoint Installation & Configuration

69. From Windows Explorer, run splash.hta.
    
70. From the SharePoint Splash window, click Install software prerequisites..
    
71. On the Microsoft SharePoint 2013 Products Preparation Tool wizard, click Next..
    
72. Accept the License Agreement terms, then click Next..
    
73. Wait for the prerequisites to install..
    
74. Click Finish to restart your VM. As additional prerequisites are installed, the VM may need to be rebooted again..
    
75. Click Finish to close the wizard..
    
76. In Windows Explorer, navigate to setup.exe in the root of your SharePoint 2013 installation media. Hold down SHIFT + Right click and click the Run as different user context menu.
    
77. Enter sp_install as the username, then enter the password and click OK.
    
78. On the User Account Control dialog, click Yes.
    
79. Enter your 25 character Product Key, then click Continue.
    
80. Accept the Software License Terms, then click Continue.
    
81. Accept the default folder locations and click Install Now.
    
82. Wait while SharePoint is installed.
    
83. Check the Run the SharePoint Products Configuration Wizard now option, then click Close.
    
84. On the SharePoint Product Configuration Wizard, click Next.
    
85. Click Yes when prompted to reset services as necessary during the configuration.
    
86. Select the Create a new server farm, then click Next.
    
87. On the Specify Configuration Database Settings step, enter the following values, then click Next.

    Setting	Value	Comments
    Database server	SP13\SP2013SQL	This is the name of your server and the named SQL Server instance.
    Database name	SharePoint_Config	You can change the default name if you have a different naming convention.
    Username	DEV\sp_farm	This is your AD Domain and SharePoint Farm account.
    Password		This is the sp_farm account password you created in step 46.

    
88. Enter and confirm a passphrase, then click Next.
    
89. Check Specify port number and enter 9999 as the port, then click Next.

    Note

    I typically use 9999 for the Central Admin port, but you can specify a different port.

    
90. Click Next to apply the configuration settings.
    
91. Wait while SharePoint is configured.
    
92. Click Finish to close the wizard.
    
93. Launch SharePoint 2013 Central Administration from the Windows start menu.
    
94. Click Configuration Wizards from the side menu, then click Launch the Farm Configuration Wizard.
    
95. On the Welcome page, click Start the Wizard.
    
96. Select the Create a new managed account option and enter the User name sp_services and a password.
    
97. Check the Services you want to run on your development farm, then click Next. See the Services Table for details.
    

    Services Table

    Service	Enable
    Access Services 2010
    Access Services
    App Management Service
    Business Data Connectivity Service
    Excel Services Application
    Lotus Notes Connector
    Machine Translation Service
    Managed Metadata Service
    PerformancePoint Service Application
    PowerPoint Conversion Service Application
    Search Service Application
    Secure Store Service
    State Service
    Usage and Health data collection
    User Profile Service Application
    Visio Graphics Service
    Word Automation Services
    Work Management Service Application
    Workflow Service Application

    Note

    You may not require all of these Service in your development environment. Services can be added or removed after the Configuration Wizard is completed in Central Administration.

98. Wait while the services are configured.
    
99. Enter the site collection Title and Description.
100. Select an experience version of 2013 and the Publishing Portal template, then click OK.
     
101. Navigate to http://sp13 (or whatever you named your server) in your browser and check out your new SharePoint 2013 development environment.
     

Next Steps

• If you plan to develop SharePoint Apps, you will also need to setup an Isolated App Domain.
• For more SharePoint articles and samples, check out the Software Development Outpost.