optimajet / formengine Goto Github PK

Hi, im trying to follow the example to load data from external resource, but when i do it there is this error: Uncaught TypeError: Cannot convert undefined or null to object

because i see the loadData function is created here

is there something i missing? or did i do it wrong?

the builder component:

Hi, I was wondering if I'd missed this feature, I have lengthy forms to create and would appreciate if there was some way to duplicate the previous rows or add as many of the previous elements as possible. Sometimes my forms can have upto 6 columns, so having to drag and drop each individual form input doesn't seem feasible to me long term.

Is this supported by default? Or is there a method through which I can achieve this?

This bump from 1.3.1 to 1.4.0 has started breaking our builds:
06366a2

Rollup failed to resolve import "rsuite/esm/internals/hooks/useUniqueId.js" from "/builds/[removed for privacy reasons]/node_modules/@react-form-builder/designer/dist/index.js".

Version 1.4.0 of RSuite moved where these internals are located. It is also possible that this should have been "@rsuite/" instead of "rsuite/". Either way, the reference in react-form-builder is incorrect.

Issue:
I'm encountering an issue with the Formengine library in React, specifically related to key changes not reflecting in the calculable value. When I change the key of any component in the form output, it works as expected. However, in the calculable value, which contains 'Test form data', it does not change, and a warning is displayed stating "Has not returned value", despite the functionality working correctly.

Another Suggestion:
I suggest that when a component is dragged and dropped, the key should be set as "textbox" without any additional characters like spaces or numbers. This is because the space between "textbox" and "1" is not a valid key in JavaScript. Therefore, my idea is to ensure that when a component is dragged and dropped, it should be named consistently as "textbox". If another textbox is added to the canvas, then the subsequent components can be named as "textbox1" or "textbox 1".

I appreciate your attention to this matter and look forward to a resolution that enhances the usability and reliability of the Formengine library.

Thank you for your time and assistance.

Hi Guys

I want to print the output data as like this

{
book_name : "xyz",
...
author : {
name : "abc",
...
}
},

Then how can i implement these in formengine

Hi, is there a way to hide or customize the toolbar components?
for example, hiding the preview button marked in the picture

i wonder is loadCallback can set to a specific form data/options for dropdown for example, like you used in this example

is there a way to do that like below

loadCallback(data, 'region')

this will set options of region input

I have a simple task, I have 2 dropdowns.

When I select A in one, I want B to show in the other, and vice versa. However, this is not possible to do in the demo website itself:

When initially setting the value of the first dropdown to A, the second one becomes B. When modifying the second dropdown to either A or B, it works as expected.
However the first dropdown is not possible to change on it's own, and it doesn't change the value of the second dropdown. By logging the form.data in console I can see it's trying to change it, but the logic is recursively calling itself to the point where it's overriding the input. I can't differentiate the input attempts using anything the form parameter passes me.

I also tried this using the onChange function, but I can't get the data of the second input box directly, and I have about ~50 rows of these inputs to make, which makes individually coding them a hassle.

Is there any solution available?

Here's my form data:

{
  "version": "1",
  "actions": {
    "test": {
      "body": "    console.log(e, \"TEST\", args);",
      "params": {
        "prop1": "string"
      }
    }
  },
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "dd1",
        "type": "RsDropdown",
        "props": {
          "value": {
            "computeType": "function",
            "fnSource": "  console.log(\"DD1\", form.data);\n  if(form.data.dd2 === \"a\" )\n  {\n    return \"b\";\n  }\n  else if (form.data.dd2 === \"b\" )\n  {\n    return \"a\";\n  }\n  else \n  {\n    return form.data.dd1;\n  }"
          },
          "data": {
            "value": [
              {
                "value": "a",
                "label": "A"
              },
              {
                "value": "b",
                "label": "B"
              }
            ]
          }
        },
        "events": {
          "onSelect": [],
          "onChange": []
        }
      },
      {
        "key": "dd2",
        "type": "RsDropdown",
        "props": {
          "value": {
            "computeType": "function",
            "fnSource": "  console.log(\"DD2\", form.data);\n\n  if(form.data.dd1 === \"a\" )\n  {\n    return \"b\";\n  }\n  else if (form.data.dd1 === \"b\" )\n  {\n    return \"a\";\n  }\n  else \n  {\n    return form.data.dd2;\n  }\n"
          },
          "data": {
            "value": [
              {
                "value": "a",
                "label": "A"
              },
              {
                "value": "b",
                "label": "B"
              }
            ]
          },
          "readOnly": {
            "computeType": "function",
            "fnSource": " ",
            "value": false
          }
        },
        "events": {
          "onChange": []
        }
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}

Hi guys
I use the library you wrote
First of all, thank you
Next, I want to know if it is possible to localize the static content of the form builder?
For example, the parts shown in the image below:

Actually, I want to add a new language

Hi, Recently i started using formengine, but whenever I try to make a production build Formengine viewer gives me error () and nothing gets displayed on screen.
details are attached below

Definer.ts:75 Uncaught Error: Anonymous components are not allowed!
at define (Definer.ts:75:22)
at RsBreadcrumb.tsx:39:29
at index.tsx:34:20
at index.tsx:34:20

