Skip to main content

Putting an button on each line item & updating list with calculated column

Recently I was working on a feature which required me to put a button on every item in the SharePoint list's view. The button name was Assign Me. When clicked, it should update the item and put the current logged in user in the Assigned To field.


I followed a hybrid approach. calculated column and custom JavaScript. I tried doing everything in calculated column. Even though calculated columns allow writing code in JavaScript, they still have some limitations. One of the biggest hurdle is to get the ID of the item. Since calculated columns do not allow ID column, you have to be innovative. I figured out that the checkbox column in every line item has id in the
tag. This is always the first column in the view (first td in the tr).

Following are the steps I followed to achieve the desired result. 

Step 1. Create a new calculated column with output as Number. 
Step 2. Put the following formula. I use Typescript, hence replace class name with your's in the below formula. 



 Step 3. Add a script editor to your page and link your .js file.
Step 4. In the Typescript file, following are the two functions.
     initAssignMe(trObj) {
        var oSelf = YourClassName;
        try {
            console.log(trObj.childNodes[0].childNodes[0].title); //This gives you ID
            var itemID = trObj.childNodes[0].childNodes[0].title;
            if (confirm('Do you want to assign the current task to yourself?')) {
                //I am using some fancy stuff to block the entire UI while I update the item.
                $.blockUI({ 
                    css: {
                        padding: '5px 0 5px 0',
                        margin: 0,
                        width: '20%',
                        top: '40%',
                        left: '40%',
                        textAlign: 'center',
                        color: '#000',
                        border: '3px solid #aaa',
                        backgroundColor: '#fff',
                        cursor: 'wait'
                    },
                    message: "Assigning Task",
                    fadeIn: 1000,
                    timeout: 3000,
                    onBlock: function () {
                        oSelf.prototype.updateTask(itemID);
                    }
                });                
            }
        } catch (e) { YourUtilClass.Log(window.location.href.substr(0, 254), "YourClassName - initAssignMe", e.message, e.stack); }
    }

    updateTask(itemID) {
        try {
            var ctx = SP.ClientContext.get_current();
            var oWeb = ctx.get_web();
            var SWTList = oWeb.get_lists().getByTitle('YOUR TASK LIST');
            var oListItem = SWTList.getItemById(itemID);

            oListItem.set_item('Task_x0020_Owner', _spPageContextInfo.userId);
            oListItem.update();
            ctx.load(oListItem);
            ctx.executeQueryAsync(function () {
                alert('Task assigned successfully!');
                window.location.reload();
            },
                function (sender, args) {
                    YourUtilClass.Log(window.location.href.substr(0, 254), "YourClassName updateTask (CSOM)", args.get_message(), args.get_stackTrace());
                    alert('Something went wrong!');
                }
            );
        } catch (e) { YourUtilClass.Log(window.location.href.substr(0, 254), "YourClassName updateTask", e.message, e.stack); }
    }


Once done, you should see a button 'Assign Me' in every line item. 

 Hope this helps!

 -Vighnesh
Labels:

Comments

Post a Comment

Popular posts from this blog

Create list view - Conditional Formatting in SharePoint Designer 2010

In this example, we are going to format a column based on certain condition. Here I already have a list called Projects. I also have workflow associated with it. So whenever I create a new item in the list, workflow status column shows ‘In Progress’. Subsequently when the workflow in completed, the workflow status column shows ‘Completed’. For demonstration purpose, I will set the background color of workflow status column to yellow when the status is ‘In Progress’ and to green when the status is ‘Completed’. In SharePoint Designer open the site on which you are working. Click on ‘Lists and Libraries’ link. Choose the ‘Projects’ list. In SharePoint Designer Navigation, choose ‘Lists and Libraries’. In the list settings page, click on ‘New’ in ‘Views’ section. Provide appropriate name for the view and click OK. After choosing list, click on ‘New’ in the Views section. Give appropriate name to the list. Now click on any column, then in the ribbon, click on List View Tools-&g
1 comment
Read more

SharePoint 2013 (SP 15) - Creating Custom Lists

As I am exploring SharePoint 2013, I found out that there are lot of things that are new and there are lot of thing that are old but presented in a different manner as compared to SharePoint 2010. For example, Site Actions was on the top left corner in SP 2010. But in SP 15 (SharePoint 2013) we dont have ‘Site Actions’ button. But instead we have a settings icon which is placed at top right corner. When you click on the settings icon select Add an App. This will basically allow you to add custom lists, documents libraries etc. Add an App is basically the same as More Options in SharePoint 2010. From now on custom lists & libraries will be called apps. Just like in Apple store or Android store you can develop apps for SharePoint and sell it. You can find more information here: http://officepreview.microsoft.com/en-us/store/apps-for-sharepoint-FX102804987.aspx When you click on Add an App you will be navigated to a different scree which will display different opti
1 comment
Read more

Working with large xml files in c# .net

Working with large (huge) xml files is always a pain in the … The reason? These files can’t be loaded in to memory. On my desktop, where I have 2 gigs memory, I can’t open the file in even notepad. I was presented with a challenge recently to manipulate one such large xml file. The xml file was of 550+ MB. I know many would say I have seen bigger xml files than this. But the heart of the matter is if I can’t open 550+ MB file in notepad or in xmldocument in c#, then I can’t open any file bigger than this. And hence the logic to play with these files would remain same. The scenario: We have an xml file from which we want to remove a single node without removing its children. In the below sample xml fragment, the node has to be removed. The children nodes, must then be attached to ( node’s parent) node. One Two 100.22 GoodDay 3 4 Five 200.09 Cra
3 comments
Read more