9 Replies Latest reply: Apr 17, 2012 6:49 AM by Ben Pleysier RSS

    Master/Detail Filter with Buttons

    CJLong Community Member

      I've got an Item Customizer at www.bspgc.com/customize.html.  It works well but we need to add a few more options. I've built a database www.bspgc.com/database/Table1.xml  I thought a Spry Master/Detail region would work well www.bspgc.com/custom.html but I want to make it filter using similar buttons. Is this possible?

        • 1. Re: Master/Detail Filter with Buttons
          Ben Pleysier MVP

          The difference between what you have now and using JS (Spry) is that with the latter there is not a complete page refresh. You can use an onclick event to change the image using the CSS content property. Google the term or have a look here http://www.w3schools.com/cssref/pr_gen_content.asp

           

          You can use the Spry (or jQuery) element selector utility (http://labs.adobe.com/technologies/spry/articles/element_selector/selector_examples.html) to change the class, hence change the image.

           

          Gramps

          • 2. Re: Master/Detail Filter with Buttons
            Ben Pleysier MVP

            Please have a look at the following

             

            <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=7" />
            <title>Untitled Document</title>
            </head>
            
            <body>
            <div spry:detailregion="image model color seat canopy">
                <p>Model</p>
              <span spry:repeat="model" spry:setrow="model">
              <label spry:if="'{model::Model}'=='{image::Model}'"><input type="radio" name="rgModel" value="{model::Model}" id="rgModel" onChange="newXPath('{model::Model}', '{image::Color}', '{image::Seat}', '{image::Canopy}')" checked>{model::Model}</label>
              <label spry:if="'{model::Model}'!='{image::Model}'"><input type="radio" name="rgModel" value="{model::Model}" id="rgModel" onChange="newXPath('{model::Model}', '{image::Color}', '{image::Seat}', '{image::Canopy}')">{model::Model}</label>
              </span>
                <p>Color</p>
              <span spry:repeat="color" spry:setrow="color">
              <label spry:if="'{color::Color}'=='{image::Color}'"><input type="radio" name="rgColor" value="{color::Color}" id="rgColor" onChange="newXPath('{image::Model}', '{color::Color}', '{image::Seat}', '{image::Canopy}')" checked>{color::Color}</label>
              <label spry:if="'{color::Color}'!='{image::Color}'"><input type="radio" name="rgColor" value="{color::Color}" id="rgColor" onChange="newXPath('{image::Model}', '{color::Color}', '{image::Seat}', '{image::Canopy}')">{color::Color}</label>
              </span>
                <p>Seat</p>
              <span spry:repeat="seat" spry:setrow="seat">
              <label spry:if="'{seat::Seat}'=='{image::Seat}'"><input type="radio" name="rgSeat" value="{seat::Seat}" id="rgSeat" onChange="newXPath('{image::Model}', '{image::Color}', '{seat::Seat}', '{image::Canopy}')" checked>{seat::Seat}</label>
              <label spry:if="'{seat::Seat}'!='{image::Seat}'"><input type="radio" name="rgSeat" value="{color::Seat}" id="rgSeat" onChange="newXPath('{image::Model}', '{image::Color}', '{seat::Seat}', '{image::Canopy}')">{seat::Seat}</label>
              </span>
                <p>Canopy</p>
              <span spry:repeat="canopy" spry:setrow="canopy">
              <label spry:if="'{canopy::Canopy}'=='{image::Canopy}'"><input type="radio" name="rgCanopy" value="{canopy::Canopy}" id="rgCanopy" onChange="newXPath('{image::Model}', '{image::Color}', '{image::Seat}', '{canopy::Canopy}')" checked>{canopy::Canopy}</label>
              <label spry:if="'{canopy::Canopy}'!='{image::Canopy}'"><input type="radio" name="rgCanopy" value="{canopy::Canopy}" id="rgCanopy" onChange="newXPath('{image::Model}', '{image::Color}', '{image::Seat}', '{canopy::Canopy}')">{canopy::Canopy}</label>
              </span>
              <div>
                <img src="http://www.bspgc.com/{imgURL}" alt="{imgURL}">
              </div>
            </div>
            <!-- I prefer to have the JS at the bottom of the document -->
            <script src="SpryAssets/SpryData.js"></script>
            <script src="SpryAssets/xpath.js"></script>
            <script>
            var image = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1[Model='Precedent' and Color='White' and Seat='White' and Canopy='White']"); // setting the default values
            var model = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Model", {distinctOnLoad: true});
            var color = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Color", {distinctOnLoad: true});
            var seat = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Seat", {distinctOnLoad: true});
            var canopy = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/Canopy", {distinctOnLoad: true});
            // FILTERING DATA USING XPATH
            function newXPath(model, color, seat, canopy){
                image.setXPath("dataroot/Table1[Model='"+model+"' and Color='"+color+"' and Seat='"+seat+"' and Canopy='"+canopy+"']");
                image.loadData();
            }
            </script>
            </body>
            </html>
            

             

            The above is only to illustrate the technique. It will need styling (including adding the colours rather than just text). It may also be advisable to break the image down to a basic model stripped of the varying parts so that only a small image is added for the colour variations.

             

            Gramps

            • 3. Re: Master/Detail Filter with Buttons
              CJLong Community Member

              This is brilliant!  Thank you so much!  http://www.bspgc.com/customgramps2.html I've gotten your code into my page without  breaking it, and changed the model imputs to buttons.  I think I'm close on getting the color thumbnails in place but I'm missing something... either in the var or xPath...or both.

               

              <span class="pbs">Color:</span> <span spry:repeat="color" spry:setrow="color">

                <label spry:if="'{color::Color}'=='{Color}'"><input type="image" name="rgColor" src="{color::imgURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}')" selected></label>

                <label spry:if="'{color::Color}'!='{Color}'"><input type="image" name="rgColor" src="{color::imgURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}')"></label>

                </span>

               

              Thanks again!

              Shelly

              • 4. Re: Master/Detail Filter with Buttons
                CJLong Community Member

                I'm getting closer!

                 

                The following snippets allow me to pull in images from my database to use as buttons to select colors.  However each button shows the same image and they all change when the next selection is made.

                 

                http://www.bspgc.com/customgramps2.html

                 

                How do I get it to match the appropriate image to the correct button?

                 

                 

                 

                 

                <span class="pbs">Color:</span> <span spry:repeat="color" spry:setrow="color">
                                         
                                         

                  <label spry:if="'{color::Color}'=='{Color}'"><input type="image" name="rgColor" src="{image::imageURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}', '{Wheel}')" ></label>
                  <label spry:if="'{color::Color}'!='{Color}'"><input type="image" name="rgColor" src="{image::imageURLthumb}" alt="{color::Color}" id="rgColor" onClick="newXPath('{Model}', '{color::Color}', '{Seat}', '{Canopy}', '{Wheel}')"></label>
                  </span>

                 

                <script>

                var image = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2[Model='Precedent' and Color='White' and Seat='White' and Canopy='White' and Wheel='Standard']"); // setting the default values

                var model = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Model", {distinctOnLoad: true});

                var color = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Color", {distinctOnLoad: true});

                var seat = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Seat", {distinctOnLoad: true});

                var canopy = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Canopy", {distinctOnLoad: true});

                var wheel = new Spry.Data.XMLDataSet("Table2.xml", "dataroot/Table2/Wheel", {distinctOnLoad: true});

                 

                // FILTERING DATA USING XPATH

                function newXPath(model, color, seat, canopy, wheel){

                    image.setXPath("dataroot/Table2[Model='"+model+"' and Color='"+color+"' and Seat='"+seat+"' and Canopy='"+canopy+"' and Wheel='"+wheel+"']");

                    image.loadData();

                }

                </script>

                • 5. Re: Master/Detail Filter with Buttons
                  Ben Pleysier MVP

                  Taking the body colour as an example

                  1. change the constructor to var color = new Spry.Data.XMLDataSet("Table1.xml", "dataroot/Table1/imgURL", {distinctOnLoad: true});
                  2. change the input type radio to input type image
                  3. change Color to imgURL
                  4. change onChange to onClick
                  5. change checked to disabled
                  6. add src="{color::imgURL}" as the source of the button image

                   

                  Repeat the above for each of the other radio buttons replacing imgURL with imgURLcanopy etc

                   

                  Gramps

                  • 6. Re: Master/Detail Filter with Buttons
                    CJLong Community Member

                    Gotcha!  I knew I was missing something basic.  I was using the Color field for the alt text so it didn't occur to me that I needed to change the constructor.  Is there a way to call in both Color and imgURLthumb so that I can use them both?

                     

                    Other than the alt text I have only two more issues.

                     

                    1.  Can I use arrays to separate the different types of Colors into groups? ( ie. Standard, Premium, Metalllic, Marble, Camo)

                     

                    var stdColors = new Array ("White", "Beige", "Green", "Blue");// condensed array

                     

                    var sorted = stdColors.sort();

                    document.write("Returned string is : " + sorted );

                     

                    2.  Not all options are available together.  For example Camoflaged Seats are only available  for Camoflaged Bodys, White Seats and Canopys are not available on Camoflaged cars.  Also DS models have far fewer color options.  When you choose a combination that is not available the selector stops working. Is there a function that would hide options if they are not available?

                     

                    Thanks again!!!

                    Shelly

                    • 7. Re: Master/Detail Filter with Buttons
                      Ben Pleysier MVP

                      1.  Can I use arrays to separate the different types of Colors into groups? ( ie. Standard, Premium, Metalllic, Marble, Camo)

                      Use an if:function per group as in http://blogs.adobe.com/spryteam/2008/02/spry_161_released_to_labs.html

                      2.  Not all options are available together.  For example Camoflaged Seats are only available  for Camoflaged Bodys, White Seats and Canopys are not available on Camoflaged cars.  Also DS models have far fewer color options.  When you choose a combination that is not available the selector stops working. Is there a function that would hide options if they are not available?

                      Apply an xPath filter to the options in a similar manner as we have done for image.

                       

                      Gramps

                      • 8. Re: Master/Detail Filter with Buttons
                        CJLong Community Member

                        Thanks again Gramps!  You are amazing!

                         

                        Shel

                        • 9. Re: Master/Detail Filter with Buttons
                          Ben Pleysier MVP

                          Gosh, you noticed that I was showing off  .  Thank you for your feedback.

                           

                          Gramps