FirePower X - TwwSearchBox using FireMonkey
Hey guys! Welcome to our new series we will be showing you different tutorials on how to implement different tools that Woll2Woll Software offers. Today we are going to focus on the FirePower SearchBox and how to add that feature to your table and sync that up with your own database. You will need to have Embarcadero's RAD Studio, preferably at least 10.4. The video tutorial above uses Delphi, but you can do the same thing with C++ Builder.
What does the FirePower TwwSearchBox do for you
The TwwSearchBox can be used on the desktop or on mobile devices and allows you to define one or more fields that are automatically searched for in the entire dataset, using the user's entered text to find the matching records. So effectively, the searchBox will filter your dataset so only matching records are shown. In addition, you can also configure the SearchBox so it continues to display all the data, but will move the record pointer to the first matching record.
The user's desired matching text is entered into a single edit control, which is particularly useful on the mobile space where desktop space is at a premium.
The type of match can be configured to be anywhere in the field's data or only match the beginning of the text. In addition, you can also configure the SearchBox so it continues to display all the data, but will move the record pointer to the first matching record.
How do we set up our application to use the TwwSearchBox:
1. Connect data to your application using datasets and bind sources
In order to do this for demo purposes, we are going to start out by adding one “TFDMemTable’s” from the Pallete. Normally you will want to use a real database connection so that your data is persistent, meaning changes can be edited and saved. You can do this by using TFDTable and TFDConnection, but for our demo we are going to simplify this part of the setup by using TFDMemTable. We will also then right click the TFDMemTable, and then add a bind source, which will allow us to connect the data to the data grid.
Now we need to link this data to our data grid. But first, we need to insert one of the grids that come within Woll2Woll Software. Drag a data grid, for this example, I will drag a TwwDataGrid from the Pallete, and drag it onto my Master Grid
Next, let’s drag and drop the TwwSearchBox from the Pallette. Now we need to link it to the dataset, go to Object Inspector, go to dataset, click the dropdown and select your database (in my case, I will add the bindsource). Next, you need to align your data grid and search box to an area of the screen. In my example, I will align the search box to the top and the data grid to the client.
2. Have the SearchBox know what to search for by adding search fields
Without adding or deleting search fields, your search box won’t know what to search for as you type in numbers or letters. In my example, I will add the fields, “last name,” “first name,” “company name,” and “city.”
Make sure to also add buttons of your choosing to add a professional aesthetic. I will add a button that says “search”
Now let’s run the program and see what happens. The search box allows me to filter text only relating to the characters that I have typed and that exist in the database.
3. Make the SearchBox case insensitive or sensitive
Another important element that you will have to change or add is to make sure when you type that it is or is not case sensitive. Case Sensitive means if I type a capital “B,” only words with a capital “B” will show up. Anything that is a lower case “b” will not. If I make it case insensitive, then anything with the letter “b” will show up, capital or not.
To make it case insensitive, click on the search box, go to with filter properties under the object inspector and make the “LikeSupportUpperKeyword” and check the box to be true.
4. Change the Style of Searching
If you want to change the style that you search, for example rather than having to search the word from the beginning, I’m going to change all the search fields to allow me to search within anywhere of the text. So if I’m trying to search for a company called “The Depth Divers” but I want to type “diver” so that it comes up, I can click on the search field (within the object inspector), and then change it from “sbfmtMatchStart” to sbfmtMatchAnywhere.”
Make sure to email us at if you have any questions!
For Sales: email@example.com
For Support: firstname.lastname@example.org