Add a search box to a table's top bar

  • 0
  • 1
  • Question
  • Updated 2 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 2 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 moleman108

moleman108

  • 954 Points 500 badge 2x thumb
this is exactly what I wanted, but I have no idea about IOL. If you can give me an of how to pull that off, I'll look into it.
So this link here: https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=582&_ga=2.147307188.2014909509.1553519734-272478357.1552062926
Shows you the code of embedding IOL in the branding element. To do it - open the Settings > Branding Page in your app, open your dev console in your browser - and then copy and paste the code to turn IOL on from that link, then hit enter. 

When its enabled - it basically means that any time your application loads it will try and run your script since the branding element is always present. 

The example code references a page called moduleBOL.js - so the last step is to also create a Quick Base code page (similar to a home page - but code based). Thats where you'll actually embed all your code to build your search button. You can try and do the standard console.log("hello world"); in the code page and watch the console to see if it came together.

Hopefully that gets you started. Feel free to shoot me an email and I can give you more info / send more screenshots or code snippets

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

Micro Dev

  • 1,454 Points 1k badge 2x thumb
I set this up. I like it. I need some help setting up the searchCustomer() function.

Can you help please.

Thanks
The answer depends on what you're trying to accomplish. Are you hoping that if you find an exact match to your search that it opens it up the form view? Or are you just trying to do a search similar to the normal table search that it shows all the match in a list view?
 
Photo of Micro Dev

Micro Dev

  • 1,454 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,454 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. 
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 67,760 Points 50k badge 2x thumb
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?
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 67,760 Points 50k badge 2x thumb
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_IDS

QuickBasePros_IDS, Champion

  • 4,208 Points 4k 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!
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 67,760 Points 50k badge 2x thumb
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