Skip to main content

Room selector

This example shows how to use the DocSpace Room Selector within a custom task creation dialog. Each task is linked to a room selection via the JavaScript SDK.

Before you start​

Please make sure you are using a server environment to run the HTML file because the JavaScript SDK must be launched on the server. You need to add the URL of your server's root directory to the Developer Tools section of DocSpace.

Full example
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Room selector</title>
    <script src="{PORTAL_SRC}/static/scripts/sdk/1.0.1/api.js"></script>
    <style>
      /* Check CSS tab for styles */
    </style>
  </head>
  <body>
    <!-- Task table and create button -->
    <div class="taskManager">
      <table>
        <thead><tr><th>Tasks</th></tr></thead>
        <tbody id="tasks"></tbody>
      </table>
      <button id="new-task" disabled class="button">New task</button>
    </div>

    <!-- Task creation modal -->
    <dialog id="create-task">
      <input id="taskname" type="text" placeholder="task name" />
      <div class="selectorWindow">
        <div id="ds-selector"></div>
      </div>
      <p id="error"></p>
    </dialog>

    <!-- Hidden SDK container -->
    <dialog id="managerWindow">
      <div id="ds-frame"></div>
    </dialog>

    <script>
      // DOM references
      const createTaskDialog = document.getElementById('create-task')
      const managerWindow = document.getElementById('managerWindow')
      const newTaskButton = document.getElementById('new-task')
      const tasknameInput = document.getElementById('taskname')
      const error = document.getElementById('error')
      const tasks = document.getElementById('tasks')

      // Step 1: Initialize SDK and unlock button
      const onAppReady = () => {
        newTaskButton.removeAttribute('disabled')
        managerWindow.style.display = 'none'
      }

      const docSpace = DocSpace.SDK.initManager({
        frameId: 'ds-frame',
        events: { onAppReady }
      })

      // Step 2: Reset modal state
      const resetView = () => {
        tasknameInput.value = ''
        error.innerText = ''
        error.style.display = 'none'
      }

      // Step 3: Open modal and render room selector
      newTaskButton.addEventListener('click', () => {
        createTaskDialog.showModal()

        const onSelectCallback = (e) => {
          const taskname = tasknameInput.value.trim()
          if (taskname.length === 0) {
            error.innerText = 'incorrect task name'
            error.style.display = 'block'
            return
          }

          const task = document.createElement('tr')
          task.innerHTML = `<td>${taskname}</td>`
          tasks.appendChild(task)

          resetView()
          createTaskDialog.close()
          dsSelector.destroyFrame()
        }

        const onCloseCallback = () => {
          createTaskDialog.close()
          resetView()
          dsSelector.destroyFrame()
        }

        const dsSelector = DocSpace.SDK.initRoomSelector({
          frameId: 'ds-selector',
          showSelectorCancel: true,
          events: {
            onSelectCallback,
            onCloseCallback
          }
        })
      })
    </script>
  </body>
</html>

Script execution steps​

1. Initialize SDK and unlock button​

const onAppReady = () => {
  newTaskButton.removeAttribute('disabled')
  managerWindow.style.display = 'none'
}

const docSpace = DocSpace.SDK.initManager({
  frameId: 'ds-frame',
  events: { onAppReady }
})
  • Sets up the SDK and enables the "New Task" button when the app is ready

2. Reset modal state​

const resetView = () => {
  tasknameInput.value = ''
  error.innerText = ''
  error.style.display = 'none'
}
  • Clears the form and hides the error block

3. Open modal and render room selector​

newTaskButton.addEventListener('click', () => {
  createTaskDialog.showModal()

  const onSelectCallback = (e) => {
    const taskname = tasknameInput.value.trim()
    if (taskname.length === 0) {
      error.innerText = 'incorrect task name'
      error.style.display = 'block'
      return
    }

    const task = document.createElement('tr')
    task.innerHTML = `<td>${taskname}</td>`
    tasks.appendChild(task)

    resetView()
    createTaskDialog.close()
    dsSelector.destroyFrame()
  }

  const onCloseCallback = () => {
    createTaskDialog.close()
    resetView()
    dsSelector.destroyFrame()
  }

  const dsSelector = DocSpace.SDK.initRoomSelector({
    frameId: 'ds-selector',
    showSelectorCancel: true,
    events: {
      onSelectCallback,
      onCloseCallback
    }
  })
})
  • Launches a room selector inside the modal and handles success or cancel