Default Values for Inline Insert

[TroubleShooter]

Hi, 

 

I've been trying to do a Tabular Report DataPage. However, I can't seem to be able to receive parameters for my fields if they are not hidden. And, the problem with hidden fields is that it hides the whole row which messes-up with my report.

 

I am thinking that a JavaScript solution might come in handy but I am not well-versed in such.

Hoping someone can help out. Many thanks in advance.

 

 

-TroubleShooter

Always causing problems >:D 

[DefinitelyNot31337]

Hi @TroubleShooter,

 

Fortunately,  I might just have the right JavaScript Solution that you need

 I was going to assume that you are referring to the Inline Insert feature but you explicitly stated it in the title of this thread anyway so.... Just follow my lead:

1.) Fire up your DataPage Configuration

2.) Go to Configure Results Page Fields

3.) Add a Header and Footer section. Disable the HTML Editor for your Footer.

4.) Paste the code below and modify as described in the comments. Comments are lines of code usually preceded by two forward slashes '//'

<script>

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


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



/* 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>

 

I really hope this helps. Good luck and happy hacking!

 

Regards,

DN31337

Edited October 9, 2018 by DefinitelyNot31337
added compatibility for mutiple deployed DataPage on a webpage

[JolliBeng]

Hello TroubleShooter,

Please know that this can also be done using the standard features of Caspio. You can just create a separate Submission Form for adding comments. Caspio's AJAX feature nicely compliments this implementation.

 

-JolliBeng

[Scott17]

Hello @DefinitelyNot31337,

 

I really like your solution!  It is working for one of my datapages and I want to get it to work for a couple other datapages that are deployed on the same page.  I am having an issue on the other datapages keeping the username in.  I think my problems might involve the following:

1. The multiple data pages deployed on the same webpage may be the problem

2. The code needs to be modifed for each specific data page

3. The other data pages also have inline edit/delete which might be affecting it.

I'd like to get this way to work as I like the look and feel of using the inline insert over adding in additional datapages.  Do you know how I can address these problems?

 

Thank you!

[DefinitelyNot31337]

Hi @Scott17,

 

Glad you pointed that out . You are actually correct about having multiple DataPages deployed on a single WebPage.

 

To fix this, we just need to do a tiny bit of modification in our code.

Just replace the whole line of code that declares i_field with the updated code below.

var i_field = document.querySelector('form[action*="[@cbAppKey]"] #InlineAdd' + field_name);

Do this for all subsequent DataPages and you're good to go.

 

I'm also updating my previous post.

Hope this helps.

 

Regards,

DN31337

[Scott17]

Hi @DefinitelyNot31337

 

That is exactly what I needed, thank you so much!

[vanderLeest]

Thanks for this solution DN31337

One problem I came across is that a value like "Universität Wien"  is  inserted as "Universität Wien".

Is there a way to keep the special characters intact?

 

Floris

[vanderLeest]

I found a way to do it by adding a small function to the javascript to decode html entities:

<script>

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

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

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

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

/* To this part*/

......

 

[Elderberg]

Hey DN31337,

Would you be able to share a solution if we want to set the default value inline insert as the value from a Search Field (which BTW is a dropdown box,  if relevant)

Under the "Configure Search Fields" page, we tried to use the "On exit, Pass field value as parameter" checkbox and set a [@Customer]

var paramValue = '[@authfield:name]';

We adjusted your above example to:

var paramValue = '[@Customer]';

Unfortunately this was just wishful thinking.. it didnt work.

 

 

[Elderberg]

just an update:

The above wishful thinking solution works!  you just have to ensure that the destination field,  ie "field_name" in the example above, is NOT a dropdown box.

Once I changed it to a text box it worked.  Note that changing it to a textbox fixed the inline edit thing, but forces the grid edit for this field to a textbox and not a dropdown box.  It essentially disables the dropdown box for this field in grid edit mode... which allows users to enter unvalidated inputs

[Elderberg]

Update #2:

I tried to set the textbox to be non-editable, so that in grid edit mode the users wont be able to make changes, but this breaks the above solution.  So the "Default Value for Inline Edit" is a bit experimental and should be used with caution.

[DefinitelyNot31337]

On 11/17/2019 at 12:23 AM, Elderberg said:

just an update:

The above wishful thinking solution works!  you just have to ensure that the destination field,  ie "field_name" in the example above, is NOT a dropdown box.

Once I changed it to a text box it worked.  Note that changing it to a textbox fixed the inline edit thing, but forces the grid edit for this field to a textbox and not a dropdown box.  It essentially disables the dropdown box for this field in grid edit mode... which allows users to enter unvalidated inputs

 

On 11/17/2019 at 12:27 AM, Elderberg said:

Update #2:

I tried to set the textbox to be non-editable, so that in grid edit mode the users wont be able to make changes, but this breaks the above solution.  So the "Default Value for Inline Edit" is a bit experimental and should be used with caution.

 

Hi @Elderberg,

 

It's true that this solution is experimental. Creating JS customizations for this feature (Inline Edit) is tricky, especially on Cascading Dropdowns. I see a lot of requests regarding that lately. I'm trying to work on it but it's harder than it looks.

 

Anyway, for Dropdown form elements (NOTE: NOT working on Cascading Dropdowns!), I see that it's not working, but simply wrapping the script on a DataPageReady listener does the trick. Here's the code for 'ya.

 

<script>
  
document.addEventListener('DataPageReady', function() {

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


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



/* 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>