Forms, Tables, HTML Add some spunk to your forms. Add formatting to your forms.
If you want to add a bit of separation to your form I stumbled onto this. Maybe it's published but this works. See attached video So you have "TABS" and "Text" for form formatting. Well, let's say you want to delineate an area in a form by putting a box around it. Editing Form: 1: (first "text" element.) <table style="width:100%;border:1px solid black"> 2: (last "text" element.) </table> You can encompass many fields on your form by putting the </table> further down. ------------------------------ Douglas Folk ------------------------------
How do I make a random color button?
We had a user request this thinking since there is no random command it could not be done. We tried a few methods but found a native method that works best and is really fun. First create a rich text formula field that will generate the random color - [Randomish Button Color] Note: We used Now() and built in fields to generate the Base 16 and at the bottom we have only listed 20 permutations of the over 700 available. var text hh = Case(ToText(Mod(Hour(ToTimeOfDay(Now())), 16)), "0", "0", "1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "a", "11", "b", "12", "c", "13", "d", "14", "e", "15", "f", ""); var text mm = Case(ToText(Mod(Minute(ToTimeOfDay(Now())), 16)), "0", "0", "1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "a", "11", "b", "12", "c", "13", "d", "14", "e", "15", "f", ""); var text ss = Case(ToText(Mod(Second(ToTimeOfDay(Now())), 16)), "0", "0", "1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "a", "11", "b", "12", "c", "13", "d", "14", "e", "15", "f", ""); var text ms = Case(ToText(Mod(MSecond(ToTimeOfDay(Now())), 16)), "0", "0", "1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "a", "11", "b", "12", "c", "13", "d", "14", "e", "15", "f", ""); var text dd = Case(ToText(Mod(Day(ToDate([Date Modified])), 16)), "0", "0", "1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "a", "11", "b", "12", "c", "13", "d", "14", "e", "15", "f", ""); var text zc = Case(ToText(Mod(Day(ToDate([Date Created])),16)), "0", "0", "1", "1", "2", "2", "3", "3", "4", "4", "5", "5", "6", "6", "7", "7", "8", "8", "9", "9", "10", "a", "11", "b", "12", "c", "13", "d", "14", "e", "15", "f", ""); // Permutations Case(Mod([Record ID#],20), 0, "#"&$mm&$dd&$hh&$ss&$ms&$zc, 1, "#"&$ms&$hh&$zc&$dd&$mm&$ss, 2, "#"&$ss&$mm&$ms&$dd&$hh&$zc, 3, "#"&$zc&$mm&$hh&$ss&$ms&$ms, 4, "#"&$zc&$mm&$ss&$hh&$dd&$ms, 5, "#"&$ss&$dd&$mm&$ms&$hh&$zc, 6, "#"&$hh&$zc&$mm&$ms&$dd&$ss, 7, "#"&$ss&$ms&$hh&$mm&$dd&$zc, 8, "#"&$hh&$ms&$ss&$mm&$zc&$dd, 9, "#"&$dd&$mm&$hh&$zc&$ss&$ms, 10, "#"&$dd&$ms&$mm&$ss&$zc&$hh, 11, "#"&$zc&$mm&$ss&$ms&$hh&$dd, 12, "#"&$mm&$hh&$ss&$dd&$ms&$zc, 13, "#"&$ms&$ss&$dd&$hh&$mm&$zc, 14, "#"&$mm&$hh&$ms&$dd&$ss&$zc, 15, "#"&$zc&$ss&$dd&$hh&$ms&$mm, 16, "#"&$zc&$hh&$ms&$dd&$mm&$ss, 17, "#"&$ss&$hh&$dd&$mm&$zc&$ms, 18, "#"&$mm&$hh&$dd&$ms&$zc&$ss, 19, "#"&$ss&$ms&$zc&$hh&$dd&$mm, "") Then create a formula checkbox field that will determine if the text should be black or white. [Threshold] - var number threshold = 105; var text R = Right(Left([Randomish Button Color],3),2); var text G = Right(Left([Randomish Button Color],5),2); var text B = Right([Randomish Button Color],2); var text RL = Case(Left($R,1), "f", "15", "e", "14", "d", "13", "c", "12", "b", "11", "a", "10", "9","9", "8","8", "7","7", "6","6", "5","5", "4","4", "3","3", "2","2", "1","1", "0"); var text RR = Case(Right($R,1), "f", "15", "e", "14", "d", "13", "c", "12", "b", "11", "a", "10", "9","9", "8","8", "7","7", "6","6", "5","5", "4","4", "3","3", "2","2", "1","1", "0"); var text GL = Case(Left($G,1), "f", "15", "e", "14", "d", "13", "c", "12", "b", "11", "a", "10", "9","9", "8","8", "7","7", "6","6", "5","5", "4","4", "3","3", "2","2", "1","1", "0"); var text GR = Case(Right($G,1), "f", "15", "e", "14", "d", "13", "c", "12", "b", "11", "a", "10", "9","9", "8","8", "7","7", "6","6", "5","5", "4","4", "3","3", "2","2", "1","1", "0"); var text BL = Case(Left($B,1), "f", "15", "e", "14", "d", "13", "c", "12", "b", "11", "a", "10", "9","9", "8","8", "7","7", "6","6", "5","5", "4","4", "3","3", "2","2", "1","1", "0"); var text BR = Case(Right($B,1), "f", "15", "e", "14", "d", "13", "c", "12", "b", "11", "a", "10", "9","9", "8","8", "7","7", "6","6", "5","5", "4","4", "3","3", "2","2", "1","1", "0"); var number Rvalue = (ToNumber($RL) * 16 + ToNumber($RR))*0.299; var number Gvalue = (ToNumber($GL) * 16 + ToNumber($GR))*0.587; var number Bvalue = (ToNumber($BL) * 16 + ToNumber($BR))*0.144; If(255-($Rvalue+$Gvalue+$Bvalue)<$Threshold, true, false) Now you have the 2 pieces and need to create the rich text formula button - // Begin button style var text bgcolor = [Randomish Button Color]; var text txtcolor = If([Threshold]=false,"white","black"); var text style = "style=\"text-decoration: none; box-shadow: 3px 3px 1px #888888; background:" & $bgcolor & "; border-radius: 3px; padding: 5px 8px; color: " & $txtcolor & "; display: inline-block; font-weight: normal;font: bold 700 24px/1 \"Calibri\", sans-serif; text-align: center; text-shadow:none;"; // End button style "<a " & $style & " href=\"javascript:" & "$.get('" & $URL & "', function(){" & "location.reload();" & "});" & "void(0);\">Crazy Button Name</a>" Note: $URL is the variable you can create to perform the button actions and the button is designed to return to any location that the button is used.
Magic Buttons to Collapse/Expand Sections & Scroll to Top
This post describes how to build a set of three buttons that aid navigation of long forms. When a form has many sections and fields, one solution is to use Tabs. However, if there are several sections within a Tab, users may still have to do a lot of scrolling and clicking. The idea proposed here is to create a set of three buttons that float, always visible, at the bottom of the form: [Back to Top] [Collapse] [Expand] [Back to Top] simply scrolls to a standard location near the top of any page (#navTop). While Quick Base has a handy icon to scroll to the top, it's placed near the top. Normally you want to do this when you are near the bottom, so it's handy to have a button located there. [Collapse] and [Expand] use fairly simple JavaScript to collapse or expand all sections. The versions described here are compatible with Tabs in the following sense. They only collapse or expand within the current Tab. With these buttons, a user who knows the structure and contents of a long form can collapse them all, then scan the section-headers to open just the one section they need. Or, they can set a preference by collapsing all, then clicking on their favorite sections to expand them, and leaving the form that way each time they exit. Of course, there's always the option to open up all the sections, if the user really likes to scroll. In short, the three magic buttons accommodate the preferences of just about any user. Step 1. Create a formula-text field called "Bottom Nav" for the three buttons. The field's checkboxes must have "Allow some HTML ..." checked and should have the "Reportable" and "Searchable" boxes unchecked. For the formula, insert this: var text buttonStyle=" class='Vibrant' style='padding:3px; white-space:nowrap; vertical-align:middle; line-height:21px;'"; var text imageStyle=" style='vertical-align:middle; background-color:white;'"; "<span style='font-size:120%; font-weight:bold; position:fixed; bottom:20px; left:44px; z-index:1000;'>" & "<a href='#navTop'" & $buttonStyle & ">" & "<img class='TblIcon20 Upload' " & $imageStyle & ">" & " Back to Top</a>" & "<a href=\"javascript:" & [Collapse Sections] & "void(0);\"" & $buttonStyle &">" & "<img class='TblIcon20 Animation' " & $imageStyle & ">" & " Collapse</a>" & "<a href=\"javascript:" & [Expand Sections] & "void(0);\"" & $buttonStyle &">" & "<img class='TblIcon20 OSI_Model' " & $imageStyle & ">" & " Expand</a>" & "</span>" Some explanation ... The buttonStyle and imageStyle variables set the size and style of the buttons to be reasonably compatible with Quick Base standards. The <span> is set to be positioned at the bottom, with a z-index that floats it above all other elements of the page, left-aligned so as to obscure data-entry fields and thus prevent mis-clicks. As shown here, all three buttons use one of the standard images that Quick Base supplies as table-icons. You may prefer to use other images, or skip the images and just use plain text for the buttons. Finally, the [Collapse] and [Expand] buttons require some JavaScript. That's the next step. Step 2. Create two global variables, in the Variables section of Settings for your app. "Collapse Sections" is the name you should give to a text variable that contains the following: $('.sectionTitle').each(function(){ var $titleWrap = $(this).parent(); var $expandedTitle = $titleWrap.hasClass('expanded') && (this.innerHTML.length > 0); var $tabWrap = $titleWrap.parent().parent(); var $hiddenTab = $tabWrap.hasClass('ui-tabs-hide'); if($expandedTitle && !$hiddenTab){ this.click(); } }); $('#backToTop').click(); In words, this script finds every expanded section within the current tab, clicks each of those section-headers to make the section collapse, then scrolls up. "Expand Sections" is the name you should give to a second text variable that contains the following: $('.sectionTitle').each(function(){ var $titleWrap = $(this).parent(); var $collapsedTitle = $titleWrap.hasClass('collapsed') && (this.innerHTML.length > 0); var $tabWrap = $titleWrap.parent().parent(); var $hiddenTab = $tabWrap.hasClass('ui-tabs-hide'); if($collapsedTitle && !$hiddenTab){ this.click(); } }); $('#backToTop').click(); This script finds every collapsed section within the current tab, clicks each of those section-headers to make the section expand, then scrolls up. Step 3. Place the "Bottom Nav" field on your form. It should be the last field on the form. In addition, it should be immediately preceded by a section-header that has no name. Why a nameless header? Because it will be exempted from the collapsing and expanding actions of the JavaScript. We don't want the buttons to hide (collapse) or expose (expand) themselves! This last point reveals an important caveat for the whole method described here. It works best on forms in which all sections, except the last one containing the buttons, have a name. That's because of the way Quick Base handles nameless sections; essentially, they are intended to stay expanded (within a Tab, if applicable).Buttons with color, function and flexability
I wanted a button that could be colored to any color, change data, disappear if criteria was met and return to the same location it was used thus allowing end users to have the button wherever they wanted and in multiple locations. Also I wanted to have name of the button be dynamic and the name change based on data in a the record. So pretty much I wanted most everything. Being a very low code person I used the forum and Quick Base support. I found that nobody was asking for all of that. In a matter of a week I have pieced together the code thanks to many contributors in the forum (if you answered anything on any of the items I wanted you are on the list). Here is the code and below some explanation, I hope this can help someone looking as much as I wanted. This is used in a text-formula field with html enabled. It is a check-in button (we also have a version that changes to a check-out after check-in is clicked...basically multi-function) // Begin button style var text bgcolor = "#A5E294"; var text txtcolor = "black"; var text style = "style=\"text-decoration: none;\n\n box-shadow: 3px 3px 1px #888888; \n\n background:" & $bgcolor & ";\n\n border-radius: 3px;\n\n padding: 5px 8px;\n\n color: " & $txtcolor & ";\n\n display: inline-block;\n\n font: bold 700 24px/1 \"Calibri\", sans-serif;\n\n text-align: center;\n\n text-shadow:none;"; // End button style var text URL = URLRoot() & "db/" & Dbid() & "?a=API_EditRecord&rid=" & [Record ID#] & "&_fid_13="&URLEncode(Now()) & "&_fid_25=" & URLEncode("Tech Onsite"); If(ToText([Lead Tech Day 1 Check-In])="", "<a " & $style & " href=" & "javascript:" & "$.get('" & $URL & "',function(){" & "location.reload(true);" & "});" & "void(0);" & "> Check-In "&[Technician Name]&"</a>", "") #A5E294 ? HTML color code for button color Black ? color wording for button text. This can be replaced with HTML color code & "&_fid_13="&URLEncode(Now()) & "&_fid_25=" & URLEncode("Tech Onsite"); This is the section of code defining the changes to make. Make sure that the last change end with a semi-colon! If(ToText([Lead Tech Day 1 Check-In])="", The if statement that creates the condition to show the button Check-In "&[Technician Name]&" The name of the button, note the syntax to use if wanting to have a dynamic name with data from a field in the record
Create a Summary Report from a Multi-select Dropdown Field
Suppose I have a Multi-select field with options (A, B, C) and 100 records where the field is used. Is it possible to create a report that counts each time an option is selected in each record? For example: A - 5 B - 8 C - 2 Above would indicate that the option A has been selected 5 times out of all of my records, B has been selected 8 times, and C has been selected 2 times. When I create a summary report for each I just get the count of each combination. Like A - 5 A;B - 3 A;B;C - 2Custom buttons for tabbed forms: Save & Next Tab, Save & Same Tab
Here's a method to do variants of "Save & keep working" within a tabbed form. First, I'll explain how to create a "Save & next tab" button. Then, with slight modification, I'll show "Save & same tab". [1] On the form properties, do notcheck "Show Save & close and Cancel buttons at the end of this form" anddo check "Show save & keep working choice" [2] Create a rich-text-formula field called, say, "Custom Save and Next Tab". Temporarily, you can fill it the text "Save & next tab". Eventually, after completing the steps below, it will contain a custom Page and several custom Variables, like this: [customButtonScript1] & "saveAndNextTab.js" & [customButtonScript2] & [customButtonStyleSKW] & "Save & next tab" & [customButtonEnd] [3] In the settings for you app, click on Variables and add one called "customButtonScript1". You can use a different name, if you wish, but be sure to use that name in the first like of the rich-text-formula in step [2]. Whatever you call it, the variable should contains the following. The quotes are important. However, remove the spaces in h t t p s, use your company's setting for "yourdomain" and your app's id instead of "yyy999zzz" <a href='javascript:($.getScript("h t t p s://yourdomain.quickbase.com/db/yyy999zzz?a=dbpage&pagename= [4] Next, in the settings for you app, add a Page called "saveAndNextTab.js" (or another name you prefer, provided you use it in the second line of the rich-text-formula field"). The page should contains exactly this: var nextTabLink=$("li.ui-tabs-selected").next("[style!='display:none']").children("a"); $("#saveAndKeepWorkingMenuOption").click(); var noErrorDialog=$('#qbDialog').length==0; if( noErrorDialog ){ $(nextTabLink).click(); location.assign('#navTop'); }; In words, this script is (a) finding the currently selected tab, then the next that is not hidden, and it's name; then (b) clicking the standard "Save & keep working" button, emulating a user; and (c) checking for a pop-up error message, e.g., about failing to supply a required field; and finally (d) clicking the next non-hidden tab-name and scrolling up to where the tab-row will be visible. [5] Back on your app's settings, add another Variable to close the script. Call it "customButtonScript2" if you are sticking to the naming in step [2]. It must contain exactly this: "));void(0); [6] Next you need to style the custom button. I prefer doing so as follow, to make it resemble the standard save buttons. Add another Variable in you app's settings called "customButtonStyleSKW" which contains this: ' class='Vibrant Tall' style='font-size:14px; color:white; background:#6BBD57; white-space:nowrap;'> [7] Finally, in add one more Variable in your app's settings, called "customButtonEnd", containing simply: </a> Of course, you could just use "</a>" as the final line of your rich-text-formula field, but I prefer the additional Variable for readability ... and just in case I ever want to make some sort of global change for all my custom button's endings. [8] Oh, and to get this button on your forms, add it at the end of every tab. (On the last tab, it will stay there, after not finding any next tab.) Naturally, you will want to use an empty "alternate label" for that row of the form, and set it for add and edit modes only. To modify this method for "Save & same tab", the main change is in the first line of the script in step [4]. Use this: var sameTabLink=$("li.ui-tabs-selected").children("a"); Also, later in the script, use: $(sameTabLink).click();Can you configure the Copy Master/Detail Records button?
How much flexibility do you have with the Copy Master/Detail Records button? I would like to be able to configure a couple things: Exclude fields from being copied Edit the values in certain copied fields Is this possible? I suppose I might be able to make a custom copy button using the API, but if possible this would be a much better option.
Can I set up Web Hooks so , after a multi-record edit (like Grid Edit) a web hook called once for each record editted?
I am trying to make a call to an external service every time a record is editted. The web hook works fine when one record is editted, but in grid edit, the web hook only fires once, even if many records are editted.
