remove buttons on mobile page

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

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

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.

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.

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

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=

Here is the link for you to follow: 

Click here to begin our Short Survey

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

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!

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.