remove buttons on mobile page

  • 0
  • 1
  • Question
  • Updated 3 weeks ago
  • Answered
  • (Edited)
So I have gone through the process of creating a customer survey form.  I have managed to remove the green save buttons etc using the following steps:

1) Create a js code page:

$("#formFooterButtonsContainer").hide();
$(".IconOnly").hide();
$("#saveButton").hide();

2) Create a rich text formula field:

"<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$.getScript('" & URLRoot() & "db/" &Dbid() & "?a=dbpage&pagename=EOTIcodepage.js&rand='+Math.random())\">"


This works fine when i am on a normal browser But doesn't work in mobile.  In mobile I have:

[Save], [Save & New] and [Cancel] buttons both on top of the form and at the bottom. 

How do I get rid of these fields?



Edit:  My save button i created also doesn't work:

"<a  class='Vibrant Primary' href='javascript:LinkAway(\"" & URLRoot() & "db/" & Dbid() & "?a=showpage&pageid=20" & "\");' >Submit review</a>"
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb

Posted 8 months ago

  • 0
  • 1
Photo of Chad Brandmire

Chad Brandmire

  • 968 Points 500 badge 2x thumb
Did you make a separate form for moblie in QB? If so, did you put your iol on that form?
Which mobile browser are you testing with?
I'm just guessing at this but, maybe adding a timeout to your js could help
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
The critical question to answer first is if the code page EOTIcodepage.js is loading on the mobile.  Just put an alert into the code page and see it show up.

To help debug, what is the URL of the page you are starting from? Mobile pages can have a different structure in terms of HTML and JavaScript than their non-mobile counterpart. This is probably the cause of the script not working


Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
it is an e-mail with an embedded rich text formula URL button -

"<a href=" & [Add Survey] & ">"  & "<font color=blue>Click here to begin our Short Survey</font color>"
& "</a>"
Photo of Matthew Neil

Matthew Neil

  • 31,438 Points 20k badge 2x thumb
