How can I place a search on the details view?

[onoehring]

Hi,

is it easily possible (or .. is this manual work?) to put a search field which one can see in the table view also in the details view?
My intention is searching for a unique field (only) in the details view and getting directly from details view of record A to the details of the search record B.
I am thinking of something like this:

ec202003-04.png (9.9 KiB) Viewed 14999 times

Thanks
Olaf

[D Oliveira]

Hi,

is it easily possible (or .. is this manual work?) to put a search field which one can see in the table view also in the details view?
My intention is searching for a unique field (only) in the details view and getting directly from details view of record A to the details of the search record B.
I am thinking of something like this:
ec202003-04.png

Thanks
Olaf

Im not sure about the "appgini" approach but here you go:

http://jsfiddle.net/wjLmx/23/

[onoehring]

Hi D Oliveira,

thanks for the link, but I think it is not what I am looking for (would rather like to use an existing AG approach than build something myself).
In my screenshot I would like to be able to search for a "containercode" (unique) directly from the details page of the "containerliste". I know, that AG would search in all fields, but in this case that would not be needed.

Olaf

[jsetzer]

Hi Olaf,

I'm not sure if this is what you want. If I understood correctly, you'd like to have a similar search-functionality in Detail View like it already is in Table View.

Did you try to copy and paste the html code of the search-input from the built-in table view? This should work.

I have tested it in a blank custom page. It should also work inside other pages.

Place the following html in your custom/customized page and replace YOURTABLENAME (first line) by your table name:

Code: Select all

<form enctype="multipart/form-data" method="post" name="mySearchForm" action="YOURTABLENAME_view.php">
    <div class="input-group" id="quick-search">
        <input type="text" id="SearchString" name="SearchString" value="" class="form-control" placeholder="Suche">
        <span class="input-group-btn">
            <button name="Search_x" value="1" id="Search" type="submit" onclick="document.myform.SelectedID.value = ''; document.myform.NoDV.value=1; return true;" class="btn btn-default" title="Suche"><i class="glyphicon glyphicon-search"></i></button>
            <button name="ClearQuickSearch" value="1" id="ClearQuickSearch" type="submit" onclick="$j('#SearchString').val(''); document.myform.SelectedID.value = ''; document.myform.NoDV.value=1; return true;" class="btn btn-default" title="Filter aus"><i class="glyphicon glyphicon-remove-circle"></i></button>
        </span>
    </div>
</form>

Custom page

ONKJps5vO2.gif (77.91 KiB) Viewed 14990 times

Caution
Don't nest this new <form> inside the default <form> of the detail view.

Best,
Jan

[jsetzer]

OK, after re-reading your question, I think there is a second task:

If I got it right, you'd like to directly get redirected to the detail view, showing the found record, right?

Please consider, there may be (a) no results, (b) exactly one result (c) multiple results or (d) errors after your search.

You will have to...

1. change the action-parameter in the form pointing to a new, custom search page
2. implement your own custom search function in PHP
3. fetch the SearchString from $_REQUEST
4. search for the record in the table
5. if there is exactly one record, redirect to TABLENAME_view.php?SelectedID=THEIDYOUHAVEFOUND
6. if there is more than one result, redirect to TABLENAME_view.php and pass the search string

Hopefully my answers will give you a good starting point. It would be great and helpful for others if you could post the final php codes here.

Best,
Jan

[D Oliveira]

Thats how I would do it:

1- Throw a form element in the templateDV html file
2- Add submit button that triggers javascript function, ajax call
3- Query db using string to be searched and LIKE operator, on ajax success function window.location.replace(.....?SelectedID=data)
or...
display table array in case count > 1

Hope it helps

[onoehring]

Hi Jan and D Oliveira,

thank you for your input. I am probably going to use an ajax typeahead for the search field which I can take from a different (custom) page and put it as a new form (as suggested) into the details page.

@Jan, your second mail with the list is a great input, especially 6 as I did not think of that possibility yet.

Olaf

[onoehring]

Hi,

took a look at the code and found a problem: The form element begins to early ... I can not place anything "above" (better to the right side) of the H1 tag.

Any suggestions where I should place the new search form?

ec202003-04.png (53.26 KiB) Viewed 14946 times

Olaf

[pböttcher]

Hi Olaf,
just to clarify. Once you search, you search for a unique code and once you hit enter you want that DV to be displayed, correct?

[onoehring]

Hi pbötcher,

