Dynamic data allows you to automatically generate content from a database. This feature offers a real time saving for projects that require a large volume of content or content that evolves over time: catalogs, magazines...
This feature is available on request in the beta version of PandaSuite. It requires a Pro account.
Introduction to Dynamic Content
Static content is content that is manually inserted into your screens.
Dynamic content is automatically generated from a database. It makes it easier to manage large volumes of content and to dissociate the design from the content.
All content is stored in a data provider.
This functionality is currently only available in the beta version of PandaSuite. It requires a good knowledge of the tool and some technical manipulations.
Create Database
Let's take the example of a real estate catalog. We are going to prepare the database that contains all the properties. Each record contains the name of the property, the visual, the address, the price and a description.
Create The Data Provider
Click on Project in the breadcrumb trail.
Double-click on the Data provider in the Object list. You can change the name of this data provider
The properties
A database is built from properties. There are several types of properties:
- Boolean comprend 2 états : vrai ou faux
- Number
- Color
- String
- Date
- Screen
- Image
- Audio
- Video
- Sequence
- Image HD
- Zip
- Array
- Keys/Values
- Collection
- Reference
- References
Create Collection
It all starts with a collection. In our example, this Collection contains the properties and is composed of several properties: Name, Image, Price, Location etc...
Add a Collection property and choose its name, replacing new_key. This name will be reused, we will mention it like this : COLLECTION_NAME
Click on the Settings icon to edit the properties of your collection.
By default, your new collection includes 2 properties: id and name.
Click Add new property to add the date, description, price and image fields:
- A date property for the date
- A string property for the description
- A number property for the price
- An image property for the visual
Write down the name of these properties (replacing new_key). This will be your PROPERTY_NAME
Click Save.
Edit Content
Click on O ITEM(S) to add the content of your properties.
To add an item, click on Add new item. Rename each item (for example: 2 bedroom apartment Paris). Click on the button on the right to edit the content of the form.
NB: if you have a large volume of content, our team can assist you with integration via more automated solutions.
Get Data Provider Identifier
The identifier is required to add variables.
To retrieve the identifier of your data provider, double-click on the name.
Paste into a text field and identify the ID.
DataProvider -> dataprovider: ###################.
Note carefully this identifier: ID_BDD
Display a Collection
Now that you have integrated the content, let's prepare the display of the listing. This is a scrolling list presenting all the properties as cards.
Insert the Collection component
The Collection component allows you to display the contents of a collection, based on certain display settings.
Insert the Collection component from the Components window.
Inside, insert a Group (a container) that contains a sample card. This container will be duplicated from your contents.
Add a Variable to the Collection Component
Open the Properties window of the Collection component.
Fill in the source:
[data:ID_BDD(/COLLECTION_NAME)]
Add a Variable to Text and Image
Go into the group. For each item, add the corresponding variable from the Properties window. Click on the icon at the top right and the Add button.
For text:
[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(rowId)]/PROPERTY_NAME)]
For images:
[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(rowId)]/PROPERTY_NAME/value)]
Refresh Data
The last step is to update the data on the screen display.
Select the screen and open the Interactivity window.
Select Current Screen > Interact with a Component > select the database in the Project Level Objects window > Refresh Data
Display {selected} Content
Now let's imagine that you want to display the entire form when you click on the thumbnail. You now need to integrate the { selected} parameter.
First, prepare the opening effect by placing a pop-up component above the thumbnail or by using states.
Prepare the design.
Add a {selected} Parameter to Text and Images
Go into the group. For each item, add the corresponding variable from the Properties window. Click on the icon at the top right and the Add button.
For text:
[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(/selected/value)]/PROPERTY_NAME)]
For images:
[data:ID_BDD(/COLLECTION_NAME/@getById:[data:ID_BDD(/selected/value)]/PROPERTY_NAME/value)]
Open {selected} content
Select the card.
Click Interactivitiess.
Choose the Simple Tap trigger and the Interact with a Component action > Select the database in the Project Level Objects window > Modify the data
Data : / REFERENCE_NAME/value
Fonction : set
Valeur : [data:ID_BDD(rowId)]
Please contact us if you wish to have access to the project presented Pandimmo.
Updates
To update your dynamic content, go to the Data Provider and click Move to Production. This update does not require any user action.