Accordion Panel

Overview

The AccordionPanel component is a container similar to a TabPanel, but instead of having tabs for showing / hiding forms, it has buttons that behave like an accordion, moving one way or the other.

It can hold one or more forms. But only one of them is visible at a time. The active/visible form can be changed via button clicks or from code. Forms can be added and removed both at design-time and at runtime. Child forms can optionally show data through a relation.

It can be used in both responsive and anchored layouts.

Get Started

Accordion

Creating an Accordion Panel

Create an Accordion Panel

Here are the steps for creating an Accordion Panel:

1. Open the Form Editor of the form where you need to place an Accordion Panel

2. Find AccordionPanel in Form Containers section in the components' pallet

3. Drag and drop the Accordion Panel component in the desired place of the form

4. Set the tabs; this can be done via wizard or in the properties panel

5. Edit other Accordion Panel properties if needed

It is recommended to set a specific name in the Accordion Panel properties in order to make it easier to use it later in scripting. Example: "accordionpanel_orders".

It is recommended to set a specific name in the Accordion Panel tab properties in order to make it easier to use them later in scripting. Example: "tab_customers".

Setting the tabs property via the wizard

Property configurator for tabs wizard

After dragging the container in the form, the Property configurator for tabs wizard appears. In order to set the tabs using the wizard, you need to do the following steps:

1. Find in the left side of the wizard the contained form you need: it can have a related or unrelated datasource

2. Click on the form name

3. The selected form will appear on the right side of the wizard, showing some of the tab properties:

   1. CONTAINEDFORM : the form shown in the tab

   2. RELATIONNAME : the name of the relation between datasources of main and contained forms; this field will be empty if the relation doesn't exist

   3. TEXT: the tab's title text (i18n and custom HTML supported)
   4. delete icon : you can remove a tab by clicking the icon

4. Click OK button after all tabs have been added

Setting the tabs property in the properties panel

Adding and editing tab properties

After dragging the container in the form, the Property configurator for tabs wizard appears. Close the editor without setting anything here, find the Accordion Panel in the form editor, click it and proceed with the following steps:

1. Add a tab. There are 2 ways of adding a tab:

   1. Select the tabs property and click the + button in order to add a tab. Next tabs can be added the same way or by clicking the + button (insert a new array item below) of another tab. You can change the tabs' order by dragging them into the desired placed inside the Accordion Panel (in the form editor).
   2. Drag and drop tab component (of an AccordionPanel in Form Containers section in the components' pallet) into the AccordionPanel container (in the form editor)

2. Expand the tabs property to see the list of tabs. They are also shown in the AccordionPanel container (in the form editor)
3. In order to edit each tab, expand it or click the tab name in the AccordionPanel container (in the form editor) and set the properties:

   1. containedForm: the form shown in the tab
   2. disabled: whether that tab is enabled or not
   3. name: a name for this tab
   4. relationName: optional relation for the form to be shown
   5. text: the tab's title text (i18n and custom HTML supported)

Using a relation

The contained form of the tabs can show related data. In order to do this, you need to have the following:

1. Set the datasource property on the main form
2. Set the datasource property on the contained form
3. Make sure that the relation from datasource table of the main form to datasource table of the contained form exists, otherwise it needs to be created

4. Set the above relation in the relationName property of the corresponding tab

Once everything is set, the contained form will show related data according to the selected record in the main form. When the selected record changes in the main form, so will the related data from the contained form.

Customize the Tabs

Set the tab text

Tab's title text property can be set by entering a value in the property field or by entering the Text Property Editor. Usually this will be plain text or it can contain data from table columns, aggregations, calculations, relations or from and scopes variables, all of them can be combined, as well. i18n is also supported.

Examples:

Tab text - plain text

Tab text - including database column

Tab text - including form variable

Tab text - i18n

Custom Tab Markup

Tab's title text property supports custom HMTL content.

Example:

Tab text - custom HMTL

In order for the custom HTML content to be correctly displayed we need to make sure that it will not be sanitized by using .putClientProperty(UICONSTANTS.TRUST_DATA_AS_HTML,true)

function onShow(firstShow, event) {
	// TODO Auto-generated method stub
    elements.accordionpanel_orders.putClientProperty(UICONSTANTS.TRUST_DATA_AS_HTML,true);
}

Only enable this setting if the data shown can always be trusted and is never composed of data from an external system or user.

Scripting an Accordion

AccordionPanel properties can be also set in the Scripting Editor. You can find a list of AccordionPanel API methods here.

Changing Selected Tab

Here is an example of how to programmatically set the active tab in the Scripting Editor of the main form:

/**
 * TODO generated, please specify type and doc for the params
 * @param index {Number}
 *
 * @properties={typeid:24,uuid:"78CE78AF-AC5A-458B-A611-84DDC07878B3"}
 */
function setActiveTab(index){
	elements.accordionpanel_orders.selectTabAt(index)
} // call this function after the AccordionPanel container is fully loaded on the page and set the desired index value

Adding a Tab

Here is an example of how to programmatically add a tab in the Scripting Editor of the main form:

function onShow(firstShow, event) {
	// TODO Auto-generated method stub
    elements.accordionpanel_orders.addTab(forms.suppliers,'Suppliers'); // Adds a tab to this accordion with that form and text
} 

Removing a Tab

Here is an example of how to programmatically remove a tab in the Scripting Editor of the main form:

function onShow(firstShow, event) {
	// TODO Auto-generated method stub
    var x = elements.accordionpanel_orders.tabs.length;
    elements.accordionpanel_orders.removeTabAt(x-1);  //Removes a tab of the given index. Returns true if this was sucessfull.  
} 

Enabling/Disabling a tab

Here is an example of how to enable and disable a tab in the Scripting Editor of the main form:

function onShow(firstShow, event) {
	// TODO Auto-generated method stub
    elements.accordionpanel_orders.getTabAt(1).disabled = true;   //disables a tab 
    elements.accordionpanel_orders.getTabAt(2).disabled = false;  //enables a tab
} 

Handling Tab Change Event

Here is an example of how to use the onChange event of an AccordionPanel in the Scripting Editor of the main form:

Saving the active tab index in the onChange event(fired after a different tab is selected) of the AccordionPanel container:

/**
 * Fired after a different tab is selected.
 *
 * @param {Number} previousIndex The previous tab index
 * @param {JSEvent} event
 *
 * @private
 *
 * @properties={typeid:24,uuid:"0A044286-CB21-4CCC-A8AA-284137F1D22E"}
 */
function onChange(previousIndex, event) {
	// TODO Auto-generated method stub
	application.setUserProperty(controller.getName()+"."+elements.accordionpanel_orders+".activeTab",elements.accordionpanel_orders.activeTabIndex.toString())
}

Checking if there is a saved previous active tab index and set it in the onShow main form event:

/**
 * @type {String}
 *
 * @properties={typeid:35,uuid:"2FD6AD36-9779-49D2-B4A7-985C7C73B66C",variableType:8}
 */
var activeTab;

/**
 * Callback method for when form is shown.
 *
 * @param {Boolean} firstShow form is shown first time after load
 * @param {JSEvent} event the event that triggered the action
 *
 * @private
 *
 * @properties={typeid:24,uuid:"37E091B7-6FD0-47E8-94E4-A22585A3C717"}
 */
function onShow(firstShow, event) {
    // TODO Auto-generated method stub
    activeTab = application.getUserProperty(ontroller.getName()+"."+elements.accordionpanel_orders+".activeTab");
    if (activeTab)
    {
        elements.accordionpanel_orders.selectTabAt(parseInt(activeTab));
    }   
}