How to create a SharePoint Online (sandbox) Visual Web Part



This tutorial is for a sandbox solution (for SharePoint Online). You can find the farm solution tutorial here.

I will use a jQuery clock script, and the web part will get properties for changing the background color and clock color.

I have used the clock script from www.alessioatzeni.com, but when/if you feel confident then you can do whatever you like with the web part.

This is how the web part will look.
Screen Shot 2013-12-25 at 15.18.12 Screen Shot 2013-12-25 at 15.17.40

 

To get started we need Visual Studio 2012/13 and a SharePoint 2013 dev environment. If you have this, then lets go!

If you are very new to development then keep to the names I’m using in the tutorial, it makes it simpler for you to follow.

  1. Open Visual Studio and create a new SharePoint 2013 – empty project. Name it ” SimpleVisualWebPartSandBox”.
    Screen Shot 2013-12-25 at 11.53.35
  2. Now, choose SandBox solution.
    Screen Shot 2013-12-26 at 15.52.33
  3. When the project has opened, right click on the project and choose Add -> New Item -> Visual Web Part. Name it “ClockVisualWebPart”
    When you did this you got a both a new Visual Web Part and a Feature, we will get back to them soon.
  4. Right click on the project again and choose Add -> New Item -> Module, call it Exactly “Style Library”
  5. Remove the sample.txt file and then right click on the Style Library module and add a new folder, call it “ClockVisualWebPart”.
  6. Add two more folders just under ClockVisualWebPart that you name “Styles” and “Scripts”.
  7. Your project should look like this now.
    Screen Shot 2013-12-26 at 16.02.03
  8. Now, right click on your Styles folder and Add -> New Item -> Style Sheet (Under the category Web). Name it “ClockVWP.css”
  9. Add the following Style to it and save the file.
  10. Right click on the Scripts folder and Add -> New Item -> Java script file (Under the category Web). Name it “ClockVWP.js”
  11. Add the following code to it.
  12. Crete a new Java script file under Scripts and name it “jquery-1.10.2.min.js”
  13. Download the jQuery from here . (Copy and paste the jQuery) http://code.jquery.com/jquery-1.10.2.min.js Then save the file and close it.
  14. Lets start with the web part it self, go to ClockVisualWebPart and open the file called ClockVisualWebPart.ascx
  15. Add the following code. This HTML code will display the clock, we will make some changes to it later on. Save and close the file for now.
  16. Open the ClockVisualWebPart.ascx.cs file and paste in the following code. (If you have a different name on your project then read the comments in the code for what you should copy).
    This code will do two things, 1. Add the web part settings where we will allow the users to change the color of the clock. 2. Lad JavaScripts and CSS. 
  17. To set default values (default colors) and the name of the web part open the file called. ClockVisualWebPart.webpart
  18. Replace the code in your file with this one. (If you have a different name on your project/file then just look what i have done with the <properties>)
  19. Now lets add inline style for the text and background color and connect the web part settings to the inline style.
  20. Open ClockVisualWebPart.ascx and after the comment that say <%–Inline style coming here!–%> add the following snippet.
    To get the color setting from the web part settings in to the web part we call the ClockTextColor and the ClockBackgroundColor within the inline style. 
  21. In your project you will find a folder called Features. In that folder you find Feature1, rename that feature to “ActivateClockWebPart”.
  22. Dubble click on the feature to open it, replace the title with “Activate Clock Web Part” and in description write “This feature will activate sandbox solution clock web part.”.
  23. Make sure the ClockVisualWebpart and the Style Library is included and that the Scope is set to Site. Save and close,
  24. Now you can right click on the project and take Deploy. If every thing is correct you will find your Web part under the category Custom.

OBS! You might get a white web part when adding it on a non Sandbox environment. The default values don’t get set, so you need to add your colors in the web part settings. In a sandbox environment you don’t get this.

You can download the project from GitHub, both the SandBox and the Farms solution. (But if you want to learn something on the way, then do the tutorial 🙂

Good Luck!

9 responses to “How to create a SharePoint Online (sandbox) Visual Web Part”

  1. Diane says:

    Love it! I’m new to developing and have learned so much from this article. However… I have a SharePoint 2010 environment and would appreciate help modifying code to run on SP2010. I was able to build and deploy to my local environment, successfully add the web part, but the date and time were not displayed on the background.
    Thanks!!

    • Hi Diane,
      I have not tested this on a 2010 and i know that there is changes made to Visual Web parts on 2013 and that can be the reason it wont work for you.
      How ever, if you don’t see that clock then it seems that your scripts hasn’t loaded. Have you checked in your browser dev tools that they do?
      If you have a custom master with jQuery in it then you don’t need to add jQuery again in the Web Part and you can add the clock script inline in the web parts to make sure it loads.
      Also, if you don’t need a SandBox solution then you can try the following post. It’s the same script but it uses a scriptlink instead of adding the scripts through the .ascx.cs file.
      http://frederik.se/how-to-develop-a-sharepoint-2013-visual-web-part-with-simple-properties/

  2. Marchi says:

    HI Fred, thanks for the post.

    I’m having trouble when deploying the sandbox solution to my SharePoint Online.

    Once it’s uploaded to solution gallery, everytime I want to activate it. I am always getting this error message:

    Sorry, something went wrong

    Error validating assembly ‘solution.dll’.

    StringNotFound

    Technical Details

    Troubleshoot issues with Microsoft SharePoint Foundation.

    Correlation ID: 21fa209d-a043-2000-08dc-131e2262fea1

    Date and Time: 8/5/2015 3:43:16 AM

    Do you know what seems to be the problem? Thanks 🙂

    • Hi! If you have followed my instructions completely and still get this error, then MS my have changed something in O365. I have not tested this one since i wrote the blog post. I will se if i can get some time to test it later.

      @all, Is there any one else that get the same problem?

  3. Marchi says:

    I forgot to mention, if I set “include assembly in package” to false – then the activation can go through. But the webpart doesnt work.

  4. Matthew Chestnut says:

    This is an excellent example. Worked fine in my on-premise SharePoint 2013 virtual machine.

  5. Massimo says:

    Hello, I tried to deploy a web part on Sharepoint Online by following this procedure.
    But I get the same error when I activate my web part:

    Sorry, something went wrong

    Error validating assembly ‘MyWebPartTest.dll’.

    StringNotFound

    I’m using Visual Studio 2015 Community with Microsoft Office Developer Tools.
    And I get the same error even if I use a “empty” web part solution. I think this is very strange!

    Do you have any idea about this problem?
    Many thanks.
    Massimo

  6. Karim says:

    Hi Fred, thanks for this share.

    It helped me a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *