Hi,

I'm developing my own custom Angular component for Creatio. I would like to use some of the standard components within it, such as a lookup field. How can I achieve this?

Is it possible to create a custom component that acts as a container for other elements, similar to crt.FlexContainer, which defines an items property for child components?

Cheers to all.

I'm developing my custom UI component in Angular and I need to get some data from Creatio database inside of my component. I discovered there is EntitySchemaQuery class in Creatio's sdk, so I decided to use it, but I'm stuck when I need to retreive data with that ESQ as I didn't find method for that. In classic ESQ there was getEntityCollection method for that. Could you please suggest how do I retrieve data from the database? Either using ESQ or other class, but user's authorization matters.

Here is the code of component.

import { Component, OnInit, Input, Output, 
        ViewEncapsulation, EventEmitter, SimpleChanges  } from '@angular/core';
import { CrtViewElement, CrtInput, CrtOutput, EntitySchemaQuery,
          ComparisonType,  AggregationType, AggregationEvalType, isGuid} from '@creatio-devkit/common';
 
@Component({
  selector: 'usr-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})
/* Add the CrtViewElement decorator to the InputComponent component. */
@CrtViewElement({
  selector: 'usr-input',
  type: 'usr.Input'
})
export class InputComponent implements OnInit {
  constructor() {}
 
  @Input("recordId")
  @CrtInput()
  /* The input recordId. */
  public recordId!: string;
 
  /* Add decorators to the EventEmitter<string>() event. */
  @Output()
  @CrtOutput()
  /* Track input value changes. */
  public valueChange = new EventEmitter<string>();
 
  ngOnInit(): void {
  }
 
 
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
 
    if (isGuid(changes["recordId"]?.currentValue)) {
      let esq = new EntitySchemaQuery("ClvObject");
      esq.addAggregationFunctionColumn("Id", AggregationType.Count, "AppCount", AggregationEvalType.All);
      esq.filters.addSchemaColumnFilterWithParameter(ComparisonType.Equal, "ClvProject", this.recordId, "currentFilter");
 
      let record = esq.getMetadata();
      console.log(record);
    }
  }
}

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

I am working on a use case to use angular component inside creatio. I have followed this link .It seems like it is old documentation most of the js files mentioned in that link is not there in the angular package. Can anyone helo me on this 

TIA

Hi,

I've created a remote angular module for Freedom UI, following the tutorial: https://academy.creatio.com/docs/developer/front_end_development_freedo…

I added my component to Freedom UI library. Thus, I'm able to drag'n'drop my component to page area.

The problem is that my component have some configuration params (a string and an integer), that I can't fill using the no-code designer. I have to do it manually, from source code.

I would like to add such configuration options to component to make it possible to configure a component instance in no-code way.

For example, when I create button I can change its label or action performed on click event. I would like to achieve something similar with my component.

I use Creatio 8.0.7

I will be really grateful for your answers :)

Eryk

Hello,

I followed this article to add Angular component, but failed to build it.

https://academy.creatio.com/documents/technic-sdk/7-16/creating-angular…

My window.ng.core.VERSION.major = 9 (Creation 7.16.3). So I tried @angular/cli@9. But it seems that ngx-build-plus doesn't support Angular 9 yet.

$ yarn build:my-app:externals
Unknown option: '--extra-webpack-config'
Unknown option: 'webpack.externals.js'
Unknown option: '--single-bundle'
error Command failed with exit code 1.

Thanks.