Firebase Repeater Widget

The Firebase Repeater lets you display a set of Data (Client List, Product List …) provided by the API

Firebase Repeater are powered by the Framework7 Virtual List ,  when the App is started, all the data from the JSON Source are loaded in memory, and the Virtual List engine will render the data without loss of performance by rendering only the visible data onscreen. 

Setup the Firebase Collection Source for the Repeater

The first thing you have to do while implementing is setting up the Firebase Collection name

Choosing a Display mode

The Firebase Repeater implements 3 display modes: medalist (image+text list), Collection (Image Grid) or Custom Template:

...
...
...

3 different Repeater display modes

  • Media List. This display mode will render the JSON data as a list with (or without) an image.
    You can set the image size and display it rounded.
    The right side can display up to 3 different fields (named First Field, Second Field and Third Field in the interface)

  • Collection. The collection display mode let’s you display the records as an image Grid with or without text information.

  • Custom Template. With this Display Mode, you can virtually setup any type of layout, the “Repeated Zone” is empty by default and you can add any type of component inside (Cards…)

    ...

    Example of Custom Template
    With a Card, some Firebase Fields (Image and Text)
    And an Action Button

    ...

    This is what happens by default if the text styles are not well defined: the text overlaps

    ...

    In order to solve this kind of problem, you must either use the " Single Line (no wrap) " text alignment available in the settings of the Firebase fields.You can also define a fixed height for the Firebase control, and use the " Clampin " attribute (Advanced Text Properties) which allows you to set the number of visible lines. (See Screen shot above with the description having a Clampin value of 2)

Setting Up the Fields to display

Depending on the display mode, you must choose the field names you wish to display in the list.

  • Media List. The medial list template lets you add 3 fields to the layout plus an optional image.

    ...
  • Collection Layout. For the Collection view mode, you can set 2 fields that will be displayed at the bottom of every image.

  • Custom Template. For the Custom template view mode, there is more flexibility as you can add all the fields you want to display in a list line.
    You can also add Images , audio or videos files.

    For adding fields, just drop the widget “ Firebase Field ” into the Repeater template and set the name of the field.

    ...

    Example of Custom Template

Detail Page

The last thing you have to setup in your Repeater are the detail page.
Note that this is only required if you want a master/detail behaviour, if you let theses parameters empty, then there won’t be any action triggered when the user will select a line.

The “Detail Page” is the target page that will be open when a user select a list line.
In general this page will contain a Firebase Displayer for displaying the record detail.

Copyright©  Nymphide Lab 2020 - All Rights Reserved 

...