List View

One of the most frequent needs in an app is to show a list of things in a pleasant and flexible way. Lists of sermons, lists of groups, lists of people. Avalanche has a powerful system for displaying a list of text, icons, and images in a very flexible way. Avalanche uses a single app block to display different styles of lists. It takes a list of List Elements and displays them with a List View Component.

ListElement

{
    "Id":string
    "Title":string,
    "Description":string,
    "Icon":string,
    "Image":string,
    "TextColor":color,
    "FontSize":double,
    "DescriptionTextColor":color,
    "DescriptionFontSize":double,
    "IconTextColor":color,
    "IconFontSize":double,
    "ActionType":string,
    "Resource":string,
    "Parameter":string
}

Notes

Different components can handle the list elements differently. For example the Carousel component doesn't support icons. Most components will only show an icon or image even if both are supplied.

The Id of the list element is very important. On selecting the list element, if no parameter is specified, the Id will be passed to the next page as the parameter. Additionally, when the list view is updated it will look at the Id of every other element and will replace any duplicate Ids.

One of the most important parts of a list is the ability to select an item and be sent to that resource. When a user selects a list element Avalanche will first check to see if the list element has a defined ActionType and Resource. If those are not included in that particular element, it will fall back to the ActionType and Resource for the block itself.

Sending List Elements

Sometimes when loading the block you will want to have all of the list elements available instantly. Other times you might want your list elements to load as the user scrolls. The List View supports both of these options. The list information needs to be sent as a List in a JSON string.

If you want to send the list elements from the RockBlock when GetMobile is called put the JSON into the Attributes with the key "Content". The app will immediately load the elements and will not make a callback for additional elements.

You can also require the app to make a callback for elements after the block loads. To do this send any value for Attributes["InitialRequest"] and do not include Attributes["Content"]. You will need to support the request in the method HandleRequest. Whatever you set in Attributes["InitialRequest"] will be passed as the request argument in HandleRequest. List View components that support pull to refresh will use also this "InitialRequest" as the first request on refresh. If no "InitialRequest" is supplied pull to refresh will be disabled.

If you have a long list of content, you will not want to load it all at once. Rather as you scroll you will want to add additional content. The value of Attributes["NextRequest"] will as the request when additional content is needed. Often this is a page number. When a callback is made a new "NextRequest" should be supplied so that fresh content can be loaded when the user scrolls to the bottom.

ListViewResponse

On callback the response should be a JSON encoded ListViewResponse object. This is merely a list of elements and a NextRequest.

Note, Quirks, Gotchas

Putting a ListView that scrolls vertically (as most do) in a layout that scrolls vertically can make it so the ListView doesn't cause a callback when reaching the bottom.