Advanced Technology: More Show and Hide

Last week I demonstrated how the API functions Show() and Hide() work, and I promised you a demonstration on how it could also work with Selection Spec Controls. I’ll demonstrate that today, while paying homage to the classic Seinfeld television show.

The scenario I’m covering is simple: When the user makes a selection from the drop down show a particular item in the form.

Here is the HTML markup:

[[Selection]]
You've chosen THIS!
You've chosen THAT!
You've not chosen this or that, so it must be the OTHER THING!

The [[RadioList]] is a selection spec control that contains these options: This, That, The Other Thing. Based on the user selection we will display one of the three “div” elements in the HTML.

Now let’s examine the advanced script:

function HideAll() {
get("thisChoice").hide();
get("thatChoice").hide();
get("otherChoice").hide();
}

spec['Selection'].onchange = function() {
HideAll();
switch (this.selectedIndex) {
case 1:
get("thisChoice").show();
break;
case 2:
get("thatChoice").show();
break;
case 3:
get("otherChoice").show();
break;
default:
break;
}
}

HideAll();

Three different things are happening here. First, I created a function named HideAll() that simply gets each of the div elements and calls the Hide() API function. This ensures we are hiding all of them when the page initially loads. Jumping to the end of the script you’ll see that I call the HideAll() function. I’m doing that last to emphasize that the function must be created before you can call it. The real action occurs in the spec['Selection'] onchange event.

We want to declare a function to fire on that event and the syntax to do this is: spec['Selection'].onchange = function() { } Whenever the drop down is clicked the onchange event is fired, and that’s when we want to decide which information to display to them.

Within this function we first want to call the HideAll() function to reset the display of all the elements. Without this we would end up having more than on option displayed at a time. Then we evaluate the selectedIndex of the drop down list in a switch statement. The selectedIndex property contains the numbered item in the list currently selected. We check for that property in each case and perform the appropriate action. For example, if “This” is chosen in the drop down we want to show the div element with the id “thisChoice”. We do that with the get() API function which I covered in a previous post. Of course the “break;” signals the code to exit the switch statement.

I think this demonstration covers a widely desired functional aspect of Spec Forms on the Four51 application. Utilizing the Spec Form API makes this process very easy to accommodate.

As previously mentioned I’m demonstrating the Spec Form API examples in the “Spec Form API Playground” product on my demo site.

8 thoughts on “Advanced Technology: More Show and Hide

  1. Is there any way to use advanded scripting so the customer can use between like 50 or 100 different fonts or 15 or 20 different colors for a product?

    Thanks,
    Matt Strunk

  2. Advanced scripting is solely to enhance the spec form. Choosing fonts and colors would be actions you perform in the Pageflex project. You can have variables that would pull exported area templates that have the desired styles applied. Just create an area template rule that ingests the variable spec and displays the desired font and color.

  3. I have two fields (text boxes) that need to be hidden unless a particular size in a drop down is selected then they need to be visible.
    For example, if they choose a 3 x 2 then they can enter text in two open fields. If they choose one of the other 10 sizes they can’t.
    I know how to hide and how to toggle but how do you tell it to show for a specific item in a drop down?

  4. Try this:

    spec['DropDown'].onchange = function() {
    if (spec['DropDown'].selectedText() == ‘The Value’) {
    spec['Text'].show();
    else
    spec['Text'].hide();
    }
    }

    The text spec would be the open fields you want to show when “The Value” is selected in the DropDown

  5. I left some syntax errors in there and should have given you a better example. Forgive me and let me do this again.

    function ShowHide() {
    spec['Text'].hide();
    if (spec['DropDown'].selectedText() == ‘The Value’)
    spec['Text'].show();
    }

    spec['DropDown'].onchange = ShowHide;
    ShowHide();

  6. V00_SizeChoice is the drop down, 3 x 2 is one of the ten sizes in the drop down and HeadlineCopy_Line2 is the text box that I want to show if they select a 3 x 2 but not if they select say a 7 x 10.

    But this is not working. Other thoughts?

    spec['V00_SizeChoice'].onchange = function(){
    if(spec['V00_SizeChoice'].selectedText()==’3 x 2′){
    spec['HeadlineCopy_Line2'].show();
    else
    spec['HeadlineCopy_Line2'].hide();
    }
    }

  7. Sorry, did not see your last comment.

    Thanks, that worked.
    Now if I wanted to have two text boxes show/hide would I just duplicate and change the spec name or can I just do this:

    function ShowHide(){
    spec['HeadlineCopy_Line2'].hide();
    spec['HeadlineCopy_Line3'].hide();

    if(spec['V00_SizeChoice'].selectedText()==’3 x 2′)
    spec['HeadlineCopy_Line2'].show();
    spec['HeadlineCopy_Line3'].show();

    }

    spec['V00_SizeChoice'].onchange = ShowHide;
    ShowHide();

  8. That’s fine, or you could put them in an HTML element like so:

    spec['HeadlineCopy_Line2'] spec['HeadlineCopy_Line3']

    Then in the script refer to it like so:

    get(‘headlines’).hide();

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>