Lat/Long
I need to build a Heat Map for our executive team displaying saturation of certain geographically defined areas. Sadly, QB doesn't allow for a heat map organically, and most tools require the use of Lat/Long in order to render correctly. Does anyone know of a formula that would convert the organic "Address" field into a Lat/Long? Thanks, Mike
Working Copy to Clipboard Button
I've created a button to copy the content of a field to the clipboard that I thought would be useful to others. It copies the content of the field and then shows an alert that confirms what was copied. I've tested it with Chrome and Firefox which works, Edge did not. I used a Vibrant button, which allows me to put it into a Rich Text field with other buttons, instead of a Formula URL field. It will work with the URL field as well if you remove the button code. Hope this helps. Dana var text CB= URLEncode([Some Field]); var text Alert= URLEncode([Some Field] & " Was Copied to the Clipboard"); "<a class='Vibrant Success' style=\"border:0px solid green; background-color:green; text-align: center;\"href=" & "javascript:{" & "navigator.clipboard.writeText('" & $CB & "').then(function(){" & "},function(){" & "});" & "alert('" & $Alert & "');" & "};" & ">Copy to the Clipboard</a>"
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).
How to display a thumbnail image on a table report
One of my favorite tips learned at EMPOWER2020 was from a session Chris Hutchens delivered titled Building for Mobile. He shared how to get a thumbnail image of a photo to display in a table report. While the session was geared towards mobile users, it's applicable to anyone that wants to show an image in a table report. I created a quick video to show demonstrate that little gem:https://youtu.be/M7p71Yo770c If you'd like to try this in one of your apps, simply watch the video and copy this code snippet to paste into a formula - rich text field: If(Length([Photo])=0,"","<img width=\"150\" src=\""&URLRoot()&"up/"&Dbid()&"/a/r"&[Record ID#]&"/e31/v0\"/>") Enjoy! ------------------------------ Freddie Sabbs Senior Solutions Consultant Quick Base fsabbs@quickbase.com Cambridge MA ------------------------------
Capturing Query String Parameters On Web Forms
I haven?t found many examples of Web Forms on Quick Base where you could have a lead gen / simple setup that posts directly into Quick Bases database. Our shop primarily works in Wordpress, which can be achieved, if you use a plugin like Zapier, but I wanted to share a tutorial with creating a web form and setting up hidden fields for info you may want to capture in query string parameters. Lets say you have a URL www.example.com. You may have a series of arguments passed like Google UTM code to capture campaign information, so the URL will look like this: www.example.com/?campaignID=123&whatever=someValue This tutorial shows how to set this up manually. This does not cover form creation if you?re using a form plugin. This is purely a custom solution. There's a few steps in creating Web Forms in Quickbase. Using the URL above, you would obviously switch out the parameters with your own and reflect in the code below: STEP #1: CREATE A TOKEN You must create an Application Token for the form to access the app. To do this: Go to the apps homepage settings => App Properties => And click on "Manage Application Token" under Advanced settings. Click New Application Token. Type in a description and click OK. If the Web Form wizard in the next step provides you with an Application Token, you can create a new token or assign to an existing token. STEP #2: CREATE A WEBFORM: After the token is created, you can go into Quick Base and create a new table with fields you want to display on the form. For all hidden fields, you can create them as text fields for now, since Quickbase does not have a hidden field type. Next, you can go through the form wizard: https://login.quickbase.com/db/6mztyxu8?act=DBPage&pagename=formWizard.html STEP #3: EDITING A WEBFORM TO CAPTURE QUERY STRING PARAMETERS The form wizard produces static HTML, which may need to be modified if you want to make any of the fields hidden. To do this, change: <input type=text> to <input type=hidden> We typically capture values from query string parameters into hidden fields, which can be done through JS or PHP. Either method will work; basically boils down to your preference in coding. The code bolded below is custom code that?s NOT generated by the wizard, that needs to be included in order for this to work. IF YOU PREFER JS: <!-- GET JS --> <script> // Parse the URL parameter function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); //if (!results) return null; if (!results) return ''; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } // Give the parameter a variable name var dynamicContent = getParameterByName('campaignID?); </script> <!-- END OF GET JS _ <!-- QB FORM --> <h2>Some Form</h2><form name=someform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://urlthatquickbasegenerates > <input type=hidden name=fform value=1> <table> <tr><td class="m">Name</td> <td class="m"><input type=text size=40 name=_fid_6 ></td></tr> <tr><td class="m">Email</td> <td class="m"><input type=text size=40 name=_fid_7 ></td></tr> <tr><td class="m">Phone</td> <td class="m"><input type=text size=40 name=_fid_8 ></td></tr> <tr><td class="m">Hidden</td> <td class="m"><input type=hidden size=40 name=_fid_9 id=?example? value=""></td></tr> </table><input type=hidden name=rdr value='http://www.example.com'>;; <input type=submit value=Save> </form> <br />Powered by QuickBase <a href="http://www.quickbase.com/">Online Database</a> <script lang="javascript"> function CheckForOther (item, origlen) { var sitem = item.options[item.selectedIndex]; if (item.selectedIndex == (item.length - 1)) { var val = prompt ("ADD A NEW CHOICE:", ""); if (val == null) item.selectedIndex = 0; else { var slen = item.length; if (slen == origlen+1){ item.options[slen] = new Option (sitem.text, sitem.value); } item.options[item.length-2].text = val; item.options[item.length-2].value = val; item.selectedIndex = item.length-2; } } } </script> <script lang=javascript> function validateForm(theForm) { } </script> <script type="text/javascript"> function myFunction() { document.getElementById(?example?).value = innerHTML = dynamicContent; } // Required to load parameter into input field window.onload = function() { myFunction(); } </script> IF YOU PREFER PHP <h2>Some Form</h2><form name=someform method=POST onsubmit='return validateForm(this)' encType='multipart/form-data' action=https://urlthatquickbasegenerates > <input type=hidden name=fform value=1> <table> <tr><td class="m">Name</td> <td class="m"><input type=text size=40 name=_fid_6 ></td></tr> <tr><td class="m">Email</td> <td class="m"><input type=text size=40 name=_fid_7 ></td></tr> <tr><td class="m">Phone</td> <td class="m"><input type=text size=40 name=_fid_8 ></td></tr> <tr><td class="m">Hidden</td> <td class="m"><input type=hidden size=40 name=_fid_9 value="<?php echo $_GET[?campaignID?]; ?>"></td></tr> </table><input type=hidden name=rdr value='http://www.example.com'>;; <input type=submit value=Save> </form> <br />Powered by QuickBase <a href="http://www.quickbase.com/">Online Database</a> <script lang="javascript"> function CheckForOther (item, origlen) { var sitem = item.options[item.selectedIndex]; if (item.selectedIndex == (item.length - 1)) { var val = prompt ("ADD A NEW CHOICE:", ""); if (val == null) item.selectedIndex = 0; else { var slen = item.length; if (slen == origlen+1){ item.options[slen] = new Option (sitem.text, sitem.value); } item.options[item.length-2].text = val; item.options[item.length-2].value = val; item.selectedIndex = item.length-2; } } } </script> <script lang=javascript> function validateForm(theForm) { } </script>
Using Table Aliases in the URLs
Hi Everyone. I just discovered that you can use table aliases instead of table dbids to access tables. Like this: https://<your quickbase domain>/db/<app dbid>/(<table alias>)?a=td The table alias is case insensitive but must be wrapped in parenthesis. This works with apis too. Bye Everyone.
Summary report on a number of checkboxes
I have a table which contains a number of different checkbox fields. Any combination of those fields can be checked on each record. I want to create a report which totals the number of records on the table for which each checkbox field is checked. Ideally I would also be able to drilldown on each different checkbox field. Is there a way to do this?
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 ------------------------------Web Form Post From Wordpress To Quick Base
If you?re using Open Source frameworks like Wordpress or Drupal, you can use form plugins to post to Quick Base. There?s a 3rd party plugin called Zapier, which helps you map to Quick Base, but I discovered another method that does not use Zapier. In this example, I?m using the Ninja Form plugin. I posted another tutorial (https://community.quickbase.com/quickbase/topics/capturing-query-string-parameters-on-web-forms) if you prefer to use the Quick Base form wizard, but you may have a preference using a ?no code? plugin that has conditional logic and web hooks built in. Ninja Forms has a premium add on called Webhooks, which I?ll be using in this tutorial. If you?re using public facing forms for data collection purposes and don?t need a token: Go to your App Home Settings Create new role called ?Internet? (or whatever). Click the checkmark on the Add column next to the table you want publicly accessible. Next, go to the Users table and click the ?Share app with new user? button. Select the role ?Internet? that you just created. Next, in NinjaForms, you can map your fields like the following screenshot. The remote URL will be your action URL minus any parameters. All your field ID?s can be mapped using ?_fid_#?, which you can find in your apps table settings.
