Jump to content
  • 0
NickO

Autopopulate inline insert values

Question

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>

 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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"]

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites
  • 0

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"]

Share this post


Link to post
Share on other sites
  • 0

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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...