Articles

Articles of interest to QuickBase folks

Five Tips for Using Buttons, Graphics and Basic QuickBase

Following our recent QuickBase Tech Fest, we have had a number of request for more information around using basic, native QuickBase functionality to enhance forms, their appearance and their functionality.   In addition to the video from our Tech Fest webinar, below are 5 Tips for using buttons and graphics for basic QuickBase Functionality.

 

1.       Adding colorization to rows based upon any metric or item you wish to monitor has been used quite often.  You simply customize your tabled report, scroll down and check the Row Colorization field and enter in the conditions for which you want to monitor.  For example, say we want the row colorization to change based up on a status change in a task.  We might enter something like the following:

 

Case([Status], "Not Started", "#FFCC99", 
"In Progress", "#FFFFCC", 
"On Hold", "#9999CC", 
"Completed", "#99FF99", "")

 

 

 

Using the Case statement we can alternate between the conditions and the colors we wish to display may be selected as either hex representations of colors (i.e. #FFCC99 - http://www.w3schools.com/Html/html_colors.asp) or by inserting common color names like, red, yellow, green, etc. (http://www.w3schools.com/Html/html_colornames.asp).

 

Case([Status], "Not Started", "Pink", 
"In Progress", "LightYellow", 
"On Hold", "SkyBlue", 
"Completed", "HoneyDew", "")

 

For more information around common formula uses of Row Colorization check out: https://www.quickbase.com/help/row_colorization.html.

 

2.      Adding background field colorization is actually made by creating a second formula text field that will refer back to the actual field you wish to colorize.  We insert the field we wish to display and use HTML to invoke the desired background color.

 

 

Case ([Status],"Not Started","<div style=\"background-color:pink;width:50\">Not Started</div>",
"In-Progress","<div style=\"background-color:lightyellow;width:50\">In-Progress</div>",
"Completed","<div style=\"background-color:honeydew;width:50\">Completed</div>",null)

 

 

3.      Adding text field colorization is very similar to background colorization.  Notice we are defining the font color rather than the background-color above.

 

 

Case([Status], "Not Started", "<font color=red>Not Started</font>",

"In-Progress", "<font color=orange>In-Progress</font>",

"Completed", "<font color=green>Completed</font>")

 

4.      Adding graphics or pictures that change based on status change also uses a Case statement.  You might use colored dots or boxes that convey meaning that is understood quickly or you might use staff thumbnail pictures to display when a resource is selected.  If you prefer you can accomplish the same with an if statement.  Note that we are using the same convention of…  if it is “Not Started” be this graphic if it is “In-Progress” be another graphic.  The graphics can be loaded into a table of your application and you can get the URL location by right-clicking your mouse and viewing the properties of the URL link.  Be sure to permission view rights to this image table so people will be able to see them.

  

Case ([Status],"Not Started","<img src=\"https://images.quickbase.com/si/16/227-rect_red.png\">",

"In-Progress","<img src=\"https://images.quickbase.com/si/16/229-rect_yellow.png\">",

"Completed","<img src=\"https://images.quickbase.com/si/16/228-rect_green.png\">",

null) 

 

5.      Adding thumbnail graphics.  If you want to add pictures and they are in all different sizes you may want to make thumbnail images so they display with consistent sizes in forms and reports.  In the example below we create a table that holds our graphics, add a file attachment field to hold the graphics and then add a formula text field and use the code below.  This formula references the picture or file field and the [Record ID#] of the record and then HTML to display the image with a height and width of 20 pixels.  You can change the height and width if you like.  Also not that were we are referring to /e45/ in the code below you will have to substitute the fid (field id) of the picture or file field of the file attachment field in your table.

  

If ([Picture] = null,null,"<a href='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Record ID#] & "/e45/v0' target='_blank' > " & "<img src='https://www.quickbase.com/up/" & Dbid () & "/a/r" & [Record ID#] & "/e45/v0' height='20' Alt=\"Sales Rep: "&[Sales Rep Name]&"\" title=\"Sales Rep: "&[Sales Rep Name]&"\"  />" & "</a>")

 

We have loaded over 2500 color icons for you to use in your formulas, forms and reports.  

https://www.quickbase.com/db/9kaw8phg?a=ShowPage&pageid=134

 

For more information on using HTML in your formula text fields visit:

https://www.quickbase.com/help/default.html#color_field.html

 

For more information on any of the above, QuickBase offers 10 live webinars each week.  You can register at:  http://quickbase.intuit.com/webinars/.

Comments

doubt in colouring

hi

In if statement , if field1 is checked then change the value of feild2 to red colour? can some one help me in changing this pleae

re: doubt in coloring

Hello,

 

My name is Brian from QuickBase Support. I just need a bit more information to investigate this:

 

- What table are you working on?

 

- Could you invite me to your app so I can take a look on my end?

 

To share your application, enter your application > Users > Share with a New User. On the next screen, click the Address Book icon.  Make sure the search box is set to "All QuickBase Users", then in the search box enter the screen name QB_Support_Brian.  This screen name should come up in the results.  Select it so it's shown in "Current Selections" and then click OK.  Please use the assign a role drop down to assign me the same role as you.  Finally, make sure "Send an email" is checked and then click the Send button. 

 

Thanks,

Brian

QuickBase Support

We've created custom Pages

We've created custom Pages with more than 3 reports. You'll need to find the report URLs and reference them within IFRAME elements on a custom Page.  It's a bit painful.

 

If you want the raw data instead you can run a query and run it through JQuery. Again, not simple, but rather effective.

Most readily useful segment of Tech Fest 2009

This segment was readily useful.  I was already using color coding in reports and color coded fields, but was intrigued by the use of graphics and icons within text fields.  I could tell from questions that others on the line were very interested in the color coding & graphic capabilities as well.

 The gentleman who presented this segment (can't remember his name and seem to have deleted the agenda) also discussed a way to create dashboard pages with more than 3 reports on them (QB dashboard pages only all you to display 3 reports).  I'm looking for his presentation on the QIN but can't seem to find it.  Can anyone help me?

Thanks!

Post new comment

The content of this field is kept private and will not be shown publicly.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

© 1997-2014 Intuit Inc. All Rights Reserved.

Online Database VeriSign Secured Web Based Software TRUSTe Certification Online Database SSAE Audit