“Next” and “Previous” buttons on multi-tabbed forms

  • 1
  • 1
  • Question
  • Updated 2 months ago
  • In Progress
I am trying to apply this to the current version of QuickBase and I am having problems.
I am trying to put “Next” and “Previous” buttons on the bottom of a multi-tabbed form. I have tried the following.

1. I created a Formula-RichText field named PageTwo and put the following in the formula box:
a name=PageTwo
(I had to remove the less than, greater than, and the /a from what I added to get the values to display
2. I then placed this as the first field on the second Tab of my form.
3. I then created a Formula-RichText field named GotoPageTwo and put the following in the formula box:
"JavaScript:void(window.location.href='#PageTwo');"
4. I then placed this field as the last field on the first Tab of my form.

When I display the form, I get
“GotoPageTwo
JavaScript:void(window.location.href='#PageTwo');” (without the quotes)
Displayed at the bottom of the first Tab with no button

And I get
PageTwo
Displayed at the top of the second tab

Is there anyway to add these buttons? If this is a really dumb question, please forgive my ignorance on this topic?
Photo of Jeff Mickelsen

Jeff Mickelsen

  • 264 Points 250 badge 2x thumb

Posted 5 months ago

  • 1
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
Photo of Jeff Mickelsen

Jeff Mickelsen

  • 264 Points 250 badge 2x thumb
Thanks for your quick reply.  Regarding your statement in the Pasties database that says "Content Type Description[Content] is an Image Onload module.js file".  I am not sure where to put the Contents code/formula.  Does it simply go into the formula for the button in the Formula - Rich Text formula?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
The Pastie Database is a work in process and it started out as simply a place to store code outside of the forum (there have been many different forum platforms used) because the forum often corrupted or reformatted the code. Over time a number of different techniques have been developed and I have attempted to categorize each Pastie record into a specific category or content type. The current content types are:
  1. Unsorted old entries that have not been re-categorized yet
  2. Formula [Content] is a standard QuickBase formula
  3. IOL Module [Content] is an Image Onload module.js file
  4. Service Worker [Content] is a Service Worker script
  5. UserScript [Content] is a User Script (Greasemonkey, Tampermonkey etc)
  6. Console Script [Content] is a script intended to be entered through the Developer Tools Console tab
  7. Technique [Content] is a narrative description of a technique
  8. Bookmarklet [Content] is a bookmarklet
  9. Code [Content] is a fragment of code which Transpiles to JavaScript (CoffeeScript, TypeScript etc)
  10. HTML [Contnet] is a fragment of HTML code
  11. CSS [Content] is a fragment of CSS code
  12. Template [Content] is a template (Underscore Template, Mustache Template etc)
  13. Chrome Dev Snippet [Content] is a Chrome Developer Tool Snippet
  14. Script [Content] is a script (might be the body of a closure for IOL)
  15. URL [Content] is a URL
  16. SQL [Content] is a SQL query
  17. BOL [Content] is a BOL
  18. Other [Content] is Othter
  19. Notes [Content] is narrative text
  20. Task Script [Content] is a Task Script
  21. EMPTY [Content] is EMPTY
  22. Juypter Notebook [content] is a Jupyter Notebook
  23. Dashboard Widget Script [Content] is a Dashboard Widget Script

https://haversineconsulting.quickbase.com/db/bnik4s6s9?a=td

Eventually I intend to supply specific instructions to describe each Category with narrative text and screenshots but it takes time and isn't my highest priority at the moment.

Your specific inquiry about setting up the IOL technique is best documented here:

https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

My ability to keep the pastie database and associated forum posts updated and in synch with each other has some limitations as (1) I can't edit old forum posts and (2) my account has limitations on the amount of file attachments I can use for screenshots. So for example my old forum posts may refer to the image onload field [-] being a "Text formula field with some HTML" allowed although QuickBase has changed this type of field to Rich Text formula field. I don't have a workable solution to address this so you just have to ask if you can't follow the instructions or if something is confusing.
Photo of Jeff Mickelsen

Jeff Mickelsen

  • 264 Points 250 badge 2x thumb
Thanks again for your quick response and for the help!
Photo of Jeff Mickelsen

Jeff Mickelsen

  • 264 Points 250 badge 2x thumb
Ok, I finally got past a health issue and I am trying to make this work  I did the following:

1. Created the two variables; iol and /iol
2. Created the code page with the alert message "i have control"
3. Created the field -
4. Placed the field on the form 

Everything worked as expected; I got the alert

I then

1. Changed the formula in the field - to the formula in Patsies
2. Changed the content in the module.js to the content in Patsies

I now have Next and Previous buttons on my form, but they do not do anything 

I used copy and paste in every entry, so I did not screw something up in the formulas or content 

Any ideas on why this isn't working? 

Thanks for your help...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,242 Points 20k badge 2x thumb
Without seeing the application and code, I would debug this by adding console.log() statements to the code especially within the button click handlers.
Photo of Adam Keever

Adam Keever

  • 996 Points 500 badge 2x thumb
This is awesome. Thanks Dan. Any way to put the buttons at the top and bottom of the form?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
Just create another formula rich text field without the iol reference and position it at the top or bottom as you wish:

"<a class='QBU_Previous Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
">Previous</a>" &
"&nbsp;&nbsp;" &
"<a class='QBU_Next Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
">Next</a>"
Photo of Adam Keever

Adam Keever

  • 996 Points 500 badge 2x thumb
These buttons are still at the bottom of the rest of the fields for the tab. The position of the buttons appears to only be relative to the iol buttons.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
Try this:

$("div#formContents div:first").clone().appendTo("div#formContents");
Photo of Adam Keever

Adam Keever

  • 996 Points 500 badge 2x thumb
Works and now no need for the additional formula rich text field. Thanks Dan.
Photo of Adam Keever

Adam Keever

  • 996 Points 500 badge 2x thumb
This works great on desktop, but doesn't work on mobile. Any suggestions?