Forum Discussion

BD's avatar
BD
Qrew Member
5 years ago

Want to do changes to elements on Quickbase using JS, Jquery

Sir / Madam,

I'm new to Quickbase and I want to create a javascript in Rich text field(formula), but its showing syntax error all the time.

Also I wanted to know how can remove the headers (menu bars) of a quickbase web page using Javascript. I'm able to do so, using &ifv=1.

Also I wanted to access a table from a code page and simultaneously do some changes on the table elements, on loading of the table.

Please help me in this matter. I have been checking all the alternatives in the net and tried many thing but with no luck. 

Most importantly I want the solution to be permanent. (changes to the elements that I intend to be permanent).

Thank You.

------------------------------
B D
Mohit
------------------------------
APIs and custom code

2 Replies

Sort By
  • AdamKeever1's avatar
    AdamKeever1
    Qrew Commander
    5 years ago
    The basic syntax to hide page elements is $(".PAGE_ELEMENT").hide() and here are some examples of removing various elements of a Quick Base page using javascript:

    $(".IconOnly").hide();
    $("#navTop").hide();
    $("#tablesMenuBarWrapper").hide();
    $("#TableNPageBarSeparator").hide();
    $("#pageNavBar").hide();
    $("#saveButton").hide();
    $("#cancelButton").hide();
    $("#pageNavBarActions").hide();
    $("#pageNavBarTray").hide();
    $("#footerSaveButton").hide();
    $("#footerCancelButton").hide();
    $("#formFooterButtonsContainer").hide();
    $("#formFooterButtonsContainer").hide();
    $("#saveMenu").hide();
    $("#footerSaveMenu").hide();
    $("#saveAction").hide();
    $("#.qb-splitbutton-menubtn").hide();
    $(".Icon.DownArrowWhite").hide();
    $("#formFooterButtonsContainer").hide();
    $("#signInLink").hide();

    There are some interesting script based solutions for various use cases here that you may find helpful:

    @Dan Diebolt's Cut&Paste Database

    He crafted the well known image on load technique to inject js into a Quick Base page:

    how to set-up the image onload technique

    You need to share your formula if you want people to help with syntax errors.


    ​

    ------------------------------
    Adam Keever
    ------------------------------
  • JordanMcAlister's avatar
    JordanMcAlister
    Qrew Captain
    5 years ago
    You can also do a lot of form element changes using code pages:
    * just replace the bolded "#" with the appropriate number, which you can find when inspecting element.

    To color form borders of a particular section:

     $("table#sect_s# tr td").css("border-color", "yellow");

    To color tab content background entirely:

    $("#tab_t# table.formSection").css("background-color", "yellow");
    $("#tab_t    # table.formSection tr td").css("border-color", "yellow");

    To color section header:

    $("#sect_s#Header.Title").css("background-color", "yellow");


    To color the background of all field contents from grey to something else:

    $("table.LabelsLeft td.cell").css({backgroundColor: "yellow"});          // or

    $("table.LabelsLeft td.cell").css({backgroundColor: "#03fbe4"});       // or

    $("table.LabelsAbove td.cell").css({backgroundColor: "yellow"});     // for lables above the field contents

    To color the background of a particular field's contents from grey to something else:

    $("#tdf_#.cell").css({backgroundColor: "orange"});

    To color the background of a particular field's label from white to something else:

    $("#tdl_#.label").css({backgroundColor: "pink"});

     

    To color all text below tabs(not including section titles):

    $(".ui-widget-content").css({color: "blue"});

     

    To resize all tabs:

    $(".ui-widget").css("font-size", "2em");

     

    To color the background of a tab:

    $("#tab_t#_link").css({backgroundColor: "#03bef0"});

     

    To color the text of a tab:

    $("#ui-id-#.ui-tabs-anchor").css({color: "#ff0000"});

    To reformat the text of all section titles:

    $(".sectionTitle").css({color: "red", fontWeight: "bold", fontFamily: "cursive", fontStyle: "italic", fontSize: "150%"});

     

    To reformat the text of a particular section:

    $("#sect_s#Header.Title span.sectionTitle").css({backgroundColor: "white", color:"purple", fontWeight: "bold", fontFamily: "serif", fontStyle: "italic", fontSize: "150%"});




    *NOTE: Using code pages like this is not guaranteed to work or be a permanent solution because Quick Base could change things at any time that could break these code pages. Also, the list code above is just experimental stuff I've done and will not necessarily work in every case.



    ------------------------------
    Jordan McAlister
    ------------------------------