Inline Editing

[DCH]

Alexander,

Have you considered adding an inline editing feature to the vLookup results that appear in forms? It would be great for instances where a user wants to edit multiple child items without launching individual forms for each one. And especially since MS removed the feature from List Views in SP2013.

Thanks!

[Alexander Bautz]

Hi,
I have some plans for a new release of vLookup when I get further along with the new DFFS version. There is unfortunately no release date on this version yet.

Alexander

[avala]

This is the #1 request I receive from users with DFFS vLookups. Excited for a potential release.

In the meantime, is there a way to use the “delete button” solution in vLookup to update a child field from the parent? We have an attendance section in a few forms that users really just want to click a button to mark attendance from week to week.

[Alexander Bautz]

Yes, you can use custom js to update the child items using the same approach. Let me know if you need any assistance setting it up.

Alexander

[avala]

That’s great news! I may need your help on where to get started with that.

[Alexander Bautz]

Hi,
I’m sorry for the delay – this one ended in a dark corner of my mailbox…

Here is a simple example on how to update a text column in a child item. Please note that this will write to and replace the existing text in the child item. If you want some form of “append” or any specific functionality please let me know.

Add this to the Custom JS:

function updateChildExample(a,item){
	return "<span style='cursor:pointer' onclick='doUpdateChildExample(this,\""+item.get_item("ID")+"\")'>Update child</span>";
}

function doUpdateChildExample(elm,id){
    var res = spjs.utility.updateItem({"listName":"YOUR_LIST_NAME_HERE","id":id,"data":{"YOUR_FIELD_NAME_HERE":"Updated by "+spjs.dffs.data.ui.Title}});
    if(res.success){
        $(elm).replaceWith("<span style='font-size:16px;color:green;font-weight:bold;'>✓</span>");
    }else{
        $(elm).replaceWith("<span title='"+res.errorText+"' style='font-size:16px;color:red;font-weight:bold;'>⚠</span>");
    }
}

You must change the “YOUR_LIST_NAME_HERE” and the “YOUR_FIELD_NAME_HERE” to match your list and field name.

Then add a field to the “ViewFields” section in your vLookup config. Use the ID column, and add this to the “Special configuration”:

{"function":"updateChildExample"}

This will add a link that will write “Updated by [Your name]” to the field in the child list.

Best regards,
Alexander

[avala]

I’ve been traveling so no worries on the timing. Is there a way to get this to work on a dropdown field with just two values?-
Never mind, this seems to work already. 🙂

A couple new points.

1. Is it possible to get the vLookup table to refresh after clicking the link?
2. Is it possible to use one special configuration column to evaluation the value of Attendence field and, based on value currently in the field, use an if, then to toggle the value?

For Example if Attendance field = Attended, clicking the link changes it to Did Not Attend and vice versa.

• This reply was modified 7 years, 10 months ago by avala.

[Alexander Bautz]

This should be possible, but as my code snippet above was only a “proof of concept” I need to know some more about the structure of your vLookup data.

Do you have one line in the vLookup table for each attendee? – so one person would find his / her own name and click to attend?

Alexander

[avala]

See attached image for how the vLookup table looks. This table is automatically populated ahead of time.

One person, the meeting leader, updates the form throughout the meeting. In this instance, they mark each attendee as “Absent” or “Attended” as needed throughout the meeting. This means they would update multiple rows in the vLookup table per session.

This script halfway works; I’m sure I’m missing something obvious. The first condition will alert correctly and update the vLookup value correctly. The second condition will alert correctly, but not update the vLookup value. This holds true if I switch conditional values or use an “Else” instead of “Else If” statement.

It would be nice if clicking the link refreshes the vLookup table, but is not necessary.

function doUpdateChildExample(elm,id){
    var statusVar = spjs.utility.getItemByID({"listName":"TF Attendees","id":id,"viewFields":["Attendance"]});
    alert(statusVar.Attendance);
    
    if (statusVar="Absent"){
        var attendVar= "Attended";
    } else if (statusVar="Attended"){
        var attendVar= "Absent";
    }
	var res = spjs.utility.updateItem({"listName":"TF Attendees","id":id,"data":{"Attendance": attendVar}});
        if(res.success){
            $(elm).replaceWith("<span style='font-size:16px;color:green;font-weight:bold;'>✓</span>");
        }else{
            $(elm).replaceWith("<span title='"+res.errorText+"' style='font-size:16px;color:red;font-weight:bold;'></span>");
        }
    }

• This reply was modified 7 years, 10 months ago by avala. Reason: minor text fix and new image

Attachments:

1. 

   Attendance-example.png
   

2. 

   AlertExample.png
   

[avala]

Figured it out. Code to “toggle” a value in a vLookup column is thus.

Custom JS tab

function updateChildExample(a,item){
	return "<span style='cursor:pointer' onclick='doUpdateChildExample(this,\""+item.get_item("ID")+"\")'>Update</span>";
}

function doUpdateChildExample(elm,id){
    var statusVar = spjs.utility.getItemByID({"listName":"TF Attendees","id":id,"viewFields":["Attendance"]});
        if(statusVar.Attendance == "Attended"){
            var attendVar = "Absent";
        }else if (statusVar.Attendance == "Absent"){
            var attendVar = "Attended";
        }
        
	var res = spjs.utility.updateItem({"listName":"TF Attendees","id":id,"data":{"Attendance": attendVar}});
        if(res.success){
            $(elm).replaceWith("<span style='font-size:16px;color:green;font-weight:bold;'>✓</span>");
        }else{
            $(elm).replaceWith("<span title='"+res.errorText+"' style='font-size:16px;color:red;font-weight:bold;'></span>");
        }
    }

vLookup column configuration
Paste in the ID column

{"function":"updateChildExample"}

• This reply was modified 7 years, 9 months ago by avala. Reason: removed alert from code

[Alexander Bautz]

I’m glad you figured it out – your comment from February 24 slipped past me unnoticed!

Best regards,
Alexander

[Author]

Posts