Register • FAQ • Search • Login

View unanswered posts | View active topics It is currently Mon May 20, 2013 4:56 pm


Board index » General » Explorer Templates

All times are UTC [ DST ]

Due to enormous amounts of spam, the forum has been set to read-only mode.



Reply to topic  Page 1 of 1
  [ 10 posts ] 
Previous topic | Next topic 
Add a Search Bar to any template 
Author Message
LotsOCds
User avatar

Joined: Fri Nov 14, 2003 6:15 pm
Posts: 1425
Post Add a Search Bar to any template

Hi Folks,

Here is a real time saver I've used for years but never got around to posting. The idea is to add a search bar to any template so that it is not necessary to return to the index page to perform a search. This works for all the CATs. The example below is CATraxx specific, but it is easy to translate over to any of the others.

Attachment:
SearchBar AlbumList.png


First, add the code below to the Common.xsl template. Starting with CATraxx v8.30, the installation program no longer automatically over writes Common.xsl with each install. That means it is now "safe" to make modifications to this file. With all the other CATs you will need to make this change to Common.xsl after each install (until their install routines have been updated). The search options here are copied directly from the Index.xsl template. You can add or remove options to suit your needs. Some examples of additional useful options can be found in this topic.
Code:
<!-- Add a search bar -->
<xsl:template name="searchbar">
  <FORM METHOD="POST">
    <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="1">
      <TR>
        <TD WIDTH="20%" CLASS="indexheading2"><B>&#160;Search database</B></TD>
        <TD WIDTH="60%" CLASS="indexheading2" ALIGN="CENTER">
          <SELECT SIZE="1" NAME="_Field" style="background-color: lightblue; font-size:.8em">
            <OPTION VALUE="Artist==@xsltemplate=AlbumList.xsl@orderby=Artist,Released@xmltitle=Artist: |filter1|">Album: Artist</OPTION>
            <OPTION VALUE="Title==@xsltemplate=AlbumList.xsl@orderby=Artist,Released@xmltitle=Title: |filter1|">Album: Title</OPTION>
            <OPTION VALUE="FullGenre==@xsltemplate=GenreList.xsl@xmltemplatename=AlbumList.xsl?FullGenre@filter=Album.FullGenre>@sqldistinct=Genre.FullGenre, Genre.GenreID@xmltitle=Genre: |filter1|">Album: Genre</OPTION>
            <OPTION VALUE="Released=@xsltemplate=AlbumList.xsl@orderby=Artist,Title@xmltitle=Release Year: |filter1|">Album: Release Year</OPTION>
            <OPTION VALUE="Artist==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Artist: |filter1|">Track: Artist</OPTION>
            <OPTION SELECTED="" VALUE="Title==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Title: |filter1|">Track: Title</OPTION>
            <OPTION VALUE="FullGenre==@xsltemplate=GenreList.xsl@xmltemplatename=TrackList.xsl?FullGenre@filter=Track.FullGenre>@sqldistinct=Genre.FullGenre, Genre.GenreID@xmltitle=Genre: |filter1|">Track: Genre</OPTION>
          </SELECT>
          <INPUT TYPE="TEXT" NAME="Value_" SIZE="50" ID="FOCUS" STYLE="background-color: lightblue; font-size: .8em;"/>
          <INPUT TYPE="IMAGE" NAME="btnSearch" SRC="magnifier.gif" ACTION="" />
        </TD>
        <TD WIDTH="20%" CLASS="indexheading2"><B>&#160;</B></TD>
      </TR>
    </TABLE>
  </FORM>
</xsl:template>


Next download the zip file below, and unzip the file magnifier.gif into your Explorer Templates directory.


Next, open each template that you want to have the search bar. Find the code below. This example is from TrackList.xsl, but the other templates look quite similar.
Code:
   <TABLE CLASS="pageheadinglist" CELLSPACING="0" CELLPADDING="4">
    <TR>
      <TD>
        <xsl:value-of select="$doctitle"/>       
      </TD>
    </TR>
  </TABLE>


Finally, add this code right after the existing code found above.
Code:
  <!-- Search database -->
  <xsl:call-template name="searchbar"/> 


