Custom Formly Templates inside of the Device View Context

Product/components used and version/fix level:

Cumulocity Web SDK 1018.0.240

Detailed explanation of the problem:

I’m trying to use custom formly templates/input fields/input components inside of a device view context.

When I import the tutorial “Custom Element Example” using hookRoute to provide a view context, I get the error Error: [Formly Error] The type "custom1" could not be found.

This can be replicated by using the widget-plugin example and copying over the dynamic forms module from the tutorial.
This works:

  imports: [
    NgCommonModule,
    DynamicFormsModule,
    PopoverModule,
    RouterModule.forChild([
      { path: 'custom', component: CustomElementExampleComponent }
    ]),
    CoreModule
  ],
  providers: [
    {
      provide: FORMLY_CONFIG,
      multi: true,
      useValue: {
        types: [
          {
            name: 'custom',
            component: CustomFieldCheckbox
          }
        ]
      }
    },

  ],
  entryComponents: [CustomFieldCheckbox]

This does not:

  imports: [
    NgCommonModule,
    DynamicFormsModule,
    PopoverModule,
    CoreModule
  ],
  providers: [
    {
      provide: FORMLY_CONFIG,
      multi: true,
      useValue: {
        types: [
          {
            name: 'custom',
            component: CustomFieldCheckbox
          }
        ]
      }
    },
    hookRoute([{ path: 'custom', component: CustomElementExampleComponent}]),
  ],

I want to use hookRoute so that I can have a component within the device view context, i.e,

hookRoute([{ path: 'custom', component: CustomElementExampleComponent, context: ViewContext.Device }]),

Error messages / full error message screenshot / log file:

Note that in the below image, the custom field is custom1. The left screenshot shows the component using the Angualr RouterModule to declar ethe route, the right shows the hookRoute provider being used to slot the component within the device context.

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

Production

HI (Bump)
Any updates on this topic?

From memory, I can confirm that custom form elements work in a normal component (as per the tutorial), but they do not work when a view context is applied.

Cheers,
Jimmy

1 Like

Our company is also trying to use Formly Templates inside of Device Management. This has been a significant blocker to replacing our custom Angular application and using Widgets more broadly. We would also appreciate some insight on this issue.

Hi @jtrac,

Regarding your sample: Your error message complains about custom1 while your are only providing a formly config for custom. Are you sure you are not having a typo here?

You could try to convert your CustomElementExampleComponent into a standalone component. You could then provide your FORMLY_CONFIG on component level and also import the DynamicFormsModule on component level. This might help.

Newer versions of the tutorial application (e.g. >= 1020) do have these samples working as a plugin and are also using hookRoute(...). So maybe upgrading to these versions would be an option?

Regards,
Tristan