# Модальные окна

## Добавление или редактирование договора <a href="#contract" id="contract"></a>

Вы можете добавить в стороннюю систему модальное окно с добавлением или редактированием договора из Pro.rent. Для этого разместите на странице следующий код:

<pre class="language-html" data-overflow="wrap" data-full-width="false"><code class="lang-html"><strong>&#x3C;iframe src="https://portal.pro.rent/external/contracts/new?token={token}&#x26;clientId={clientId}&#x26;roomId={roomId}">&#x3C;/iframe>
</strong></code></pre>

* `token` – [токен авторизации сотрудника](/d/api/main.md#avtorizaciya), обязателен.
* `clientId` – идентификатор заказчика по умолчанию. Если не указан, то заказчик не будет выбран в форме.
* `roomId` – идентификатор помещения, которое добавить в договор. Если не указан, то форма будет без помещений по умолчанию.

Для редактирования договора используйте следующий код:

{% code overflow="wrap" %}

```html
<iframe src="https://portal.pro.rent/external/contracts/edit/{id}?token={token}"></iframe>
```

{% endcode %}

* `token` – [токен авторизации сотрудника](/d/api/main.md#avtorizaciya), обязателен.
* `id` – идентификатор редактируемого договора, обязателен.

По окончании добавления или редактирования договора в основном окне будет вызвано событие, которое можно обработать следующим образом:

<pre class="language-javascript"><code class="lang-javascript">window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
    const message = event.data;
    if (message.event == 'prorentContractAdd') { // при добавлении договора
        const contract = message.data; // созданный договор <a data-footnote-ref href="#user-content-fn-1">ApiContract</a>
    }
    else if (message.event == 'prorentContractEdit') { // при редактировании договора
        const contract = message.data; // измененный договор <a data-footnote-ref href="#user-content-fn-1">ApiContract</a>
    }
}
</code></pre>

## Выбор помещений <a href="#rooms-selector" id="rooms-selector"></a>

Вы можете открыть модальное окно выбора помещений на плане или списке следующим кодом:

{% code overflow="wrap" %}

```html
<iframe src="https://portal.pro.rent/external/rooms-selector?token={token}&rooms={roomIds}"></iframe>
```

{% endcode %}

* `token` – [токен авторизации сотрудника](/d/api/main.md#avtorizaciya), обязателен.
* `roomIds` – список идентификаторов выбранных помещений через запятую, не обязателен.

При любом изменении выбранных помещений будет вызвано событие в основном окне:

<pre class="language-javascript"><code class="lang-javascript">window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
    const message = event.data;
    if (message.event == 'prorentRoomsSelect') {
        const rooms = message.data; // массив выбранных помещений <a data-footnote-ref href="#user-content-fn-2">ApiRoomInfo</a>[]
    }
}
</code></pre>

[^1]: [Посмотреть схему](/d/api/models.md#apicontract)

[^2]: [Посмотреть схему](https://portal.pro.rent/api/index.html)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pro.rent/d/api/modals.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
