Skip to main content

Room selector mode

Room selector mode integrates a room picker interface inside your application. It presents users with a list of ONLYOFFICE Apps rooms and returns the selected room's data via a callback function. If you are looking to embed a fully functional ONLYOFFICE Apps interface, check out the Manager mode and Frame mode.

Initialization​

const docSpace = DocSpace.SDK.initRoomSelector({
  frameId: "ds-frame",
  src: "https://your-docspace.com",
});

Only the parameters frameId and src are required. All other parameters are optional and have sensible defaults.

For setup instructions (connecting the script, CSP configuration, npm package), see Get started. For a complete HTML example, see Initialize room selector.

Configuration, events, and methods​

initRoomSelector() accepts the full TFrameConfig configuration object and returns an SDKInstance.

Use cases​

Linking a task or record to an ONLYOFFICE Apps room​

Let users pick a room from a dialog and associate it with an item in your application. See also: Room selector.

const selector = DocSpace.SDK.initRoomSelector({
  frameId: "ds-selector",
  src: "https://your-docspace.com",
  showSelectorHeader: true,
  showSelectorCancel: true,
  events: {
    onSelectCallback: function (rooms) {
      const room = rooms[0];
      console.log("Selected room:", room.label, room.id);
      linkRoomToTask(currentTaskId, room.id);
      selector.destroyFrame();
    },
    onCloseCallback: function () {
      selector.destroyFrame();
    },
  },
});

Filtering by room type​

Show only collaboration rooms by passing roomType — a room type value as a string, not its name — to narrow the selection. See RoomType for the full type-to-number mapping:

const docSpace = DocSpace.SDK.initRoomSelector({
  frameId: "ds-selector",
  src: "https://your-docspace.com",
  roomType: "2", // Collaboration room
  withSearch: true,
});

Embedding the selector inside a modal​

Render the selector inside a dialog element and destroy the frame when the dialog closes:

const dialog = document.getElementById("room-dialog");
dialog.showModal();

const selector = DocSpace.SDK.initRoomSelector({
  frameId: "ds-selector",
  src: "https://your-docspace.com",
  showSelectorCancel: true,
  events: {
    onSelectCallback: function (rooms) {
      handleRoomSelected(rooms[0]);
      dialog.close();
      selector.destroyFrame();
    },
    onCloseCallback: function () {
      dialog.close();
      selector.destroyFrame();
    },
  },
});