How to update edit form in a builder?

[Samanoova]

hi I overwrite the components dialog with this function

let dialog={...};
for (var key in Formio.Components.components) {
        Formio.Components.components[key].editForm = function () {
          return dialog;
        };
      }

then I have a dropdown menu & add button in the Display tab now when pressing the add button I edited the dialog and add a value to the drop-down menu so I want to update it and show the new values that I added to the dropdown menu so I tried reinitiating the builder but I have to close the dialog and open it again to see my new value in the drop-down then I tried to call the redraw function but don't work and redraw function initiate the following error "builder.redraw is not a function"

how can I reload the drop-down menu to show the new values?

[Samanoova]

builder.instance.editComponent_Original = this.builder.instance.editComponent;
  builder.instance.editComponent = function (
        component,
        parent,
        isNew,
        isJsonEdit,
        original
      ) {
        .builder.instance.editComponent_Original(
          component,
          parent,
          isNew,
          isJsonEdit,
          original
        );
        //then store the params component , parent ,isNew,isJsonEdit,original to use them later 
      };
    },

now you have the parameters you can call the method that create the dialog you can close the dialog and call the method builder.instance.editComponen(the parameters you stored) then the dialog will show again and it will be updated

[Samanoova]

but I hope if there any way to update the dropdown menu only without the need to rerender the dialog @travist

[travist]

The editForm is a form instance that can be found within the form builder and can be redraw as follows.

builder.editForm.redraw();

This should redraw the form within the modal and not actually refresh the modal (which should appear seamless).

[Samanoova]

if anybody watching this issue and builder.editForm.redraw(); don't work and builder.editForm return undefined then you can find the editForm property in builder.instance so you have to edit the components in the editForm property then call builder.instance.redraw(); that's worked for me

[gladkiy]

@travist @Samanoova how can I find "builder" instance. What should I import? I'm using this https://help.form.io/developers/custom-components into "editForm" method I do ajax query to get custom options from server but can't update them on modal dialog.

[Samanoova]

@gladkiy did you overwrite the editform function? It should return json object that's include your options and You can overwrite it for each component separately

[gladkiy]

@Samanoova I do something like that:

 static editForm() {

    let components = editForm().components;

    let tabs = Utils.getComponent(components, "tabs", true);

    let dataTab = Utils.getComponent(components, "data", true);

    dataTab.components = [];

    $.ajax({
        url: "...",
        type: "GET",
        success: function (response) {
          for(let masterType of response.data) {
             dataTab.components.push({
                type: 'checkbox',
                label: masterType.name,
                key: masterType.name.replace(" ", "").toLowerCase(),
             });
          }
          console.log(2);
          return {
            components: [tabs]
          };
        }
      });

    console.log(1);
    return {
      components: [tabs]
    };
  }

I see that console.logs are executed but no changes on UI (modal dialog). Is there error? Or I need to update/refresh modal dialog or builder somehow?

[Samanoova]

@gladkiy do you execute this function before the dialog shows up or after?

[gladkiy]

@Samanoova I'm not sure when, how can I investigate that?

[Samanoova]

@gladkiy are you on discord?

[gladkiy]

@Samanoova I'm going through this tutorial https://help.form.io/developers/custom-components

export class MyComponent extends Field { 
   ...
   static editForm() {
      //you can see body of this method into comment above
   }
}

[gladkiy]

@Samanoova I think console.log(1) is executed before modal dialog is showing and console.log(2) after modal dialog is showing.

[Samanoova]

i am using different way than i can't be sure if you are doing it right !

[gladkiy]

@Samanoova Can you share your way, please? Or maybe a link, will be appreciate any help.

[Samanoova]

@gladkiy if you have an account on discord i can call you to see your screen and try to help you

[gladkiy]

@Samanoova I attached my file, change extension to ".ts" container-chooser.txt

[Samanoova]