This zip file includes the little icon "magnifier.gif" and a few default templates from CATraxx v8.30.03 modified with these changes that you can use as examples.
Attachment:
SearchBar.zip

Enjoy it!


You do not have the required permissions to view the files attached to this post.
_________________
Cheers,
Dave

Last edited by LotsOCds on Thu Oct 08, 2009 11:42 pm, edited 1 time in total.
Thu Oct 08, 2009 6:50 am
Profile WWW
hamsen
User avatar

Joined: Sat Nov 22, 2003 7:47 pm
Posts: 2547
Location: Denmark
Post Re: Add a Search Bar to any template

Brilliant, Dave.

This is a similar but much smarter version of my extended search.

The search capabilities could easily be extended with the code shown here: http://www.fnprg.com/forum/viewtopic.php?f=39&t=9904

I have also put it on my homepage (index.xsl).

_________________
Kind regards
Thomas Hamstrup
HAP Software (http://www.hamstrup.dk)

Using Windows 8 PRO 64-bit and CATraxx 9.44

Thu Oct 08, 2009 7:12 pm
Profile WWW
LotsOCds
User avatar

Joined: Fri Nov 14, 2003 6:15 pm
Posts: 1425
Post Re: Add a Search Bar to any template

Thomas,

Thanks very much. Actually, I did link to your post, but it's a little hidden in all the text above. You've got some great additional search options documented there.

_________________
Cheers,
Dave

Thu Oct 08, 2009 7:30 pm
Profile WWW
hamsen
User avatar

Joined: Sat Nov 22, 2003 7:47 pm
Posts: 2547
Location: Denmark
Post Re: Add a Search Bar to any template

Hi Dave

I'm experimenting with the layout.

1) I would like to have "Search Database" and then closely after the button and field and then space for the rest of the page.
How would that be best to do, considering various screen sizes/font size etc.

2) The .8em notation is new to me. Any special reason for using that (compared to the normal sizes used by CATraxx)?

_________________
Kind regards
Thomas Hamstrup
HAP Software (http://www.hamstrup.dk)

Using Windows 8 PRO 64-bit and CATraxx 9.44

Thu Oct 08, 2009 7:37 pm
Profile WWW
LotsOCds
User avatar

Joined: Fri Nov 14, 2003 6:15 pm
Posts: 1425
Post Re: Add a Search Bar to any template

hamsen wrote:
Hi Dave

I'm experimenting with the layout.

1) I would like to have "Search Database" and then closely after the button and field and then space for the rest of the page.
How would that be best to do, considering various screen sizes/font size etc.
Not sure I understand exactly how you want it to look. I tried to make the example as simple as possible so it would work for everyone. Tuning it to be the minimum size, or how it's positioned is a matter of individual preference.

hamsen wrote:
2) The .8em notation is new to me. Any special reason for using that (compared to the normal sizes used by CATraxx)?
That's another way to specify font size. My personal templates rely heavily on formatting in CSS and I do most font sizing in em. I did not translate that back to the more familiar font sizing used in the CATraxx templates. You can change it if you like.

_________________
Cheers,
Dave

Thu Oct 08, 2009 9:38 pm
Profile WWW
hamsen
User avatar

Joined: Sat Nov 22, 2003 7:47 pm
Posts: 2547
Location: Denmark
Post Re: Add a Search Bar to any template

LotsOCds wrote:



Not sure I understand exactly how you want it to look. I tried to make the example as simple as possible so it would work for everyone. Tuning it to be the minimum size, or how it's positioned is a matter of individual preference.


Basically you have 3 cells in the search row.
I would like the first cell to fit the text "Search database".
The second cell should fit the button and field.
And the third cell should fill out the remainder of the line.

