Vinai Kopp

Magento Expert, Developer & Trainer

  • Magento Live UK Hackathon

    July 13, 2014

    Currently I’m fortunate to once again be in London to visit the MagentoLive conference.
    This year is the first time there is a Magento hackathon before the main event (thanks Ben Marks!).
    Unfortunately the hackathon registration was for free. I say unfortunately, because having at least a nominal fee like 10 GBP or so makes a huge difference in regards to commitment.
    From what I heard, there where almost 80 registrations, but only a dozen or so people showed up.

    However, the meager attendance didn’t stop me being eager to start “hacking” away. I really enjoy these times during a hackathon when I can do projects that are challenging or useful. This hackathon felt like a perticular treat since so far this year I’ve had to miss all of the hackathons in Germany for family and business reasons.

    The hackathon also featured a “Designerthon”, giving non-developers an opportunity to work on UX/UI aspects of Magento. This is a great idea that I would like to see continued in future.

    This time a project I suggested was picked and most developers decided to join me in the effort.

    The Motivation

    While doing project work, I have often had thought that creating backend forms and grids is too much work for such basic UI elements.
    The widget system just doesn’t provide enough bang for the buck.

    Even with scaffolding tools and example code from former projects to copy and adjust, it still takes too much time (at least for myself).

    Most of the forms I need to build are for simple entities which are stored in a simple flat table.

    Automatic Backend Grids and Forms

    The project idea was to create a module, that can display a grid and a form for a given table automatically, choosing sensible defaults for column types and form fields, without having to specify more then the table name in an XML file calles autogrid.xml.

    And that is exactly what out team consisting of Sam, Niels Preuss, Jacques Bodin-Hullin, Malachy McConnell and me built.

    This is the XML to add a grid and a form for the table the_table/alias.

    <config>
        <tables>
            <[unique_table_identifier]>
                <!-- table alias or plain table name -->
                <table>the_table/alias</table>
            </[unique_table_identifier]>
        </tables>
    </config>

    How does the mapping from column to grid or form work?

    For example, if they exist, the column comments from the database are taken as the grid column headers. If they don’t exist the column name is used.
    An int field is rendered as a numeric column, a varchar column is rendered as a text input field in a form.

    If a source model is specified, the field is rendered as a select field in the form, and as an options column in the grid.

    These defaults columns and form fields can easily be customized if needed (also in the autogrid.xml file).

    <config>
        <tables>
            <[unique_table_identifier]>
                <table>the_table/alias</table>
                <grid>
                    <columns>
                        <!-- table column has_options -->
                        <has_options>
                            <source_model>magehack_autogrid/table_column_source_yesno</source_model>
                        </has_options>
                        <!-- table column type_id -->
                        <type_id>
                            <source_model>magehack_autogrid/table_column_source_types::asOptionArray</source_model>
                            <name>The Product Type</name>
                            <type>varchar</type>
                            <filterable>1</filterable>
                            <sortable>0</sortable>
                        </type_id>
                </grid>
            </[unique_table_identifier]>
        </tables>
    </config>

    The module source can of course be found on github.

    Current State

    Please keep in mind that the extension was created in a short amount of time and will be improved in future.

    The automatic grids and forms currently only work for simple flat tables.
    Joining in more tables is not possible at the time of writing.

    Columns containing Ids can easily be mapped to options by a specified source model. For example, instead of the store Id the grid can display the store names.

    At this time of writing, the extension basically works, however there still are many things that can be polished and fleshed out, and I’m pretty sure some bugs still need to be fixed, too.

    Some of the classes should also be refactored to be more maintainable. But given the short amount of available time I’m satisfied with the result and hope others will find it useful, too.

    I’m sure, in future it will save me a few hours in every project.
    If the need arises, I will continue to work on it. There still are plenty of features to add, for example joining in other tables.

    Thank you to all the team members! It was lots of fun.

    comments powered by Disqus