here is an example import TextFieldEditForm from "your path to script file/TextFieldEditForm.ts"; Formio.Components.components["textfield"].editForm = function () { return TextFieldEditForm; }; Formio.builder(document.getElementById("formio"), {}, {}); TextFieldEditForm.zip then you can edit the textfieldeditform file or add on it

[gladkiy]

@Samanoova I need to get options from server, I can't simply edit TextFieldEditForm file. And I have error Property 'builder' does not exist on type 'typeof Formio'.

[Samanoova]

import { Formio } from "formiojs";

[gladkiy]

@Samanoova sure, I have that import but still see this error. I'm using formiojs v4.13.5 if it helps

[Samanoova]

are you sure that you are using these {} ? this import will work : import { Formio } from "formiojs";

this import will not work: import Formio from "formiojs";

[gladkiy]

Yes, I have

 import { Utils, Formio } from "formiojs";

[Samanoova]

is your file .ts or .js ?

[gladkiy]

My file is ".ts"

[Samanoova]

convert it to .js

[gladkiy]

issue was disappeared, thanks. But can you send me full file how can I get options from server side and put them into modal dialog please?

[Samanoova]

can you explain what are you trying to do?

[gladkiy]

Did you download my file container-chooser.txt above?

[Samanoova]

yes editForm should be = function(){return your object}

[gladkiy]

@Samanoova can you give me an example?

export class MyComponent extends Field {
//editForm should be here?
} 

//or editForm should be here?

or maybe you can edit my file and send me again with working editForm?

[Samanoova]

I have to know what your API returning

[gladkiy]

@Samanoova my API just returning array of objects: [{id: 1, name: "John"},{id:2, name: "Peter"}]

[Samanoova]

your API should return an object like mine I uploaded it TextFieldEditForm.zip above

[gladkiy]

@Samanoova can you write it down? and I will see full picture of custom component with API query

[Samanoova]

https://github.com/formio/formio.js/files/7031832/TextFieldEditForm.zip

[gladkiy]

@Samanoova so my API query should return similar content as your file?

[Samanoova]

yes

[gladkiy]

@Samanoova so this code should work?

  editForm = function () { 
    $.ajax({
      url: location.origin + "/api/shared/editForm",
      type: "GET",
      success: function (response) {
        return response;
      }
    });
}

"response" = "{components: [{ type: '1', key: '1', components: [...] }]}"

[Samanoova]

yes i think it's should work

[gladkiy]

no, it doesn't work, and if I put console.log into editForm method I don't see output of that console log

[Samanoova]

i don't have any idea there a lot of things may cause the problem

[gladkiy]

thank you for your help @Samanoova @travist may be you know how to refresh editForm (modal dialog) after ajax query?

[JRiggenbach]

@gladkiy Did you ever get an answer to this? We're using the angular-formio lib so its not quite the same implementation, but we're trying to figure out how to redraw the edit form after its already been loaded.

[gladkiy]

@JRiggenbach I'm also using angular-formio but for custom components it doesn't match for me. For custom components I do ajax queries into constructor or attach method. I think if you need that into built-in components then you need to overwrite typescript class for that component and also do ajax query into constructor or attach method.

[hem1232]

here is an example import TextFieldEditForm from "your path to script file/TextFieldEditForm.ts"; Formio.Components.components["textfield"].editForm = function () { return TextFieldEditForm; }; Formio.builder(document.getElementById("formio"), {}, {}); TextFieldEditForm.zip then you can edit the textfieldeditform file or add on it

Hello, From where u got this file content. I want this for all form fields.

[OleksandrPoshtaruk1533]

here is an example import TextFieldEditForm from "your path to script file/TextFieldEditForm.ts"; Formio.Components.components["textfield"].editForm = function () { return TextFieldEditForm; }; Formio.builder(document.getElementById("formio"), {}, {}); TextFieldEditForm.zip then you can edit the textfieldeditform file or add on it

Hello, From where u got this file content. I want this for all form fields.

Check this repo https://github.com/formio/formio.js/tree/master/src/components Each component has EditForm folder

[Tatsiana8]

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