Using SharePoint Custom List Forms

We often need to have custom list forms with better user experience, sometimes with advanced features and functionalities and even with different look and feel to get a nicer display.

That’s what I’ll talk about this time. We will see how to get (1) custom list forms deployed with custom list definitions, and then, (2) if we already have an existing list, how to deploy and apply the new custom forms to be displayed by default.

1)      Declaratively :

We will start with an empty SharePoint Project, and then we need to add a custom list definition. We will call it “Customers List Definition”.

The customization wizard still needs to get the display name and the type of the list definition, we will select “Custom List” option from the type drop down list and keep the last option checked to get a list instance using the customers template once the solution is deployed.

I suppose that you already know how to create custom list definitions with custom content types so I’ll explain briefly the next steps that we need to achieve.

Double click the “Customers List Definition” item to open and edit its elements.xml file.

Here we need, as shown below, to define the fields that we will use in our custom content type, we just need a simple list so I define only three simple fields (Customer Name, Customer Address and Customer Phone). The second part is about the content type definition and then there’s our list template called “Customers List Definition”.

Customer Content Type element contains the following:

Double click the Schema.xml file.

Here we define all the required elements used to create the list definition such as the fields, the default view definition, the content type’s references and other metadata and parameters.

Below is the Fields element of the schema.xml file. I need to rename the title field. (to get in more details how to do that, please refer to my previous post)

And just to finish with our custom list, below is the content of our List Instance element.

Now we are ready, all what we need to do is to deploy our solution to get the list definition and list instance installed.

Check your quick launch menu, there you will find the “Demo Customers List” with the defined fields and the title field renamed to “Customer ID” and the default generated forms to add, edit and display list items.

Until now, all what we did is to prepare a list definition and list instance as a demo list to work with, so the remaining part, for those who are already familiar with list definitions or those who are interested about the post title, should be the important one.

Now we will define and use custom forms for our list. The steps are quite straightforward, (a) we will prepare the customers custom list forms to (b) use them in our list.

(a)    Add a Layouts mapped folder, in which we will save the custom forms once they are deployed on the server. We are using 3 custom forms called “CustomDisplay”, “CustomEdit” and “CustomNew” respectively. We already know the fields that will be displayed in each form, we can simply get the list name and all the other properties using “SPContext.Current.List” so we can easily develop the required code used in the 3 forms.

(b)    The last remaining part consists to edit the content type definition and define the 3 custom forms to be displayed by default each time we try to add a new item, to display or to edit an existing one.

Double click the “Customers List Definition” item in the visual studio solution to edit its content.

Add the XmlDocuments element to the content type definition as shown below.

We have defined the Urls to the custom forms that we have just created so they will be used in the Customer content type.

That’s all! Now you need to deploy the solution once again to get the new version.

Once deployed we have no more the default generated forms, instead the “Demo Customers List” uses the custom forms already defined in the content type definition.

I just hope that you like my demo custom forms because I really don’t have too much time to make them look better lol.

2)      Programmatically :

You have created a custom list through the browser and now you just need to change the forms displayed by default or you just want to do that programmatically without editing the list content type definition!?! That’s possible, just keep reading! I will show you how to do!

I just think that we need to have some background and to understand how SharePoint creates or instantiates the lists or document libraries.

You can refer to the following links to understand what I’m trying to say:

http://msdn.microsoft.com/en-us/library/ms478023%28v=office.14%29.aspx

http://msdn.microsoft.com/en-us/library/ms452896%28v=office.14%29.aspx

You have just to understand or to be aware that every list or document library, whatever it was, it has a default content type.

So first of all, we need to identify the content type used in the list for which we want to define the custom forms. You can use SharePoint Manager to check all your lists definitions and the value of each property associated with that list.

