Custom plugin to add inline form field with tag

Plugins
1

Do you want to: Ask a how-to question

Document Server version: 8.1.3.4 / Docker

We are evaluating OnlyOffice to be the editor in our product. Our use case for OnlyOffice to use it to edit docx file and mark part of the words as form fields using custom plugin.

Plugin is using this code to add inline form field:

plugin.callCommand(() => {
          const oDocument = Api?.GetDocument();

          const formProps = {
            key: Asc.scope.clickedItem.id, // "company_name"
            tag: Asc.scope.clickedItem.id,// "company_name"
            tip: Asc.scope.clickedItem.text.en, // "Company name"
            required: true,
            placeholder: Asc.scope.clickedItem.text.en,
            comb: false,
            multiLine: true,
            autoFit: false,
          };
          oDocument.InsertTextForm(formProps);
}

And later using this method to list forms

this.executeMethod("GetAllForms", null, function (data) {
            data.forEach((form) => {
              console.log(form); // {Tag: '', Lock: 3, InternalId: '1950'}
            });
          });

For some reason tag isn’t attached to form at all, and for this, we can’t bind our plugins input fields to form field. What is correct way to add tag to form?

2

Hello @tuomasglad

Not quite understand why InsertTextForm is used in document editor when it is method for Forms editor. Instead of tags, these forms use key, please check out this sample of interaction with fields from outside the editor:

3

I have seen that example. In that example document already has form fields defined. I´m trying to define form fields using document editor and then fill them later.

Form fields have only InternalId defined when fetched with GetAllForms method. Tag and key are both empty.

I can define ContentFields and ContentFields preserves tags when accesses with GetAllContentFields. I can’t use Content fields because I couldn’t find a way to highlight them programmatically nor I couldn’t find a way to set values to them like in example you provided.

4

You should rely on key when managing forms. Please see these two examples of how forms are created and filled:

  1. Creating basic form;
  2. Filling form.

These examples are for Document Builder, but they can be used in plugin without builder items too.

5

Yes, I’m adding key to form, but the key isn’t saved at all. I tested with the example you provided and used GetAllForms to fetch all form fields. For some reason, my form fields contains only Tag, Lock and InternalId props when returned by GetAllForms.

In Javascript, I’m using

window.Asc.plugin.init = function () {
      if (!Asc.scope.pluginInitialized) {
        Asc.scope.pluginInitialized = true;
        this.executeMethod("GetAllForms", null, function (data) {
          console.log("GetAllForms output", data); // output [ {Tag: "", Lock: 3, InternalId: "1003"},  {Tag: "", Lock: 3, InternalId: "1010"}, ...]
          data.forEach((form) => {
            const formType = form.GetFormType(); // formType is undefined.
          }
        }
      }
    }

I’m using DocumentEditor from npm package @onlyoffice/document-editor-react to load the editor and inside config, I have defined plugin inside config with

editorConfig: {
            plugins: {
              autostart: ["asc.{G9E7B03B-3314-4F69-A190-BCE1C5FA2128}"],
              pluginsData: ["http://localhost:5173/config.json"],
            },}

Plugin loads correctly from the http://localhost:5173/ address and can insert form fields. Form fields are just missing the key -data.

6

Ok, the issue was fixed when the Only Office was updated to 8.2 from 8.1. So maybe just a bug?

7

Thanks for the feedback. Frankly, I was not aware of such bug. Should I close this topic as solved then?

8

Thank you for your help. You can close the issue.

1 Like