ivoscode

ivoscode

Member Since 3 years ago

Derby, UK

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
23
repos

58 contributions in the last year

Pinned
⚡ Keiko
⚡ Movie browse website
Activity
Nov
3
1 month ago
Activity icon
issue

ivoscode issue comment formio/angular

ivoscode
ivoscode

[Custom Components] How can I use Custom Components in PDF builder?

I have created Custom Component and have applied it to my PDF builder. But I got an error Unknown component: customcomponent. How can I use it?

ivoscode
ivoscode

Am I correct in understanding if I wish to include a custom component in to a PDF I have to alter PDF builder and not the renderer? I can get my component to work in a PDF builder but the component is not recognised on PDF rendered form while filling it out. Same component works fine in a "form" render. Any code sample on how to add custom component to pdf would be appreciated for @formio/reac Screenshot 2021-11-03 at 12 06 14 .

.

Screenshot 2021-11-03 at 12 17 31

Sep
15
2 months ago
Activity icon
issue

ivoscode issue formio/react

ivoscode
ivoscode

[BUG] this.reactInstance =null on Form

Environment

Please provide as many details as you can:

  • Hosting type
    • [] Form.io
    • Local deployment
      • Version: 5.1.1
  • Formio.js version: 4.14.0-rc.17
  • Frontend framework:Next.js 11.0.2
  • Browser: Chrome
  • Browser version: 92.0.4515.107 (Official Build) (arm64)

Expected behavior

I have a custom slider component. Using it in FormBuilder and expecting it to show up in Form and displaying data from submission if provided.

Observed behavior

Custom component works fine in the FormBuilder. It also shows up in Form and is able to submit data. The only problem I cannot set value from form submission, shows only the default value. In the FormBuilder the attachReact is returning an instance which is later needed by setValue function in ReactComponent.js. On the Form it does not. I believe that is a cause of the problem but not sure how to fix it.

Example

import { ReactComponent } from "@formio/react";
import React from "react";
import ReactDOM from "react-dom";
import settingsForm from "./Slider.settingsForm";

class SliderCustomComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
    };
  }
  setValue = (v) => {
    this.setState({ value: v }, () => this.props.onChange(this.state.value));
  };

  render() {
    return (
      <div className="w-full">
        <input
          className="w-full focus:outline-none"
          type="range"
          min={this.props.component.minRange}
          max={this.props.component.maxRange}
          value={this.state.value}
          onChange={(e) => {
            this.setValue(e.target.value);
          }}
        />
        <span>{this.state.value}</span>
      </div>
    );
  }
}

export default class Slider extends ReactComponent {
  constructor(component, options, data) {
    super(component, options, data);
  }

  static get builderInfo() {
    return {
      title: "Slider",
      icon: "sliders",
      group: "Data",
      documentation: "",
      weight: -10,
      schema: Slider.schema(),
    };
  }

  static schema() {
    return ReactComponent.schema({
      type: "sliderCustomComp",
      label: "Default Label",
    });
  }
  static editForm = settingsForm;

  attachReact(element) {
    const instance = ReactDOM.render(
      <SliderCustomComp
        component={this.component} // These are the component settings if you want to use them to render the component.
        value={this.dataValue} // The starting value of the component.
        onChange={this.updateValue} // The onChange event to call when the value changes.}
      />,
      element
    );
    console.log("instance in attachReact", instance);
    return instance;
  }

  /**
   * Automatically detach any react components.
   *
   * @param element
   */
  detachReact(element) {
    if (element) {
      ReactDOM.unmountComponentAtNode(element);
    }
  }
}

This is a console log from FormBuilder. I noticed it does not get the instance right away but it seems the error is causing to execute redraw function and it gets the instance. Screenshot 2021-08-05 at 15 09 58 On the Form it logs out Screenshot 2021-08-05 at 15 52 01

Activity icon
issue

ivoscode issue comment formio/react

ivoscode
ivoscode

[BUG] this.reactInstance =null on Form

Environment

Please provide as many details as you can:

  • Hosting type
    • [] Form.io
    • Local deployment
      • Version: 5.1.1
  • Formio.js version: 4.14.0-rc.17
  • Frontend framework:Next.js 11.0.2
  • Browser: Chrome
  • Browser version: 92.0.4515.107 (Official Build) (arm64)

Expected behavior

I have a custom slider component. Using it in FormBuilder and expecting it to show up in Form and displaying data from submission if provided.

Observed behavior

Custom component works fine in the FormBuilder. It also shows up in Form and is able to submit data. The only problem I cannot set value from form submission, shows only the default value. In the FormBuilder the attachReact is returning an instance which is later needed by setValue function in ReactComponent.js. On the Form it does not. I believe that is a cause of the problem but not sure how to fix it.

Example

import { ReactComponent } from "@formio/react";
import React from "react";
import ReactDOM from "react-dom";
import settingsForm from "./Slider.settingsForm";

class SliderCustomComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value,
    };
  }
  setValue = (v) => {
    this.setState({ value: v }, () => this.props.onChange(this.state.value));
  };

  render() {
    return (
      <div className="w-full">
        <input
          className="w-full focus:outline-none"
          type="range"
          min={this.props.component.minRange}
          max={this.props.component.maxRange}
          value={this.state.value}
          onChange={(e) => {
            this.setValue(e.target.value);
          }}
        />
        <span>{this.state.value}</span>
      </div>
    );
  }
}

export default class Slider extends ReactComponent {
  constructor(component, options, data) {
    super(component, options, data);
  }

  static get builderInfo() {
    return {
      title: "Slider",
      icon: "sliders",
      group: "Data",
      documentation: "",
      weight: -10,
      schema: Slider.schema(),
    };
  }

  static schema() {
    return ReactComponent.schema({
      type: "sliderCustomComp",
      label: "Default Label",
    });
  }
  static editForm = settingsForm;

  attachReact(element) {
    const instance = ReactDOM.render(
      <SliderCustomComp
        component={this.component} // These are the component settings if you want to use them to render the component.
        value={this.dataValue} // The starting value of the component.
        onChange={this.updateValue} // The onChange event to call when the value changes.}
      />,
      element
    );
    console.log("instance in attachReact", instance);
    return instance;
  }

  /**
   * Automatically detach any react components.
   *
   * @param element
   */
  detachReact(element) {
    if (element) {
      ReactDOM.unmountComponentAtNode(element);
    }
  }
}

This is a console log from FormBuilder. I noticed it does not get the instance right away but it seems the error is causing to execute redraw function and it gets the instance. Screenshot 2021-08-05 at 15 09 58 On the Form it logs out Screenshot 2021-08-05 at 15 52 01

ivoscode
ivoscode

Found a solution in case someone needs it. Getting instance via ref and then assigning to this.reactInstance.

attachReact(element) {
    let instance;
    ReactDOM.render(
      <SliderCustomComp
        ref={(refer) => {
          instance = refer;
        }}
        component={this.component} // These are the component settings if you want to use them to render the component.
        value={this.dataValue} // The starting value of the component.
        onChange={this.updateValue} // The onChange event to call when the value changes.}
      />,
      element,
      () => (this.reactInstance = instance)
    );

    
  }