Forum Discussion

JeffMickelsen's avatar
JeffMickelsen
Qrew Cadet
7 years ago

?Next? and ?Previous? buttons on multi-tabbed forms

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?
  • 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?
  • 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.
  • 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...
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      Without seeing the application and code, I would debug this by adding console.log() statements to the code especially within the button click handlers.
  • This is awesome. Thanks Dan. Any way to put the buttons at the top and bottom of the form?
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      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>"
    • AdamKeever1's avatar
      AdamKeever1
      Qrew Commander
      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.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      Try this:

      $("div#formContents div:first").clone().appendTo("div#formContents");