Tutorial 9 How to create a Section List

What you will learn in this Tutorial

How to Create a Section List

Download Source Code - Tutorials - Source for this tutorial is in appemble-tutorial-list

Must Read

Tutorial 6 How to create a list

Good Read

Tutorial - How to Navigate from LIST Control

Tutorial - How to create a Searchable List

Reference LIST control

Introduction

Pre-requisite for this tutorial is Tutorial 6 How to create a list. In this tutorial you are going to learn how to create a section list.

What is a section list?

It is a list with headers above a group of list items. For example in the fig below, shopping list category - Grocery and Office Supplies are the section headers. The items in the category are displayed under the category header.

Android iOS
../_images/section_list_small.png ../_images/ios_sectionlist1.png

Note

The source code for this tutorial is in appemble-tutorial-list

Create a Section List

In the sample code below, look carefully at the hierarchy of controls for Section List.

<control type="LIST"......section_header="header"> <!-- Defines the list control -->
    <control name="header" type="CONTROL_GROUP".......>  <!--Defines the Section Header.-->
        <control type="TEXT"........./> <!-- Child control on the Section Header -->
        <control type="TEXT"........./> <!-- Child control on the Section Header -->
    </control>
    <control type="TEXT"........./> <!-- Child control of LIST Items -->
    <control type="TEXT"........./> <!-- Child control of LIST Items -->
</control>

Note

  • It is mandatory to define attribute section_header in control type LIST
  • The control name should match with the value of section_header. The name is mandatory.

This tutorial extends the list tutorial project from Tutorial 6. Create sectionlist.xml

<screens>
    <screen name="sectionlist" screen_type="SCREEN" menuOrder="3"
        menuName="Section" initial_layout="PORTRAIT"
        allowed_layouts="BOTH"
        width="100" height="100" tab_group_name="tabgroup1">
        <title_controls>
            <control type="TEXT" x="0" y="1" width="100"
                height="6"
                default_value="Section List" appearance_name="white"
                data_type="VARCHAR">
            </control>
        </title_controls>

        <controls>
            <control type="LIST" x="0" y="0" width="100" height="100"
                permission="READONLY" appearance_name="black"
                section_header="section_header"
                data_type="CURSOR"
                local_data_source="select list_item_id as _id, item,
                category from myshopping_list order by category"
                ios_list_style="sectioned_list">
                <control name="section_header" type="CONTROL_GROUP" x="0"
                    y="0" width="100" height="5" permission="READONLY"
                    appearance_name="blue_bkgrnd" data_type="VARCHAR">
                    <control type="TEXT" x="3" y="1" width="40" height="5"
                        permission="READONLY" appearance_name="white_bold"
                        data_type="VARCHAR"
                        field_name="category" />
                </control>
                <control type="TEXT" x="3" y="2" width="27" height="7"
                    permission="READONLY" appearance_name="black"
                    data_type="VARCHAR" field_name="item" />
            </control>
        </controls>
    </screen>
</screens>

The app is ready for testing

Android - Right click on the project and click on Run as Android application.

iOS - Click on Product -> Run.

Download and Run Tutorials

This chapter uses source code from appemble-tutorial-list. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-list and click on Run as Android application.

iOS - Select scheme appemble-tutorial-list and iPhone x.x simulator. Click on Product -> Run.