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.
The first thing you have to do while implementing is setting up the Firebase Collection name
The Firebase Repeater implements 3 display modes: medalist (image+text list), Collection (Image Grid) or Custom Template:
3 different Repeater display modes
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)
The collection display mode let’s you display the records as an image Grid with or without text information.
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.
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…)
For displaying your Data fields with a Custom Template display mode, you must add
inside the Template.
Example of Custom Template
With a Card, some Firebase Fields (Image and Text)
And an Action Button
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)
Depending on the display mode, you must choose the field names you wish to display in the list.
The medial list template lets you add 3 fields to the layout plus an optional image.
For the Collection view mode, you can set 2 fields that will be displayed at the bottom of every image.
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
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.
If you open a
from a Repeater, then by using the “Edit Current Data” mode, the Form will automatically be filled with the Repeater line Data and will let you edit the Record.