IKuznetsov: Новая страница: « = Добавление кода на дашборд = Используйте плитку кода для запуска '''JavaScript''', который может: * Получать внешние данные через '''API'''. * Объединять внешние данные с результатами ваших запросов. * Сопоставлять результаты кода с вашими визуализациями. == Добав...»

2026-09-28T17:36:57Z

Новая страница: « = Добавление кода на дашборд = Используйте плитку кода для запуска '''JavaScript''', который может: * Получать внешние данные через '''API'''. * Объединять внешние данные с результатами ваших запросов. * Сопоставлять результаты кода с вашими визуализациями. == Добав...»

Новая страница

= Добавление кода на дашборд =
Используйте плитку кода для запуска '''JavaScript''', который может:

* Получать внешние данные через '''API'''.
* Объединять внешние данные с результатами ваших запросов.
* Сопоставлять результаты кода с вашими визуализациями.

== Добавление кода ==
'''Чтобы добавить код на дашборд'''

1. В правом верхнем углу дашборда откройте меню '''Добавить''' и выберите '''Код'''.
* Сочетание клавиш: '''Shift+C'''
2. На дашборд добавляется пустая плитка, и справа открывается боковая панель '''Параметры'''.

3. ''Необязательно'': в поле '''Заголовок плитки''' введите заголовок для отображения в верхней части вашей плитки.

4. В пронумерованном поле '''Код''' введите пользовательский '''JavaScript''' для получения внешних данных из любого доступного '''API'''. Используйте '''Fetch API''' для получения данных из внешних '''API'''.
* Чтобы убедиться, что ваши запросы не заблокированы, попросите администратора разрешить ваши внешние источники данных, добавив их в '''Внешние запросы'''.
* Внешние запросы включают исходящие сетевые подключения из вашей среды Ключ-АСТРОМ к внешним сервисам. Они позволяют контролировать доступ к публичным конечным точкам из '''AppEngine''' с помощью функций приложений и функций в '''Дашбордах''', '''Блокнотах''' и '''Автоматизациях'''.
* Перейдите в '''Настройки > Общие > Внешние запросы'''.
* Выберите '''Новый шаблон хоста'''.
* Добавьте доменные имена.
* Выберите '''Добавить'''.
* Таким образом вы можете гранулярно контролировать веб-сервисы, к которым могут подключаться ваши функции.
* Не включайте префикс адреса. Например, если адрес <code><nowiki>https://www.example.com</nowiki></code>, добавьте только <code>www.example.com</code>.

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

''Этот дашборд содержит пользовательский код. Он доступен только для чтения, пока вы не проверите код и не выберете «Принять и запустить».''

Когда вы запускаете плитку кода или раздел, написанный другим человеком, Ключ-АСТРОМ выполняет '''JavaScript''' этого человека, используя вашу учётную запись и ваши разрешения. Это мощная функция, но её нужно использовать правильно и ответственно. Код '''JavaScript''' может получать доступ к внешним '''API''' от вашего имени (используя вашу учётную запись и разрешения).

'''Чтобы проверить код'''

1. Выберите '''Проверить весь код'''.

2. Страница '''Проверка кода''' отображает код каждой плитки кода в отдельном поле.

3. Проверьте код и решите, хотите ли вы его запустить.

4. Если вы хотите запустить код, вы можете одобрить его только на этот раз или навсегда.
* Чтобы запустить код только на этот раз, выберите '''Принять и запустить'''. В следующий раз при открытии этого документа вас снова попросят проверить код перед запуском.
* Чтобы навсегда принять код в этом документе, выберите '''Всегда доверять коду в этом документе''' и затем выберите '''Принять и запустить'''.

== Примеры ==

=== Запрос и ответ для табличной визуализации ===
В этом примере используется '''API''' dummyjson.com для получения образцов данных о продуктах.

Результат этого вызова '''API''' — несколько образцов продуктов в формате '''JSON'''. Добавив <code>.products</code> к результату, вы можете передать его напрямую в табличную визуализацию.

1. В '''Дашбордах''' откройте или создайте дашборд, который можете редактировать.

2. Откройте меню '''Добавить''' и выберите '''Код'''.

3. На вкладке '''Данные''' вставьте этот код в поле '''Код''' и запустите его.<pre>
export default async function () {
const url = "https://dummyjson.com/products";
const response = await fetch(url);
const result = await response.json();
return result.products;
}
</pre>4. На вкладке '''Визуализация''' выберите '''Таблица''', чтобы увидеть данные в таблице.

=== Запрос и ответ для визуализации одного значения ===
В этом примере на основе предыдущего примера вычисляется средняя цена для всех образцов продуктов и передаётся в визуализацию одного значения.

1. В '''Дашбордах''' откройте или создайте дашборд, который можете редактировать.

2. Откройте меню '''Добавить''' и выберите '''Код'''.

3. На вкладке '''Данные''' вставьте этот код в поле '''Код''' и запустите его.<pre>
export default async function () {
const url = "https://dummyjson.com/products";
const response = await fetch(url);
const result = await response.json();

let avgPrice = 0;
const numberOfProducts = result.products.length;

if (!numberOfProducts) {
return 0;
}

for (let i = 0; i < numberOfProducts; i++) {
avgPrice = avgPrice + result.products[i].price;
}

return avgPrice / numberOfProducts;
}
</pre>4. На вкладке '''Визуализация''' выберите '''Одно значение''', чтобы увидеть среднее значение данных как одно значение.

=== Расширенный запрос и ответ для списка записей ===
В этом примере используется '''API''' среды Ключ-АСТРОМ для получения событий и создания визуализации списка записей.

1. В '''Дашбордах''' откройте или создайте дашборд, который можете редактировать.

2. Откройте меню '''Добавить''' и выберите '''Код'''.

3. На вкладке '''Данные''' вставьте этот код в поле '''Код'''.
* В коде замените следующие заполнители:
* <code><your-environment-id></code> на ID вашей среды Ключ-АСТРОМ (например, <code>wkf12345</code>).
* <code><your-api-token></code> на токен '''API''', который может читать события (например, область действия <code>events.read</code>).

<pre>
export default async function () {
const environment = "https://<your-environment-id>.apps.astromkey.com"
const token = "<your-api-token>";
const params = '/api/v2/events?eventSelector=status("OPEN")';

const uri = environment + params;
const response = await fetch(uri, {
headers: {
Accept: "application/json",
Authorization: "Api-Token " + token
}});

const result = await response.json();
return result.events;
}
</pre>4. Выберите '''Запустить'''.

5. На вкладке '''Визуализация''' выберите '''Список записей''', чтобы увидеть данные в списке записей.

=== Больше примеров ===
'''Чтобы попробовать больше примеров'''

1. В '''Дашбордах''' откройте меню '''Добавить''' в верхней части дашборда и прокрутите вниз до раздела '''Библиотека'''.

2. Найдите и выберите любую предопределённую плитку кода (обозначенную соответствующим значком) из раздела '''Библиотека''' меню.
* Это добавит выбранный пример на ваш дашборд.
3. Отредактируйте пример по мере необходимости.

Добавление кода на дашборд - История изменений