> For the complete documentation index, see [llms.txt](https://docs.work-relay.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.work-relay.com/forms/using-forms/how-to-pass-data-to-lightning-component-from-work-relay-form.md).

# How to pass data to lightning component from Work-Relay form

User can communicate with lightning component built in to the form via Fire Event form action.

Below example illustrates how to toggle component UI visibility via firing application event.

{% stepper %}
{% step %}

## Add Lightning Component to the form

Add component to fire event (checkbox (1) in example below):

[Adding lightning component to the form](/forms/form-components/options/lightning-component.md#working-with-component)

![](/files/db21466623b00f08e416ac6e0c24f2eaf49781e1)
{% endstep %}

{% step %}

## Create application lightning event and add handler to Lightning component

Below test event is named "**invoke**" and has "**displayComponent**" attribute which will pass TRUE of FALSE to the lightning component.

```xml
<aura:event type="APPLICATION" access="global">
    <aura:attribute name="displayComponent" type="String" access="global"/>
</aura:event>
```

Below handler and attribute are added to component:

```xml
<aura:handler event="c:invoke" action="{!c.toggleVisibility}"/>
```

```xml
<aura:attribute name="display" type="String"/>
```

Component UI will be displayed on the form if `display` attribute is set to TRUE:

```xml
<aura:if isTrue="{!v.display == 'TRUE'}"> 
... 
... 
 
</aura:if>
```

**toggleVisibility** function added to component controller updates '**display**' attribute with event '**displayComponent**' parameter:

```javascript
toggleVisibility : function(component, event, helper) {
   component.set("v.display", event.getParam("displayComponent"));
}
```

{% endstep %}

{% step %}

## Add action of 'Fire event' type to the form

![](/files/5cd87bc52f2ccb5192ca6910c32bf279428e194f)

* Populate "Name" field (2) with event name using *c:eventName* if your organization doesn't have namespace, and *namespace:eventName* if it does.
* To pass parameters (3) to application event use event attribute name as a parameter name:

![](/files/17b672839721c2481a93b0c8ce7189284f554954)
{% endstep %}

{% step %}

## Add event(s) to run Fire Event action

Below is setup of two onChange events tied to the checkbox component.

First event (4) will be fired when checkbox is checked (see event conditions on the screenshot below) and will pass TRUE to the lightning event - this will display lightning component UI on the form.

![](/files/5cc3cfdb5b626435abe50c808a9e135cf7d81eab)

Second event (5) will be fired when checkbox is unchecked (see event conditions on the screenshot below) and will pass FALSE to the lightning event - this will hide lightning component UI on the form.

![](/files/f91fa217fa4ee72df7b299dd48c97c2d9b4ba954)
{% endstep %}
{% endstepper %}