Adding Custom Component to Creatio using Angular

Hi,



I have been working on adding new custom components using the new freedom UI following the below Creatio article.

https://academy.creatio.com/docs/developer/front_end_development_freedom_ui/remote_module/implement_a_remote_module/overview



After doing some additional research I was able to add some custom components successfully. But I'm kind of stuck on where I need to pass the data from Creatio's side to that specific angular component. Please refer to the below screenshots of my code snippets and if anyone has any idea on what I'm missing can you guide me or provide some resources to get more idea on this?

 

Below is the "card.component.html" file:

<mat-card class="card-class" *ngFor="let val of valuelist" >
    <mat-card-header></mat-card-header>
    <mat-card-content class="content-wrapper">
        <div fxFill fxLayout="row">
            <div fxFlex="30" fxLayout="space-around center">
                <div fxFlex fxLayoutAlign>
                    <img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Free Image" class="responsive-image"  >
                </div>
                <div fxFlex fxLayoutAlign>
                    <img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Free Image" class="responsive-image" >
                </div>
            </div>
            <div fxFlex="55" fxLayout="column" fxLayoutAlign="center start" class="contentN" >
                <mat-card-title>{{val}}</mat-card-title>
                <mat-card-subtitle>{{val}}</mat-card-subtitle>
            </div>
            <div fxFlex="15" fxLayout fxLayoutAlign="center center" class="contentP">
                <img mat-card-sm-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Free Image" class="responsive-image" >
            </div>
        </div>
    </mat-card-content>
    <mat-card-footer></mat-card-footer>
</mat-card>

 As in the above, from using ngFor I'm adding cards based on the data which are coming from the "valuelist". Below is the example of the "card.component.ts" file:



 

import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { CrtInput, CrtOutput,CrtInterfaceDesignerItem, CrtViewElement } from '@creatio-devkit/common';
 
 
@Component({
  selector: 'mlcgd-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  //encapsulation: ViewEncapsulation.ShadowDom
})
 
/* Add the CrtViewElement decorator to the Textpromt component. */
@CrtViewElement({
  selector: 'mlcgd-card',
  type: 'mlcgd.Card'
})
 
/* Add the CrtViewElement decorator to the InputComponent component. */
@CrtInterfaceDesignerItem({
  /* Manage the element layout in the library of the Freedom UI Designer. */
  toolbarConfig: {
    caption: 'Card View',
    name: 'CardView',
    /* The path to the component image. */
    icon: require('!!raw-loader?{esModule:false}!./icon.svg'),
    defaultPropertyValues: {
      label: 'Card View'
    }
  }
})
 
export class CardComponent {
 
  valuelist:string[] = [];
 
  constructor() {}
 
  @Input()
  @CrtInput()
  /* ...............The input value. */
  public value: string = 'Lakindu, Chinthana, Deshan';
 
  @Output()
  @CrtOutput()
  /* ................Track input value changes. */
  public valueChange = new EventEmitter<string>();
 
  ngOnInit(): void {
    this.valuelist = this.value.split(',')
  }
}

As you can see in the above code snippet I have a string called "value" and I have hardcoded 3 values for that. What I need to achieve is without hardcoding the data I need to get those data from the Creatio's end like from a field. So to do that I need to modify the code which is gonna add to the viewconfig array in the client schema. Please refer to the below Code snippet. And I need help with modifying it accordingly to pass the data from Creatio to the component.

 

{
				"operation": "insert",
				"name": "Card_hs3upn6",
				"values": {
					"type": "mlcgd.Card",
					"label": "Card View",
					"value": "$MLCGDName"
				},
				"parentName": "FlexContainer_08awxs2",
				"propertyName": "items",
				"index": 0
			}

Kind Regards,

Lakindu

Like 2

Like

4 comments

Hello,

You can find an example of working with the field value in these articles.

https://academy.creatio.com/docs/developer/front_end_development_freedo…

https://academy.creatio.com/docs/developer/front_end_development_freedo…

They described information on how to create a validator/converter for the value in a field.

Hello,



Thanks for sharing this but I'm afraid this might not be the one that I'm looking for. Anyways do you have anything related to dashboards? Like adding a new dashboard element using a remote module?



I was able to add some components there but for the moment I am kind of stuck at passing the data to the created component using the remote module.

Unfortunately, no, we don't have such examples.

To be honest, the remote module is quite a fresh feature, which means that currently, it doesn't have much logic. If possible, it would be better to use other methods to add your business logic.

Lakindu Yasomith,

Maybe this article can help you:

https://academy.creatio.com/docs/developer/front_end_development_freedo…

 

If not, please let us know. Maybe you can describe your case in more detail for support@creatio.com.

Show all comments