When you design SDK element, you tend to add more and more properties. Because more flexibility is always better… right? The problem your run into however is that the designers for whom you created the SDK in the first place increasingly have to rely on your help to be able to work with the SDK. In an earlier discussion (here : Design Studio Innovation Series – Topic   1: Making a Case for a Larger SDK Result Set) we already discussed this matter in the comments.

My opinion is that basically you can see  the design studio application as a collection of tools. Each component type is a separate tool with its own properties, methods, advantages and drawbacks.

But back to the main theme: when designers who are basically your users start asking that many questions then that is a good moment to enhance your additional properties to make your application easy to use, even when you’ve got an enormous amount of possible options.

I think that an accordion menu can help you structure the options in a great way. Typically in your screen you want to have a lot of room for the actual application you are building. This means that all the menus have to work with a little room on the left- or righthand side of the application.

additional properties.jpg

In the example above you see the advantage of this kind of menu. You are able to open and close sections, and you do not use much room horizontally. Ideally one section occupies approximately the vertical room in the panel. But if there’s more, you can easily scroll down. This is something most people are used to in websites anyway.

So how to do it?

The additional properties are build using an html file with an accompanying javascript file. Using these two files and additionally a CSS file we can start to create an accordion menu.

The CSS :


/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}
.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}

These CSS codes apply themselves to different sections of the Accordion that we will build up in html.

In the HTML we create a div element with the class accordion, for each group in the accordion we create a div with class “accordion-section”. This section element contains a link <A> and another div element with the class “accordion-section-content”.

But first provide a link to the CSS file :


<link href="additional_properties_sheet.css" rel="stylesheet" type="text/css">

now we can set up the structure of the accordion


    <div class="accordion">
        <div class="accordion-section">
            <a class="accordion-section-title" href="#accordion-1">Data Grouping</a>
            <div class="accordion-section-content" id="accordion-1">
                <form id="form" name="form">
                    <fieldset>
                        <legend>Trend Graph Data selection</legend>
                        <table>
                            <tr>
 <td><input id="editdataselection" type="button" value="Edit Data Selection"></td>
                            </tr>
                            <tr>
                                    <td>Select First Property</td>
                                    <td><select id="firstproperty" name="firstproperty" size="1" style="width: 150px"></select></td>
                            </tr>
                            <tr>
                                    <td>Select Second Property</td>
                                    <td><select id="secondproperty" name="secondproperty" size="1" style="width: 150px"></select></td>
                            </tr>
                        </table>
                    </fieldset>
                </form>
                <p>Use these settings to update the behavior of the Graphs.</p>
                <ul>
                    <li>set the first property to ...</li>
                    <li>set the second property to ....</li>
                </ul>
            </div><!--end .accordion-section-content-->
        </div><!--end .accordion-section-->
    </div><!--end .accordion-->

If you look at the result you will already see a closed accordion menu. In the javascript file we add some code to make them open when you click on the headers.

In the this.init function of the JS file we add a couple of event listeners to the html using JQuery :


        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-sectioncontent').slideUp(300).removeClass('open');
       
        $('.accordion-section-title').click(function(e) {
            // Grab current anchor value
            var currentAttrValue = $(this).attr('href');
    
            if($(e.target).is('.active')) {
                close_accordion_section();
            }else {
                close_accordion_section();
    
                // Add active class to section title
                $(this).addClass('active');
                // Open up the hidden content panel
                $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
            }
    
            e.preventDefault();
        });
This function we will put outside the this.init function but inside the subclass function
       function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

In the function all elements with class accordion-section-title within the accordion class are collected with $(‘.accordion .accordion-section-title’)

First all menus are closed, then with help the “this” keyword (this means basically the context or element  in which the function is performed).
the function collects the information about the clicked element and adds an open class and opens the underlying content area (.slideDown(300).addClass(‘open’);)

Within these content area you can set all the elements you want and let them interact with the properties. All these can be applied using the standard event listeners + getter/setter as you can find them in the example SDK components.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Jeroen,

    You’ve made a very valid point.  In an effort to provide more features, the number of properties in an SDK component can easily become overwhelming.  This is where usability of the Additional Properties Sheet (APS) becomes very important in terms of providing a simple and intuitive experience for designers, with the accordion menu approach being a good example.

    Regards,

    Mustafa.

    (0) 
  2. Karol Kalisz

    Hi Jeroen,

    yes, many properties are making the components complicated. Mike has created also an generic UI, which we try to place into the new SCN community components. You can see the effect in the Choropleth Map, the structure is 2-level and completely dynamically created – with no need any more to code the APS at all.

    The blogs on this will follow soon, I will describe an option to completely generate the components including APS from Mike, and Mike wanted to spend some words also on his Idea how the APS can be dynamically created..

    here the screen:

    chlo.PNG

    Karol

    (0) 
      1. Karol Kalisz

        we will make a try with Jeroen’s new Bullet Chart (currently in prototypes) component – will be a chance to see how usable the generation is.

        (0) 

Leave a Reply