Autopopulate inline insert values

[NickO]

I am using the below code to populate inline insert fields to make data entry easier for users (got it from a post by @DefinitelyNot31337). I am having some problems on one page though and hoping somebody can help clear it up.

My search and results are on one page. The search is using 2 fields (SolutionID and ProductID) both go to Parameters of the same name ([@SolutionID and [@ProductID]). There is a third field (FeatureID) which is a Cascading Drop Down based on the ProductID. 

As soon as I make FeatureID a Cascading Drop Down, it fails. If I leave it as a regular drop down, the code works perfectly. Code below

 

<script>
// Replace [@authfield:name] accordingly with the parameter or custom value you wish.
var paramValue = '[@SolutionID]';

// Replace with the name of your field as described in your DataSource
var field_name = 'SolutionID';

/* Edits are not necessary for this part */
var i_field = document.querySelector('form[action*="[@cbAppKey]"] #InlineAdd' + field_name);
i_field.value = paramValue;
/* To this part*/

//i_field.type = 'hidden'; // If you wish to hide the field as well, just remove the two forward slashes before i_field.type
i_field.readOnly = true;

// Replace [@authfield:name] accordingly with the parameter or custom value you wish.
var paramValue = '[@ProductID]';

// Replace with the name of your field as described in your DataSource
var field_name = 'ProductID';

/* Edits are not necessary for this part */
var i_field = document.querySelector('form[action*="[@cbAppKey]"] #InlineAdd' + field_name);
i_field.value = paramValue;
/* To this part*/

//i_field.type = 'hidden'; // If you wish to hide the field as well, just remove the two forward slashes before i_field.type
i_field.readOnly = true;

</script>

 

[carlJS]

Hello @NickO,

 

Search (included) and Results uses a different DOM IDs naming convention compared to Submission Form.

 

Cascading Dropdowns usually take a few seconds to load asyncrhronously (depending on your network speed), and before this happens, the script had already ran.

The solution to this would be to set a delay before your browser runs this line of code.

<script>
setTimeout(function() {
document.querySelector('[id*=]').value = "[@FeatureID]";
}, 1000)
</script>

 

Not entirely certain what your use-case is but I hope this algorithm works.

Note: if you are using this on Forms, I recommend putting this in an HTML Block that is positioned at the very bottom (so that the fields are already written to the DOM before the script runs).

 

[src="carl.js"]

[NickO]

Thanks for the suggestion @carlJS. Either I am hosing it up or it is not fitting the bill on this one. I tried both adding your code to the footer between the solutionid and productid sections as well as to an HTML block.

I have a List datapage and have enabled the ability to insert inline. If the second field is not a cascading parent, the value (productid) is populated just as I would expect. As soon as I make it a parent in a cascading relationship, the value is not populated. The cascade works fine when I select it manually, I just can't get it to select the value via the code.

Basically, my use case is that I have a relationship between solution-product-feature that I need to establish. Basically I am linking a solution to a feature-product combo. Automatically selecting the product and solution for the inline insert is a usability enhancement I am trying to make.

[carlJS]

Hello @NickO,

 

I must've misunderstood your OP in my previous comment.
 

Now, I assume what you are trying to do is to specify an onload value to an inline edit fields that is a Cascading Dropdown of multiple levels (Cascading Field on a Cascading Field).

If my assumption is correct, then that's great. I've been trying to work on a solution for it and it's harder than it seems since Caspio is using a custom DropBox picker.

 

Below is a prototype. It works intermittently. Make sure that the first item in the elements array is the parent field. Also, this codes assume that the Parent Field is a "Dropdown". Again, as mentioned, this is a WIP.

<script>

var ev_md = new Event("mousedown");

document.addEventListener('DataPageReady', function() {

  
  // Add elements in array in format ['FieldName', '[@ParameterName]'], 

  var elements = [
    ['cas1', '[@Virtual1]'],
    ['cas2', '[@Virtual2]'],
    ['cas3', '[@Virtual3]'],
    // ['cas4', '[@Virtual4]'],
  ]
  
  // Add elements in array in format ['FieldName', '[@ParameterName]'], 



  elements.reverse();
  elements.forEach(function(elem, idx) {
    var element = document.querySelector(`[id*=InlineAdd${elem[0]}]`);
    addCasChangeHandler(element, elem[1]);

    if(idx == elements.length - 1)
      element.dispatchEvent(new Event("change"));
      
  })

})

function addCasChangeHandler(elem, value) {
  elem.addEventListener('change', function(e) {
    var t = e.target;
    console.log(t);
    t.dispatchEvent(ev_md);
    
    var db = document.querySelector(`.DropBox`);
    
    var observer = new MutationObserver( function(mutationsList, observer) {
     mutationsList.forEach( function(mutation, idx){
      console.log(mutation);
      if(mutation.target == db) {
        console.log("Yes!");
        console.log(value);
        var opt = document.querySelector(`.DropBox .Option[title="${value}"]`);
        if(opt) opt.click(); else t.dispatchEvent(ev_md);
        observer.disconnect();
      }
      
      t.click();
     });
    });
    
    observer.observe(db, {attributes: true, childList: true, subtree: true})
    
  })
}


</script>

 

Hope this helps, in any way.

[src="carl.js"]

[NickO]

Thanks @carlJS, this is very promising! I am travelling this week and have not had a great deal of time to dig into this. I will do so next week and let you know how it goes.