Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
jeroenvandera
Contributor

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.

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.

5 Comments
Labels in this area