Forum Discussion

AndreonnaGarret's avatar
AndreonnaGarret
Qrew Assistant Captain
8 years ago

Multi User Select Field Colorization

I am wondering if it is possible to colorize a multi-select field gracefully on a report. For example, I would like to assign each option in the field a color, but if two or more are selected I want all of their colors to show. 

So I have this list:

Jack (blue)
Carol (red)
Barbara (purple)
Janet (yellow)

I know that on my custom report I can colorize if there is only one selected. However, I am wondering if I, for instance, select both Jack and Barbara on this list can I have both blue and purple show? So on the report, it lists them both separated into different "bubbles". Can I colorize this report so each bubble shows the correct color? I have attached a couple screenshots for reference. The first is what the report looks like, the second is a mock up of what I am looking for. Thanks in advance!

26 Replies

  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    What you will want to do is create a formula text field that converts those entries into colorized text.

    It will need to evaluate each option that is there, and assign a color.

    It will be a List function, with some if statements.

    List(", ",
    If(Contains([Name], "Jack"), "Blue Text", ""),
    If(Contains([Name], "Carol"), "Red Text", ""),
    If(Contains([Name], "Barbara"), "Purple Text", ""),
    If(Contains([Name], "Janet"), "Yellow Text", "")
    )

    I'll need to circle back to this to make that text become colorized.  
    • KristenFrancis's avatar
      KristenFrancis
      Qrew Member
      should I be able to copy and paste directly into my formula field where it created four rows, or should it be one row that wraps?   I cannot get it to work.  :(

      ------------------------------
      Kristen Francis
      ------------------------------
      • MarkShnier__You's avatar
        MarkShnier__You
        Icon for Qrew Legend rankQrew Legend
        I think that it would help to elicit a response from the community if you posted a complete question as to what you are trying to do, in a new post and then perhaps reference this post in a link.

        ------------------------------
        Mark Shnier (YQC)
        Quick Base Solution Provider
        Your Quick Base Coach
        http://QuickBaseCoach.com
        mark.shnier@gmail.com
        ------------------------------
    • AndreonnaGarret's avatar
      AndreonnaGarret
      Qrew Assistant Captain
      I don't see where this answers my questions. It just appears to be a list of colors. 
    • LauraThacker's avatar
      LauraThacker
      Qrew Captain
      Sorry - it's a tool that allows you to see hundreds of different color options which can be used in QuickBase - just thought it's helpful when picking colors to pick ones which are readable in a standard QuickBase environment (instead of "red","blue" etc.).
    • AndreonnaGarret's avatar
      AndreonnaGarret
      Qrew Assistant Captain
      It is a cool tool. I currently use the HTML color picker on the w3 schools website. This may be a resource I can use in the future. Thanks
  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    instead of having "Blue Color" you can add this

    "<div style=\"font-size: 10pt; color:white;background-color:blue; width:100%;  text-align:center; \">Jack</div>"
  • AndreonnaGarret's avatar
    AndreonnaGarret
    Qrew Assistant Captain
    So this would need to be done for all combinations? So Jack would be blue, Carol would be red, and the combination of Jack and Carol would be a third color?
    • AndreonnaGarret's avatar
      AndreonnaGarret
      Qrew Assistant Captain
      I received this error on the first link, but it sounds like what I'm looking for. 

      "You've requested a page using an invalid hostname: haversineconsultig.quickbase.com.
      Please double check the web address or try the address of our main site: https://login.quickbase.com.
    • AndreonnaGarret's avatar
      AndreonnaGarret
      Qrew Assistant Captain
      Yes! That is was I am looking for. How do I go about doing this?
  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    Correct (At least going this route),  If you have a ton of options there are a few other ways, but multi select fields are tricky.

    Here is a more complete formula for your example

    List(", ",
    If(Contains([Name], "Jack"),
    "<div style=\"font-size: 12pt; color:white;background-color:blue; width:100%;  text-align:center; \">Jack</div>", ""),
    If(Contains([Name], "Carol"),
    "<div style=\"font-size: 12pt; color:white;background-color:red; width:100%;  text-align:center; \">Carol</div>", ""),
    If(Contains([Name], "Barbara"),
    "<div style=\"font-size: 12pt; color:white;background-color:purple; width:100%;  text-align:center; \">Carol</div>", ""),
    If(Contains([Name], "Janet"),
    "<div style=\"font-size: 12pt; color:white;background-color:yellow; width:100%;  text-align:center; \">Carol</div>", "")
    )
    • AndreonnaGarret's avatar
      AndreonnaGarret
      Qrew Assistant Captain
      I am finding that multi select fields are a pain. This seems to be the only option in terms of assigning multiple people to one record though. 
  • There is no way to run a loop in QuickBase formula.  Therefore, there is a lot of repeating syntax.  I built it out for 4 users.  This would need to be built out for 20 users total.  Also, users are hard coded which is going to be a pain to maintain over time.  Good Luck!


    var text jackstyle = "background: purple; color: white; border-color: purple'>Jack";
    var text janetstyle = "background: yellow; color: black; border-color: yellow'>Janet";
    var text carolstyle = "background: red; color: white; border-color: red'>Carol";
    var text barbarastyle = "background: blue; color: white; border-color: blue'>Barbara";

    var text css = "display: inline-block; margin: 1px; background: white; max-width: 98%; "&
    "text-overflow: ellipsis;word-wrap: break-word; background: red; border: 1px solid rgb(204, 213, 240);" &
    "border-radius: 5px; padding: 2px; -moz-border-radius: 5px; -webkit-border-radius: 5px;";

    var text usera = Part(ToText(
      ), 1, ";");
      var text userb = Part(ToText(
        ), 2, ";");
        var text userc = Part(ToText(
          ), 3, ";");
          var text userd = Part(ToText(
            ), 4, ";");

            var text useraf = If(
            Contains($usera, "jack")=true, $jackstyle,
            Contains($usera, "janet")=true, $janetstyle,
            Contains($usera, "carol")=true, $carolstyle,
            Contains($usera, "barbara")=true, $barbarastyle 
            );

            var text userbf = If(
            Contains($userb, "jack")=true, $jackstyle,
            Contains($userb, "janet")=true, $janetstyle,
            Contains($userb, "carol")=true, $carolstyle,
            Contains($userb, "barbara")=true, $barbarastyle
            );

            var text usercf = If(
            Contains($userc, "jack")=true, $jackstyle,
            Contains($userc, "janet")=true, $janetstyle,
            Contains($userc, "carol")=true, $carolstyle,
            Contains($userc, "barbara")=true, $barbarastyle
            );

            var text userdf = If(
            Contains($userd, "jack")=true, $jackstyle,
            Contains($userd, "janet")=true, $janetstyle,
            Contains($userd, "carol")=true, $carolstyle,
            Contains($userd, "barbara")=true, $barbarastyle
            );

            "<span style='" & $css &
            List("</span><span style='" & $css,
            $useraf,
            $userbf,
            $usercf,
            $userdf,
            ""
            )&
            "</span>
  • >Also, users are hard coded which is going to be a pain to maintain over time.  Good Luck!

    You could just write a short off-line JavaScript function that took an array of user names and styles and spit out the QuickBase formula as text. Whatever repeating pattern is in the QuickBase formula can easily be iterated over in script.
  • UPDATE: I made a simple  change to detect dynamic filters through the hashchange event:

    https://haversineconsulting.quickbase.com/db/bmm3bpupr?a=td

    Pastie Database
    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=563

    No need to use Mutation Observers with this change.

    I also unchecked the Searchable property of the [-] field so remnants of this field would not display in the dynamic filter panel:

         Include this field when searching/filtering this table

    To be honest I can't believe QuickBase implemented this dynbamic fitler option through using the URL hash - the change state should have been persisted in local storage.
  • AndreonnaGarret's avatar
    AndreonnaGarret
    Qrew Assistant Captain
    I may not understand everything you are saying here, but it certainly works like a charm! Thanks so much!