Custom Button component creation

[gladkiy]

I'm trying to create custom Button component. So, logic is the following:

• button with text "Click to Sign"
• when I click I need to change text in button to "Remove Signature" and set value to user name from localStorage
• when I load page with this new control I need to mirror text of button that depend on value from DB for this control

My code:

import Component from 'formiojs/components/_classes/component/Component';
import componentEditForm from 'formiojs/components/_classes/component/Component.form';
import Components from 'formiojs/components/Components';

export default class UserNameComponent extends Component {
    static schema(...extend) {
        return Component.schema({
            label: 'UserName',
            key: 'userName',
            type: 'username'
        }, ...extend);
    }

    static get builderInfo() {
        return {
            title: 'UserName',
            group: 'basic',
            icon: 'user',
            documentation: 'http://help.form.io/userguide/#textfield',
            weight: 120,
            schema: UserNameComponent.schema()
        };
    }

    get defaultSchema() {
        return UserNameComponent.schema();
    }

    get inputInfo() {
        const info = super.elementInfo();
        info.type = 'input';
        info.attr.type = 'text';
        return info;
    }

    render(container) {
        return super.render(super.renderTemplate('button', {
            input: {
                type: 'button',
                attr: {
                    class: 'btn btn-md btn-success'
                },
                content: '<i class="fa fa-chevron-left"></i> Click to Sign'
            },
        }));
    }

    attach(element) {
        this.loadRefs(element, {
            button: 'single',
            buttonMessageContainer: 'single',
            buttonMessage: 'single'
        });

        const superAttach = super.attach(element);
        this.attachButton();
        return superAttach;
    }

    onClick(event) {
        let buttonClass = '';
        let buttonText = '';
        let btnSuccessClass = 'btn btn-success';
        let btnSuccessText = ' Click to Sign';
        let btnDangerClass = 'btn btn-danger';
        let btnDangerText = ' Remove Signature';
        let fullName = localStorage.getItem('userName');
        var target = event.target;
        if (target.tagName !== "BUTTON") {
            target = target.parentElement;
        }
        if (this.dataValue == null || this.dataValue === '') {
            this.dataValue = fullName;
            target.className = btnDangerClass;
            target.innerHTML = '';
            target.appendChild(this.ce('i', { class: this.iconClass('chevron-left') }));
            target.appendChild(this.text(btnDangerText));
        } else {
            this.dataValue = '';
            target.className = btnSuccessClass;
            target.innerHTML = '';
            target.appendChild(this.ce('i', { class: this.iconClass('chevron-left') }));
            target.appendChild(this.text(btnSuccessText));
        }
        this.setValue(this.dataValue, null);
    }

    attachButton() {
        this.addEventListener(this.refs.button, 'click', this.onClick.bind(this));
    }
}

// Use the table component edit form.
UserNameComponent.editForm = componentEditForm;

// Register the component to the Formio.Components registry.
Components.addComponent('username', UserNameComponent);

When I load page button show default text "Click to Sign" but user name is not null value from DB.

How can I fix that? Is my code correct? If no -> How correctly create custom Button component? Can you help me with it?

Thanks in advance.

[travist]

The code looks right... It may be helpful to have a JSFiddle showing the problem which we could also use to debug it.

[VikkiAlenn]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!