Filling out the form

Fills in the empty cells in the form.

The user can choose a username from the list and all the fields in the form editor will be filled with the user contact information. At the same time, this data is displayed in the inputs of the custom interface.

When the user edits the input data in the custom interface, it is automatically updated in the form editor as well.

When the document is ready, it can be downloaded by clicking the Download button and printed.

Choose Example Isabella Robinson Emma Smith Emily Williams Sophia Brown Olivia Davis Abigail Jones Davis Hannah Samantha Smith Mia Davis Madison Taylor Jacob Brown Jason Davis Michael Williams Christopher Johnson Ethan Taylor Daniel Wright Matthew Jones Andrew Wilson William Robinson Joshua Johnson

How it works

1. When the user opens a form document, the GetAllContentControls method is executed to collect all the content controls from the document. After that, the GetFormValue method is executed to get the content controls values and display them in the custom interface:

   var contentControls = [];
   var onDocumentReady = function () {
       window.connector = docEditor.createConnector();
       connector.executeMethod("GetAllContentControls", null, function (data) {
           setTimeout(function () {
               for (let i = 0; i < data.length; i++) {
                   ...
                   connector.executeMethod("GetFormValue", [data[i]["InternalId"]], function (value) {
                       data[i].Value = value ? value : "";
                       if (data.length - 1 == i) {
                           contentControls = data;
                           ...
                       }
                   });
               }
           }, 0);
       });
   };

2. When the user chooses a username from the list, the GetFormsByTag method is executed to collect all the forms by their tags and sets the corresponding values to them with the SetFormValue method:

   $("#persons").change(function (e) {
       const postalCode = $(this).val();
       $.getJSON("/app_data/editor/wildcarddata/persons.json", function (persons) {
           for (const person of persons) {
               if (person["PostalCode"] == postalCode) {
                   for (key in person) {
                       var value = person[key];
                       ...
                       setFormValue(key, value);
                   }
               }
           }
       })
       var setFormValue = function (tag, value) {
           connector.executeMethod(
               "GetFormsByTag",
               [tag],
               function (forms) {
                   connector.executeMethod(
                       "SetFormValue",
                       [forms[0]["InternalId"], value],
                       null
                   );
               }
           );
       }
   });

3. When the user edits a form value, the onChangeContentControl event is fired and after that, the GetFormValue method is executed to get an updated form value and display it in the custom interface:

   var onDocumentReady = function () {
       ...
       connector.attachEvent("onChangeContentControl", onChangeContentControl);
       ...
   };
   function onChangeContentControl(e) {
       connector.executeMethod("GetFormValue", [e["InternalId"]], function (value) {
           ...
           $("#" + e["InternalId"]).val(value || "");
           ...
       });
   }

Getting help

If you have any questions, ask our developers on ONLYOFFICE forum (registration required).