Component File

Create computed properties, trigger actions, and add interactive elements to your template

Components

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.

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.

Setup

If you are following the recommend directory layout 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).

components/component.js

'use strict';

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

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.

// 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

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.

'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 method by using the utility method sendIntegrationMessage available via the Polarity Component.

The method returns a Promise. If the promise resolves successfully it will return the response from the server.

'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!");
            });
        }
    }
});