Category Archives: SharePoint 2010 Client Object Model

Approve multiple documents or list items in one operation with client side code

I got this request from Larry:

Good day A, Have a question. Is there an easy way to add to the SP 2010 ribbon an approve all button. I hate having to select each item and manually approve each one. I have found some script but they are deployed on central admin. I would like to a void that.

thanks

It’s not like i didn’t have anything to do, but he bought me a beer…

Here we go

This one uses the Client Object Model in SharePoint 2010 and is therefore usable in SharePoint 2010 only.

The code adds a custom button to the “Ribbon.Document” or “Ribbon.ListItem” that calls a script on the items selected using the in line checkbox.

Get the file “ApproveSelected.js” from here
Get jQuery from here

Put the files in a document library or in a folder created with SharePoint Designer. Ensure all users have read access to the location.

Insert a CEWP in the list view where you want this feature to be activated. Use the “Content Link” option in the “Edit web part” panel of the CEWP to link to the CEWP-code that you have put in a text file in the same location as the “ApproveSelected.js”.

Use this code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/test/Scripts/ApproveSelected/ApproveSelected.js"></script>
<script type="text/javascript">

var tabBtn = {
	"btnLabelApprove":"Approve selected",
	"btnLabelReject":"Reject selected",
	"groupLabel":"Approve or reject"
};
var workingOnItNotification = 'Processing items...';
var doneNotification = '{0} items processed';
</script>

Change the path to the file “ApproveSelected.js” to match your local copy. If you prefer to use a local copy of jQuery, change that path to.

You may also change the variables if you want another text in the button or the notification messages.

It should look like this in the list view

Inactive
IMG

Active
IMG

NOTE
The button will disappear if the screen width is to narrow. The built in ribbon buttons will “shrink” to fit a narrow screen – this one will not.

Extras

This code uses a new “hack” to overcome the missing “list toolbar” when adding another webpart to the page. I’ll do a separate little article on that one.

Enjoy!
Alexander

Parent-child-grandchild relationship in SharePoint 2010 lists with javascript only

09.12.2011 I have updated the solution to v1.1 to let the user chose the icon (or no icon) before the “child” title. The code for the file “ParentChildResources.js”, and the CEWP code for “Parent DispForm” and Child DispForm” has changed. The new “argObj-property” “iconBefore” should be the path to the image to prepend to the “child title”.


I got this request:

Hi Alex,

I am new to SharePoint and have been struggling with steep learning curve and would really appreciate your help…

I created a parent-child-grandchild relation where I inserted a related view in the parent’s dispform to show all children and also in the child’s dispform to show all grandchildren. I’ve also followed http://geekswithblogs.net/SoYouKnow/archive/2010/12/16/creating-a-sharepoint-parentchild-list-relationshipndash-sharepoint-2010-edition.aspx to set the parent’s ID on the child’s newform using javascript but I need to take it a step further. In the child’s newform I need to retrieve the parent list’s 2nd field and use that value to build a dynamic drop down field in the child’s newform. The field items in the drop down preferably to be pulled from another list for the ease of maintenance but hard coding is also acceptable. This is probably a no-brainer for you so I hope you wouldn’t mind spending some time on it and I will make sure some donation is made . Thank you so much!

This involves putting scripts in NewForm and/or DispForm in three lists. Please follow the steps carefully.

Please note that this code is for SharePoint 2010 only.
Step 1

Create the three custom lists used in this example:

  • Parent
    This list has the Title field only.
  • Child
    Add one field of type Lookup (single choice) with the name “Parent”. This lookup should target the title field of the "Parent" list.
  • Grandchild
    Add one field of type Lookup (single choice) with the name “Parent”. This lookup should target the title field of the "Child" list.
Step 2

Download the code from here
The code is presented in individual folders so it’s easy to get the right code in the right form.

Step 3

Important:
Edit the code that goes in the CEWPs to fix the script src attributes in all files, the “childListUrl” in the DispForm code and the various “argObj” variables if your lists or fields has different names. You will have to read trough the code for the CEWPs to find the bits to change.

The file “ParentChildResources.js” does not need any modification.

Upload the code to a shared document library and maintain the folder structure (or rename the files so that you know which file goes where).

Step 4

Add CEWPs to the list forms and insert the code corresponding with the folder and file name. It is important that you use the content link option to link to the code.

To add a CEWP, go to the list, activate it by clicking in the “list area” to bring up the list tools ribbon. Select the tab “List” and “Form Web Parts”.

You find the content link option like this:
Edit the page and activate the CEWP. In the ribbon toolbar, select “Web Part Tools” and then “Web Part Properties”.

To ensure you get the correct file path, go to the document library, right click the file and select “Copy shortcut”. Paste this URL in the content link field. You might want to edit the URL to make it relative.

Note Add the CEWP below the list form.

The result should look like this

Parent
IMG
Child
IMG
Grandchild
IMG

Final words

This solution uses the Client Object Model introduced in SharePoint 2010 and therefore it will not work on previous SharePoint versions.

To keep this solution clean and simple, the last bits from the request regarding the lookup column, is kept out of this post – it will be emailed to the person requesting this article.

If there is demand for it, i will post it as an appendix to this post later on.

Hope someone can make use of this code.
Alexander

SharePoint 2010 – The view selector is back!

In SharePoint 2010 you loose the list view selector in a list view if there are more than 1 web part in the page. This makes navigating the list views very cumbersome.

I have previously created a solution for adding a view selector in these list views, but that solution was a bit clunky.

I looked at this again today, and came up with a solution for re-enabling the missing list view selector that was clean and simple – and it doesn’t even require jQuery…

This is the first article where I’m using the “SharePoint 2010 Client Object Model”.

This solution is placed in a ContentEditorWebPart (CEWP) somewhere in the page you want the list view menu re-enable in. I recommend using the “Content Link” option in the CEWP as the code might be messed with by SharePoint if you paste it directly in the CEWP’s HTML-source.

To achieve this, put the code in a text-file and place it in a shares document library (all users must have read access), or in a folder created in SharePoint Designer. You then copy the file’s url and paste it into the “Content Link” field in the “Edit web part” panel like this:
IMG

You do not get any pictures of the menu itself as it is no different from the standard list view selector.

Here is the code:
Get the code here