I am building up a section on the front-end of my website to let users browse through a large number of PDFs. I have a PDF media type set up that allows PDF media files to be categorized under a couple different category types, with dynamically populated options via XPath CheckBoxLists. I would like to have a front-end page that allows users to start with a full listing of all PDF files, and filter the listing by choosing categories from one or more dropdown menus.
I have a possible method in mind:
Write some JavaScript that can set query strings based on the <select> menu selection(s).
Refresh the page each time a dropdown menu option changes, so that the XSLT gets the updated query string values and pulls new data.
Write some more JavaScript that sets the default <option> for the <select> menus to the values set in the current query string, so that the user's selections are maintained once the page refreshes.
I'm pretty sure this will work, but it's fairly complicated. Does anyone know if there's an easier way to do this? Thanks in advance.
I've done stuff like this before - If you're storing the categories as XML (not CSV) it should be possible without doing the dynamic XPath thing, depending on how you want to combine 2 or more chosen categories (AND, OR?).
Remember that a <form> will actually send the selected data, so if you start with a working form using a submit button (which you later hide with CSS), you don't need to set any QueryString values yourself - whether you use POST or GET, the values will be readable from XSLT, using the umbraco.library:Request(), umbraco.library:RequestForm() and umbraco.library:RequestQueryString() extensions. Rendering the <select>'s from XSLT as well, you won't need to set the default options either, as you'd be able to sync those to the selected category(-ies).
This way, the only thing you need to do with JavaScript, is to hook up the change event of the <select>'s to submit the form as a convenience...
The simplest version of the filtering is something like this:
<!-- Media folder id of the PDF folder -->
<xsl:variable name="folder" select="1234" />
<!-- Grab the chosen category -->
<xsl:variable name="cat" select="umbraco.library:RequestQueryString('cat')" />
<!-- Grab all the PDFFile nodes below $folder -->
<xsl:variable name="nodes" select="umbraco.library:GetMedia($folder, true())//PDFFile" />
<!-- Filter them by selected category -->
<xsl:variable name="selectedFiles" select="$nodes[categories//nodeName = $cat]" />
Thanks so much for your help! I had completely forgotten that simply submitting a form with GET would handle putting the QueryString values in the URL for me; I don't use forms much. I also thought that I wouldn't be able to use variables in the XPath expression the way you did, but I tried it and it works.
I was hoping you could elaborate on one thing, though. I'm not sure what you mean by this:
Rendering the <select>'s from XSLT as well, you won't need to set the default options either, as you'd be able to sync those to the selected category(-ies).
How are you suggesting I maintain the previously selected form options when the page refreshes? I suppose I could use umbraco.library:Request() plus some XSLT to add a selected/checked attribute to the form element, but I'm not sure if that's what you meant.
The proper way to filter a list of media nodes?
Hi,
I am building up a section on the front-end of my website to let users browse through a large number of PDFs. I have a PDF media type set up that allows PDF media files to be categorized under a couple different category types, with dynamically populated options via XPath CheckBoxLists. I would like to have a front-end page that allows users to start with a full listing of all PDF files, and filter the listing by choosing categories from one or more dropdown menus.
I have a possible method in mind:
Hi David,
I've done stuff like this before - If you're storing the categories as XML (not CSV) it should be possible without doing the dynamic XPath thing, depending on how you want to combine 2 or more chosen categories (AND, OR?).
Remember that a <form> will actually send the selected data, so if you start with a working form using a submit button (which you later hide with CSS), you don't need to set any QueryString values yourself - whether you use POST or GET, the values will be readable from XSLT, using the umbraco.library:Request(), umbraco.library:RequestForm() and umbraco.library:RequestQueryString() extensions. Rendering the <select>'s from XSLT as well, you won't need to set the default options either, as you'd be able to sync those to the selected category(-ies).
This way, the only thing you need to do with JavaScript, is to hook up the change event of the <select>'s to submit the form as a convenience...
The simplest version of the filtering is something like this:
<!-- Media folder id of the PDF folder --> <xsl:variable name="folder" select="1234" /> <!-- Grab the chosen category --> <xsl:variable name="cat" select="umbraco.library:RequestQueryString('cat')" /> <!-- Grab all the PDFFile nodes below $folder --> <xsl:variable name="nodes" select="umbraco.library:GetMedia($folder, true())//PDFFile" /> <!-- Filter them by selected category --> <xsl:variable name="selectedFiles" select="$nodes[categories//nodeName = $cat]" />Hope that'll get you going,
/Chriztian
Hi Chriztian,
Thanks so much for your help! I had completely forgotten that simply submitting a form with GET would handle putting the QueryString values in the URL for me; I don't use forms much. I also thought that I wouldn't be able to use variables in the XPath expression the way you did, but I tried it and it works.
I was hoping you could elaborate on one thing, though. I'm not sure what you mean by this:
How are you suggesting I maintain the previously selected form options when the page refreshes? I suppose I could use umbraco.library:Request() plus some XSLT to add a selected/checked attribute to the form element, but I'm not sure if that's what you meant.
Thanks again,
David
Hi again,
Yeah - thath's exactly what I meant :-)
Let's use some colors as an example - to render a <select> from a section somewhere in your Content tree, you could do this:
<xsl:variable name="$selectedColor" select="umbraco.library:RequestQueryString('color')" /> <xsl:variable name="colors" select="$currentPage/ancestor::root//Colors/Color" /> <select name="color" id="color"> <xsl:for-each select="$colors"> <option value="{@urlName}"> <xsl:if test="@urlName = $selectedColor"><xsl:attribute name="selected" /></xsl:if> <xsl:value-of select="@nodeName" /> </option> </xsl:for-each> </select>(The XPath to select the $colors variable is not very efficient, but it'll work - the more specific you can get when selecting stuff, the better...)
/Chriztian
is working on a reply...