Create SharePoint pages using Macromedia Dreamweaver Templates(.dwt files)

We know that web page design using Dreamweaver is very easy, but design customization of SharePoint is really hectic. so how about creating SharePoint pages using Dreamweaver? Here is how you can do it

1. Upload your dwt files,css and images in a document library.

2. Open your site in SharePoint Designer.

3. If you want editable regions in that aspx page, create editable portions in the dwt template using below code

[sourcecode language="csharp"]step 3: File new–>create from dynamic web  template
[/sourcecode]

Step 4: Choose your dwt file and click on Ok and save the page as somename.aspx.

Highlight SharePoint List rows conditionally using jQuery

In this article we will see how to Change the row Background color based on the value of a column in a sharepoint list and we will be doing it using  jQuery.

Below is a screenshot of a Task Tracker whose rows are highlighted based on the percentage complete.

Here is how you can do it.

1. Create   Sharepoint list
2. Edit allitems.aspx page and add a content editor web part and copy the below jQuery code to that webpart.
[sourcecode="javascript"]

[/sourcecode]

Highlight a SharePoint List row on mouse over using jQuery

In this article we will see how to highlight list a row on mouse over using jQuery.

Lets get started

1. Create a Sharepoint list
2. Edit allitems.aspx page and add a content editor web part and copy the below jquery and mouser over style to that webpart.
[sourcecode language="JavaScript"]

[/sourcecode]

Display two columns with same label in newform.aspx of SharePoint list

SharePoint does not allow creating two columns with the same name. If you still try to create more than 1 column with the same name then you will be prompted with an error message.

“The column name that you are entered is already use or reserved. Choose another name.”