(http://spm.codeplex.com/releases/view/35932 : Refer to this link to get SharePoint Manager)

So how to get the content type that we are looking for?

Launch SharePoint Manager and browse to your site node. Open the lists node and find the one that you should be looking for.

Once it’s selected SharePoint Manager will load and display its properties. In the following screen I’m selecting the announcements list installed in every SharePoint team site by default.

Find the “Content Types” line under “Properties” and open the content type collection editor to display the list of the applied content types. That’s what you should see if you still keep the default installed list.

The announcements list, as we can see, uses two content types, the “Announcement” content type and the “Folder” one. (check the “Name” property under the content type properties list to get the content type name that we are looking for).

Here we can see that the “Demo Customers List” that we have created in the first part of this post is using the “Customer” Content type defined in the Customers List Definition elements.xml file.

Click “Site Actions”, “More Options” and select the list type to create a custom list for our final demo. We will call it “Demo List”.

Check its default content type, it uses the “Item” content type, as we can guess.

OK so create an empty SharePoint project or use an existing one, add a feature, and a feature event receiver.

Feature event receivers contain the code to be executed once the feature gets installed, uninstalled, upgraded, activated or deactivated.

We need a web scoped feature, we will call it “Demo.CustomListForms”.

Open the feature event receiver code file, we will use the following code respectively in the “FeatureActivated” and “FeatureDeactivating” methods as shown below.

Once the feature is activated we access the default content type in the “Demo List” list which is “Item” as we have seen in SharePoint Manager, we save it’s default forms urls as custom web properties so we can recover them when we need to do so. Then we access once again the “Item”content type to define its forms url’s using the customs forms urls this time.

When we deactivate the “Demo.CustomListForms” feature, this code gets executed. Here we recover the old forms urls and assign them to the “Item” content type forms used in the “Demo List”. We don’t need these properties any more now and we should delete them. The next time the feature gets activated once again and it should create these properties, that’s why we delete them otherwise we will get an error if they already exist and we don’t check if they are before we create them.

Deploy the project, wait until features get activated and check your “Demo List” list. That’s all! You should see the custom forms and not the old ones.

Click “Site Actions”, “Site Settings” and then “Manage Site Features” under “Site Actions”. Find the “Demo.CustomListForms” feature and deactivate it.

Now check your “Demo List”, try to add an item or to display or edit an existing one, you can see! We got the old list forms once again. It’s working!

How to rename/override the Title field in SharePoint list definition

The first time i started learning about list definitions and content types in SharePoint and how to do all this stuff using Visual Studio, I had only one question! How to do to override the “Title” field or to rename it?

That was not a good practice to make it hidden programmatically with a feature event receiver or something else because we will lose the drop down menu in the list view with the list item commands.

You already have this field in your list default view so try to sort the list items using the Title field from the browser, here we can see in the Url this parameter “SortField=LinkTitle”, this means that the static name of the displayed Title field is “LinkTitle”.

SharePoint doesn’t use only this field by default, we should consider the three following fields:

• “Title” field with static name = “Title” and ID = {fa564e0f-0c70-4ab9-b863-0177e6ddd247} and Type = Text, used to display the data in the Title column
• “Title” field with static name =”LinkTitle” and ID = {82642ec8-ef9b-478f-acf9-31f7d45fbc31} and Type =Computed, used to display the same text in the first title field with a hyperlink to the list item and a drop down menu
• “Title” field with static name =”LinkTitleNoMenu” and ID={bc91a437-52e7-49e1-8c4e-4698904b2b6d} and Type =Computed, the same thing as the second title field but without the drop down menu

So to override correctly this field and get the right display name in the list forms, we need to override its definition in the fields section in the schema.xml file (the list definition file) using its name and its ID to locate it and then another display name, the new one that we need to display, as following:

Here we choose to change its display name to “Customer ID”, we suppose that it is still referenced in the “ViewFields” section in the list default view definition.

The same display name appears in the NewForm, Edit and DisplayForm.

That’s all what you have to do! Just to override the title fields display name in the fields section used in the list definition schema.xml file using their Names, StaticNames and IDs to locate them.

Now it’s time to try it! So Enjoy!

 

 

Declaratively provisioning lookup and multi values lookup fields

Hi again!

My first post was about custom list definitions using custom content types. As a first demo I used simple field types to explain how to get our list with the custom defined columns.

That’s good, but not enough! Sometimes we need to manage relations between lists and to use fields that get their value from another field in another existing list. So the user has just to select the right value or values from the drop down list instead of typing it. That’s what we call a “lookup field”.

This can be achieved declaratively when we define the field or programmatically with code.

Assuming that we have our customers list, we want not only to manage customers but also to manage commercial agents and to define for each potential customer the person or persons affected to him.

So we have a list called “Commercial Agents” in which we save details about the commercial agent’s team.

To get this lookup field in our customers list definition and in the customers content type we need to define some other attributes in the field definition to tell SharePoint where to find the values to display.

Here we define a column of type lookup that gets its values from the field with the internal name “FullName” from the list “Commercial Agents” with the site relative url “Lists/Commercial Agents”. We use the “Overwrite” attribute so the field can be deployed and exported correctly.

Now we can select only one item from the commercial agents list as shown in the above screen.

If we need a multi value  lookup field with a multi selection control, we have to use the “Mult=’TRUE’” attribute and to change the field’s type to “LookupMulti”.

This time we get a multi selection control in the customer list forms allowing us to select more than one commercial agent for each customer.

Check the field settings under list columns, here’s our multi value lookup field.

That’s it ! Hope that was helpful !

 

SharePoint Custom List Definition with Content Type

Hello.

This is my first post on my SharePoint Blog.

I want to start with some basic SharePoint development technics that every SharePoint developer should be familiar with.

It’s all about lists, the famous SharePoint lists! So as a first step in the development world, we should be familiar with SharePoint development tools and templates included in Visual studio, and especially this time the List Instance, List Definition, Content Types and finally list definitions from content types.

A SharePoint list is a set of columns or fields. Adding a new item in the list means defining a value for each field or for only some fields in that item.

Sometimes we need to make things more organized and structured so we can manage too much data of different types in the same list or in different lists and keep it all working together and the most important thing to keep in mind, to get something “easy to understand” and “easy to manipulate”.

That’s why, as a best approach, I prefer to use content types with lists.

Technically speaking, we start by (1) defining our content type and the different fields that we need to include in this content type, then (2) we create a list definition that gets it’s columns from this content type, and finally, to get our list, (3) we create a list instance from our list definition.

Using this approach we can get our site scoped content type that we can use anywhere in the site collection and a list definition so we can at any time create another list instance with the same columns.

So to start:

–          Launch visual studio and create an empty SharePoint Project, define the site that you want to use for debugging

–          We will start by defining the fields that we will need to use in our content type, so we need to add a new item to the project and select “Empty Element”.

Fields should be site collection scoped elements so we can use them anywhere in the site collection and in any other sub site.

Double click on the added empty element to access it’s elements.xml file where we will define our fields.

Here we add four simple fields to get some customer details.

I also define the static name attribute that I want from the beginning so I know with which static name I will get this field from this list programmatically if we need to do so.

Notice that the “Country” field is not shown in the edit form, we suppose that we don’t want to allow the user to change the customer’s country once it’s added to the list, so we don’t show it in edit mode.

–          (1) Add a new item to the project, select the “Content Type” Template, we will call it “Customers”, the wizard will ask you then to choose the base content type to inherit from. Different out of the box base content types are defined so we can choose the base content type depending on what we want to create. This time and for demonstration purposes we will select the “Item” base content type.

We will call it “Customers” to get our Customers Content Type.

Here we need to get a reference for the fields that we have just defined, using the same ID attribute.

We can also change the name since we want to call it “Customers”.

As we can see, the generated content type ID starts with “0x01” (The ID of the base or Parent content type which is “Item” as described in the commented line) followed by “00” and then the last part is the new hexadecimal GUID.

Content type IDs are explained in the following msdn link http://msdn.microsoft.com/en-us/library/aa543822(v=office.14).aspx

–          (2) Add a new item to the project and select “List Definition from content type”, we will call it “Customers List”.

–          (3) The SharePoint Customization Wizard will ask you on the next step to define the list definition settings and if you want to add a list instance for this list definition or not.  On the dropdown list we will get all the existing content types created in our visual studio solution so we need to select the right one. Any way this time we will get only one content type, our Customers Content type.

–          We keep the last option checked to get our list instance on the site once the solution is deployed.

We click “Finish” to close the wizard and to get a list definition and a list instance added to our project.

Double click the list instance item to open and edit/add, if we need it’s definition attributes.

I changed the Title and the Url to get something more meaningful and easy to remember or to type as the url.

Double click the elements.xml file to open and edit the settings of the list template.

Read the comment below the elements tag to remember or to get sure that you will not change the value of the name attribute :p, otherwise you will get an error if it does not match the folder name of the list definition project item which is “Customers List” in our sample.

I added the “DisallowContentTypes” attribute and defined it’s value to false so content types can’t be managed on lists created throw this list definition, otherwise we can make “TRUE” if we don’t want to do so.

Finally open the “Schema.xml” file to edit it’s content and finish all this work.

Some attributes are easy to understand such as:

• Title : the display name of the list
• FolderCreation : to allow the creation of folders in this list or not (new folder command will be displayed in the new menu or not)
• EnableContentTypes : I added this attribute and defined it’s value to TRUE because we need to use the customers content type
• Name : is the internal name of the list
• Url : the site relative url of the list

ContentTypes tag contains the content types that will be used in our list.  It’s the same content type definition that we have created.

The next tag “Fields” contains the fields that we have created at the beginning in the empty element.

“Views” then defines the views in this list, here we need to add or to reference the fields that we want them to appear in the default view (the second one with the attribute “DefaultView=”TRUE”), so add the fields references in the “ViewFields” tag.

 

I deleted the “LinkTitle” field reference because I don’t want that field to appear in my default view.

The “Query” part means that items in this view will be displayed and ordered by the ID column.

The last part “Forms” define the different forms that will be generated and used with this list. (Display Form, Edit Form and New Form”).

That’s it !!! so I just want to finish with one last detail.

I don’t know if you have noticed in the previous photo the two windows already opened in my visual studio “List Definition and Instance.feature” and “Fields and Content Type.feature”, if you really did and now you are wondering what they are doing and why I kept them in my screen, it’s OK I will tell you.

Visual Studio or custom content created with visual studio is deployed to SharePoint site through features. When we added our first empty element to define the fields VS have automatically added a feature to deploy this item to SharePoint. So to do things as they should be done, and because I love to do so and as a good practice, I added a second feature to my project, I renamed the two features to give them more meaningful names.

The first one (F1),is called “Fields and Content Type.feature” and it contains the empty element used to create the fields and the content type that reference them. It should be a site scoped feature so we can use these fields and this content type anywhere as I said in our site collection.

The second one (F2) is called “List Definition and Instance.feature” and it contains as its name indicates the list definition from our customers content type and the list instance that we will find once we deploy the solution. This one should be a web scoped feature because we need to use this list and to find it’s template in our site.

We can also change the title and the description of the feature so we can remember or understand what it should do every time we will activate or deactivate it.

(F1)

(F2)

 

That’s it! Now I just need to deploy my project to get it all in my site.

Check your quick launch menu and there’s our famous “My Customers” list.

 

As we can see the fields that we defined in the “ViewFields” section in the schema.xml file appears in the default view.

The title field does not appear in the default view but it appears in the list forms (new, edit and display form). We don’t often need it with that name so I will make another post the next time to see what we can do with that field.

Just to show you all what we got installed on our SharePoint site.

Our site collection scoped feature “Customers Content Type and Fields”. Click “Site Actions”, “Site Collection features” under “Site Collection Administration” to access the list of site scoped features.

 

Our web scoped feature “Customers List Definition and List Instance”. Click “Site Actions”, “Manage Site Features” under “Site Action” to find it.

 

Click “Site Actions”, “Site Settings” and “Site Columns” under “Galleries” to view the fields that we created within the empty element at the beginning.

Click “Site Content Types” under “Site Columns” to see the “Customers” custom content type under “Custom Content Types” group.

And finally, click “Site Actions” menu, “More Options” and “List” menu to access the list templates installed on the site, and here we find our “Customers List” template. Now we can easily create another list with a different name but with the same columns.

 

 

Every time a list is instantiated from this list template, it will be using the “Customers” content type.

I stop here! I hope that was helpful and easy to understand. It’s not just about list definitions and content types, this time you learned, from only one tutorial, how to deploy custom fields to the site with an empty element, how to create a custom content type and then a list definition that gets it’s columns from it, how to create a list instance and define the fields that will appear in the view and one more thing, the most important thing, how to use features to deploy custom development work to SharePoint and how features are scoped and even how to do to get things more organized, structured and easy to manipulate even for the end user. If you really understand all that and you feel exited to see something more interesting, in my opinion you should stop reading, you take a coffee or something like that and imagine how we can use these simple steps to get into something more complicated as a real world project.

Me, I will take a coffee too but this time I don’t want to do so, just a coffee lol.