This topic is locked

Horizontal Search and Filter

1/22/2020 11:02:42 PM
Suggestions
A
acpan author

There are a few questions in the forum that asked about horizontal filter and search, such as this and this.
tldr (too long don't read) ? Cast your vote above.
Okay, here's the details: I attempted to create a demo project to check out how we can implement Horizontal Search and Filter, based on PHPR 10.03 and played with it with inspiration from another 3rd party web portal, which have really good feedback from users about the search and filter functions in a collapsible horizontal format.
For the demo i created:
My Horizontal Search and Filter Demo URL is here:

Default Search/Filter Panel Vs Horizontal Search/Filter
Note: the filter button for demo url Horizontal Search and Filer is just a dummy, it is to show where the filter and search button can be put side by side.
To implement Horizontal Advanced Search we can work around with the Page Designer to arrange the fields into Horizontal and use the Dashboard to have the upper part showing the Advanced Search and lower part showing the Grid results, as in one of the examples in the demo URL.
Horizontal Filter, we can't drag the fields, so i tried using CSS but it is far less than ideal, as in the demo link. But the idea of having Horizontal filter is there.
My personal Conclusion on the demo
Horizontal Search and Filter layout:

  1. It is more user friendly and natural.
  2. Users are more accustomed to the layout and mobile friendly.
  3. It is non intrusive and does not get in the way even you have many fields.
    Vertical Search Panel and Filter layout:
  4. When search fields are more, it requires scrolling up and down. This makes the UI difficult to maneuver. When search fields are less, it occupies a left column that gets in the way of the look and feel of the UI.
  5. To make the Web UI cleaner, i normally turn off the Search Panel and Filter totally, and use advanced search instead. But Advanced Search will divert you to another page or a popup.
  6. The selection of fields for search panel create a "pause" in the work flow, i.e. Pick what to search in order to search, like in the demo, on the left search panel, you need to figure out a bit about how to use the search and scroll down to look for the search button to click.
    Where as, in horizontal format, we can show many of the search fields at once, with a click to un-collapse the search panel above, like in the demo.
  7. The Filter Panel's data is layout vertical per data, so the more data you have the longer it occupies the screen.

    ==
    Suggestions to Sergey Team
    The PHPRunner Search and Filter are very powerful and easy to implement, it will be great to have optionally in a horizontal collapsible format where we can always implement without worry about complicating the UI.
    So, i would suggest for Sergey and team to consider
  8. a collapsible Horizontal Layout for both Advanced Search and Filter on top of a list/grid page.
  9. For Filter, the ability to drag and drop the fields, like Advanced Search currently does. It is better to have the filter data presented horizontally and user can pick them at one glance and collapse/uncollapse the filter with a click of button, as shown in the demo (the filter button on the right). There is only so much I can do using CSS to make the data horizontal, but the idea is there.
  10. Make the Horizontal Search and Filter an "insertable" item at Page Designer like "Simple Search" above a LIST/GRID page. (Without the need to use the Dashboard features for Advance Search).
    Cast your Vote and Comment
    Lastly, please play with the demo and have a feel about it, cast your vote above and comment here, if it is good, hopefully Sergey and team can consider that into the future releases.
    Thank you.

    ACPan

S
Steve Seymour 1/23/2020

Thank you ACPan for your demonstrations and attempts to produce a usable horizontal layout.
I fully agree with the absolute requirement for a horizontal filter panel.

In most cases I have encountered, considered table design and search fields mean that most searches can be accomplished with a simple search, so for me the advanced search, while a very useful addition is not often used in practice in established databases where users are aware of the data and know the database - in this case, simple search gets to the correct data quickly enough. The advanced search being left to an option if ever needed.

The filter panel however is essential - along with multiple selections per filter. Reducing multiple thousands of records by filtering on relevance and/ or certain field values is required on all databases.

T
Tayyab Ilyas 2/4/2020

I had suggested similar in the following post:
List page with search on top of each column

S
Steve Seymour 2/5/2020



I had suggested similar in the following post:
List page with search on top of each column


Very nice looking templates there <img src='https://asprunner.com/forums/file.php?topicimage=1&fieldname=reply&id=90175&image=1&table=forumreplies' class='bbc_emoticon' alt=':rolleyes:' />

Pete K 2/5/2020

I like these ideas and examples. Most of my apps contain at least one table with a lot of fields, and I hate devoting a big chunk of horizontal space to the filter panels on the left.

Admin 2/11/2020

Making search panel horizontal is fairly straightforward:

https://xlinesoft.com/blog/2020/02/11/making-search-panel-horizontal/

S
Steve Seymour 2/12/2020



Making search panel horizontal is fairly straightforward:

https://xlinesoft.com/blog/2020/02/11/making-search-panel-horizontal/


Nice example for the search panel.

The problem was the filter panel. Its the filter panel that needs to be horizontal, exactly as you have shown the search panel.

The top bar simple search with a filter panel layed out as you have in your example would be perfect.

A
acpan author 2/15/2020

Thanks for the blog on horizontal search panel, @Sergey.
I had followed the instructions and tested on my local PC. Search Panel in horizontal works on PC, however, in mobile mode or smaller screen, the search panel is not displayed, which unfortunately will make it unusable for many cases. Nevertheless, it is a very good starting point for future release to have a complete collapsible horizontal search panel.
As for the filter panel, as suggested, would be great to consider horizontal layout in the future release.
ACPan
==
Below are just some additional minor tweaks based on the @Sergey's blog, to re-position the buttons on the horizontal search panel, if anyone is interested:

  1. Move the Search button to the right
  2. Hide the Search In and the 3 dots buttons on the top of the panel.
  3. Collapse the panel on screen load.
    In the Javascript Onload Event:



// Align the Search Button to the Right

var searchPanel = document.querySelector('.panel-footer');

searchPanel.classList.add('r-align-right');
// Move the Search Panel Options (the 3 dots) button to the left. (un-comment the line below):

// $("#searchPanelOptions1").addClass("pull-left");
// Collapse the search panel on load by simulating a click to hide Search Panel (not very responsive)

// (Note: the new Search API is lacking this hide function)

$("#hideOptPanel1").click();
// Hide both the searchPanelOptions and ControlChooseMenu

$("#showHideControlChooseMenu1").hide();

$("#searchPanelOptions1").hide();




Making search panel horizontal is fairly straightforward:

https://xlinesoft.com/blog/2020/02/11/making-search-panel-horizontal/