How to render Line Break in formRender?

[partha-p-roy]

Description:

Using formBuilder I am able to add Line Break(hr html tag) in the control panel. Form created using Line Break control is generating error while rendering using formRender.

As per the documentation, I created the component extending the Control class and register the same.

LineBreakControl.js is included for reference. //================================ import control from '../control.js'

/**

• Line Break class
• Output a <hr /> form element / export default class controlBreak extends control { /*
  • build a Line Break dom element
  • @return {Object} DOM Element to be injected into the form. */ build() { return { field: this.markup('hr', null, this.config), layout: 'break', } }

/**

• onRender callback */ onRender() { // Set userData if available if (this.config.userData) { $('#' + this.config.name).val(this.config.userData[0]) } } }

// register the following controls control.register('break', controlBreak); //================================

@kevinchappell need your suggestion this matter. Thanks

Environment Details:

• formBuilder Version: 3.8.3
• Browser: Chrome
• OS: Windows 10

Expected Behavior

Actual Behavior

Steps to Reproduce

Screenshot - (optional)

[lucasnetau]

Without any error messages it is hard to tell what the issue could be. However you are setting a layout in build(), do you have the layout 'break' configured in your formRender config?

[partha-p-roy]

Thank you for your response, please find the formRender config below and the error generated during rendering is also attached

var renderOpts = { controlConfig: { 'break': { } }, formData: formData, dataType: 'json', render: true };

$(".render-wrap").formRender(renderOpts);

[lucasnetau]

Try this plugin

if (!window.fbControls) { window.fbControls = []; }
window.fbControls.push(function(controlClass, allControlClasses) {
    "use strict";

    class controlHr extends controlClass {
        static get definition() {
            return {
                i18n: {
                    default: 'Horizontal Rule',
                },
            };
        }

        /**
         * build a text DOM element
         * @return {Object} DOM Element to be injected into the form.
         */
        build() {
            this.dom = this.markup('hr', null, this.config);
            return {
                field: this.dom,
                layout: 'noLabel',
            };
        }
    }

    // register this control for the following types & text subtypes
    controlClass.register('hr', controlHr);
});