Applets are a way for you to integrate FreeAgent CRM with any custom application. These applications can work under the same context as our web application thanks to a library developed by our platform team.
What can you do with Applets?
- Open Applets based on an app action.
- Exchange data between FreeAgent CRM and your Applet.
All our customers can have access to download the library at the following link: [Soon]
All our customers have access to our integration with RingCentral: [Soon]
Applet library introduction:
Applets are able to print regular HTML+CSS and javascript code, the only restriction is, that in order for FreeAgent to render your web application, you will need to initialize our FreeAgent Applet Client.
As soon as you download/fork the library and add it to your project, the first thing you need to do is create an instance of the FAAppletClient object.
The constructor of this class expects an appletId.
FAClient = new FAAppletClient({
appletId: appletId,
});
You will be able to get your Applet ID from FreeAgent CRM, just navigate to
App Setup > {Your Applet } > App configuration.
At the very bottom of the page, you will find the “Applet ID”.
The Applet ID is generated based on the URL of your application, so in order to FreeAgent generate an applet id for you, you will need to provide first the URL of your application. Once you add the URL of your application and save the configuration, the applet ID will be generated.
Now that you have the class FAAppletClient initialized, you will be able to use the Applet in FreeAgent CRM.
The FAAppletClient has 3 main purposes:
- Initialize your applet
- After initializing the FAAppletClient, don’t forget to pass the Applet id as it is required to form the connection between FreeAgent and the Applet.
- Create events
- You will be able to create different events that can be triggered within FreeAgent CRM through app actions.
- Send information back to FreeAgent
- You can update, create, delete, or even get a list of records from any of your Apps.
How to use applet events in your App Actions.
After initializing the FAAppletClient, you can create events using the same object in the following way:
FAClient.on(eventName, callBack );
For example:
FAClient.on(‘generateTable’, (data) => {
//Do something
});
In order to trigger this event from FreeAgent, you will need to create an app action. To create an app action navigate to:
App Setup > {Desired App} > App Actions
Create a new one, and make sure that the “type” is set to “Custom Code”.
Under the Custom Code Section, you will have something like this:
(function (contact, context){
...
}(contact,context)
The context should contain, at least, the following two important functions:
context.clientAPI.openApplet();
context.clientAPI.sendEvent();
Let's review the function sendEvent. It expects two parameters: eventName and Payload. The eventName should match the eventName you used when you created it (See ‘How to use applet events in your App Actions.‘). The payload can be defined as the name of the App you are creating the Event for.
context.clientAPI.sendEvent(eventName,payload);
For example:
context.clientAPI.sendEvent(‘generateTable’,contact);
Once you click that app action from any of your Contacts, the Applet will trigger the event “generateTable” with the object “contact” as parameter.
The contact will include an object like the following:
{
id: instanceId,
seq_id: sequence_id,
field_values{
...
}
}
You also are able to open an applet from an app action using the following function from the app action custom code context:
context.clientAPI.openApplet(appletId);
It expects only one parameter which is the appletId like:
context.clientAPI.openApplet(“aHR0cHM6Ly9pdmFuY2FycmlsbG8uZ2l0bGFiLmlvL3R=”);
Once you click the app action from any of your records the applet will pop up.
Send information back to FreeAgent:
The actions that you will be able to use are the following:
You can use these actions as follows:
FAClient.listEntityValues(payload,callback)
Example:
let contactInfo = {
entity: 'contact',
pattern : “test”,
limit: 1,
};
FAClient.listEntityValues(contactInfo,(contacts) => {
//Do something
});
The objects expected by all the above functions are exactly the same as the payload expected for the respective endpoints. You can learn more about them in our API documentation: FreeAgent API