Components

Components are the cornerstone of creation in PandaSuite Studio, and they give you the greatest creative freedom. They are flexible, powerful and synchronizable with each other. Discover the list of components, their role and how to edit them.


In this article

What is a component?

A component is a ready-to-use module that allows you to add effects (scrolling, pop-up,...) and features (integrated purchase, authentication...) to your application. You can customize it fully with your content. Here are the features of a component:

Edit a component

Click on Components to access the list of components. 
Go to the properties to edit its characteristics. 
To edit the content of a component, you have to go inside it. Click on it in the Objects list. 
To create an action on a component, select a trigger event and choose the action Interact with a component, then select the component with the interactive selection. 
To create a marker, enter inside your component and go to the Navigation window on the left. 

🤷 A marker is a specific behavior of your component: for example, the time of a video, the position of a scroll, a degree of tilt of the device... A marker allows you to define a default behavior for this component, trigger an action and be the target of an action.

Graphic components

They allow you to create visual effects in your screen. Insert your content inside these components and customize their properties.

  • Interactive zone: this is a transparent zone to place where you want to trigger an action. 
  • Gallery: a kind of carousel or slideshow that scrolls horizontally or vertically. It is composed of pages in which you can insert any type of content. 
  • Multi-state: this component allows you to create several states of an object or a section of your screen to animate it.
  • Pop-up: also called modal, it is displayed above your screen and must be closed to continue browsing. 
  • Drag & Drop: drag (with your finger or mouse) a draggable object to a droppable container while keeping it selected.
  • Video player: display video on your screen. You can display or not the video player controls. 
  • Image sequence: insert a GIF, an image sequence or to transform a video automatically into an image sequence. 
  • HD Image: only with very high quality images (HD). It allows you to zoom in on the image to see the smallest details.
  • Web: display web content in your application via a webview/iframe and create actions on the web content. It also allows you to insert custom components.
  • Camera: itgives you access to the camera from the application: it allows you to take a picture without leaving the application and to display this picture in your application.
  • After Effects: export your animations in JSON format from After Effects with the Bodymovin plug-in, optimize the weight and improve the quality of your animations. Create numerous interactions between your animations and other components. 
  • 3D/Augmented Reality (AR): insert a 3D object, create interactions and visualize it in a real environment with augmented reality.
  • URL Media Player: insert audio or video content from an online platform (YouTube, Facebook, Soundcloud, Vimeo, Twitch...). An Internet connection is required to display the content.
  • 360°: display a 360° image or video and create specific interactions. 
  • Map: you can display a map in your application, create markers (points of interest, zones) or display a route. 

Layout components

These components facilitate the layout of your screens.
  • Group: group your objects. This is particularly useful to represent an element in a collection, to associate the same interactivity to several objects, to create an animation or to facilitate the responsive management of your screens. 
  • Scrolling Area: create a scrolling list, a scrolling page, a scrolling image... transform your content into a scrolling object according to a horizontal or vertical axis or both.
  • Flexbox: arrange objects in rows or columns along a main axis. Elements expand or retract to occupy the available space.

System components

These components expose native device functionality. Warning: some of them are not compatible with the web app/PWA because browsers limit access to these system features. 

  • Motion Sensor: create motion and tilt related effects on your iOS or Android device using the accelerometer and gyroscope. 
  • Blow Sensor: using the microphone saturation, create a breath related action on an iOS & Android device.
  • Compass sensor
  • Shake sensor
  • Beacon Sensor: beacon sensors are small devices running under the Bluetooth Low Energy (BLE) standard. They emit a signal that can trigger actions on an iOS or Android device when it is next to, near or far from this sensor. 
  • Video (full screen): display a video in full screen 
  • Audio: insert an audio file and associate actions to it (play, pause, create markers, synchronize...)
  • Timer: manage the notion of time, for example to create a counter. It synchronizes with all other components. 
  • Bluetooth BLE: it allows communication between devices via the Bluetooth Low Energy (BLE) connection. Specifically, this connection is made via the transmission and reception of features within an application (or even several).
  • Image recognition: scan an image with the camera and trigger the action of your choice. Ideal for guided tours and treasure hunts. 
  • Download: by default your entire app is downloaded by users. This component allows you to manage partial downloads of some parts of your application. 
  • GPS: define zones around GPS coordinates to which you can associate actions when the user enters or leaves the zone. 
  • Synchronization: this is a special component: it allows you to synchronize several components to create a palette of effects. 

Data components

These components allow you to interact with data and services external to PandaSuite

  • Firebase session: to manage a user session (logged in/out) and associate data to your users (score, progress, account type...) with Firebase
  • Authentication: to display an authentication form with Firebase
  • Collection / List: this component manages an ordered collection of data and presents them in the form of a list of elements in a horizontal or vertical orientation. 
  • Search: perform a search on a data source or on all the texts of your application.
  • Text Input: insert an input field. 
  • Virtual keyboard 
  • HTTP: to connect your app to other apps or services using APIs.
  • Form (Tripetto): integrate a form created from the Tripetto online service, view it offline and associate events and actions to it. 
  • QR Reader:
  • In-app Purchase: to set up in-app payments in your app (in-app) using the Apple App Store and Google Play Store payment system.

Create a custom component

If you have HTML/Javascript knowledge, you can also create your own components to add new features. Using our PandaBridge libraries (Javascript & React), you can send, feed back information and interact with other components. 

Learn more: Custom component

Still need help? Contact Us Contact Us