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

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

Like 0

Like

1 comments

Hello Pavan,

 

Can you please describe this question a little bit in details? At which particular step do you face issues?

Show all comments

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

 

Like 3

Like

6 comments

Could anyone help me? :)

Hi,

Can you please give more detail on these configuration params you are talking about? Some screenshots would be nice.

Dmytro Vovchenko,



Yes, sure :)

Some elements, like an input, have many configuration options:

 

And my component not:

 

So, I'd like to add similar configuration options to my custom component to reduce amount of coding while using custom angular components.

 

Hi,

Unfortunately for now the system does not support such no-code option.

However, already informed our developers about this option and they will work on this feature in future versions.

Thank you for helping us improve the system.

Hi, has anything changed since last time? :)

Hello,



After reviewing all the information, we inform you that at the moment the system still does not support this kind of no-code option. However, this particular request has been passed on to the responsible team for consideration and implementation in future releases. Task number: PR-29433.

Show all comments
Question

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.

Like 0

Like

2 comments

I tried ngx-build-plus@~9 and it works now.

Van Ly,

 

Nice to know that! Yes, you are correct, Creatio uses Angular 9, so here is the package you can use for the 9th version: https://www.npmjs.com/package/ngx-build-plus/v/9.0.6

 

As well as, please make sure that you've indicated the proper build in the "angular.json" file. 

 

Regards,

Anastasiia

Show all comments