You can exploit the HTML function of a Formula Text field to produce background colors and even graphics into forms tables and reports.

Below are a few examples:

Color Status: Example of using Formula Text field with HTML to produce fields that have background colors and graphics.

Colored Fields: Example of using Formula Text fields with HTML to display background color.

Steps:

1. Create a formula text field and paste the respective html code into the formula section of the formula text field's properties.

FORMULA TEXT FIELD - COLORED STATUS: 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)

FORMULA TEXT FIELD - ICON STATUS: Case ([Status],"Not Started","<div><img src=\"https://www.quickbase.com/up/bdcwxur8p/g/rf/ej/va/227-rect_red.png\"></div>", "In-Progress","<div><img src=\"https://www.quickbase.com/up/bdcwxur8p/g/rh/ej/va/229-rect_yellow.png\"></div>", "Completed","<div><img src=\"https://www.quickbase.com/up/bdcwxur8p/g/rg/ej/va/228-rect_green.png\"></div>", null)

2. Select your graphic icons or pictures (suggest small thumbnails) and load them into QuickBase.

3. Copy their URL location and insert them into the html code below for the respective locations for the various status settings.

4. Don't forget to check the "Allow some HTML tags" checkbox.

5. Include the new fields on your reports.

You can find a number of useful graphics that are linkable at: https://www.quickbase.com/db/bcgnn27bx?a=q&qid=7

More information about Row Colorization: https://www.quickbase.com/help/row_colorization.html

Helpful Hex to Dec and Dec to Hex color conversion site: http://www.321webmaster.com/hex-to-rgb.php

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/.

People ask all the time, "What is the "&z="&Rurl() inside some of my QuickBase buttons?". Well, not all the time, but often enough that we should talk about it.

I am referring to formulas that are inside formula URL field buttons like, "Add Task", "Add Document" or "Add Project". It doesn’t matter if records are child or parent records you are creating. Only that you are leaving one location to manually add or edit a record and you wish to return back to the location from which you started.

Many people have edited their Add Record button and figured out that the "&z="&Rurl() seems to return them back to where they started from, but when they try using the function in other formulas it doesn’t work all the time. The reason - it’s not supposed to.

This function was an expedient way for QuickBase engineers to pass a bread crumb from the originating URL into QuickBase so that when you were finished adding or editing a record you would have a way to return to your original starting point.

There are two valid use cases for "&z="&Rurl(). One is when you use the API_GenAddRecordForm and the other is when you use the a=er function to edit a record. Bear in mind that both of these cases expect you to manually modify a record, save the record and return back to the URL from which you started.

Here are two examples of the "&z="&Rurl() use:

An API_GenAddRecordForm Example:

An a=er Example:

The thing to remember about the above two examples is that you are starting from one spot, either adding or editing a record, manually saving the record and returning to your starting spot. The "&z="&Rurl() only works in this situation.

If you are using the API_AddRecord or API_EditRecord APIs, the "&z="&Rurl() function won’t work because these APIs don’t expect you to approve or save the record manually. These two APIs perform a function that doesn’t need to be reviewed or saved. The save function is included and processed with no option to manually intervene. Consequently once these APIs are completed they are looking for direction on what to do next. If you don't tell them where to go they will give you an XML response page. This isn't necessarily and error, it is just an unterminated API call. This is where you use an rdr function to either return to some URL or to continue on to perform some other API call.

An rdr= example:

If we look at what’s included in this example, we start out building the URL that is being launched and add to it the components that make up a valid URL. The URL will include the API, API_EditRecord and includes an optional apptoken and edits the record where rid equals the [Record ID#] field and makes the field with the field id of 138 checked. Field 138 is a checkbox field. After it checks the checkbox it is redirected via the (rdr=) to display the record it just edited. Notice the (a=dr) or display record and the record id or (rid=) is equal to the [Record ID#].

The important distinction is that all of this happened without you having to manually acknowledge what was being added or edited. It was pre-programmed.

Hopefully this has shed some light on the "&z="&Rurl() vs. rdr functionality.

For more information on creating formulas in QuickBase you can review the documentation below, speak with one of our tech support staff or jump into one of the 10 live webinars we hold each week.

Documentation Links:
https://www.quickbase.com/help/using_formulas_in_QuickBase.html
https://www.quickbase.com/db/6ewwzuuj?act=q&qid=6
http://quickbase.intuit.com/developer/developer/documentation/api/apigenaddrecordform
http://quickbase.intuit.com/developer/developer/documentation/api/apiaddrecord
http://quickbase.intuit.com/developer/developer/documentation/api/apieditrecord

You can use the HTML function of a Formula - Text field to produce background colors and even graphics into forms, tables and reports.

Below are a few examples:

Colored Status and Icons: Example of using Formula - Text fields with HTML to produce fields that have background colors and graphics.

Colored Groups: Example of using Formula - Text fields with HTML to display background color by grouping.

Steps:

1. Create a Formula - Text field and paste this into the formula section of the field's properties (This is called Colored Status above):

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)
 
 