I have tried with width=7% / 50% /*, but the space between the cell1 and cell2 is too large.

Example:
Attachment:
Capture.JPG


PS: Your code example refers to SRC="SetGenreTracks.gif", not Magnifier.gif.


You do not have the required permissions to view the files attached to this post.
_________________
Kind regards
Thomas Hamstrup
HAP Software (http://www.hamstrup.dk)

Using Windows 8 PRO 64-bit and CATraxx 9.44

Thu Oct 08, 2009 10:43 pm
Profile WWW
LotsOCds
User avatar

Joined: Fri Nov 14, 2003 6:15 pm
Posts: 1425
Post Re: Add a Search Bar to any template

hamsen wrote:
PS: Your code example refers to SRC="SetGenreTracks.gif", not Magnifier.gif.
Grrrr. Thanks for pointing that out. It's fixed now. I like your icon too.

I'll take a look at spacing request tonight when I'm at my home computer.

_________________
Cheers,
Dave

Thu Oct 08, 2009 11:46 pm
Profile WWW
LotsOCds
User avatar

Joined: Fri Nov 14, 2003 6:15 pm
Posts: 1425
Post Re: Add a Search Bar to any template

hamsen wrote:
Basically you have 3 cells in the search row.
I would like the first cell to fit the text "Search database".
The second cell should fit the button and field.
And the third cell should fill out the remainder of the line.

I have tried with width=7% / 50% /*, but the space between the cell1 and cell2 is too large.

It works fine here. For my screen the width attributes are 14% / 45% / *. One suggestion that might help is to set the table attribute BORDER="1" to see the actual cell boundaries. This is the setting for the screen shot below. Once everything is adjusted you can set the BORDER attribute back to 0. You can also try setting CELLPADDING="0" which will tighten things up a pixel.

Attachment:
ss_1.png


You do not have the required permissions to view the files attached to this post.
_________________
Cheers,
Dave

Fri Oct 09, 2009 6:37 am
Profile WWW
hamsen
User avatar

Joined: Sat Nov 22, 2003 7:47 pm
Posts: 2547
Location: Denmark
Post Re: Add a Search Bar to any template

Hi Dave

This is the final result of the danish jury :grin:

Code:
<!-- Add a search bar -->
<xsl:template name="searchbar">
  <FORM METHOD="POST">
    <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="1">
      <TR>
        <TD WIDTH="8%" CLASS="indexheading2" ALIGN="LEFT" NOWRAP="true"><B>&#160;Search database</B></TD>
        <TD WIDTH="92%" CLASS="indexheading2" ALIGN="LEFT" NOWRAP="true">
          <SELECT SIZE="1" NAME="_Field" style="background-color: yellow">
            <OPTION SELECTED="" VALUE="Title==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Title: |filter1|">Track: Title</OPTION>
                <OPTION VALUE="Custom01==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Title: |filter1|">Track: Original Title</OPTION>
                <OPTION VALUE="Subtitles==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Title: |filter1|">Track: Subtitles</OPTION>
                <OPTION VALUE="Custom04==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Title: |filter1|">Track: Origin</OPTION>
                <OPTION VALUE="Artist==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Artist: |filter1|">Track: Artist</OPTION>
                <OPTION VALUE="Track.AuthorPublisher==@xsltemplate=TrackList.xsl@orderby=Title@xmltitle=Songwriter: |filter1|">Track: Songwriter</OPTION>
                <OPTION VALUE="Released=@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Release Year: |filter1|">Track: Release Year</OPTION> 
                <OPTION VALUE="FullGenre==@xsltemplate=GenreList.xsl@xmltemplatename=TrackList.xsl?FullGenre@filter=Track.FullGenre>@sqldistinct=Genre.FullGenre, Genre.GenreID@xmltitle=Genre: |filter1|">Track: Genre</OPTION>
                <OPTION VALUE="Keyword==@xsltemplate=TrackList.xsl@orderby=Artist,Title@xmltitle=Keyword: |filter1|">Track: Keyword</OPTION>
                <OPTION VALUE="Artist==@xsltemplate=AlbumList.xsl@orderby=Artist,Released@xmltitle=Artist: |filter1|">Album: Artist</OPTION>
                <OPTION VALUE="Title==@xsltemplate=AlbumList.xsl@orderby=Artist,Released@xmltitle=Title: |filter1|">Album: Title</OPTION>
                <OPTION VALUE="FullGenre==@xsltemplate=GenreList.xsl@xmltemplatename=AlbumList.xsl?FullGenre@filter=Album.FullGenre>@sqldistinct=Genre.FullGenre, Genre.GenreID@xmltitle=Genre: |filter1|">Album: Genre</OPTION>
                <OPTION VALUE="Keyword==@xsltemplate=AlbumList.xsl@orderby=Artist,Title@xmltitle=Keyword: |filter1|">Album: Keyword</OPTION>
                <OPTION VALUE="Released=@xsltemplate=AlbumList.xsl@orderby=Artist,Title@xmltitle=Release Year: |filter1|">Album: Release Year</OPTION>
                <OPTION VALUE="Name==@xsltemplate=HAPArtistPersonList.xsl@orderby=SortBy@xmltitle=ArtistPerson: |filter1|">ArtistPerson: Name</OPTION>
                <OPTION VALUE="SortBy==@xsltemplate=HAPArtistPersonList.xsl@orderby=SortBy@xmltitle=ArtistPerson: |filter1|">ArtistPerson: SortBy</OPTION>
                <OPTION VALUE="Name==@xsltemplate=HAPArtistPersonList.xsl@artist=true@orderby=SortBy@xmltitle=Artist: |filter1|">Artist: Name</OPTION>
                <OPTION VALUE="SortBy==@xsltemplate=HAPArtistPersonList.xsl@artist=true@orderby=SortBy@xmltitle=Artist: |filter1|">Artist: SortBy</OPTION>
                <OPTION VALUE="Name==@xsltemplate=HAPArtistPersonList.xsl@artist=false@orderby=SortBy@xmltitle=Person: |filter1|">Person: Name</OPTION>
                <OPTION VALUE="SortBy==@xsltemplate=HAPArtistPersonList.xsl@artist=false@orderby=SortBy@xmltitle=Person: |filter1|">Person: SortBy</OPTION>                                 
                <OPTION VALUE="Title==@xsltemplate=PlaylistList.xsl@orderby=Title@xmltitle=Playlist: |filter1|">Playlists</OPTION>
                <OPTION VALUE="Title==@xsltemplate=PlaylistList.xsl@PlaylistType=0@orderby=Title@xmltitle=Playlist: |filter1|">Playlists (Manual)</OPTION>
                <OPTION VALUE="Title==@xsltemplate=PlaylistList.xsl@PlaylistType=1@orderby=Title@xmltitle=Playlist: |filter1|">Playlists (Dynamic)</OPTION>
                <OPTION VALUE="date==@xsltemplate=PlayHistory.xsl@orderby=date-d@xmltitle=PlayHistory for date=|filter1|">PlayHistory</OPTION>
                <OPTION VALUE="PlayHistory==@xsltemplate=TrackList.xsl@xmltitle=PlayHistory for date=|filter1|">PlayHistoryTracks</OPTION>
          </SELECT>
          <INPUT TYPE="TEXT" NAME="Value_" SIZE="50" ID="FOCUS" STYLE="background-color: yellow"/>
          <INPUT TYPE="IMAGE" NAME="btnSearch" SRC="Search.gif" ACTION="" />
        </TD>
        <!--<TD WIDTH="*" CLASS="indexheading2"><B>&#160;</B></TD>-->
      </TR>
    </TABLE>
  </FORM>
</xsl:template>


1) removed the 3rd column (don't know why it's there)
2) set the width's to 8/92%
3) Left align the columns and use Nowrap (didn't look good when resizing)
4) some text size changes / background changes.

Now it looks like this:

Attachment:
Capture.JPG


You do not have the required permissions to view the files attached to this post.
_________________
Kind regards
Thomas Hamstrup
HAP Software (http://www.hamstrup.dk)

Using Windows 8 PRO 64-bit and CATraxx 9.44

Fri Oct 09, 2009 11:41 am
Profile WWW
LotsOCds
User avatar

Joined: Fri Nov 14, 2003 6:15 pm
Posts: 1425
Post Re: Add a Search Bar to any template

Hi Thomas,
hamsen wrote:
Hi Dave

This is the final result of the danish jury :grin:
Glad you have it the way you want.

hamsen wrote:
1) removed the 3rd column (don't know why it's there)
Because I like the search fields centered.

_________________
Cheers,
Dave

Fri Oct 09, 2009 2:59 pm
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   Page 1 of 1
  [ 10 posts ] 

Board index » General » Explorer Templates

All times are UTC [ DST ]

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.