yes, that is correct.
User will search for "containercode" which is unique. If it exists, the detail page (not below table view) of that record should be shown.
I think Jans idea above is nice, that if that record does not exist or "multiple" times (let's say user searches for 01 and we have containercode 101 and 201) table view can be opened filtered.

My problem is where to place the form, but you have some magic tricks in your pocket, so I am very keen to see your suggestion.

Olaf

[pböttcher]

Hi Olaf,

you can try this:

add to your hooks/TABLE-dv.js file

Code: Select all

$j(function() {
	$j('h1').addClass('col-sm-8');
	$j('h1').after('<h1 class="col-sm-4">\
		<form id="form_search" action="table6_view.php" method="post">\
		<div class="input-group" id="quick-search">\
		<input type="text" id="SearchString" name="SearchString"  class="form-control" placeholder="Quick Search">\
			<span class="input-group-btn">\
			<button name="Search_now" value="1" id="Search_now" type="submit"  class="btn btn-default" title="Quick Search">\
			<i class="glyphicon glyphicon-search"></i>\
			</button></span></div></form></h1>');
	})

and add to your hooks/TABLE.php file in the init part:

Code: Select all

	function TABLE_init(&$options, $memberInfo, &$args) {
		if (!empty($_POST['SearchString']) && $_POST['current_view']='DV') {
			$res=sql("SELECT * from TABLE where containercode like '%".$_POST['SearchString']."%'",$eo);
			if (db_num_rows($res) == 1) {
				$row = db_fetch_assoc($res);
				redirect("table6_view.php?SelectedID=".$row['TABLE_PK']);
				exit;
			}
		}

return TRUE;
}

Replace TABLE with your table, TABLE_PK with the PK of that table and check the sql statement to match what you are looking for. I assumed you look for the containercode

[onoehring]

Hi pbötcher,

thanks a lot for the code. I will report back, once I tried it (but it can take a few days).

Olaf

[onoehring]

Hi pbötcher,

as promised, I report back.
Your solution is great. Thank you very much.

For the interested reader:
I noticed though, that when searching from the table view, only the containercode column is being searched. I think you might have missed an equal sign in the if. Also post variables TV and DV are (imho) not always set as expected: TV for example is (of course) not set when you click on the navigation menu link or you click on the title, but when you submit the search on the TV. Also that post stays fixed until started from the details page....

Anyways, I was able to fix those little nasty not-as-supposed-to things. I introduced another hidden field into the js and changed the php a little.
In tablename-dv.js:

Code: Select all

$j(function() {
	$j('h1').addClass('col-sm-8');
	$j('h1').after('<h1 class="col-sm-4">\
		<form id="form_search" action="TABLENAME_view.php" method="post">\
		<div class="input-group" id="quick-search">\
		<input type="text" id="SearchString" name="SearchString"  class="form-control" placeholder="Search">\
			<span class="input-group-btn">\
			<button name="Search_now" value="1" id="Search_now" type="submit"  class="btn btn-default" title="Search">\
			<i class="glyphicon glyphicon-search"></i>\
            </button></span></div>\
            <input type="hidden" id="DetailsViewSearch" name="DetailsViewSearch" value="1"></form></h1>');
	})

and in tablename _init function

Code: Select all

	if (!empty($_POST['SearchString']) && $_POST['DetailsViewSearch']=='1' ) {							
		$save_quicksearch = makeSafe($_POST['SearchString']);
		$res = sql("SELECT * from TABLENAME where FIELDTOSEARCH like '%".$save_quicksearch ."%'",$eo);
		$_POST = array();	//clear search
		if (db_num_rows($res) == 1) {
			$row = db_fetch_assoc($res);
			redirect("TABLENAME_view.php?SelectedID=".$row['TABLE_PK']);
			exit;
		}
	}

It looks like this:

ec202003_new_searchfield.png (11.14 KiB) Viewed 14609 times

And it behaves like this:
If something is searched on the TABLE view: Results are shown at the table view, just normal (even if only 1 hit). All columns of the table view are searched.
If something is searched on the DETAIL view (search is done as contains: %searchterm% ) :
a) No hits -> show table view with "no hits"
b) exactly ONE hit -> one the record that has been found.
c) multiple records are found (e.g. only a part of the searched string was entered and that occurs in multiple records): results are shown at the table view, just normal

Perfect. Again pbötcher, thank you very much!
Olaf

[D Oliveira]

great work here guys, very useful, thank you =)

Cheers!
David O.

[jsetzer]

Very well done!

User Interface:
An alternative could be placing the search form into navbar as shown below (see "Barcode" search form):

Left

chrome_mPZRotr1n3.png (19.65 KiB) Viewed 14410 times

or Right

chrome_Z8neYdffRH.png (18.57 KiB) Viewed 14410 times

or maybe even here

qaCfdc3S9o.png (16 KiB) Viewed 14410 times

I got the HTML code for rendering such a searchform into a Bootstrap 3 navbar from here:
https://bootsnipp.com/snippets/9EVl


I have modified that code for my purposes:

Code: Select all

<li class="... pull-right">
  <form class="... navbar-form" role="search" action="" method="POST">
    <div class="... input-group">
      <input class="... form-control" name="SearchString" placeholder="Barcode">
      <div class="... input-group-btn">
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
    </div>
  </form>
</li>

Take care!
Jan

[onoehring]

Hi Jan,

great idea too. Thank you.
Olaf