CODEWITHSUNDEEP
javascriptreactjsnext.jsformbuilderformio
Nikhil Jikar
Nikhil Jikar

Reputation: 1

Want to hide the remove and edit button of formbuilder in @formio/react component

Image for reference

const Formio = dynamic(
  () => import("@formio/react").then((module) => module.Form),
  { ssr: false }
);

<Formio src={formJson}  onSubmit={submitHandler} onChange={handleFormChange}/>

@formio/react this is the library I am uisng in nextjs I want to hide or disable the remove and edit button of some of the form fields based on requirement how can I achieve it.

Upvotes: 0

Views: 248

Answers (2)

Seeranjeevi Ramavel L
Seeranjeevi Ramavel L

Reputation: 11

There isn't a straightforward option to achieve this, but you can override the CSS to hide the "Edit" and "Delete" buttons.

/* Hides the 'Delete' button */
.btn.btn-xxs.btn-danger.component-settings-button.component-settings-button-remove {
display: none;
}

/* Hides the 'Edit' button */
.btn.btn-xxs.btn-secondary.component-settings-button.component-settings-button-edit {
display: none;
}

Upvotes: 1

hokwanhung
hokwanhung

Reputation: 647

It is possible to do so by manipulating the Template.current using ctx. For example, if you want to enable only "Move" button in some components:

Templates.current = {
    builderComponent: {
        form:  `
        <div class="builder-component" ref="dragComponent">
          <div class="component-btn-group" data-noattach="true">
              {% if ( [some conditions]) { %}
              <div class="btn btn-xxs btn-default component-settings-button component-settings-button-move" ref="moveComponent">
                  <i class="{{ctx.iconClass('move')}}"></i>
              </div>
              {% } else { %}
              <div class="btn btn-xxs btn-danger component-settings-button component-settings-button-remove" ref="removeComponent">
                  <i class="{{ctx.iconClass('remove')}}"></i>
              </div>
              <div class="btn btn-xxs btn-default component-settings-button component-settings-button-move" ref="moveComponent">
                  <i class="{{ctx.iconClass('move')}}"></i>
              </div>
              <div class="btn btn-xxs btn-secondary component-settings-button component-settings-button-edit" ref="editComponent">
                  <i class="{{ctx.iconClass('cog')}}"></i>
              </div>

              {% } %}

          </div>
          {{ctx.html}}
        </div>`
    }
  };

You can obtain more information from FormIO's documentation.

UPDATE: For only blocking some of the elements, in the above [some condition] location, one possible way is simply by checking the types of the default components, for example:

{% if ( ctx.childComponent.type === "textArea" || 
  ctx.childComponent.type === "textField" ) %}

Or you can do the checking with other properties, e.g., name, key. The basic properties of default components can be found using the JavaScript Powered Forms and Form.io SDK sandbox.

Upvotes: 0

Related Questions