My code is in screenshot

It perfectly run in dev but in production it gives error

Attaching the above noticed issues when integrating the formbuilder into the app.

1. Looks like it clashes with i18n libraries that are already existing within the app. I was able to fix it for the app itself, but creating an instance of i18n, but this doesn't seem to help Formbuilder itself. Maybe something to look at or there is another way around it?

2. The dropdowns seem to spaz out, as you can see in the video, it appears elsewhere on screen. They are still selectable using arrow keys but the user has no idea what is being selected.

Let me know if there is more info required, would be happy to provide it!

When comparing the online demo of the FormEngine library (link to demo) with my local implementation using this repository,

I noticed a slight difference in the builder interface.
Specifically, the online demo features a "Forms" tab in the builder, whereas the local implementation does not include this tab.
Can I know why the feature is not included in this?

Form Engine Demo

Form Engine Local:

The designer and viewer stop working when in the schema some "container" component does not have the "props", it seems, this prop must exist even if it is empty.

It would be nice if it worked without "props"

It works:

It doesn't work:

We're trying to use your formengine in an Electron application and we're getting an error that has been hard to pin down. Here is the error:

Uncaught (in promise) Error: ENOENT: no such file or directory, open 'C:\Users\myuser\source\repos\electron-app\https:\cdn.jsdelivr.net\npm\[email protected]\min\vs\editor\editor.main.js'

It looks like the monaco editor is a dependency formengine needs. It's kind of hard figuring out what's happening since it's loading this as a dependency of a dependency but what I've found is that when the application is started a new script is injected into our HTML file that looks like this

<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>

The BaseURL for the script tag is the location of our index.html file and since this is an Electron app, is in a location on the local file system.

When Chromium tries to load the script that was injected it treats the https://cdn.jsdelivr.net... as a relative path and appends it to the local file system directory.

A few questions here for you:

• Others having this error when trying to load monaco directly in Electron have been directed to load the library differently. See here: https://stackoverflow.com/questions/76839574/react-monaco-editor-trying-to-load-url-from-local-files. However, since we're not loading the editor directly, we can't really make a change like that.
• As a last resort is it possible for us to remove the monaco editor as a dependency somehow from our application? The formengine still appears to run fine without it and the JSON code editing is not a feature we are planning to use.
• Is there a place we can see the source repository for formengine? It would make it a bit easier to see what's going on potentially.

Appreciate your help

i don't understand why onFormDataChange is keep looping, but if i remove the setState it is not

This is my form with the custom container which has been modified to show flexDirection is row

But in the FormViewer, It's still show the container in column direction

I've check the JSON data for the form and it do have the css property for it, is there any way to fix this?

I want update the input value to first name and last name field if first name and last name changed.

https://formengine.io/documentation/actions
I'v read the doucment but it doesn't mention about how to get/set the value to the field.
And it's a hard to check the object form console log.
I got nothing so i come here to ask 😢

Any helps?

I'm unable to parse data properly in these scenarios:

Suppose I have many rows of inputs below column-like headers. The data payload just shows rsInput in series. How can I easily get the data of any specific column, like the first row of inputs within a subsection. Is this possible?

Hi, can i customize form builder download callback action?example when i downloading json i want to store to my database with hit API

There is some documentation here about using "valued" to let the component know that the custom component contains a value:
https://formengine.io/documentation/custom-components#custom-component-containing-data

I was wondering how this would work for objects. I know its possible, since the dropdown component from rComponentSuite contains the value in this format, I am just not sure how to translate that into a custom component that would have a similar structure.

For more info:

• Just using "value: string.valued.default('')" within the props of define() causes it to throw an error "cannot convert [Object object] from object to string
• i can override the onChange and propagate the value of event.target.value into the custom component code itself, but the json on the formBuilder still shows an empty string.

Hello, I'm using the from Library @react-form-builder/designer in CRA. is there any way to create or get JSON of That created FORM without Manually Download or Copy From Edit JSON in Front-end because i wanna show the view of That JSON.

I was wondering if there is functionality for triggering getForm in the FormBuilder component. For example, I want to update the component with form data based on external (to the component) searches. I want to ideally use my ui and api for this. But, once I have the data, I want to feed it to the component and have it render properly. The data is something that I get from the builderRef so it should ideally just plug and play, but I do not see a way to trigger this right now.

Also, I was wondering if there is a way to hide the toolbar items, incase we don't need it. For example, disabling the "edit JSON" or "theme" buttons. (This can be done using css hacking, which is what I will go with in case the functionality isn't available yet haha)

Hi, my goal is to use axios and some other lib. My step is:

• load axios using require in loadAxios function

• store it to global object e.store.formData.state (ex: e.store.formData.state.axios)
  

• call loadAxios in form ondidmount
  

• use axios on other function by simply call let { axios } = e.store.formData.state

but when i call axios in an onLoadData event, it say axios is not defined even tough the load axios is called

same thing also happened to other lib

here is the reproducible issue: https://stackblitz.com/edit/vitejs-vite-kwyju8?file=package.json,src%2FApp.jsx,src%2Fbuilder.jsx%3AL7,src%2Fviewer.jsx

go to /viewer to get the error