Understand components

Discover the power of components and what you can make with them.

Everything is component

In PandaSuite, each feature is represented by a component: Pop-up, Scrolling Area, GPS… This way each feature is flexible, customizable, and synchronizable with another feature. This is how PandaSuite gives you the most creative freedom. 🚀

Like Legos®, each component is composed in the same way, in the form of a common, abstract principle that allows the connection between them, without being specific to those same components.

There are several types of components:

Graphic components (HD Image, Drag & Drop…),
Layout components (Flexbox, Group…),
System components (GPS, Beacon Sensor, Motion Sensor)
and Data components (Collection List, Authentication…).

Click on the Components icon to get the full list.

You can add components anywhere you want in your application: in a screen, in a foreground and even at the project level. When a component is added at the Project level, it is active throughout the application (which can be useful for a Timer or the HTTP component).

When you add a component, it appears in the Objects list at the bottom left. Non-visual components are isolated from other components by a separator and are placed at the bottom of the list. You can rename your components.

The scrolling area appears in the object list of the Cities screen.

Characteristics of a component

Every component has the same characteristics:

It has properties
It has triggers to start an action
It can be the target of one or more actions
It is customizable using markers
It can be synchronized with all other components
It reacts according to languages
It can receive data.

Edit a component

To edit the content of a component, you have to go inside this component: there is a notion of depth.

To go inside, double-click on the component. This component becomes the context. The breadcrumb trail, at the top of your screen, allows you to see where you are in your navigation and exit this component.

Inside a visual component, you can add all kinds of content: images, text etc. You can even add one or more components and create advanced nesting.

Here you are inside a Scrolling Area that contains a Group.

You can create markers on your components, i.e., identify one or more specific behaviors of this component and use it for an action. This can be the time of a video, a scroll position, a degree of tilt, etc.

Go to the left window to edit and manage your markers.

These Scroll Zone markers trigger animations above the image

Properties of a component

The properties are specific to each component: source, autoplay, orientation, margin…

Edit the properties from the right window.

Here are the properties of the Video Player.

Actions of a component

Your component can be used as a trigger for an action.

To trigger an action from a component, select the component and click on Actions.

Choose a trigger event from the list: some events are specific to the component and others are common to all components.

Gallery triggers include the display of each page.

Your component can also be the object of an action. Once you have chosen your trigger event, select the Interact with a component action > select this component and choose an action.

Here are the actions for the Gallery component.

Synchronize components

Synchronization allows you to synchronize several components with each other. For example, you can synchronize an Audio Player with a Scrolling Area to scroll content according to the music. Or synchronize two (or more) Scrolling Areas together to achieve a Parallax effect.

Insert a Synchronization component and create a synchronization group with your components.

This synchronization between 3 scrolling areas allows to build a Parallax effect.

Create a custom component

If you are a developer and want to add new features, you can create your own Custom Components.

We provide you with our PandaBridge libraries (Javascript & React) that allow you to send and receive information between your code and PandaSuite.