How components work
The component is the cornerstone of creation in PandaSuite Studio. There are more than 40 native components in the creation studio, but many other components have been developed by the community in hybrid format. These are custom components.
Just like a PandaSuite component, a custom component can:
- Have properties
- Define triggers
- Set up actions
- Create markers
- React according to languages
- Receive dynamic data (data provider)
- Synchronize with another PandaSuite component
Be careful: if you don't want to interact with other PandaSuite components (for example, you want to integrate the login of your Wordpress site), no need to create a custom component: just use the Web component with a resource.
Describe custom component
The pandasuite.json file allows you to describe how your custom component works and define its visual interface. It allows you to customize all the "classic" attributes of a component. They are arranged by category and can be easily reinterpreted in the studio.
To understand how to describe your component, let's look at the example of the react-media-player component (called URL Media Player in the studio). It allows you to insert audio or video content from an online platform (YouTube etc...) and interact with it.
This component is available on Github:
There are plenty of other possibilities. Feel free to browse the other components available on Github:
Send and receive information with the PandaBridge library
And its example:
Here are the details of the methods of the PandaBridge class:
- PandaBridge.init: it allows the initialization of the component, it is the one that will allow you to execute the functionalities of PandaBridge.
- PandaBridge.onLoad: this method is called only once, when the component is visually loading. It allows to receive the object properties and the list of markers defined in thepandasuite.json.
- PandaBridge.send: it is the way to send, to communicate from the component to the application. It is used to push up events/triggers.
- PandaBridge.synchronize: this method relies on a specific function in which the arguments correspond to the percentage of synchronization.
- PandaBridge.listen: it allows to receive studio actions, it is used for component actions.
- PandaBridge.isStudio: it corresponds to the action of being in the studio, for example in the case of the camera. It is of boolean type, it responds to
- PandaBridge.getSnapshotData: this is how to trace markers. It is paired with the setSnapshotData method
- PandaBridge.setSnapshotData: this is how to edit markers. It is paired with the getSnapshotData method
Here is the React library enabling communication with PandaSuite:
And its example:
Test & publish custom component
We recommend that you use these examples to create your component. You have several options to work on it: use the repository as a template via Github (you need a Github account) or download the Zip to work locally.
Scripts are available to test your component simply in a local environment.
Go to the root of the component.
This command installs all the dependencies of the project to start working on it.
To create the component zip (pandasuite-component.zip) and put it in your PandaSuite project.
Once your component is ready, this command publishes it on Github as a release.