Can't change Formly config

Product/components used and version/fix level:

Cumulocity webSDK 1020.4.1

Detailed explanation of the problem:

I need to change/add new components to Formly to be used with JSON schemas.
I therefore need to register my new components under the right types, some already existing (array, object), some not (multischema).
All my components, including Formly components are standalone.
I’ve followed the tutorial application example to adapt my components to the new version of the SDK.
I’ve tried multiple options to do so:

  • adding a Formly ConfigOption through FormlyModule.forChild(config) in my component’s module
  • injecting FormlyConfig in my component then adding my new config using formlyConfig.addConfig(config)
  • adding my FormlyConfig using a provider in my component’s module
  • adding my FormlyConfig using provide in the hookRoute provider in my component’s module

Whatever I do, my configuration is simply ignored.

This was working in previous versions of Cumulocity (before 10.18).

This is a critical issue.

Error messages / full error message screenshot / log file:

N/A

Question related to a free trial, or to a production (customer) instance?

Production, all instances (customer, SaaS)

Hi Cyril,

I guess with the sample from the tutorial application you mean this one?
https://styleguide.cumulocity.com/apps/codex/#/components/forms/dynamic-forms/overview#custom-element-schema

Without having an error message or a minimal sample/code snippet to reproduce your issue it will be impossible to help you.

In case you really believe this is a critical issue, please raise a support ticket.
I would not categorize this as something critical, since you still have your previously working version.

Regards,
Tristan

Sadly, the previous version can’t be used anymore as I would have to downgrade the whole devicemanagement application, which is a no go.
The reason for that is that older components don’t work anymore in current version (at least, mine don’t).
I’ll ask my customer to raise a ticket.

If you are trying to use a plugin in a shell application it would be good to mention that within such a post, together with the shell and plugin version.

To avoid incompatibilities like these in the future, I would suggest:

  • verify that all plugins are working with the new shell version before upgrading the shell application
  • The plugin developer should make use of the versioning matrix to indicate their compatibility with Web SDK versions

These suggestions are generally also available here:
https://styleguide.cumulocity.com/apps/codex/#/getting-started/microfrontends/overview#how-to-ensure-application-compatibility

I’m running the plugin in a shell in devicemanagement application.
I haven’t tried to deploy it yet, so maybe the issue only occurs in the shell, I need to test if the bug persists when the plugin is deployed.
Here are some (simplified) snippets if that can help.
Here’s the formly component:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { CoreModule } from '@c8y/ngx-components';
import { FieldType } from '@ngx-formly/core';
import { PopoverModule } from 'ngx-bootstrap/popover';

@Component({
  selector: 'formly-multi-schema-type',
  templateUrl: './multischema.type.html',
  standalone: true,
  imports: [CommonModule, PopoverModule, CoreModule],
})
export class MultiSchemaTypeComponent extends FieldType {}

The HTML template:

<fieldset class="c8y-fieldset schema-form-fieldset">
  <legend><span *ngIf="to.label; else display_model_key">{{ to.label }}</span>
    <ng-template #display_model_key>{{field.key }}</ng-template>
    <button *ngIf="to.description" class="btn-help btn-help--sm m-t-auto m-b-auto" [popover]="to.description"
      placement="right" [outsideClick]="true" type="button">
      <i c8yIcon="question-circle-o" class="text-primary"></i>
    </button>
  </legend>
  <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
    <formly-validation-message [field]="field"></formly-validation-message>
  </div>
  <formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
</fieldset>

The component module that uses formly:

import { NgModule } from '@angular/core';
import { hookRoute, ViewContext } from '@c8y/ngx-components';
import {
  ConfigOption,
  FORMLY_CONFIG,
  FormlyFieldConfig,
} from '@ngx-formly/core';
import { ArrayTypeComponent } from '../formly/array.type';
import { MultiSchemaTypeComponent } from '../formly/multischema.type';
import { NullTypeComponent } from '../formly/null.type';
import { ObjectTypeComponent } from '../formly/object.type';
import { TalqGuard } from './talq.guard';

let config: ConfigOption = {
  types: [
    { name: 'multischema', component: MultiSchemaTypeComponent },
  ],
};

@NgModule({
  imports: [
    MultiSchemaTypeComponent,
  ],
  providers: [
    hookRoute([
      {
        context: ViewContext.Device,
        path: 'talq-view',
        loadComponent: () =>
          import('./devices.component').then((m) => m.DevicesComponent),
        label: 'TALQ',
        priority: 0,
        icon: 'c8y-energy',
        canActivate: [TalqGuard],
      },
    ]),
    {
      provide: FORMLY_CONFIG,
      multi: true,
      useValue: config,
    },
  ],
})
export class TalqDevicesModule {}

With this simple example the browser complains that:

Error: [Formly Error] The type "multischema" could not be found. Please make sure that is registered through the FormlyModule declaration.

Finally found what was wrong.
First, the tutorial is actually extremely misleading because it is using standalone Formly components while Formly is officially not compatible with standalone components (it will be in the next release, 7). I don’t really undertand why the tutorial is working though.
Anyway, in my case I had to change my formly components to non standalone, then put them in the “declarations” instead of “imports” of the module (which is the standard way for non standalone components), and of course add all the necessary imports (FormlyModule, CommonModule, PopoverModule), all in all doing things the old way.
Et voilà…