Discussions

 View Only
Expand all | Collapse all

remove buttons on mobile page

  • 1.  remove buttons on mobile page

    Posted 03-29-2018 11:45
    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>


  • 2.  RE: remove buttons on mobile page

    Posted 03-29-2018 13:37
    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


  • 3.  RE: remove buttons on mobile page

    Posted 03-29-2018 15:02
    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




  • 4.  RE: remove buttons on mobile page

    Posted 03-30-2018 07:09
    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>


  • 5.  RE: remove buttons on mobile page

    Posted 03-29-2018 15:10
    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.


  • 6.  RE: remove buttons on mobile page

    Posted 03-29-2018 15:25
    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?


  • 7.  RE: remove buttons on mobile page

    Posted 03-29-2018 19:34
    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.


  • 8.  RE: remove buttons on mobile page

    Posted 03-30-2018 04:18
    >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.



  • 9.  RE: remove buttons on mobile page

    Posted 03-30-2018 04:36
    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.


  • 10.  RE: remove buttons on mobile page

    Posted 03-30-2018 07:29
    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=


  • 11.  RE: remove buttons on mobile page

    Posted 03-30-2018 07:40
    Here is the link for you to follow: 

    Click here to begin our Short Survey


  • 12.  RE: remove buttons on mobile page

    Posted 03-30-2018 12:46
    >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/


  • 13.  RE: remove buttons on mobile page

    Posted 04-03-2018 12:01
    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!


  • 14.  RE: remove buttons on mobile page

    Posted 04-07-2018 04:10
    Thank you for your information, I am in the process of doing exactly the same.


  • 15.  RE: remove buttons on mobile page

    Posted 04-07-2018 04:57
    Thank You got it right!


  • 16.  RE: remove buttons on mobile page

    Posted 05-02-2018 05:00
    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"?


  • 17.  RE: remove buttons on mobile page

    Posted 05-02-2018 05:45
    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.


  • 18.  RE: remove buttons on mobile page

    Posted 05-03-2018 02:15
    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!


  • 19.  RE: remove buttons on mobile page

    Posted 05-03-2018 06:00
    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


  • 20.  RE: remove buttons on mobile page

    Posted 10-31-2018 03:39
    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.


  • 21.  RE: remove buttons on mobile page

    Posted 02-19-2023 12:58

    Hi Team...

    May somebody explain step by step how apply the procedure to hide native Save and Cancel Buttons on Mobile app?

    The explanation made above it's very complicated to understand it for beginners.

    I will appreciate any help.

    Thank you!



    ------------------------------
    David Rascon
    ------------------------------



  • 22.  RE: remove buttons on mobile page

    Posted 02-19-2023 13:09

    I don't know if you are referring to the Mobile App from the App store or the web mobile interface, but either way, I don't think it's possible any more. 



    ------------------------------
    Mark Shnier (Your Quickbase Coach)
    mark.shnier@gmail.com
    ------------------------------



  • 23.  RE: remove buttons on mobile page

    Posted 02-23-2023 13:53

    This procedure showed by Geoffrey Harmuth Above: (Still trying to hide buttons)

    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!



    ------------------------------
    David Rascon
    ------------------------------



  • 24.  RE: remove buttons on mobile page

    Posted 03-27-2023 13:57

    David, have you tried this since they removed javascript? How can we remove the buttons using a code page? I got a little lost above...thanks for any help.



    ------------------------------
    Mike Tamoush
    ------------------------------



  • 25.  RE: remove buttons on mobile page

    Posted 03-27-2023 14:01

    You can not do it.

    What I did was force to everybody to use web app and they have to click in the little phone icon

     

    Logo

     

     

     

     

    DAVID L. RASCON

    Customer Acquisition and Retention Manager

    6641 N. Beltline Road, Suite 100 Irving, TX 75063

    C: (469) 615-0609      david.rascon@nhausa.com