# Component File

## Components <a href="#components-top" id="components-top"></a>

```
sample-integration/
├── components/
|   └── sample-integration.js
```

The components directory contains a component file that allows logic to be implemented and data to be manipulated on the client side of the integration (i.e., within the notification window). Components are typically used to format data on the client, or to receive user actions from the notification window. If you are creating a custom component then you should also create a [custom template](/integrations/build-an-integration/customizing-the-overlay-window/templates.md).

Components are an extension of the `Ember.Component` class so if you are familiar with Ember components there are no differences. You can read about Ember Components from the official [Ember Component Guide](https://guides.emberjs.com/v2.7.0/components/defining-a-component/).

### Setup <a href="#setup" id="setup"></a>

If you are following the recommend [directory layout](/integrations/build-an-integration/directory-layout.md) then your component file should be placed inside a `components` directory. At a minimum the component needs to extend and export a `PolarityComponent` object. Note that this is the primary difference between an Ember Component and a Polarity Integration Component.

The `Ember` object is already available within the Polarity component and does not need to be imported separately.

Components have access to the same data available to your templates (i.e., the data returned by your integration).

{% code title="components/component.js" %}

```javascript
'use strict';

polarity.export = PolarityComponent.extend({
    // This is an valid component but does nothing           
});
```

{% endcode %}

### Accessing Data

Components have access to the same data available to your templates (i.e., the data returned by your integration). You can access the data and even change it by using the `get` and `set` methods. All data returned by your integration in the result object is wrapped in a `block` object.

In the example, `init` is a special function that is called when a component is first initialized.

> Note that we call `this._super(...arguments)` which calls the parent init method to ensure any setup from the parent component is executed.

```javascript
// components/component.js
'use strict';

polarity.export = PolarityComponent.extend({
    init: function(){
        this._super(...arguments);

        // Get a property called `firstName` from `data.details`
        let firstName = this.get('block.data.details.firstName');

        // Set the value of firstName to be 'Ed' overwiting the existing value
        this.get('block.data.details.firstName', 'Ed');

        // Get the `isVolatile` flag
        let isVolatile = this.get('block.isVolatile');

        // Get the entity value
        let value = this.get('block.entity.value');
    }           
});
```

### Actions <a href="#actions" id="actions"></a>

Component Actions allow the component to react to user interaction in the template. The common example is to allow the user to react to a button being pressed in the template.

First we need to setup our template with a button. When the button is clicked it will trigger the `onClick` action in our component.

We then create a function called `doSomething` inside the `actions` hash of our component. The `doSomething` function will be called anytime a user triggers the `doSomething` action by clicking on the button.

```javascript
'use strict';

polarity.export = PolarityComponent.extend({
    actions:{
        doSomething: function(){
            // this function is triggered anytime a user clicks on the button                
        }   
    }                 
});
```

### sendIntegrationMessage(payload)

```

@method sendIntegrationMessage
@param payload, the data you want to send to the server
@return Promise

```

You can send messages to the server's [`onMessage`](/integrations/build-an-integration/main/onmessage.md) method by using the utility method `sendIntegrationMessage` available via the Polarity Component.

The method returns a [Promise](https://www.emberjs.com/api/ember/2.18/classes/Promise). If the promise resolves successfully it will return the response from the server.

```javascript
'use strict';

polarity.export = PolarityComponent.extend({
    message: '',
    actions: {
        sendMessage: function () {
            let self = this;
            this.sendIntegrationMessage({data:'this is some data'}).then(
                function (response) {
                    self.set('message', "Success!");
                }).catch(function (err) {
                    self.set('message', "ERROR!");
            });
        }
    }
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/component-file.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.