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. 

pandimmo.png 

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 

select_data_provider.png

 

 

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_new_property.png

 

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. 

nouvelle_proprie_te_.png

 

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. 

name_data_provider.png

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. 

collection_component.png

 

Inside, insert a Group (a container) that contains a sample card. This container will be duplicated from your contents. 

card_example.png

 

 

Add a Variable to the Collection Component

Open the Properties window of the Collection component. 

Fill in the source:

[data:ID_BDD(/COLLECTION_NAME)] 

 

 
source_component_collection.png
 
 

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.

source_text.png

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

refresh_data.png

 

 

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. 

pandimmo_selected.png

 

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)]

Screenshot_2020-08-24_at_13.28.05.png

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. 

Was this article helpful?
0 out of 0 found this helpful

Create apps and interactive experiences without any coding

Easy-to-use ∗ Free ∗ No installation

Sign up free