2. Create another Formula - Text field and paste this into the formula section of the field's properties (This is called Icon Status above):

Case ([Status],
"Not Started",
"<div><img src=\"https://images.quickbase.com/si/16/227-rect_red.png\"></div>",
"In-Progress",
"<div><img src=\"https://images.quickbase.com/si/16/229-rect_yellow.png\"></div>",
"Completed",
"<div><img src=\"https://images.quickbase.com/si/16/228-rect_green.png\"></div>",
null)

3. Select your graphic icons or pictures (ideally small thumbnails) and load them into QuickBase.

4. Copy their URL location and insert them into the formula above for the respective locations for the various status settings.

5. Don't forget to check the "Allow some HTML tags" checkbox.

6. Include the new fields on your reports.

Additional Resources

- To learn more, please see our About Row Highlighting help topic.

- Looking for different icons for your report? Check out our QuickBase Clip Art Icons.

- You can customize the perfect color for your field at Color Picker.

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/.

People ask all the time, "What is the "&z="&Rurl() inside some of my QuickBase buttons?". Well, not all the time, but often enough that we should talk about it.

I am referring to formulas that are inside formula URL field buttons like, "Add Task", "Add Document" or "Add Project". It doesn’t matter if records are child or parent records you are creating. Only that you are leaving one location to manually add or edit a record and you wish to return back to the location from which you started.

Many people have edited their Add Record button and figured out that the "&z="&Rurl() seems to return them back to where they started from, but when they try using the function in other formulas it doesn’t work all the time. The reason - it’s not supposed to.

This function was an expedient way for QuickBase engineers to pass a bread crumb from the originating URL into QuickBase so that when you were finished adding or editing a record you would have a way to return to your original starting point.

There are two valid use cases for "&z="&Rurl(). One is when you use the API_GenAddRecordForm and the other is when you use the a=er function to edit a record. Bear in mind that both of these cases expect you to manually modify a record, save the record and return back to the URL from which you started.

Here are two examples of the "&z="&Rurl() use:

An API_GenAddRecordForm Example:

An a=er Example:

The thing to remember about the above two examples is that you are starting from one spot, either adding or editing a record, manually saving the record and returning to your starting spot. The "&z="&Rurl() only works in this situation.

If you are using the API_AddRecord or API_EditRecord APIs, the "&z="&Rurl() function won’t work because these APIs don’t expect you to approve or save the record manually. These two APIs perform a function that doesn’t need to be reviewed or saved. The save function is included and processed with no option to manually intervene. Consequently once these APIs are completed they are looking for direction on what to do next. If you don't tell them where to go they will give you an XML response page. This isn't necessarily and error, it is just an unterminated API call. This is where you use an rdr function to either return to some URL or to continue on to perform some other API call.

An rdr= example:

If we look at what’s included in this example, we start out building the URL that is being launched and add to it the components that make up a valid URL. The URL will include the API, API_EditRecord and includes an optional apptoken and edits the record where rid equals the [Record ID#] field and makes the field with the field id of 138 checked. Field 138 is a checkbox field. After it checks the checkbox it is redirected via the (rdr=) to display the record it just edited. Notice the (a=dr) or display record and the record id or (rid=) is equal to the [Record ID#].

The important distinction is that all of this happened without you having to manually acknowledge what was being added or edited. It was pre-programmed.

Hopefully this has shed some light on the "&z="&Rurl() vs. rdr functionality.

For more information on creating formulas in QuickBase you can review the documentation below, speak with one of our tech support staff or jump into one of the 10 live webinars we hold each week.

Documentation Links:
Using Formulas in QuickBase
Formula Functions Reference
read about GenAddRecordForm in the API Guide
read about AddRecord in the API Guide
read about EditRecord in the API Guide