I am developing a custom button with the remote module. I created and deployed the component using the clio tool.
When I click on the button, I want to get the object context where this button is placed.
For example:
if the button is used in the Contact form page then I want to access contact record details(Ex: email, name, type, record id etc..) in the click handler.
If the button is used in the Account form page then I want to access account record details(Ex: name, owner, primary contact, record id etc..) in the click handler.
Can you help me to achieve that?
I have searched in the academy but didn't find an example. Also, I have not found documentation about the apis in @creatio-devkit/common module.
Like
Hi Sagar,
The ability to pass input values to a remote module component via @creatio-devkit/common is available starting from Creatio 8.1. This library is not present in version 8.0.
You can definitely implement this in 8.1+ to access the current record context (like ID, Name, etc.) inside your custom button component.
Helpful links:
- Implement a remote module - Creatio Academy
- @creatio-devkit/common
What to do:
- Add @CrtInput() to the input properties in your Angular component to receive values from the page context.
- In your Freedom UI schema (viewConfigDiff), pass record fields using $ bindings like $Id, $Name, etc.
Example implementation:
button.component.ts:
@Component({...})
@CrtViewElement({ selector: 'usr-button', type: 'usr.Button' })
export class ButtonComponent {
@Input()
@CrtInput()
recordId!: string;
@Input()
@CrtInput()
name?: string;
handleClick(): void {
alert(`Record ID: ${this.recordId}\nName: ${this.name}`);
}
}
In Freedom UI JSON schema:
{
"operation": "insert",
"name": "UsrCustomButton",
"values": {
"type": "usr.Button",
"recordId": "$Id",
"name": "$Name"
},
"parentName": "SideContainer",
"propertyName": "items",
"index": 0
}
Daiana Gavrylenko,
Thanks for the reply.. I want to clarify that the app I am developing using remote module is for marketplace. So, If I'll be not having access to the Freedom UI json(correct me if I am wrong).
All I want is, the app(button) can be placed in any page(Account, Contact, custom app). Upong clicking the button I want access to the details.
Sagar Rodda,
What Daiana mentioned in the approach you need to take. The component is independent of the page. You receive values in the page via binding. The properties with @Input() are bindable and can be bound to properties of the page. The idea is that you'd add your button to a page, then bind properties for pass values from the record to the component.
Ryan Farley,
Okay.. I'll try to implement this..
may I know where I am supposed to put this in my remote module?
In Freedom UI JSON schema:
{
"operation": "insert",
"name": "UsrCustomButton",
"values": {
"type": "usr.Button",
"recordId": "$Id",
"name": "$Name"
},
"parentName": "SideContainer",
"propertyName": "items",
"index": 0
}
That is the part that adds the component (your button) to the page. That would exist on the page you add the button to in the viewConfigDiff. When you drag your button to the page, that gets added to the page code, but it also shows it was modified to add the binding properties "recordId" and "name" (which are bound to the current record's "Id" and "Name columns). That part has to get modified manually by the user of your button component since there's currently no designer support for custom components.
Ryan Farley,
Unfortunately I can't take this approach as we have plans to push our app to marketplace. We can't expect the developers to update their form page everytime they use our app.