Apply Custom Classes to Buttons

[jpchip]

It would be nice if in the schema for the buttons I could assign them custom classes, like:

"buttons": [{
            "id": "save",
                        "class": "btn btn-primary"
            "label": "Save"
        },
                {
            "id": "cancel",
                        "class": "btn btn-default"
            "label": "Cancel"
        }
]

or is there some way to do that already that I'm totally missing?

[ebrehault]

The best approach would be to allow to extend the action renderer so we would be free to change its layout (and possibly add classes or whatever we want). We would need something similar to field widget for actions.

[jrymer]

I was able to add classes through document.getElementsByTagName("button").classList.add("btn"); in ngAfterViewInit @jpchip

[AndzejChwalko]

1. Open /node_modules/angular2-schema-form/dist/formelement.component.js in your project.

2. Find a section: FormElementComponent.decorators = [ { type: Component, args: [{ selector: 'sf-form-element', template: "<div *ngIf=\"formProperty.visible\">\n\t<sf-widget-chooser\n\t(widgetInstanciated)=\"onWidgetInstanciated($event)\"\n\t[widgetInfo]=\"formProperty.schema.widget\">\n\t</sf-widget-chooser>\n\t<button *ngFor=\"let button of buttons\" (click)=\"button.action($event)\" >{{button.label}}</button>\n</div>" },] }, ];

3. Add in button tag: [attr.class]=\"button.class\" [attr.id]=\"button.id\"

4. After recompiling of your project you can use "class" in schema in "buttons" section. You can add more attributes to button tag in a similar way. Probably, need changes formelement.component.metadata.json but it works the same way.

[daniele-pecora]

This should be easy to achieve. Your may define/override custom buttons in your WidgetRegistry. See README section "Render buttons"

[jpeterson88]

I've been trying to achieve this through a custom widget and for whatever reason it's not being picked up:

@Component({ selector: 'sf-button-widget', template: '<button class="btn btn-outline-primary">{{button.label}}</button>' }) export class NgxButtonComponent extends ButtonWidget { }

export class CustomButtonWidgetRegistry extends DefaultWidgetRegistry { constructor() { super(); this.register('button', NgxButtonComponent); } }

and then in my app.module: providers: [{ provide: WidgetRegistry, useClass: CustomButtonWidgetRegistry }]

I simply wish to override the default button to have my bootstrap styling

[ebrehault]

Did you add your component in your module entryComponents?

entryComponents: [NgxButtonComponent],

[jpeterson88]

@ebrehault yes I did, also to declarations:

declarations: [AppComponent, MockEditComponent, NgxButtonComponent], entryComponents: [NgxButtonComponent],

[ebrehault]

I do not see what's wrong in your code. Here is a working implementation: https://github.com/guillotinaweb/nsf-pastanaga/blob/master/projects/pastanaga/src/lib/registry.ts#L37

Try to compare with yours to find the missing thing.

[jpeterson88]

Thanks @ebrehault i'll have a look at this code, compare notes and report back

[jpeterson88]

It looks like I'm doing everything this repo is doing. I do not have a separate component and bundled it all into AppComponent. Have a look: NGX Schema Form Test

[jpeterson88]

After reviewing that repo more thoroughly, I have a question...if I override the button, will that actually override the button that's in the array, or do i have to override the entire array Item? I'm currently just overriding the button widget and expecting the add / remove in the "array" widget to be updated

[ebrehault]

No ButtonWidget is only used for the form actions. ArrayWidget does use this component (it uses a basic HTML button), so if you want to change that button, you need to override ArrayWidget.

[jpeterson88]

That explains what I'm doing. I overrode the array widget and it works like a charm. Thank you!