0

I have a document library where the CEO wants to see three buttons. If he has read the document he wants to click on Yes, otherwise it will always be No. If he clicks Flag it means it needs to be discussed. How can I have three buttons where he can simply push it and he wants that to be color coded. He is using safari on ipad and would not change that; therefore all the easy options I had for him are not going to help . Is there a javascript I can use so when he clicks the Yes button it turns green and when he clicks No it remains red. I have searched everywhere for an answer and I can't find one. I am not good at coding and just a beginner so still learning but this one is becoming a hard task doesn't seem hard but for me it is.

He does not want to go into edit view to complete the task as he says its too many clicks and of course since its its on ipad it is bit harder than working a computer.

I am thinking of adding one button with three colors, First one will always be no so red and onclick it will become green and if he clicks it again it will become black. Is there a javascript that can add a button in a column and have the user just click on it with their mouse and no editing required?

Thanks in Advance.

0

You haven't mentioned which SharePoint version you are using, I assume its SharePoint 2013,Office 365 or above. You can use JSLink in your list view and achieve the required functionality.

More details on JSLink can be found below, http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

  • Sorry we are using SharePoint 2010 – humi Apr 7 '16 at 15:49
0

You can do it with HTML in Calculated Columns in SharePoint 2010 without any extra code.

But you have to built it step by step; and may have to adept it to your needs

http://viewmaster365.com/#/Create/Priority

And before the police complains you can't paste links as answers...

eventually you will have:

="<div style=""display:inline-flex;"">"
 & "<button style=""float:left;"
 & "cursor:pointer;width:75px;"
 & "background:"
 & "#FFAABB"
 & ";"" "
 & "onclick=""{event.stopPropagation();"
 & "this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor=this.style.background;"
 & "var C=SP.ClientContext.get_current(),"
 & "I=C.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList()).getItemById("
 & "this.parentNode.parentNode.parentNode.parentNode.id.split(',')[1]"
 & ");"
 & "C.load(I);"
 & "I.set_item('Priority',this.innerHTML);"
 & "I.update();"
 & "C.executeQueryAsync();"
 & "return false;}"""
 & ">(1) High</button>"
 & "<button style=""float:left;"
 & "cursor:pointer;width:75px;"
 & "background:"
 & "#FFDDAA"
 & ";"" "
 & "onclick=""{event.stopPropagation();"
 & "this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor=this.style.background;"
 & "var C=SP.ClientContext.get_current(),"
 & "I=C.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList()).getItemById("
 & "this.parentNode.parentNode.parentNode.parentNode.id.split(',')[1]"
 & ");"
 & "C.load(I);"
 & "I.set_item('Priority',this.innerHTML);"
 & "I.update();"
 & "C.executeQueryAsync();"
 & "return false;}"""
 & ">(2) Normal</button>"
 & "<button style=""float:left;"
 & "cursor:pointer;width:75px;"
 & "background:"
 & "lightgreen"
 & ";"" "
 & "onclick=""{event.stopPropagation();"
 & "this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor=this.style.background;"
 & "var C=SP.ClientContext.get_current(),"
 & "I=C.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList()).getItemById("
 & "this.parentNode.parentNode.parentNode.parentNode.id.split(',')[1]"
 & ");"
 & "C.load(I);"
 & "I.set_item('Priority',this.innerHTML);"
 & "I.update();"
 & "C.executeQueryAsync();"
 & "return false;}"""
 & ">(3) Low</button>"
 & "</div>"
 & "<img src=/_layouts/images/blank.gif onload=""{"
 & "this.parentNode.parentNode.parentNode.style.backgroundColor="
 & CHAR(39)
 & CHOOSE(RIGHT(LEFT(Priority,2),1) , "#FFAABB" , "#FFDDAA" , "lightgreen")
 & CHAR(39)
 & "}"">"
  • Thanks for the info appreciate it. I did look into calculated columns but its like conditional formatting, they will have to edit an item to get that column correct. Can a button have calculated column? – humi Apr 7 '16 at 20:58
  • The above code contains JSOM code which updates the Item.. But only use this method if you truly understand JavaScript – Danny '365CSI' Engelman Apr 8 '16 at 5:46
0

Judging from your other questions, you may have moved on, but here is another key that may help.

  1. Make a choice column with 3 radio buttons NO,DISCUSS,YES with default of NO.
  2. Make a SPD workflow that writes the URL of the edit form in a hyperlink column on new item creation. (optional for list views)
  3. Make sure you point the CEO to the edit form link in all instances. There he will only have to tap the radio button and then the save button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.