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