json-schema-form/angular-schema-form

override input templates

Closed this issue · 9 comments

iivvoo commented

I (think I) need to override the individual (html) field definitions. I want to render my form horizontally (class=form-horizontal) but I understand this requires the input control to be wrapped in a div with a specific grid sizing class (e.g. col-md-8)

What options are there (besides forking :) to override the fields templates?

mike-marcacci commented

Hi @iivvoo, I believe you can use the schemaFormProvider to add/override form directives/decorators. I'm not 100% sure what that looks like right now, but I'm going to be looking into it (I'm working to add a ckeditor field type today).

I do know you can also duplicate the entire decorators/bootstrap directory and add the attribute sf-decorator="your-decorator-name" to the form element (that attribute is going to change to sf-decorator-name very soon though per #49).

Hope that helps a bit!

davidlgj commented

Hi @iivvoo

as @mike-marcacci stated above you can basically copy the decorators/bootstrap folder, edit bootstrap-decorator.js and rename it. You probably also want to edit the gulp file so it builds a version for your new decorator as well.

Setting sf-decorator="your-decorator-name" on the same element as the sf-schema is supposed to work but does have a couple of bugs right now. But if your decorator is the only one included (i.e. don't include bootstrap-decorator.min.js) then it's used by default, and that should work.

iivvoo commented

Thanks @mike-marcacci and @davidlgj
I think I understand the decorator solution (and implications), I don't really know what to do with the schemaFormProvider suggestion.

But if I understand correctly, the decorator solution does mean I need to fork / build my own bootstrap-decorator.js? Wouldn't a more generic solution be more flexible? (I'm not sure how easy it is to just rip out the decorator stuff)

I can imagine other cases where you may want to render fields differently from the default (but the form-horizontal is a very obvious one of course).

My client might be willing to sponsor such a feature..

mike-marcacci commented

Hi @iivvoo, it turns out that it is quite easy to override a single template (or add new ones). For example:

1 - Create your template

<div class="form-group has-feedback" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
    <label ng-show="showTitle()">{{form.title}}</label>
    <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
    <textarea class="form-control"
                        ckeditor
                        sf-changed="form"
                        ng-required="form.required"
                        ng-model="$$value$$"
                        schema-validate="form.schema"></textarea>
</div>

2 - Use the addMapping provider method:

.config(['schemaFormDecoratorsProvider', function(decoratorsProvider){
    decoratorsProvider.addMapping('bootstrapDecorator', 'ckeditor', 'path/to/ckeditor.html');
}])
  • 👍3
iivvoo commented

This is exactly the type of solution I was looking for. It works perfectly, thanks!

mike-marcacci commented

Glad to help!

111crb111 commented

Hi, i'm angularjs noob :) wher i need write this

 .config(['schemaFormDecoratorsProvider', function(decoratorsProvider){
    decoratorsProvider.addMapping('bootstrapDecorator', 'ckeditor', 'path/to/ckeditor.html');
}])

i think need some file like extendForm.js but dont know how use that function :(
may you please post full example?

aman-gautam commented

@mike-marcacci Do we need to put the custom template in $templateCache? Is there a step by step example on how to override the input templates?

Thanks,
Aman