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.
  

  NOTE

  The Collection display mode is not powered by the Virtual List Component, and is limited to 99 records.
  With the current version, the Collection View Mode can’t work with Firebase Search Box and Firebase Action buttons, it will be implemented in a future release.
  

• 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…)
  

  NOTE

  For displaying your Data fields with a Custom Template display mode, you must add Firebase Fields inside the Template.
  

  

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

  Important

  Custom Repeater must have a Fixed height, if you have elements inside the template that have a dynamic size (Long text, Responsive Image….) you must make sure that these elements have always the same size! See the example below:
  

  

  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.

Advanced Parameters

In the Advanced tab of the dialog, you can add initial filters and order parameters.

• Initial Filter. If selected, then you can add some additional filters.

• Filter. You can add 2 lines of request by setting the Field name, the operator and the search value.

  TIP

  For Alphabetical Search, use the filter MyVar >=B and MyVar<C if you want all the records beginning with a B
  

  TIP

  For Searching a field that is equal to the current connected user UID, then use {useruid} as value.
  For example: createdby and modifiedby fields are added to all records automatically and contain the user UID who as created or modified the record.
  

• Sorted By. Set the sorting field (asc or desc) you want to use by default. (Firebase may ask you to create an index in this case)

• Row Limit. Set the maximum number of rows you want to load (unlimited by default)