Message Passing is a very unique feature of the Studio, where we embed our micro-app in a webpage and pass data to the embedded app from the website itself. The major use-case of this feature is to pass data from the website to the micro-app which is being embedded in a webpage.
With the feature of Message Passing, users can pass data from the website to the embedded micro-app without using any sort of API calls or connecting to the database. The data gets saved in the variables created for the microapp and later these variables can be used from the microapp itself.
Message Passing configuration
On Studio you can find the gist of Message Passing info and its steps from Settings > Embed Settings > Message Passing.
Prerequisite of Message Passing
-
Variables must be created in the app builder of Studio for the microapp. These variables are required to store the passed message from the website.
-
Bind the variables in the app wherever required. You can bind the variables in different controls so that when the data is received in the variables after the message passing, it will be visible in the controls of the embedded microapp.
-
Publish the app and secure the IFrame code from Share > Embed Settings > IFrame. This URL will be used to embed the microapp in the website.
Implementation of Message Passing
There are certain steps to follow, to make successful use of message parsing for your embedded app.
-
In the HTML file of your webpage, where the micro-app is going to be embedded, import the dedicated JS library for message passing.
CODE -
<script src="https://cdn.dronahq.com/js/DronaHQInterface.min.js"></script> -
Now, use the previously secured IFrame link of the micro-app and embed it in the html file.
-
Initialize the plugin for the added library. In order to initialize the library, you need to pass the iframe DOM reference to DronaHQ.intialize method after iframe is loaded.
This initialization occurs on an event being triggered. This can be done on click or on load and etc. The event we have used is load. The reason behind this is to implement library and other scripts only after loading of the iframe with the embedded app.
CODE -document.querySelector('iframe').addEventListener('load', function (e) { // Step 2:- Initialize the Iframe For message passing DronaHQ.initialize(e.target); }) -
Next step of message passing is to send data. Now in this step, we have to focus on two important things:
a. Data – You have to make sure about a few aspects of the data which is to be sent in the message passing. The passed data must be in JSON format in which each key of that object represents a data variable in the embedded micro app.eg:
{
“Text”: “Macle Windler”,
“Number”: 45,
“Array”: [
{
“price”: “1001”,
“type”: “Regular”
},
{
“price”: “1002”,
“type”: “Chocolate”
},
{
“price”: “1003”,
“type”: “Blueberry”
},
{
“price”: “1004”,
“type”: “Devil’s Food”
}
],
“Json”: {
“BillId”: “0001”,
“FoodType”: “donut”
}
}b. SendMessage Function – DronaHQ.sendmessage function is used to send the data from the parent to the embedded microapp. This will set the message/data to the representative data variable.
Working of Message Passing
After completing all the above steps, your HTML code would look something like -
>
> <head>
> <meta charset="UTF-8">
> <meta http-equiv="X-UA-Compatible" content="IE=edge">
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>Document</title>
> <!-- step 1 :-add CDn on your project -->
> <script src="https://cdn.dronahq.com/js/DronaHQInterface.min.js"></script>
> </head>
>
>
> <body>
> <div>
> <div> Enter You Json here</div>
> <textarea style="width: 500px;height:200px;">
> {
> "Text": "Macle Windler",
> "Number": 45,
> "Array": [
> {
> "price": "1001",
> "type": "Regular"
> },
> {
> "price": "1002",
> "type": "Chocolate"
> },
> {
> "price": "1003",
> "type": "Blueberry"
> },
> {
> "price": "1004",
> "type": "Devil's Food"
> }
> ],
> "Json": {
> "BillId": "0001",
> "FoodType": "donut"
> }
> }
> </textarea>
> </div>
> <br>
> <button onclick="sendData()">Send</button>
> <!-- <iframe class="studio-embed" src="https://web.dronahq.io/sachinapp?type=emd" frameborder="0" style="background: transparent; " width="100%" height="533" ></iframe> -->
> <iframe class="studio-embed" src="https://web.dronahq.io/shrutiEbmed/Screen 1" frameborder="0"
> style="background: transparent; " width="100%" height="533"></iframe>
>
>
>
> <script>
> document.querySelector('iframe').addEventListener('load', function (e) {
> // Step 2:- Initialize the Iframe For message passing
> DronaHQ.initialize(e.target);
> })
> function sendData() {
> let dataValue = JSON.parse(document.querySelector('textarea').value)
> // Step :-3 send the Json
> DronaHQ.sendMessage(dataValue);
> }
> </script>
> </body>
Open the HTML file in the web browser -
We have a text area on our webpage where we will feed the data for message passing.
On click of the set button, it will trigger the sendMessage function fetching the data from the text area.
