Topic Progress:

Now youadvanced-iframe-properies know how to use the basic IFrame and some nested IFrames we will look at Parent Child communication. This is where you want your parent dashboard to be able to communicate with your child and vica versa. For example, this will allow you to pass menu selections from the parent to the child and back again.

  1. Create a nested parent dashboard as before.  Again we will have two children
  2. Now after you’ve bound the URL to the spreadsheet cell we will set up the communication
  3. In the Data Insertion section you can add a number of series, or variables
    • One is created for you by default called Series1
    • You can add more by pressing the +at the bottom
  4. The name you give the series is important, as this is how you will reference the variable in the child dashboard.
  5. Select the direction of communication:
    • Input > This is where the component will receive the contents of the variable.  (eg the child listening to the parent for updates to the variable)
    • Output > This is where the component will send changes to the variable.  (eg the parent sending updates to the child)
    • Both > This is where the component will listen for changes and also send updates.  (eg the child is listening for changes made by the parent, but will also send updates to the parent if the variable is changed in the child dashboard)
  6. The source field is only enabled on Output and Both directions.  This is the contents of the variable you are sending.
    • When you bind this to a spreadsheet cell, the component is continually monitoring that cell.  As soon as a change in the value of the cell is detected, it will send that change to anything listening for the variable name.
  7. The destination field is only enabled on Input and Both directions. this is where the contents of the variable will be stored.
    • As soon as the component hears a change to the variable, it will update the contents of the destination cell with the new variable contents.
  8. In our example we will set up one output called companyCode and one Input called MenuSelection

We have the parent set up, so that is can send and listen for communication, now we need to set up the child dashboard(s) to handle the communication too.

  1. The approach for the child is similar to the parent
  2. Add the Advanced IFrame Component onto the  canvas
  3. Select the IFrame Type as Child
    • The URL and Refresh fields will disable as they are not needed in child dashboards
  4. You need to add Series (or variables) into the Data Insertion section to be able to send and receive communication
  5. Ensure that you use the same Series Names as you used in the Parent dashboard.
  6. In our example we will set up one Input called companyCode and one output called MenuSelection
    • Note these are the opposite direction to what we set up in the parent
  7. Now when the CompanyCode is changed in the parent, it will immediately reflected in the child,  and when the MenuSelection is changed in the child, it will immediately reflected in the parent.

Now dCode your parent and child dashboards and remember to place the child dashboards within the folder structure of your parent.iframe-parent-child