How can I place a search on the details view?

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

How can I place a search on the details view?

Post by onoehring » 2020-03-04 15:45

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
ec202003-04.png (9.9 KiB) Viewed 16748 times
Thanks
Olaf

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: How can I place a search on the details view?

Post by D Oliveira » 2020-03-04 17:12

onoehring wrote:
2020-03-04 15:45
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/

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How can I place a search on the details view?

Post by onoehring » 2020-03-04 17:50

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

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: How can I place a search on the details view?

Post by jsetzer » 2020-03-04 18:09

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
ONKJps5vO2.gif (77.91 KiB) Viewed 16739 times

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

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: How can I place a search on the details view?

Post by jsetzer » 2020-03-04 18:33

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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: How can I place a search on the details view?

Post by D Oliveira » 2020-03-04 20:11

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 :)

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How can I place a search on the details view?

Post by onoehring » 2020-03-05 13:57

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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How can I place a search on the details view?

Post by onoehring » 2020-03-05 14:38

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
ec202003-04.png (53.26 KiB) Viewed 16695 times

Olaf

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: How can I place a search on the details view?

Post by pbottcher » 2020-03-07 12:21

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?
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How can I place a search on the details view?

Post by onoehring » 2020-03-07 12:59

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: How can I place a search on the details view?

Post by pbottcher » 2020-03-07 15:31

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
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How can I place a search on the details view?

Post by onoehring » 2020-03-07 16:57

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

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: How can I place a search on the details view?

Post by onoehring » 2020-03-10 09:36

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
ec202003_new_searchfield.png (11.14 KiB) Viewed 16358 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

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: How can I place a search on the details view?

Post by D Oliveira » 2020-03-11 13:06

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

Cheers!
David O.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: How can I place a search on the details view?

Post by jsetzer » 2020-03-11 15:10

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
chrome_mPZRotr1n3.png (19.65 KiB) Viewed 16159 times

or Right
chrome_Z8neYdffRH.png
chrome_Z8neYdffRH.png (18.57 KiB) Viewed 16159 times

or maybe even here
qaCfdc3S9o.png
qaCfdc3S9o.png (16 KiB) Viewed 16159 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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools


Post Reply