Welcome to formio.js Discussions!

[travist]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[masudchowdhuryca]

Is formio js the opensource version stable enough to use in a project ?
will i face any issue of crash or data loss in future ?

[kishan4wal]

Hi,
Is there a way to extend the form.io Panel component and enable drag and drop feature. I am able to extend the Panel but drag and drop feature is not working any help is greatly appreciated. Please suggest.

function initCustomPanelComponent() {

const NestedComponent = Formio.Components.components.panel;


debugger;

const custompaneltemplate = function (ctx) {
    var html = '<div class="mb-2 card border">'
    if (!ctx.component.hideLabel || ctx.builder || ctx.component.collapsible || ctx.component.tooltip) {
        html += `<div class="card-header ${ctx.transform('class', 'bg-' + ctx.component.theme)}" ref="header">`;
        html += `<span class="mb-0 card-title ${(ctx.component.theme && ctx.component.theme !== 'default') ? 'text-light' : ''} ">`;

        if (ctx.component.collapsible) {
            html += `<i class="formio-collapse-icon float-right ${ctx.collapsed ? 'fa fa-angle-right' : 'fa fa-angle-down'} text-muted" data-title="Collapse Panel" style="font-size:20px"></i>`;
        }

        if (!ctx.component.hideLabel || ctx.builder) {
            html += `${ctx.t(ctx.component.title, { _userInput: true })}`;
        }

        if (ctx.component.tooltip) {
            html += `<i ref="tooltip" class="${ctx.iconClass('question-sign')} text-muted"
                data-tooltip="${ctx.component.tooltip}"></i>`;
        }
        html += `</span>`;
        html += `</div>`;
    }
    if (!ctx.collapsed || ctx.builder) {
        html += `<div class="card-body builder-components drag-container formio-builder-form" ref="nested-panel">
                ${ctx.children}
            </div>`;
    }
    html += `</div>`;
    return html;
}

Formio.Templates.defaultTemplates['custompaneltemplate'] = {
    form: custompaneltemplate,
};


class SmartPanelComponent extends NestedComponent {

    static schema() {
        debugger;
        return NestedComponent.schema({
            label: 'Category',
            type: 'verocustompanel',
            key: 'verocustompanel',
            title: 'Category',
            theme: 'default',
            breadcrumb: 'primary',
            components: [],
            clearOnHide: false,
            input: true,
            tableView: false,
            persistent: true
        });
    }

    static get builderInfo() {
        return {
            title: 'Category Panel Test',
            icon: 'list-alt',
            group: 'layout',
            documentation: '/userguide/#panels',
            weight: 30,
            schema: SmartPanelComponent.schema()
        };
    }      
           
    get defaultSchema() {
        return SmartPanelComponent.schema();
    }
    attach(e) {
        let t = {},
            o = this.component.key;
        return (
            (t[o] = "multiple"),
            this.loadRefs(e, t),
          
            super.attach(e)
        );
    }
    checkValidity(data, dirty, row, silentCheck) {
        if (!this.checkCondition(row, data)) {
            this.setCustomValidity('');
            return true;
        }

        return this.getComponents().reduce(
            (check, comp) => {
                return comp.checkValidity(data, dirty, row, silentCheck) && check;
            },
            super.checkValidity(data, dirty, row, silentCheck)
        );
    }

    constructor(args) {
        super(args);
        this.noField = true;
        this.on('componentError', () => {
            //change collapsed value only when the panel is collapsed to avoid additional redrawing that prevents validation messages
            if (this.collapsed) {
                this.collapsed = false;
            }
        });

    }

}
    
Formio.use({
    components: {
        verocustompanel: SmartPanelComponent,
    }
});   

}

[MarcelAleza1]

Hi all, i am calling different APIs that need authentication with the same bearer token in FormIo website, i need to pass a bearer token, is there any way to pass a token in global environment and call it anywhere in need in request header

[KSLErica]

How do I access other DataGrid data in logic/calculateValue with the provided 'row' attribute?

[E2dwhy]

Hello team,
I hope you are well.
I am writing regarding a technical difficulty that we are facing regarding the form rendering.
We are trying to dynamicaly set the data from the Select input, that is, listening to key and key down events and update the data of the select dropdown so that we optimize the app to not load the entire dataset that is mainly about 8000 records.
Is there a way to make this work? and if yes can you guide us through?

Looking forward to hearing from you soon.