Jump to content

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

Recommended Posts

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.


Link to comment
Share on other sites

  • 10 months later...

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); 

display:none !important;
border-style:none !important;
padding:7px 0px 7px 0px;
min-width: 15px;
min-width: 15px;
.cbResultSetTable {
width: auto;
text-align: center;

  - 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:


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))  {
          return true;
el.addEventListener('focusout', (v_e) =>  {

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

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


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

// assign zero if field is empty
else {


  - 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.




Link to comment
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.

Reply to this topic...

×   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.

  • Create New...