Working with content controls

Use the Automation API to add different types of content controls and inspect their properties from an external UI.

info

Click a content control type badge to insert it into the document. Use the List button to toggle the list of all content controls. Click any content control in the editor to view its properties and JSON representation in the panel.

CONTENT CONTROLS0

Click a type above to add it, then click a content control in the editor to inspect it.

How it works

When the user opens a document, the GetAllContentControls method is executed to get the total count of content controls:
```
connector.executeMethod("GetAllContentControls", null, (data) => {
  allControls = data;
});
```
When the user clicks a type badge, the corresponding method is called depending on the type:
- AddContentControl — for plain text (block or inline)
- AddContentControlDatePicker — for date pickers
- AddContentControlPicture — for pictures
- AddContentControlList — for combobox or dropdown list
- AddContentControlCheckBox — for checkboxes
```
// Example: adding a block content control
connector.executeMethod("AddContentControl", [1, { Lock: 0 }]);

// Example: adding a checkbox
connector.executeMethod("AddContentControlCheckBox", [
  { Checked: false },
  { Lock: 0 },
]);
```

When a content control receives focus, the onFocusContentControl event fires and the GetCurrentContentControlPr method retrieves its properties (Id, Tag, Lock, Appearance, Color). When it loses focus, the onBlurContentControl event hides the panel:

connector.attachEvent("onFocusContentControl", (control) => {
  selectedId = control["InternalId"];
  connector.executeMethod("GetCurrentContentControlPr", ["none"], (props) => {
    // Display properties and JSON
  });
});

connector.attachEvent("onBlurContentControl", () => {
  selectedId = null;
  // Hide details panel
});

connector.attachEvent("onChangeContentControl", () => {
  // Refresh the list and properties
});

When the user edits Tag, Lock, Appearance, or Color and clicks Apply changes, the properties are updated via connector.callCommand using the Document Builder API:

Asc.scope.ccProps = { internalId, tag, lock, appearance, r, g, b };
connector.callCommand(() => {
  const p = Asc.scope.ccProps;
  const doc = Api.GetDocument();
  const controls = doc.GetAllContentControls();
  for (let i = 0; i < controls.length; i++) {
    const cc = controls[i];
    if (cc.GetInternalId() === p.internalId) {
      cc.SetTag(p.tag);
      cc.SetLock(p.lock);
      cc.SetAppearance(p.appearance);
      const color = Api.RGBA(p.r, p.g, p.b, 255);
      cc.SetBackgroundColor(color);
      cc.SetBorderColor(color);
      break;
    }
  }
});

When the user clicks Remove, the RemoveContentControl method removes the currently selected content control:
```
connector.executeMethod("RemoveContentControl", [selectedId]);
```

note

Please note that the connector is available only for ONLYOFFICE Docs Developer.

The connector is an additional feature not included by default in the ONLYOFFICE Docs Developer and is available at an extra cost. Please contact our sales team at sales@onlyoffice.com to request a quote.

How it works​

How it works