Add a search box to a table's top bar

  • 0
  • 1
  • Question
  • Updated 4 months ago
  • Answered
  • (Edited)
So we are constantly going back and forth to the table icons to search... we use QBase as a CRM, so for example, we are looking at a customer's record, and if we need to look up another customer, we hit the "Customers" button at the top table bar, then search. I'd like to have that search function on the top, on the line where we have the "new customer" green button, etc. This would save us a lot of clicking around. Any idea if this is possible? I couldn't find any way to edit that bar.
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb

Posted 4 months ago

  • 0
  • 1
So out of the box it would likely be a good feature enhancement, but currently there is nothing in the settings that has that as a feature. That said - if you're familiar with the Image Onload Technique and feel comfortable with scripting techniques, you could run a script with IOL that dynamically adds HTML to the page when it loads, and then add your own Javascript into the element to achieve the functionality you want. Credit to the link below for the building block behind it.
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=582&_ga=2.54479343.670650234...

With that - you can run a code page that does something like:

var input_html = "<input id='customer' type='text' placeholder='Search Customer #' style='border-radius:2px;height:25px;font-size: 12pt'>";
input_html += "<span style='cursor:pointer;margin-right: 25px' onclick='searchCustomers()' class='BrandBarIconDark Find DisplayInlineBlock WithText'></span>"
$("#pageNavBarActions").prepend(input_html)
Looks something like this when complete


This will add a search box next to the save button - all you would have to do is configure the searchCustomer() function in your code page and you'd be all set.

Chayce Duncan | Technical Lead
(720) 739-1406 | chayceduncan@quandarycg.com
Quandary Knowledge Base
(Edited)
Photo of Micro Dev

Micro Dev

  • 1,576 Points 1k badge 2x thumb
I guess whichever one is easier. Just trying to explore options for my app.

Thanks
To give context - what I've done in this past is: 

User enters their search and hits enter - 
First - do an API_DoQuery against a certain field (like customer name)
     If an exact match is found - meaning I only return one record, I take the user directly to that form. 
Else -
     if I find more than one option for that search, or don't find an exact match for what they entered, I redirect the user to the new report page querying using basic QB query syntax for their search.

If you are searching something like a company name - your best bet will be to just stick with the second item from above. You'll very rarely hit an exact match on things like names - so it'll be easier to just mimic a regular table search.

To do that - in your search() function - a simple solution is just to do something like: 

var fid = enter the field you want to search here
var search = input your user types into your search box

window.location = "https://realm.quickbase.com/tableDBID?a=q&query={'"; + fid + "'.CT.'" + search + "'}"
Basically your search box just takes in your entry and goes to a new page with that search box already filled in as your query.

Chayce Duncan | Technical Lead
(720) 739-1406 | chayceduncan@quandarycg.com
Quandary Knowledge Base
Photo of Micro Dev

Micro Dev

  • 1,576 Points 1k badge 2x thumb
Ok will play around with it and hopefully put together something.

Thanks for your help.

I don't know if you are following the BOL post but I needed to put in the custom branding which was taken away after using the BOL method.

So I added these few lines to add the custom logo back:

var header = document.getElementById("customBrandBar").tBodies[0]; //get the tbody element

//this line is optional if you want to change the background color.header.style.backgroundColor = "red"; 

var tr = header.childNodes[0];

var td = tr.childNodes[1];

var img=document.createElement('img');

img.src="the logo url";

//this line is optional if you want to resize the image
img.style.height = '7%';

td.appendChild(img);
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb
I will try to set aside some time for this. I think it needs to be a feature enhancement ultimately, so I may post that as a request as well. 
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb
I will try to set aside some time for this. I think it needs to be a feature enhancement ultimately, so I may post that as a request as well. 
Another option is to put a search icon on the Dashboard
The Dashbiard would load faster than a report if you limit the Dashboard to non report elements.
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb
When you say dashboard, are you talking about the home screen, or the header?
I mean the Main Dashboard where you go with the Home button.
(Edited)
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb
So that still creates the extra click then. It feels no different than going back to the customers table.
Photo of QuickBasePros (Laura Thacker)

QuickBasePros (Laura Thacker), Champion

  • 5,466 Points 5k badge 2x thumb
There's also the global search on the top row of the screen (magnifying glass); which you can limit in the permissions to specific tables.
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb
I think Dan's option is the simpler and cleaner option. I'm not comfortable enough with the coding side of things to go after Chayce's suggestion. I'll give this a shot and report back. Thanks!
Were you referring to me? I’m Mark. Just want to know if my suggestion is what you are going to try next.
Photo of moleman108

moleman108

  • 954 Points 500 badge 2x thumb
sorry I was. Got my names mixed up