Additional UI Framework Templates about angular HOT 12 CLOSED

We are working on a new solution to wrap the existing angular-material to create a new Form.io renderer around that framework. This is coming, but it may be the end of the year before it is ready for production.

from angular.

@travist Could you please confirm if angular/material can be applied on formio and if so, what needs to be done to get the formio working with angular/material.

from angular.

Hello @amccubbin

I am thrilled to see this come from the community. This library was actually developed to support multiple dynamic templates, which you can see from the templates folder.

This file https://github.com/formio/ng2-formio/blob/master/src/templates/bootstrap.templates.tpl.ts serves as the "template" that the library uses to load the template, which can also utilize custom dependencies. The idea is to implement it like it is here https://github.com/formio/ng2-formio/blob/master/src/index.ts where to use Material you would say something like.

import { ModuleWithProviders } from '@angular/core';
import { FormioBaseModule } from './formio';
import { FORMIO_MATERIAL } from './templates/material.templates';
FormioBaseModule.setTemplate(FORMIO_MATERIAL);
export const FormioModule = FormioBaseModule.forRoot();

This would then load the material template into the core renderer and it would use that instead. I did run into an issue though with the forRoot() declarations like Datetimepicker (which is bootstrap specific. Here is the issue for that which will need to get resolved to keep the core agnostic of template. angular/angular#14022. Until that is fixed, I had to do something ugly like this to get it to not throw errors. https://github.com/formio/ng2-formio/blob/master/src/formio.ts#L20

Let me know if this points you in the right direction. My goal is to have this library support all the major UI frameworks.

Thanks!

Travis.

from angular.

Great, that helps a lot. I'll poke around and try to scope out the time it would take to make this work. Since I'm not using bootstrap, having alternative templates would be quite helpful.

from angular.

How do the recent changes to the underlying renderer affect templating? Will integrating material design directly be possible, or will we be forced to use bootswatch for styling?

from angular.

@travist — links from your previous answer aren't working anymore. Can you please suggest what is current recommended solution for applying Material to Form.io?

from angular.

Hi. Is there any update to using different templates (eg Material) ? The link above is broken...

from angular.

same issue, please suggest.

from angular.

The angular-formio library is now a wrapper around our Vanilla JS renderer @ https://github.com/formio/formio.js. The unfortunate thing is that templating is not as easy with the VanillaJS renderer than the previous angular version.

What will be needed is the ability to control the class names that are created within this renderer so that any CSS framework can be applied to it.

from angular.

@travist : We have the same question as @vipinc38, our project also requires to mix Angular/Material with form.io

from angular.

thanks for the quick response @travist it's helpful to know.

from angular.

Closed due to no activity

from angular.