"previous" and "next" buttons

[Johan]

Is there a way to put navigation buttons "previous" and "next" so I can navigate through multi-step forms, e.g. in the footer of a datapage ?

[kpcollier]

There is a way to do this for multi-step forms.

You will need a submission form (for step 1) and single record update forms (for the rest of the steps, and for going back to step 1).

Step 1 page:

• The first step must be a submission form. In the DataPage Wizard on the last page (Destination and Messaging), set Destination After Submit to 'Go to a new page'. Put the URL of the next step's datapage here. 
• Create a Localization and change 'Submit' to 'Next'

Middle Step pages:

• Middle step pages must be a Single Record Update forms. On this datapage wizard, on the Record Identification page, select 'Find record through unique ID'.  For Unique ID Field, select the unique ID from your table. For Parameter Name, insert [@InsertRecordUniqueField]. (replace UniqueField with the name of the field in your table)
• On the Configure Fields page of the wizard, Put below code in your header. This hides the original submit button. 

  .cbSubmitButton {
    display: none !important;
  }

 

• Make an HTML Block and put it at the very bottom of your page. Insert this code to create Previous and Next buttons (URL for Previous will be the URL for going back to Step 1, which we will cover next. Make sure to change UniqueField with your own unique field from your table) :

  <div class="prevNextContainer">
    
  <input type="button" value="PREVIOUS" class="previousButton" onclick="location.href='https://########.caspio.com/dp/###########?UniqueField=[@EditRecordUniqueField]';" />
  
  <input class="nextButton" type="Submit" value="NEXT" />
  </div>

  And then style the buttons (put this in the header as well):

<style>
.prevNextContainer{
  text-align: center;
  margin: auto;
  background-color: #f2f2f2;
}

 .previousButton {
  background-color: #21618c;
  border: none;
  color: white;
  padding: 9px 34px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: normal;
}

 .previousButton:hover {
  background-color: #abaedc;
  border: none;
  color: white;
  padding: 9px 34px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: normal;
}

 .nextButton {
  background-color: #21618c;
  border: none;
  color: white;
  padding: 9px 48px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: normal;
}

 .nextButton:hover {
  background-color: #abaedc;
  border: none;
  color: white;
  padding: 9px 48px 9px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: normal;
}
</style>

• Now for the last step of this page, go to Destination and Messaging and put the URL of the 3rd step here, followed by ?UniqueField=[@InsertRecordUniqueField]

Now going back to Step 1: 

• You do not want to put the URL of the 1st step submission form into the 2nd step's previous button because it will then submit ANOTHER record when you go back to step 2, instead of just editing the record. So here you will need to create a Single Record Update page that looks just like the 1st step Submission Form. 
• For this page, it will have a Record Identification page again. Set this to the unique field like last time. Parameter will be [@InsertRecordUniqueField]
• in Destination and Messaging, set it to 'Go to new page' and put the URL of the 2nd step in here again, followed by ?UniqueField=[@InsertRecordUniqueField]
• Remember to put URL of this page in the Middle Steps 'Previous' button code

Last Step:

• Set up the last step just like you did with your middle steps. Make sure to add the code from above to hide the original submit button and put in our new buttons. You may want to change the 'value' to Submit instead of Next for the Next Button. 
• Set up the Previous Button like the middle steps, but update the URL to the previous step's URL.

 

I think I covered all bases, but I am in a bit of a rush. If you run in to a problem setting this up, let me know. 

[Johan]

Thanks for your comprehensive feedback !

Still some questions though:

1. In localisations> Paging : there are "previous" and "next" defined. Are these buttons or is this something else ?

2. In your answer you wrote: 

a. Step 1 page:

           The first step must be a submission form. In the DataPage Wizard on the last page (Destination and Messaging), set Destination After Submit to 'Go to a new page'. Put the URL of the next step's dd                   datapage here. 

            -> I jut want to go to another datapage. Can't I just give the name of the datapage instead of a URL ?

b. Make an HTML Block and put it at the very bottom of your page. Insert this code to create Previous and Next buttons (URL for Previous will be the URL for going back to Step 1, which we will cover next. Make sure to change UniqueField with your own unique field from your table) :

             -> here too, can't I use the pagename instead of a URL ?

c. Styling

             -> Can't I put this in a custom style instead of the header of pages ?

 

thanks !

 

 

 

[kpcollier]

@Johan,

1. Those previous and next buttons are for going to the next record in the table, not the next page. As far as I know. You may want to check with Live Chat or something to make sure. 

2. You might be able to, idk. Did you try it yourself? This is just how I did it and it worked.

3. Same answer as #2

4. Same answer as #2 and #3. You can try it, I have no idea. I did it the way I have shown above and it worked great for me. 

These are relatively easy changes and you seem to know where things should go, so why not try it out? If it doesn't work, just go with what I did above, as I know for sure it works because I use it daily.  

[Johan]

Thanks a lot for your replies kpcollier !  

I'll check it out. 

Kind regards

Johan

[kpcollier]

No problem. Please update this forum after your findings and let us know if it worked out for you or not!