On the product’s user interface, an app can be deployed in multiple locations. Also, a valid app placeholder can act as a parent location from which modals or dialog boxes are opened. The multiple app locations, a parent location, and the modals or dialog boxes all act as various instances of an app. You can use Instance Methods to,

• Set the app instances to a specified size
• Close the app instances
• Enable communication between the various instances

Set app instance size

To set the size of an app instance, including modals and dialog boxes, use the client.instance.resize() method as follows:

1
client.instance.resize({ height: "500px" });

Close app instance

To close an app instance, use the client.instance.close(); method in template.html or the html files used to specify the templates for the modal or dialog boxes.

Enable communication between instances

The Context, Get, Send, and Receive instance methods enable the following scenarios of communication between app instances:

• Send data from a parent location to a modal or dialog box
• Send data from a modal or dialog box to a parent location
• Send data from one location to another location: If an app is present in two locations on a page, a button click in a location can trigger an action in the second location.

All app instances have an associated context. The context of an app instance in the parent location comprises of an instance identifier and the location name. The context of an app instance in a modal comprises of an instance identifier, parent instance identifier, and any data passed to the modal from the parent instance.

You can use the context method in the template.html file (to retrieve the context associated with parent instance) or the html file associated with the modal or dialog box (to retrieve the context associated with the modal or dialog box instance) as follows:

template.html

1
2
3
4
5
client.instance.context().then(
  function(context)  {
    console.log(context);
  }
);

Sample output if the app instance is in a parent location

1
2
3
4
{
  instanceId: "1",
  location: "candidate_sidebar"
}

Sample output if the app instance is in a modal or dialog box

1
2
3
4
5
6
{
  instanceId: "4",
  location: "modal",
  parentId: "1",
  modalData: "The candidate has completed all rounds of interview"
}

You can use the method in the template.html file or the html file associated with the modal or dialog box,to retrieve the context of all app instances that are active at the time of the get() call. The method returns data - an array of context objects.

1
2
3
4
5
client.instance.get().then(
      function(data)  {
        console.log(data);
      }
    );

Sample output

1
2
3
4
5
[
    {instanceId: "1", location: "candidate_sidebar"},
    {instanceId: "2", location: "job_posting_hiring_process"},
    {instanceId: "4", location: "modal", parentId: "1"}
  ]

Note: You can use the method in conjunction with the send() method to send data to specific instances.

You can use the method to send data from an app instance to one or more instances.
Note: Ensure that all instances to which data is sent are active instances. You can use the get method to retrieve the context of all active instances.

To send data from a modal or dialog box app instance to its parent instance, in the html file associated with the modal or dialog box, use the following sample code:

1
client.instance.send({message: "data for parent instance"});

To send data from an app instance (in any location or modal or dialog box) to one or more app instances (other than the modal or dialog box’s parent), use the following sample code:

1
2
3
4
client.instance.send({ 
  message: {name: "James",email: "James@freshworks.com"},
  receiver: ["instanceID1", "instanceID2"]}
);

Note: To use the data that is sent to an app instance, ensure that the receive method is present in the html files associated with the destination instances.

You can use the method in a destination app instance, to receive and use data sent using the send method.
To receive data, in template.html or the html files associated with modals or dialog boxes, use the following sample code.

1
2
3
4
5
6
7
client.instance.receive(
  function(event)  {
    var data = event.helper.getData();
    console.log(data);
    /* data format is {senderId: "1", message: “Data sent from another instance”} */
  }
);

The data sent is retrieved by the event.helper.getData(); method. The retrieved data is an object with the following attributes: