vLookup inline editing example

Forums vLooup for SharePoint vLookup inline editing example

This topic contains 0 replies, has 1 voice, and was last updated by  Alexander Bautz 3 months ago.

  • Author
    Posts
  • #16616

    Alexander Bautz
    Keymaster

    This example show how to allow inline editing in a vLookup table. You must set up each field individually, and in this example I have added two fields. It will let you click to edit the field value (in this example number fields) and save each change individually.

    Add this to the “Special configuration” in the vLookup config for each of the fields you are setting up. Please note that you must use different function names for each field as the “fin” won’t be passed trough to the function:

    {"function":"editField_1"}

    Add this code to the Custom JS in DFFS:

    // First field code
    function editField_1(val,item){
        var fin = "NumberFieldOne";
        return getEditFieldControls(fin,val,item);
    }
    // Second field code
    function editField_2(val,item){
        var fin = "NumberFieldTwo";
        return getEditFieldControls(fin,val,item);
    }
    
    // Shared functions between all fields - 
    function getEditFieldControls(fin,val,item){
        var id = item.get_item("ID"), b = [];
        b.push("<div style='white-space:nowrap;'>");
        b.push("<div class='vLookupDispWrap' onclick='toggleEditVal(this);' style='width:100px;'>");
        b.push("<span class='vLookupCurrVal'>"+val+" </span>");
        b.push("</div>");
        b.push("<div class='vLookupEditWrap' style='display:none;'>");
        b.push("<input type='text' value='"+val.replace(/[^0-9|,|.]/,"")+"' style='width:100px;text-align:right;' />");
        b.push("<span style='cursor:pointer;margin:3px;color:green;font-weight:bold;' onclick='saveChanges(this,\""+fin+"\",\""+id+"\")'>✓</span>");
        b.push("</div>");
        b.push("</div>");
        return b.join("");
    }
    
    function toggleEditVal(elm){
        jQuery(elm).hide().next().show().find("input:text").focus();
    }
    
    // Change "listName" to match your GUID or DisplayName
    function saveChanges(elm,fin,id){
        var listName = "{ccbbf922-f0af-481b-b2c0-b12ea24d224e}", dataObj = {}, val = jQuery(elm).prev().val(), res, eId;
        dataObj[fin] = val;
        res = spjs.utility.updateItem({"listName":listName,"id":id,"data":dataObj});
        if(res.success){
            jQuery(elm).parent().hide().prev().html(val+" ").show();
        }else{
            eId = new Date().valueOf();
            jQuery(elm).hide().after("<span id='"+eId+"' title='"+res.errorText+"' style='cursor:default;margin:3px;color:red;font-weight:bold;'>!</span>");
            setTimeout(function(){
                var prev = jQuery("#"+eId).prev();
                jQuery(prev).show().next().remove();
            },5000);
        }
    }

    Add this to Custom CSS:

    .vLookupDispWrap{
        border:1px transparent dashed;
        cursor:default;
    }
    .vLookupDispWrap:hover{
        border:1px #cccccc dashed;
    }
    .vLookupDispWrap:hover:before{
        content:"\270e";
        float:left;
    }

    The result should look like the attached images.

    Please ask if you have any questions.

    Please note that this example if for number fields and it will strip away the first character if this is not numeric – change

    val.replace(/[^0-9|,|.]/,"")

    in the code with

    val

    if you want to use it with text value.

    Alexander

    • This topic was modified 3 months ago by  Alexander Bautz. Reason: Gave some more instructions about number vs text entries

You must be logged in to reply to this topic.