Rebinding HTML tags to form fields

Forums Dynamic Forms for SharePoint Rebinding HTML tags to form fields

This topic contains 5 replies, has 2 voices, and was last updated by  Alexander Bautz 1 week, 2 days ago.

  • Author
    Posts
  • #25946

    Taylor Scott
    Participant

    Hi Alex! Is there a way to rebind HTML controls? For example, if I add an HTML section via the UI and use either {} or {{}} to surround a field in the form, it will bind to my field. However, if I dynamically load some HTML into a section, and I have a field e.g. {Status} in the HTML, it doesn’t bind. Do you have a function I can call to ‘rebind’?

    • This topic was modified 2 weeks, 3 days ago by  Taylor Scott.
  • #25950

    Alexander Bautz
    Keymaster

    This is designed to be initiated on load, but you can make a similar function by using this in your custom HTML instead of the {{fin}} placeholder:

    <span class='live_value_placeholder_YOUR_FIELDINTERNAL_NAME'></span>

    Then add this to your Custom JS:

    var customUpdateliveObj = {};
    function customLiveUpdate(fin){
        setInterval(function(){
            var placeholder = jQuery(".live_value_placeholder_" + fin);
            if(placeholder.length > 0){
                var firstPass = false;
                if(customUpdateliveObj[fin] === undefined){
                    firstPass = true;
                    customUpdateliveObj[fin] = getFieldValue(fin);
                }
                var val = getFieldValue(fin);
                if(val !== customUpdateliveObj[fin] || firstPass){
                    customUpdateliveObj[fin] = val;
                    jQuery(".live_value_placeholder_" + fin).text(val);
                }
            }
        },1000);
    }
    customLiveUpdate("YOUR_FIELDINTERNAL_NAME");

    Replace YOUR_FIELDINTERNAL_NAME with the FieldInternalName of the field you want to attach the listener to.

    Let me know how this works out.

    Alexander

  • #25972

    Taylor Scott
    Participant

    This is pretty fantastic, and it works well. Any idea what sort of performance it would get if I filled up the object with a few dozen fields throughout the course of the form?

  • #25996

    Alexander Bautz
    Keymaster

    I’m glad it worked. I didn’t realize that you would use it for that many fields – and even though I don’t think it should cause any major slowdown of the form – using a setInterval isn’t the most elegant solution.

    In the internal function I bind a change event to all fields and I have modified it so you can use it like this:

    var updateTimeout = {};
    function bindFieldUpdate(f) {
        if (updateTimeout[f] === undefined) {
            updateTimeout[f] = 0;
        } else {
            // Only bind once to each field
            return;
        }
        var update = function (f) {
            jQspjs(".live_value_placeholder_" + f).html(spjs.utility.getFieldValue({ "fin": f, "delimiter": "; " }));
        }
        jQspjs("#dffs_" + f).find("select, input:radio, input:text:first, input:checkbox, .sp-peoplepicker-topLevel").on("change blur", function (e) {
            clearTimeout(updateTimeout[f]);
            updateTimeout[f] = setTimeout(function () {
                update(f);
            }, 10);
        });
        update(f);
    }
    // Call it like this one time for each field you want to bind it to
    bindFieldUpdate("Title");

    Alexander

  • #26012

    Taylor Scott
    Participant

    This works great also, here’s how I’m using it:

    
    
    function customLiveUpdate(){
    	// to work correctly the binders must have the correct class and prefix of element id
    	// the id with the prefix must end in the fin
    	var binderClass = 'p3binderClass';
    	var prefix = 'p3binder_';
    	var f = '';
    //	var customUpdateliveObj = {};
    	var updateTimeout = {};
    	var eleId = '';
    	
    	    $("span[class^='" + binderClass + "']").each(function(){
    				eleId = $(this).attr('Id');	
    				f = eleId.substring(prefix.length);	    	
    	    		
    	    		bindFieldUpdate(f);
    	    		
    	    });
    	    
    	function bindFieldUpdate (f) {
    	    if (updateTimeout[f] === undefined) {
    	        updateTimeout[f] = 0;
    	    }else{
    			// Only bind once to each field
    			return;
    	    }
    		var update = function(f){
    			jQspjs("#" + prefix + f).html(spjs.utility.getFieldValue({ "fin": f, "delimiter": "; " }));
    	    }
    	    jQspjs("#dffs_" + f).find("select, input:radio, input:text:first, input:checkbox, .sp-peoplepicker-topLevel")
    	    	.on("change blur", function(e) {
    	        	clearTimeout(updateTimeout[f]);
    	        	updateTimeout[f] = setTimeout(function () {
    	            	update(f);
    	        	}, 10);
    	    	});
    		update(f);
    	}

    ^ whenever I load a new html file into a placeholder (I swap them regularly) I call customLiveUpdate(). It seems to work well. It looks like I can call it as often as a I want and since I’m just using your existing binding all I’m doing is adding a timeout (and not duplicating right)? The only thing I’m unclear about is where the updateTimeout object lives in scope. Since it’s called and instantiated each time I call won’t it recreate and thus reset the timeout even if one existed?

  • #26021

    Alexander Bautz
    Keymaster

    I’m glad it worked.

    I placed the var updateTimeout = {}; outside of the bindFieldUpdate function to ensure it was not overwritten when you call the function multiple times using the same field internal name. I recommend that you move it outside of your customLiveUpdate function.

    Alexander

You must be logged in to reply to this topic.