formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.88k stars 1.06k forks source link

[Question] Data tab not showing up in Custom HTML Element Component #4287

Closed MichaelChung123 closed 8 months ago

MichaelChung123 commented 3 years ago

I am trying to add the Data tab to my custom HTML Element component. I have followed the steps to adding the tab by changing the editForm, but it still does not seem to show up.

Does anyone know how I can add the Data tab for a Custom Component like this?

my HTML Element file

/* tslint:disable */
import { Components } from 'formiojs';
const HTMLComponent = (Components as any).components.htmlelement;
import editForm from './Component.form';

import { Constants } from '../Common/Constants';

const ID = 'map';
export default class Component extends (HTMLComponent as any) {
  static schema(...extend) {
    return HTMLComponent.schema({
      label: 'HTML',
      type: 'htmlelement',
      tag: 'div',
      attrs: [
        {
          attr: 'style',
          value: 'height: 180px; border: 1px solid;'
        },
        {
          attr: 'id',
          value: 'mapid'
        },
      ],
      content: 'Map Component',
      input: false,
      persistent: false
    }, ...extend);
  }

  static editForm = editForm;

  static get builderInfo() {
    return {
      title: 'Map',
      group: 'advanced',
      icon: 'code',
      weight: 70,
      documentation: Constants.DEFAULT_HELP_LINK,
      schema: Component.schema()
    };
  }
}

editForm from './Component.form';

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

import EditData from './editForm/Map.edit.data';
import EditDisplay from './editForm/Map.edit.display';
import EditValidation from './editForm/Map.edit.validation';

export default function(...extend) {
    return baseEditForm([
        {
            key: 'display',
            components: EditDisplay
        },
        {
            key: 'data',
            components: EditData
        },
        {
            key: 'validation',
            components: EditValidation
        }
    ], ...extend);
}

This is what im trying to add: image

Tatsiana8 commented 8 months ago

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!