Sourcecode

Please see the **UgListControlDemo** project for the source code created in this chapter. See [Installing examples](🔗) for information on how to download the examples from https://github.com/scadedoc/UgExamples/tree/master/UgListControlDemo

# Introduction

Our list control is very powerful because it's very versatile. You can configure it to do many things.

  • Its can contain list elements of **different** types

  • Each list element can be **composed** of many other elements

  • You can **hide and show certain elements** programmatically

  • You can change a lot of the characteristics by simply binding it to control variables

  • The list control uses native graphics as well as platform specific behaviour, i.e

    • Controls within the list control such as label or button are mapped to its respective native iOS and Android platform

    • Drag and drop & slide or any touch movement use the algorithms of the respective native iOS and Android platform and are native

# Displaying an array in a list control

In this example, we want to display the first 100 most popular dog names (from 2020) together with a breed and id.

## Add list control to page

  • We use the contraints box to make sure it uses all the space available

(Script tags will be stripped)


## Add controls to list template

We add the controls we want to see in each list element

  • Each list control contains a list of list elements

  • Each list element contains the same visual controls to display the data

  • The list element is designed using the the list controls's list element template

  • In this example, we added 3 test labels into a GridView

(Script tags will be stripped)


## Define Data Model

  • We use the Dog class to display a list of dog names and breeds

  • We inherit from EObject



## Bind data to controls

Bind the list elements visual control to the data

  • In order to bind the view to the model, we use the SCDWidgetsElementProvider class

  • Its set using <listControl>.elementProvider

  • You set an instance of SCDWidgetsElementProvider and add the logic that binds the data to the list element's visual controls

  • The template parameter is of type SCDWidgetsGridView. Use the getWidgetByName method to retrieve a reference to the visual control and set the data from the Dog class instance:



## Set the data source of the control

  • Define the source of data by setting the **items** property

  • Its a collection of data objects



## List Control lists data successfully

(Script tags will be stripped)


# Add handler to process row click / item selected event

To add logic whenever a row is clicked,

  1. get a handle on the list control and cast the object to **SCDWidgetsList**

  2. add the event handler to the <listControl>.**onItemSelected**

  3. The event handler is called **SCDWidgetsItemSelectedEventHandler**


  1. The event it fires is **SCDWidgetsItemEvent**

  2. The item is contained in a field called **item**

  3. Just cast it to the target structure



Entire class looks like this



Works nicely:

(Script tags will be stripped)


# Add swipe support

Swipe support allows you to display custom areas containing buttons etc when you swipe the list row left and right. We describe adding a button to the right hand side of the listelement:

  1. Press the > arrow to open up the panel on the right

(Script tags will be stripped)

  1. You then can add any control, for instance a button that we will call btnListRowInfo with the title Info. We change background and font color:

(Script tags will be stripped)


All you need to do is to wire up the button. That's pretty easy:



# Add grouping separator to list control

Adding a separator row to indicate the start of a new set of data is a common use case:

(Script tags will be stripped)


We use the power and flexibility of the list control to add a seperator row. We insert two horizontal layout grids to the list element, and then add the labels indicating the group value and the data details in the respective grid:

(Script tags will be stripped)


The way to achieve this is to hide the elements that form the separator line when the dog's data need to be displayed, and hide the Dog data when the group view needs to be displayed. Therefore, we put all group separator related elements in **viewGroup** and all detail related elements into **viewDetails**.

In order to avoid having to code this using Swift code, we add two variables **isGroup** and **isDetail** that indicate if the item is a group separator or if it is a detail row:



To hide any layout grid, we need to set two attributes, Layout.exclude and Layout.visible:

  • we set Layout.exlude to **true** and

  • we set Layout.visible to **false**

We do this using our binding editor:

(Script tags will be stripped)


Finally, we only need to supply the data item:



Now, we grouped our dogs by breed, with full design control of the grouping row.

(Script tags will be stripped)


# Create clicked animation effect on list element

This chapter explains on how to add a fade animation effect that visualizes that a row has been clicked. After clicking a row, the background color with turn to gray and that gray color with slowly fade:

  1. **Create a new project** and **add a list control** into the main page. Add a label into the list

  2. Create a reference to the list control and add an event handler when the list row is clicked


  1. Each list consists of a list of **SCDWidgetsListElement** that represent an individual list item. The **element** variable in the event contains the reference to the element


  1. Now we change the list element's background color. Once the code is executed, the list element becomes gray


  1. Now the most important part. **Get background rectangle inside list element**:. Each list element is represented as a SVGGroup, which in turns contains a box which holds a rectangle. The rectangle is the correct element to modify to change the background:


  1. Finally, we add an animation that changes the opacity, as such giving a fading effect. (Alternatively, you could have changed the color itself). The animation guide contains a lot more details on animation:



Please see the full source code below



Result: