How to develop a SharePoint 2013 Visual Web Part with simple properties



Just to make this as simple as possible i will use a jQuery clock script and your web part properties will change the background and clock color.

I used the clock script from www.alessioatzeni.com.

You will probably want to style the web part after you are done, the included style is kind of clumsy.

The project will be a Farm solution. (SandBox tutorial can be found here.)

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 ” SimpleVisualWebPart”.
    Screen Shot 2013-12-25 at 11.53.35
  2. Now, choose Farm solution.
    Screen Shot 2013-12-25 at 11.53.46
  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 – > SharePoint “Layouts” mapped folder.
    Screen Shot 2013-12-25 at 13.03.21
  5. In the Layouts folder you will get a folder called SimpleVisualWebPart, right click on it and create two new folders under it, “Scripts” and “Styles”. (These folders and coming files will be places in the 15 HIVE on your machine. this is the reson why you can not use this solution in a sandbox enviorment.)
  6. Now, right click on your Styles folder and Add -> New Item -> Style Sheet (Under the category Web). Name it “ClockVWP.css”
  7. Add the following Style to it and save the file.
  8. Right click on the Scripts folder and Add -> New Item -> Java script file (Under the category Web). Name it “ClockVWP.js”
  9. Add the following code to it.
  10. Crete a new Java script file under Scripts and name it “jquery-1.10.2.min.js”
  11. 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.
  12. Lets start with the web part it self, go to ClockVisualWebPart and open the file called ClockVisualWebPart.ascx
  13. Add the following code. As you can see, we include the two scripts that we have and also the CSS. This HTML code will display the clock, we will make some changes to it later on. Save and close the file for now.
  14. 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 generate the web part settings where we will allow the users to change the color of the clock. 
  15. To set default values (default colors) and the name of the web part open the file called. ClockVisualWebPart.webpart
  16. 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>)
  17. We now add inline style for the text and background color and connect the web part settings to the inline style.
  18. 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. 
  19. In your project you will find a folder called Features. In that folder you find Feature1, rename that feature to “ActivateClockWebPart”.
  20. Dubble click on the feature to open it, replace the titel with “Activate Clock Web Part” and add a description of your chose.
  21. Make sure the ClockVisualWebpart is included and that the Scope is set to Site. Save and close,
  22. 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.

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!

16 responses to “How to develop a SharePoint 2013 Visual Web Part with simple properties”

  1. John says:

    Hi Frederick, thanks for sharing this indepth web part tutorial, many will find this very handy.

  2. Syahri says:

    SIr, your web part tutorial is awesome…thank for sharing this 🙂

  3. haifa says:

    thank you !!! it’s was very helpfull !!

  4. Allan says:

    Great article, how can you specify that the scripts to be loaded must happen AFTER Jquery is initialised? I have jquery loading on my mater page and it loads last which means my web part scripts load before and can’t work.

  5. Sam says:

    Hi great article, was able to follow easily. However the problem I end up with is:

    Error occurred in deployment step ‘Activate Features’: Feature with Id ‘c9a5110a-8009-4bec-9fa7-5eae500767f4′ is not installed in this farm, and cannot be added to this scope.’

    The error is initially the reason why I decided to follow a tutorial to see if I was going wrong anywhere. HAve you been across this error, or do you have any pointers as to how to fix this problem?

    Thanks

  6. Frederik,

    Excellent and very nice tutorial. Though, I am running into exact same error as Sam. I have followed this tutorial step-by-step. The project builds correctly but I get the following error while deploying to my farm:

    Error occurred in deployment step ‘Activate Features’: Feature with Id ‘fcb02773-fedf-43ef-a9d5-afde0617db8e’ is not installed in this farm, and cannot be added to this scope SimpleVisualWebPart

    I am using SharePoint 2013 on-prem. I am using Visual Studio 2012 for my solution.

    Any idea on why this could be happening?

  7. Just resolved my own issue. I was able to deploy my solution with following Powershell script:

    Add-spsolution -LiteralPath c:\WSPNAME.wsp
    install-spsolution -identity WSPNAME.wsp -gacdeployment -webapplication http://aissp2013

    Replace c:\WSPNAME.wsp with your own .wsp file.
    Replace http://aissp2013 with your own webapplication name

    Viola!!

  8. noor says:

    I am trying with Visual Web Part (Farm Solution Only) but I am getting nothing in web part properties after deployment.Only Visual Web Part works perfect but Farm Solution Only Visual Web Parts 🙁
    Could you please suggest

Leave a Reply

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