Embedded App

Overview

An embedded app provides a seamless way to integrate one UI Bakery app within another. This feature enables the reuse of extensive logic blocks across multiple applications.

Embedded apps are perfect for handling complex logic, but they can slow down page loading. We recommend avoiding them unless multipage functionality is necessary. If not, then it's better to use modules instead.

Properties

Name	Type	Description
name	string	Component name
value	–	Last emitted event from the app

Methods

Name	Parameters	Returns	Description
setData	data: any	void	Set app data
reload	–	void	Reload the app iframe

Triggers

Name	Description
On Load	Triggered when the app loads
On Event	Triggered when the app fires an event

Working with the component

In this section, we'll review two ways of communicating with an embedded app - sending data from the parent app to the embedded app and vice versa.

Sending data from a parent app to an embedded app

You can send the data to an embedded app by calling the {{ui.app.setData({userId:1})}} method. Alternatively, you can also set the embedded app data in its Data field.

Then, in the embedded app, you can also subscribe to the On App Data trigger with the last received value accessible in the {{app.data}} variable.

Sending data from an embedded app to a parent app

To send the data from an embedded app to a parent app, you can call the {{app.triggerEvent({data:'data from embedded app'})}} method from any embedded app's code step.

Then, in the parent app, you can subscribe to the embedded app's On Event trigger, with the last received value accessible in the {{ui.app.value}} variable.