Rebinding HTML tags to form fields

Forums Dynamic Forms for SharePoint Rebinding HTML tags to form fields

Viewing 5 reply threads
  • 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’?

    • #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

Viewing 5 reply threads
  • You must be logged in to reply to this topic.