Discussions

 View Only
Expand all | Collapse all

add background color for checkbox field

Sales Info

Sales Info09-28-2018 16:09

  • 1.  add background color for checkbox field

    Posted 09-26-2018 21:44
    I want to add the background color for the checkbox field. I have 3 checkboxes under section "Customer instruction" and want all of them have the yellow background as the text above.  Please see below for what I mean.

    Please help and show me how to format the background of the checkbox. It would be nice if someone knows how to format the background color for the entire section.

    Thank you.


  • 2.  RE: add background color for checkbox field

    Posted 09-27-2018 19:19
    You can use the IOL technique


    Here's the simple script used in the example above, use the dev console (F12) inside your browser to track down which HTML elements you want to change




    Setup IOL - https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol



  • 3.  RE: add background color for checkbox field

    Posted 09-28-2018 13:18
    So where is on the console should I put this code under? Can you please show me the steps? THANKS!


  • 4.  RE: add background color for checkbox field

    Posted 09-28-2018 13:32


  • 5.  RE: add background color for checkbox field

    Posted 09-28-2018 13:35
    How/where can I insert two user defined variables into your application named iol and /iol? 


  • 6.  RE: add background color for checkbox field

    Posted 09-28-2018 13:39
    I did not get from the first step. Please walk me through this so I can get it and figure it out myself. Please help. Thanks!


  • 7.  RE: add background color for checkbox field

    Posted 09-28-2018 13:44
    No problem, go to the Settings menu within your app

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754099/RackMultipart20180928-93383-uxs96r-Quick_Base_app_settings_2_inline.PNG?1538142216">

    Settings --> Variables


  • 8.  RE: add background color for checkbox field

    Posted 09-28-2018 13:56
    Thanks! I got step 1 but not sure about step 2 which I don't know where should I create a new code page. 
    FYI, i want to customize the background checkbox text that in the page that was already created so I am not sure if I have to create a new code page. PLease let me know. Thanks so much!


  • 9.  RE: add background color for checkbox field

    Posted 09-28-2018 14:05
    It's under App Settings --> Pages --> New Code Page

    Feel free to contact me via email and we can jump on a call if you need a visual walkthrough, everett.patterson@cnbok.com


  • 10.  RE: add background color for checkbox field

    Posted 09-28-2018 14:08
    I want to customize the code that in the page that was already created. That being said I don't want to create a new code page and customize the existing code. 
    For the code that you provided initially, Do I just have to paste it into the code page? Or do something else? 


  • 11.  RE: add background color for checkbox field

    Posted 09-28-2018 14:29
    paste it in the code page, did you get the test code alert working?

    alert("module.js is now loaded - I now own your page");



  • 12.  RE: add background color for checkbox field

    Posted 09-28-2018 14:39
    I want to customize the code that in the page that was already created in html. Please see below. I don't want to create a new page code.
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754116/RackMultipart20180928-67038-1rysoar-Capture14_inline.PNG?1538145539">
     


  • 13.  RE: add background color for checkbox field

    Posted 09-28-2018 14:49
    Ok I see what you are referring to, without seeing the entire code page, it's hard to understand. Are you the one who wrote the HTML?

    You should be able to locate the HTML tags for the checkboxes, and apply the CSS style that you want


  • 14.  RE: add background color for checkbox field

    Posted 09-28-2018 15:06
    No. I did not write the HTML initially. That's why I am having a hard time to figure out which is which. I want to customize the background of the field below but it does not have a code page like the other one for me to add the code in. 
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754121/RackMultipart20180928-121704-1n5dfov-Capture15_inline.PNG?1538146989">
    When I right click to this field, I either have to choose "Edit the properties of this form element" or "Edit the properties of this field". However, neither of them has the place like the code page where you can customize the code. Please give me advice how to add the background color to the checkbox field.

    Thank you so much for your following up and support! I'm really appreciated.


  • 15.  RE: add background color for checkbox field

    Posted 09-28-2018 15:23
    To make sure you have a better understanding what I mean, I want to let you know a few things below.
    Basically, the "Tickets" is one of tables in the apps.


    The table has several forms and this ticket details form is one of them. 





    I want to customize the background color for the checkbox field in that form. 
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754127/RackMultipart20180928-39910-ciue8s-Capture19_inline.PNG?1538148107">

    which is a field that I added here initially.
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754128/RackMultipart20180928-43009-1uogulv-Capture13_inline.PNG?1538148147">

    Please advice on how to customize the background color for these checkbox fields. Or if you know how to change the background color for the whole section heading called "Customer instructions", that'd be perfect.

    Thanks so much!


  • 16.  RE: add background color for checkbox field



  • 17.  RE: add background color for checkbox field

    Posted 09-28-2018 15:40
    Ok. I created a new code page add the alert code. What is the next step that I have to do?



  • 18.  RE: add background color for checkbox field

    Posted 09-28-2018 15:46
    Create a new Rich Text formula field named [-] and use this formula:

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

    place it anywhere on the form (at the end or in the customer instructions area), we can hide it anyways



  • 19.  RE: add background color for checkbox field

    Posted 09-28-2018 16:02
    Ok. I placed it at the end of the form.



  • 20.  RE: add background color for checkbox field

    Posted 09-28-2018 16:06
    Open the form, do you get the alert? This will let you know if that code page is loading correctly when the page loads


  • 21.  RE: add background color for checkbox field

    Posted 09-28-2018 16:09
    Yes I did.


  • 22.  RE: add background color for checkbox field

    Posted 09-28-2018 16:17
    Now, what can I do to change the background color of the checkbox or the whole section that I want based on the code you provided initially.


  • 23.  RE: add background color for checkbox field

    Posted 09-28-2018 16:22
    Cool, you are almost done! While viewing the form, open your dev console (F12), go to the Inspector tab and use the selector on the checkbox fields, it will show you the ID of the HTML tags we want to modify



    Go back to your code page, and use the code with the IDs for your form

    $("#tdf_2").css("backgroundColor", "yellow");

    *adjust tdf_# to match your form





  • 24.  RE: add background color for checkbox field

    Posted 09-28-2018 16:30
    You're genius!! I got it!
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754147/RackMultipart20180928-79122-7ajk40-Capture22_inline.PNG?1538152098">
    It is what I want initially. However, do you know how I make the whole section "Customer Instructions" background colored? 

    Thanks so much for your support! You're really amazing!!


  • 25.  RE: add background color for checkbox field

    Posted 10-29-2018 20:35
    Everett Patterson,

    Can you help me fix this? I was in development console and somehow messed it up. The background was filled with yellow without the white spacing between before. Please help me with this problem. THANKS!


  • 26.  RE: add background color for checkbox field

    Posted 10-29-2018 20:41
    Did you put a code in dev console? I would need to see the whole JS code page, please copy & paste the whole code (module.js page)


  • 27.  RE: add background color for checkbox field

    Posted 10-29-2018 20:45
    Yes. I accidently put some code in the dev console? How do I go back or remove the code that I put in? 

    (function(){
    var querystring=document.location.search;
    if(/a=er/i.test(querystring)) {
    // EDIT RECORD PAGE ========================

    //$("#sect_s30").css("backgroundColor", "yellow");

    } else if(/a=dr/i.test(querystring)){
    //DISPLAY RECORD PAGE ======================
    $("#sect_s19").css("backgroundColor", "yellow");
    $("#tdf_23").css("backgroundColor", "yellow");
    $("#tdf_24").css("backgroundColor", "pink");

    } else if(/a=nwr/i.test(querystring)){
    //ADD RECORD PAGE =========================
    //$("#sect_s30").css("backgroundColor", "yellow");
    $("#tdf_23").css("backgroundColor", "yellow");
    $("#tdf_23").css("backgroundColor", "pink");

    }

    })();


  • 28.  RE: add background color for checkbox field

    Posted 10-29-2018 20:49
    I tested another section and it acts the same thing. There is a space between elements. I think I messed up somewhere. Can you please help me?


  • 29.  RE: add background color for checkbox field

    Posted 10-29-2018 20:49
    Anything you put in the dev console is only temporary, refresh the page to change it back


  • 30.  RE: add background color for checkbox field

    Posted 10-29-2018 20:50
    I refreshed the page but it still acts the same.


  • 31.  RE: add background color for checkbox field

    Posted 10-29-2018 20:57
    Everett Patterson,

    Can you please help on how to fix this problem?

    Thanks!!


  • 32.  RE: add background color for checkbox field

    Posted 10-29-2018 21:05
    There may have been something wrong with QuickBase, mine was not working but now it is


  • 33.  RE: add background color for checkbox field

    Posted 10-29-2018 21:10
    Everett Patterson,

    I think i messed up something. Does Quickbase have a log so I can look at what I did?


  • 34.  RE: add background color for checkbox field

    Posted 10-29-2018 21:15
    Backslash (//) this part out of the code and see if that's the problem

    //$("#sect_s19").css("backgroundColor", "yellow");


  • 35.  RE: add background color for checkbox field

    Posted 10-29-2018 21:15
    Backslash (//) this part out of the code and see if that's the problem

    //$("#sect_s19").css("backgroundColor", "yellow");


  • 36.  RE: add background color for checkbox field

    Posted 10-29-2018 21:33
    If I backslash that part, then there is no background color. I want the background color for the whole section.It worked before. Besides what I did in the dev console, I tried to change the section heading to the tab. When I change it back, the background color messed up. I am not sure it messed up because of what I did in the console or because I changed the tab and switch it back. 

    It was working perfectly before I tried this. I think what I did in the console caused this problem.


  • 37.  RE: add background color for checkbox field

    Posted 10-29-2018 21:47
    Ok, let's check it tomorrow morning, mine is working on and off so there could be an issue with QuickBase/Cloudflare servers


  • 38.  RE: add background color for checkbox field

    Posted 10-29-2018 21:50
    Everett Patterson,

    ok. Thanks so much for all your help. I'll let you know if it is working tomorrow.

    Thanks again!


  • 39.  RE: add background color for checkbox field

    Posted 10-30-2018 23:34
    Everett Patterson,

    The background color is still not working property as it was before. There are still white spaces between elements. Can you please help me with this problem?

    Thanks!!


  • 40.  RE: add background color for checkbox field

    Posted 09-28-2018 16:35
    I just realized that it just worked for that particular ticket which I got the ID from. On the another ticket, the background color got changed on different fields which I don't want to change. 






  • 41.  RE: add background color for checkbox field

    Posted 09-28-2018 16:44
    I have to type of tickets: service center ticket and customer ticket. The customer ticket does not have checkbox fields that i want the background to be changed. That's why the background color changed on different fields on the customer ticket. Can you please show me how I can fix this problem?


  • 42.  RE: add background color for checkbox field

    Posted 09-28-2018 16:51
    So both types use the same form? Tickets Main Form?


  • 43.  RE: add background color for checkbox field

    Posted 09-28-2018 16:53
    yes.


  • 44.  RE: add background color for checkbox field

    Posted 09-28-2018 17:06
    I used the dynamic form rule to hide and show the fields based one the input of another field to separate two types of tickets.

    I think that I would need to use if-else statement to block a code but not sure how I can handle it. Do you have any idea on how to fix this problem?


  • 45.  RE: add background color for checkbox field

    Posted 09-28-2018 17:52
    I want the background color to be added only when we select the service center type which I have a html code below. Can you please write me to code with if/else statement to execute the background code only when we select the service center type. If you have another way beside using if/else, that's fine and perfect. Please help. THANKS SO MUCH!

    <select onmousedown="CaptureSelectStateIfSafari(event);return true;" onchange=" OnCHF(this);" name="_fid_10" id="_fid_10" onblur="OnBF(this)" onfocus="OnFF(this)" size="1">  <option value=""></option>  <option value="Altaquip">Altaquip</option>  <option value="Parts to Consumer">Parts to Consumer</option>  <option value="Service Center" selected="">Service Center</option> </select>


  • 46.  RE: add background color for checkbox field

    Posted 09-28-2018 18:15
    You should be able to add to the dynamic form rule, if type=customer, then hide the field [-]

    By hiding the IOL field [-], it will not call that code page and not highlight anything


  • 47.  RE: add background color for checkbox field

    Posted 09-28-2018 20:09
    You're awesome!!! Thanks so much! I am really appreciated for your help and support. It works perfectly as what I want.


  • 48.  RE: add background color for checkbox field

    Posted 09-28-2018 20:21
    Glad to help = )


  • 49.  RE: add background color for checkbox field

    Posted 09-28-2018 21:55
    Everett,

    I have another question relate to the stuffs that we did above. Everything works perfectly fine as what I want. The problem is the background color does not work correctly when I edit the form. You can see below for what I mean. Please advice me on how to fix this.Thanks so much!!

    The form is in view mode
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1754198/RackMultipart20180928-63572-148dbsh-Capture24_inline.PNG?1538171651">

    The form is in Edit mode


  • 50.  RE: add background color for checkbox field

    Posted 09-28-2018 22:01
    Use this on your code page, replace the alerts with what you want on each page type

    (function(){
      //$("img[qbu=module]").remove();
      //$("img[qbu=module]").hide();
      var querystring=document.location.search;
      if (/dlta=mog/i.test(querystring)) {
        //GRID EDIT PAGE ========================================
        alert("You are on the Grid Edit Page");
      } else if(/a=er/i.test(querystring)) {
        //EDIT RECORD PAGE ========================================
        alert("You are on the Edit Record Page");
      } else if (/a=API_GenAddRecordForm/i.test(querystring)) {
        //API_GenAddRecordForm PAGE ========================================
        alert("You are on the GenAddRecordForm Page!");
      } else if (/a=GenNewRecord/i.test(querystring)) {
        //ADD RECORD PAGE ========================================
        alert("You are on the Add Record Page");
      } else if (/a=nwr/i.test(querystring)) {
        //ADD RECORD PAGE ========================================
        alert("You are on the Add Record Page");
      } else if(/a=dr/i.test(querystring)) {
        //DISPLAY RECORD PAGE
        alert("You are on the Display Record Page");
        $("img[qbu=module]").closest("td").css("background-color","#FFFFFF");
      } else if(/a=q/i.test(querystring)) {
        //REPORT PAGE ========================================
        alert("You are on the Report Listing Page");
      } else if(/a=td/i.test(querystring)) {
        //TABLE DASHBOARD PAGE ========================================
        alert("You are on the Table Dashboard Page");
      } else if (/a=FinishEditRecord/i.test(querystring)) {
        //FINISH EDIT RECORD PAGE ========================================
        alert("You are on the Finish Edit Record Page");
      } else if (/a=API_GenAddRecordForm/i.test(querystring) {
        //API_GenAddRecordForm ========================================
        alert("You are on the API_GenAddRecordForm Page"); 
      } else {
        //OTHER PAGE ========================================
        alert("You are on the Some Other Page");
      }
    })();



  • 51.  RE: add background color for checkbox field

    Posted 09-29-2018 16:15
    So this means that I don't have to create the field that call iol variables?


  • 52.  RE: add background color for checkbox field

    Posted 09-29-2018 16:16
    When I try the code that you provided, non of the alerts pops up when i am in the different page. Can you tell me what the problem is ?


  • 53.  RE: add background color for checkbox field

    Posted 10-01-2018 13:58
    This one works for the Add/View/Edit pages (not sure why the original code isn't working with all pages I'll have to test it some more)

    (function(){
    var querystring=document.location.search;
      if (/a=er/i.test(querystring)) {
        //EDIT RECORD PAGE ========================================
        alert("You are on the Edit Record Page");
     } else if(/a=dr/i.test(querystring)) {
        //DISPLAY RECORD PAGE
        alert("You are on the Display Record Page");
     } else if (/a=nwr/i.test(querystring)) {
        //ADD RECORD PAGE ========================================
        alert("You are on the Add Record Page");
      }

    })();



  • 54.  RE: add background color for checkbox field

    Posted 10-01-2018 16:27
    Everett,

    Thanks so much for the code! It works. You're awesome!!


  • 55.  RE: add background color for checkbox field

    Posted 09-29-2018 16:30
    Have you considered a simpler native approach?

    You can just put a text element on your form beside the checkbox and Suppress the native field name.  You would check the checkbox for enable html.


    <SPAN STYLE="background-color:yellow">These are the words for checkbox #1</SPAN>


  • 56.  RE: add background color for checkbox field

    Posted 09-29-2018 16:50
    what if i want to customize the background color for the section like below using a simpler way?


  • 57.  RE: add background color for checkbox field

    Posted 09-29-2018 16:54
    Sorry,  but I don't know of a simpler a way to do that. 

    imho it's just not worth spending so much time on formatting issues like that.  My attitude  as a developer is to do the 95% that can be done quickly and never mind that last 5%, because I always have a backlog of project work to be done, so I just move onto the next thing on my to do list.