Make field in result table editable and use counter-increment to increase or decrease its value

[lonyango]

I am look for a JavaScript that I can use to activate a field in a result table, then make it editable so that the user can increase or decrease the value in the field by just clicking on a plus or minus button, which have counter-increment function, next to the field on the same row and finally update the field automatically. I would like to implement a script that can do this task instead of a user clicking on the edit button then adding value in the field and then click the update button.

Has anybody done this. Please help.

LM

[Vitalikssssss]

Hi @lonyango,

I was working on a similar type of design recently.

I have a Tabular report Datapage with a field q-ty which can be incremented/decremented with custom buttons without inline "Edit".

Here are the steps for building this behavior:

1. Create a Details Page with the field which you would like to edit.

 -  Datapage should be filtered by predefined criteria by external parameter e.g. some ID field;

  - Add the following CSS code in the Header of the Datapage in order to hide default elements of Details page  (tested on the default "Caspio" style); 

<style>
.cbBackButtonContainer{
display:none !important;
}
.cbFormTable{
border-style:none !important;
}
.cbFormFieldCell{
padding:7px 0px 7px 0px;
}
.cbBackButton{
min-width: 15px;
}
.cbBackButton:hover{
min-width: 15px;
}
.cbResultSetTable {
width: auto;
}
#EditRecordPrice_Per_Unit{
text-align: center;
}
</style>

  - Add HTML block and place the following code in it:

<input class="cbBackButton" id="increment" onclick="change_value('increment')" type="button" value="+" />

•             in Advanced settings check the box "Continue next element on the same line".  

 - Assign "TextField" form element to the field which you would like to edit;

•            in Advanced settings: select "No Label" option and check the box "Continue next element on the same line".  

  - Add a second HTML block and place the following code in it:

<input class="cbBackButton" id="decrement" onclick="change_value('decrement')" type="button" value="-" />

  - Add the following JS code into Datapage footer:

<script>

let form = document.querySelector("#caspioform"); 

let el = document.querySelector("#EditRecordYOURFIELDNAME"); // Replace YOURFIELDNAME with your actual field
  
// below code checks user input from a keyboard and submits the form    
  
document.addEventListener('DataPageReady', (event) => {

el.addEventListener('keydown', (v_e) =>{

var charCode = (v_e.which) ? v_e.which : v_e.keyCode;
          if (charCode > 31 && (charCode < 48 || charCode > 57))  {
             v_e.preventDefault();
              }
          return true;
   });
  
el.addEventListener('focusout', (v_e) =>  {
   setTimeout('form.submit()',3000);
   });

});
  
//this function increment and decrement the value after user clicks +/-
  
function change_value(x) {

if (x==='increment' && el.value) {

el.value=parseInt(el.value)+1;
setTimeout('form.submit()',3000);
}

else if (x==='decrement' && el.value && parseInt(el.value) !=0) {

el.value=parseInt(el.value)-1;
setTimeout('form.submit()',3000);
}
// assign zero if field is empty
else {
el.value=0;
}

}
</script>

  - Uncheck all Details Page Options in the next screen of Datapage wizard;

  - in Destination after record update select "Same Form"

2. in the Result set of Report Datapage add an HTML block and embed the Details page as an Iframe e.g. 

<iframe frameborder="0" name="xxxx" src="https://xxxxx.caspio.com/dp/xxc4000ab7b2be9602d4fd4b03b?ID=[@field:ID]" style="width:100%;" title="xxxxxx">Sorry, but your browser does not support frames.</iframe>

The only drawbacks I have seen so far is the loading speed which can be up to 5s and Data transfer usage is going to increase. 

Hope it would be useful.

Regards,

vitalikssssss