IOL to remove formatting on the mobile version does NOT work. (as far as I've found).  You will have to override the app settings to force them to use the 'desktop' version if you have to remove the buttons.

Another option is to add a bunch of blank fields that basically push the native buttons way down and out of the way, and hope for the result.

Another option is to pass the 'NextURL' in the initial click to load the form.  Then they can use the native save button and still redirect to the pageid=20 that you want.
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
I have tried everything, the codepage doesnt work on mobile.

Not being able to get rid of these native buttons is seriously frustrating.  Is there honestly no other option here for mobile?

Are you able to elaborate on the "pass the NextURL" option here?

Also, any idea as to why the button i created is not working?
Photo of Matthew Neil

Matthew Neil

  • 31,438 Points 20k badge 2x thumb
The "NextURL" option works well when you are creating a new record and want the native 'save' button to redirect somewhere.

The general syntax is :

you original button... then "&nexturl="&URLEncode(destination url)

so it might look like this

www.mycompany.quickbase.com/db/xxxxxxxxx?a=nwr&nexturl="&URLEncode(URLRoot() & "db/" & Dbid() & "?a=showpage&pageid=20")

I'm sure I missed some syntax, but that is the general idea with me trying to free hand it.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
>IOL to remove formatting on the mobile version does NOT work. (as far as I've found). 

This is incorrect - the IOL works perfectly on mobile but you have to make one simple change which has been discussed in prior questions. Historically the mobile version of QuickBase has not been as functional as the desktop version (but that situation is changing). And the  mobile code keeps changing (for the better). But the code for the mobile version of QuickBase is different that the code for the desktop version.

The IOL technique uses a global variable named gReqAppDBID in the definiton of the [iol] user defined variable:
<img qbu='module' src='/i/clear2x2.gif' onload="if(typeof QBU=='undefined'){QBU={};$.getScript(gReqAppDBID+'?a=dbpage&pagename=
This global variable (and most other global variables used in the desktop version) is simply not defined in the source code of the mobile version. So all you have to do to make the IOL technique work on mobile is to come up with another mechanism to supply the application dbid to the definition of the user defined variable [iol]. The easiest way to do this is to hardcode it as follows (shown using the application dbid bnj4r6xbk):
<img qbu='module' src='/i/clear2x2.gif' onload="if(typeof QBU=='undefined'){QBU={};$.getScript('bnj4r6xbk?a=dbpage&pagename=
Yes you might technically loose the "portability" of the application as this definition of the [iol] user defined variable will need to be modified if the application is copied. But global variables are certainly going away as QuickBase modernizes the product (which they are doing with the mobile version).

Below is a screenshot taken from a desktop Chrome session where a mobile device is being emulated through the dev tools.

Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
FWIW, this definition of [iol] user defined variable will restore the portability of the application by deriving the dbid from the URL path:
<img qbu='module' src='/i/clear2x2.gif' onload="if(typeof QBU=='undefined'){QBU={};$.getScript(document.location.pathname.substr(4)+'?a=dbpage&pagename=
It works because a code page can in fact be referenced by either the dbid of the application or the dbid of any table in the application.
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
Ok, this just sounds ridiculously complicated.  let me just rephrase on exactly how i'm going about this:


The start of the whole process is an e-mail link to a customer (EOTI) for them to add a new record to my survey table.  So the link that the customer gets is in the form of a [rich text button] embedded in a notification e-mail (HTML).

The button is: coded as follows:

"<a href=" & [Add Survey] & ">"  
& "<font color=blue>Click here to begin our Short Survey</font color>"
& "</a>"


Mr. Dan - if my JS code page has:

$("#formFooterButtonsContainer").hide();
$(".IconOnly").hide();
$("#saveButton").hide();

I would then add the following line of code?:

<img qbu='module' src='/i/clear2x2.gif' onload="if(typeof QBU=='undefined'){QBU={};$.getScript('mydbidhere?a=dbpage&pagename=
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
Here is the link for you to follow: 

Click here to begin our Short Survey
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,572 Points 20k badge 2x thumb
>Ok, this just sounds ridiculously complicated. 

No it is ridiculously simple. 

The confusion over how to get the script injected is due to the fact that you are using the first version of the IOL technique:

"<img qbu=\"module\" src=\"/i/clear2x2.gif\" onload=\"javascript:$.getScript('" & URLRoot() & "db/" &Dbid() & "?a=dbpage&pagename=EOTIcodepage.js&rand='+Math.random())\">"

I assumed you were using the second version of the IOL technique which uses two user defined variables [iol] and [/iol] and a Rich Text Formula field:

[iol] & "EOTIcodepage.js" & [/iol]

There are links in the records of the pastie database that link descriptions to both of these version.

The alternate code I provided for the [iol] user defined variable fixed the problem associated with the second version of the IOL technique for mobile. Surprisingly the first version of the IOL technique that you are using does in fact inject the code EOTIcodepage.js.

The problem you have is that the mobile version of the page does not have same structure as the desktop version so you have to modify these commands in  EOTIcodepage.js

$("#formFooterButtonsContainer").hide();
$(".IconOnly").hide();
$("#saveButton").hide();

The way to do this is to use desktop browser and through the Chrome dev tools emulate a mobile device. Here is a screenshot:



You need to inspect the emulated mobile page and discover the appropriate selectors for the button and other elements you want to hide. Place these new statements in EOTIcodepage.js.

This really is quite simple to do. I don't have time to explain every solution in fine grain detail so if you can't follow this explanation fee free to contact me off-world using the information in my profile:

https://getsatisfaction.com/people/dandiebolt/
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
Thanks Dan, so I figured it out.  so for those of you that want to know what the code is to remove the buttons on mobile, here we go:


$("div.btn-form-footer.btn-form-container-3btns").hide();
//removes full footer buttons in mobile

$("div.btn-form-header.btn-form-container-3btns").hide();
//removes full header buttons in mobile


$("div.ui-btn.ui-btn-up-s.ui-btn-inline.ui-shadow.ui-btn-corner-all.ui-fullsize").hide();

//removes both save and save and new buttons in the header, but leaves cancel.

I cant figure out how to just remove the "save and add new" button without also removing the "save" button.  

Hope this helps someone save some time!
Photo of Paul Vorster

Paul Vorster

  • 546 Points 500 badge 2x thumb
Thank You got it right!
Photo of Lorraine Chung

Lorraine Chung

  • 160 Points 100 badge 2x thumb
Thanks for this!! It totally worked!
But somehow it removed the submit button that I created in the form
Has anyone figured out how to just remove the "save and add new" button without also removing the "save" button, and change "save" to "submit"?
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
So this is the problem that I don't think can be solved.  If i understand correctly the "save" and "save & new" are bound together in the same container.  

If you make a submit button with a formula url field it will work.  If you use a rich text formula field it doesnt work in mobile.

The downside of the formula url button is that it doesn't care for any form rules/required fields that need to be completed.
Photo of Lorraine Chung

Lorraine Chung

  • 160 Points 100 badge 2x thumb
Can I be a hassle and ask for the code (and steps) to making a formula url button that saves the record and says "submit"?
Even better if I can get some direction on how to make the button save and redirect to a thank you page....

I'm such a noob in QB and coding, the forum and everyone really helped so much!
Photo of Geoffrey

Geoffrey

  • 1,730 Points 1k badge 2x thumb
Hi Lorraine - Go to the app exchange and search for "Magic buttons" - They have examples for all types of buttons in all different shapes an sizes for both Rich text as well as Formula URL.  This helped me a lot
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Thanks - above is very helpful. Does anyone know how to remove the green plus symbol on the left of mobile reports - the button that adds a new record. 


I tried playing with addDetailRecordBtn but could not get it to work. 

I would also like to:
- Remove the edit pencil at the top
- On some pages, remove the save and new button only, not the other two (save, cancel)

Thanks.
(Edited)