Servoy Tutorial: Add Forms to Tab Panels using a Map

    Servoy Tutorial: Add Tab Panels using a Map

    Servoy Tutorial Photo Credit: jegeor via Compfight

    This is a Servoy tutorial that demonstrates how to add a form to a tab panel using a map. It’s a useful technique for controlling exactly where the new form should be placed among other forms in the tab panel, that may or may not be showing.

    In the real-world, users click options, and depending on the option, a new form may need to be added to the a tab panel that will contain all the relevant information. For example, assume we are working on a contact record that has a tab panel showing additional information in the lower half of the layout. If the user clicks an option to set the contact type to “Sales Rep”, then maybe a new form should be added to the tab panel that contains additional info for sales reps, like commission, territory, etc. However, the new form typically needs to appear in a logical position, and not just get added to the end. It also should not be there if the contact type is not a sales rep. This is where a tab panel map comes into play.

    A tab panel map is nothing more than a literal array with tab names. The tab names are added to an array in the logical order that we would want them to appear, and not in alphabetical order. For example, maybe the sales rep tab should be shown after the address tab, but before the comments tab. I have seen all kinds of implementations to do this, but nothing could be simpler then just using a simple map of names in the order you want.

    Shown below is how to setup a map for a tab panel with the tab names you are going to use, and in the logical order you want them to appear. In our example, we are using i18n keys for the tab names.

    The utility method shown below is used to add a tab form to a tab panel. It accepts all the necessary parameters, ensures the tab does not already exist, and adds it immediately after the first tab that comes before it in the tab map. If no existing tab is found that comes before the new tab being inserted, then the new tab is inserted at the end. Using this utility, tabs will be inserted precisely according to the tab map, regardless of the order in which they are added.

    This utility is used to simply remove the tab panel by i18n key. Nothing complicated here at all; it simply loops through the tabs and deletes the right one, or exits if it is not found.

    This is how to add a tab panel by name using the map, and also how to remove a tab panel by name (or i18n key).

    I hope this Servoy tutorial was helpful and gives you a new way of adding forms to tab panels based on a map of tab names. I have used this technique over and over again in my projects. Add the utility methods to your library and put it to good use. It will help you get your user interface under control by allowing you to move groups of optional data onto tab panels, allowing them to be added or removed based on options selected.

    Gary Dotzlaw

    Gary Dotzlaw

    CEO at Dotzlaw Consulting
    Gary Dotzlaw has 20+ years of experience as a professional software developer and has worked with over 100 companies throughout the USA and Canada. Gary has extensive qualifications in all facets of the project life cycle, including initial feasibility analysis, conceptual design, technical design, development, implementation and deployment. Gary is an expert Servoy Developer, with extensive large-commercial project experience, and has written numerous advanced tutorials on Servoy development.