But in many cases we may need two columns with same label. In this post we can see a work around for creating two labels with same text. Below is what we are going to achieve.

  1. Create the second column with a special character(City#)
  2. Edit the Newform.aspx and Editform.aspx page and insert a content editor web part in the below of the list web part.
    Note: you can append the following query string ?pageview=shared&toolpaneview=2 to the URL (http://mysite/ Lists/job/NewForm.aspx?pageview=shared&toolpaneview=2) to open in edit mode.
  3. Copy and paste the below code in the content editor web part using source editor.

[sourcecode language="javascript"]

[/sourcecode]
Note: In the above code ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField is the ID one of the column in that list, for identifying parent table. (You can get it by viewing the Source code of the page).

Subheading in NewForm.aspx and EditForm.aspx [SharePoint List]

By default SharePoint doesn’t give us the option for adding group heading while adding or editing an item to a SharePoint List. In this tutorial we will see how we can group similar columns and give a subheading and make our new form more interesting. We will use Javascript for this and we are going to do it without using the SharePoint editor.  Below is what we are going to achieve.

  1. Create a column with the name of heading you want
  2. Edit the Newform.aspx and Editform.aspx page and insert a content editor web part in the below of the list web part.
    Note: you can append the following query string &pageview=shared&toolpaneview=2 to the URL (http://mysite/ Lists/job/NewForm.aspx?pageview=shared&toolpaneview=2) to open in edit mode.
  3. Copy and paste the below code in the content editor web part using source editor.
    [sourcecode='javascript'][/sourcecode]
    Note: In the above code ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField is the ID one of the column in that list, for identifying parent table. (You can get it by viewing the Source code of the page).

And in the image you can see two columns with same title (City). In the next post we can see the work around of creating two columns with same name.

Custom JavaScript validation in SharePoint

In this article we will see how to implement client side validation in SharePoint list with out using SharePoint designer.

For this follow the below steps

  1. Navigate to the newform.aspx or editform.aspx page and open it in edit mode
    Note: you can append the following query string &pageview=shared&toolpaneview=2 to the URL (http://mysite/ Lists/job/NewForm.aspx?pageview=shared&toolpaneview=2) to open in edit mode.
  2. Add a content editor web part and modify this web part with source editor option
  3. Add the below script
    [sourcecode='javascript']

    [/sourcecode]

That’s it. Now you can do validation with out post back in SharePoint

Webpart Development part 5: validating Custom Web Part Properties

In this article we will see how to validate the values entered by the user in custom property of web part.

In last blog post we added a text box in tool part pane of web part.  In the below code we are trying to validate whether the text, enter by the user, is more than 10 characters.
[sourcecode language="csharp"]public string text;
[Category("Advanced Settings"),
Personalizable(PersonalizationScope.Shared),
WebBrowsable, WebDisplayName("Text"),
WebDescription("Enter your text")]
public string Text
{
get { return text; }
set {
// Validate input
if(value.Length < 10)
throw new WebPartPageUserException("Enter minimum 10 charectors in text field.");
text = value;
}
} [/sourcecode]

As you can see in the above code, you can write your own conditions in the set method of the property of the control and throw WebPartPageUserException if error an occurs or if it is an invalid entry.

In coming articles we will see how to deploy custom web part in master page

SharePoint Security Trimming using SPSecurityTrimmedControl

If you want to hide SharePoint Controls (eg.Site Actions menu ) based on the user’s permission level or assign specific access to a user then you can use the SharePoint’s builtin control SPSecurityTrimmedControl. Below code will allow the user to view site usage report.

[sourcecode language="csharp"]

write your site actions menu here
[/sourcecode]

Some permission string attributs are

  1. ManageLists
  2. CancelCheckout
  3. AddListItems
  4. EditListItems
  5. DeleteListItems
  6. ViewListItems
  7. ApproveItems
  8. OpenItems
  9. ViewVersions
  10. DeleteVersions
  11. CreateAlerts
  12. ViewFormPages
  13. ManagePermissions
  14. ViewUsageData
  15. ManageSubwebs
  16. ManageWeb
  17. AddAndCustomizePages
  18. ApplyThemeAndBorder
  19. ApplyStyleSheets
  20. CreateGroups
  21. BrowseDirectories
  22. CreateSSCSite
  23. ViewPages
  24. EnumeratePermissions
  25. BrowseUserInfo
  26. ManageAlerts
  27. UseRemoteAPIs
  28. UseClientIntegration
  29. Open
  30. EditMyUserInfo

You can get the complete list from MSDN website.

Webpart Development part 4: Creating Custom Web Part Properties

In recent blog posts we learnt webPart development, deployment  and adding controls etc..

In this blog post we will see how to add custom properties for SharePoint web part. There are several properties available in SharePoint web part for setting its look and feel like Title, Height and Width etc.. In this example we will see how to add Dropdown, Check box and a Text box in webPart tool pane.

  1. Open Visual studio and create a new web part project
  2. Open the .cs file
  3. import the name space System.ComponentModel;
  4. To define the XML namespace to be used for the Custom WebPart, add the below code just above the class declaration. (These values can be whatever you choose and aren’t related to the class name.)
    [sourcecode language='csharp']  [DefaultProperty("Text"), ToolboxData("<{0}:WPwithBGcolr runat=server>
  5. Change the base class from System.Web.UI.WebControls.WebParts.WebParttoMicrosoft.SharePoint.WebPartPages.WebPart
  6. For adding a text box in tool part pane, add the below property in the class
    [sourcecode language="csharp"] public string text;
    [Category("Advanced Settings"),
    Personalizable(PersonalizationScope.Shared),
    WebBrowsable, WebDisplayName("Text"),
    WebDescription("Enter your text")]
    public string Text
    {
    get { return text; }
    set { text = value; }
    }[/sourcecode]
  7. For adding a checkbox in tool part pane you need to add the blow code
    [sourcecode language="csharp"]public Boolean border;
    [Category("Advanced Settings"),
    Personalizable(PersonalizationScope.User),
    WebBrowsable, WebDisplayName("Border"),
    WebDescription("Do you want border")]
    public Boolean Border
    {
    get { return border; }
    set { border = value; }
    }[/sourcecode]
  8. For adding a dropdown in tool part pane , first declare an enum variable and create the property using this new variable as shown in the below code.
    [sourcecode language="csharp"]
    public enum ColorByEnum { Red, Blue, Green };
    protected ColorByEnum colorBy;
    [Category("Advanced Settings"),
    Personalizable(PersonalizationScope.User),
    WebBrowsable,
    WebDisplayName("Background Color"),
    WebDescription("Choose a background color for your webpart")]
    public ColorByEnum ColorBy
    {
    get { return colorBy; }
    set { colorBy = value; }
    }
    [/sourcecode]
  9. You can retrieve the value, entered by the user, using the below code.
    [sourcecode language="csharp"
    ]protected override void RenderWebPart(HtmlTextWriter output)        {        output.Write(this.text  );         }[/sourcecode]
  10. For expanding the custom category default we need to override the  function ‘GetToolParts’. 

    [sourcecode language="csharp"]public override ToolPart[] GetToolParts()
    {
    ToolPart[] toolpart = new ToolPart[3];
    CustomPropertyToolPart custom = new CustomPropertyToolPart();
    custom.Expand(“Advanced Settings”);
    WebPartToolPart Wptp = new WebPartToolPart();
    Wptp.FrameState = FrameState.Normal;
    Wptp.FrameType = FrameType.Default;
    toolpart[0] = Wptp;
    toolpart[1] = custom;
    return toolpart;
    }[/sourcecode]

The following properties can be added to costom controls in the tool part pane.

The custom property will be displayed automatically in the default property pane based on the property type string, bool, int or enum. The following table describes how each of these property types is displayed in the property pane.

In the coming articles we will see how to validate custom controls in tool part pane.

Download the sample source code here.