ApeekFlow
  • Платформа Apeekflow
  • С чего начать
    • Начало работы
    • Создаем первое приложение
    • Шаблоны проектов
  • Настройки платформы
    • Профиль
    • Библиотека запросов
    • Источники данных
      • Базы данных
        • PostgreSQL
        • MongoDB
        • MySQL
        • Redis
        • Microsoft SQL Server
        • MariaDB
      • AI сервисы
      • App Development
        • REST API
        • ApeekFlow REST API
      • Messaging
      • Assets
        • Хранилище файлов S3
      • Websocket
      • Сервисы
        • Google Sheets
    • Настройки
      • Рабочие пространства
      • Пользователи и группы
      • Расширенные настройки
        • Сторонние библиотеки
        • Импорт UMD библиотек
    • Корзина
  • Конструктор приложений
    • Обзор
      • Приложения
      • Модули
      • Приложение или модуль
      • Навигационная панель
      • Массовое редактирование
      • Управление слоями
      • Использвание Markdown
      • Горячие клавиши
    • Каталог компонентов
      • Общие настройки компонентов
      • Тост нотификации
      • Components
        • Table
        • Cascader
        • Link
        • Float Button
        • Form
        • JSON Schema Form
        • JSON Editor
        • JSON Explorer
        • Rich Text Editor
        • Input
        • Password
        • Number Input
        • Text Area
        • Auto Complete
        • Switch
        • Checkbox
        • Radio
        • Slider
        • Range Slider
        • Form Button
        • Icon Button
        • Dropdown
        • Toggle Button
        • Rating
        • Select
        • Multiselect
        • Tree
        • Tree Select
        • Text Display
      • Calendar
        • Calendar
        • Timer
        • Date
        • Date Range
        • Time
        • Time Range
      • Layout
        • Responsive Layout
        • Page Layout
        • Column Layout
        • Float Text Container
        • Content Card
        • Tabbed Container
        • Collapsible Container
        • Container
        • List View
        • Grid
        • Modal
        • Drawer
        • Divider
        • Navigation
        • Segmented Control
        • Tour
      • Multimedia
        • File Upload
        • File Viewer
        • Image
        • Image Carousel
        • Audio
        • Video
        • Shapes
        • Lottie Animation
        • Icons
        • Image Editor
        • Color Picker
        • QR Code
        • Scanner
      • Graphs
        • Basic Chart
        • Candlestick Chart
        • Funnel Chart
        • Gauge Chart
        • Graph Chart
        • Heatmap Chart
        • Radar Chart
        • Sankey Chart
        • Sunburst Chart
        • Theme River Chart
        • Tree Chart
        • Treemap Chart
        • Geo Map Charts
        • Mermaid Chart
        • Timeline
        • Progress
        • Progress Circle
      • Collaboration
        • Avatar
        • Avatar Group
        • Comment
      • Integration
        • Page
    • Кастомизация и код
      • Настройка стилей компонентов
      • Temporary State
      • Transformers
      • Data responder
      • Event handlers
      • Выполнение запросов
        • Привязка данных запроса к компонентам
      • Использование Javascript
        • JavaScript запросы
        • Встроенные функции JS
        • Работа с датой и временем в Day.js
    • Антипатерны
  • Релиз менеджмент
    • Версионирование запросов
    • Версионирование приложений
    • Доступ до приложений
    • Публикация приложений
  • Безопасность
    • Основная информация
    • IP адреса облака
    • Права доступа до объектов
Powered by GitBook
On this page
  • Используйте JS-запрос для объединения результатов запроса
  • Возвращение данных
  • Доступ к данным
  • Управляющий компонент
  • Выполнение запроса
  • run() метод и обратные вызовы
  • Передача параметров
  • Последовательное выполенение запросов
  • Объявить функцию
  • Добавление предварительно загруженных скриптов
  • Ограничения
  1. Конструктор приложений
  2. Кастомизация и код
  3. Использование Javascript

JavaScript запросы

Бывают случаи, когда вы хотите организовать операции, например, после запуска двух запросов вы хотите объединить и сохранить их результаты во временном состоянии, а затем открыть модальный. Этот процесс может быть сложным при объединении нескольких обработчиков событий в цепочку и, конечно же, не может быть выполнен в одной строке кода в {{ }}. Именно здесь в игру вступает JavaScript (JS) запрос. Он позволяет взаимодействовать с компонентами и запросами путем написания сложных JS-запросов для выполнения следующих операций:

  • Взаимодействие с компонентами пользовательского интерфейса

  • Запускающие запросы

  • Доступ к сторонним библиотекам JS

  • Настройка функций

Следующий пример предназначен для того, чтобы вы быстро поняли, что такое JS-запрос и как он работает.

Используйте JS-запрос для объединения результатов запроса

SQL-запрос query1 читает id, first_name, last_name и tid поля из таблицы players в базе данных PostgreSQL.

select id, first_name, last_name, tid from players

SQL-запрос query2 читает tid, city и name поля из таблицы teams в базе данных PostgreSQL.

select tid, city, name from teams

Используйте JS-запрос для левого соединения query1 и query2 на том же самом tid в следующих шагах.

  1. Создайте query3 и выберите Запустить JavaScript-код.

  2. Вставьте следующий код.

    return Promise.all([query1.run(), query2.run()]).then(
      data => join(data[0], data[1]),
      error => {}
    );
    
    function join(players, teams) {
      return players.map(player => {
        const team = teams.find(t => player.tid === t.tid);
        return { ...player, ...team };
      });
    }

    В этом фрагменте кода Promise.all() способ получает результаты query1 и query2, и join() метод объединяет их результаты после успешного запуска на основе значений tid поле.\

Возвращение данных

Воспользуйтесь return синтаксис для возврата результата. Например, следующий код возвращает 3.

return Math.floor(3.4)
return query2.run()

Оператор return не является необходимым для сценариев, в которых вы хотите опустить результаты.

Доступ к данным

Используйте JS-запросы для доступа к данным в вашем приложении. Обратите внимание, что нет необходимости использовать {{ }} обозначение.

var data = [input1.value, query1.data, fileUpload.files[0].name];

Управляющий компонент

В JS-запросах вы можете использовать методы, предоставляемые компонентами, для взаимодействия с компонентами пользовательского интерфейса в вашем приложении. Такая операция не поддерживается встроенным JS-кодом в {{}}.

// установите значение параметра input1 равным Hello.
input1.setValue("Hello");

Выполнение запроса

run() метод и обратные вызовы

Вызов run() метод для выполнения других запросов, например:

return queryByName.run(); // запустите запрос, и он вернет обещание

Возвращаемое значение query.run() это обещание, поэтому вы можете прикрепить обратные вызовы для обработки успешного результата или ошибки.

return queryByName.run().then(
  data => { // после успешного выполнения запроса
      return "hello, " + data.user_fullname; 
  },
  error => { // после неудачного выполнения запроса
    // используйте встроенную функцию сообщения, чтобы вывести сообщение об ошибке
    message.error("An error occured when fetching user: " + error.message); 
  }
);

Передача параметров

Вы можете передать параметры в методе run(), чтобы отделить реализацию запроса от его параметров.

query.run({
    param1: value1,
    param2: value2
    ...
});

Например, в SQL-запросе query1, вы можете определить name и status как параметры, которые необходимо передать для его выполнения.

select * from users 
   where 
     user_name = {{ name }} 
   and
    user_status = {{ status }}

Затем вы можете передать соответствующие параметры в query1.

query1.run({
  name: "Bob",
  status: 0 
}).then(
  data => { // после успешного выполнения запроса 1
    console.log("The result is" + JSON.stringify(data)); 
  },
  error => { // после неудачного выполнения запроса 1
    console.log("An error occured," + error.message);
  }
);

Демо 1

Когда у вас есть несколько входных данных в приложении, запускающих один и тот же запрос, передача параметров этому запросу позволяет вам повторно использовать его в любом месте.

-- запрос1: 
select id, name, gender, address from users where id={{numberInput1.value}}
-- запрос2: 
select id, name, gender, address from users where id={{table1.selectedRow.id}}
-- запрос3: 
select id, name, gender, address from users where id={{select1.value}}
...

При обновлении реализаций SQL может возникнуть путаница, поскольку необходимо тщательно проверять и обновлять все повторяющиеся запросы. Теперь вы можете избавиться от повторяющегося SQL, введя параметры запроса.

-- просто напишите SQL один раз и извлеките его параметр {{id}}: 
select id, name, gender, address from users where id= {{id}}

Затем запустите этот запрос в Run JavaScript обработчиков событий в каждом из входных данных.

Последовательное выполенение запросов

Бывают случаи, когда нужно последовательно выполнить несколько запросов. Чтобы это сделать нужно сначала подготовить все необходимые запросы в приложении. И затем добавить блок JavaScript

// последовательное выполнение запросов
async function runTasks() {
  try {
    await query1.run();
    await postgresUpdate.run();
    await queryGet.run();
  } catch (err) {
    console.error("Error:", err);
  }
}

runTasks();

Объявить функцию

Вы можете объявлять функции внутри JS-запроса для лучшей читабельности.

// Является ли первое число кратным второму числу
function isMultiple(num1, num2) {
      return num1 % num2 === 0;
   }
   
// Вызовите библиотеку моментов, чтобы вернуть текущую дату
function getCurrentDate() {
      return moment().format("YYYY-MM-DD");
}

Добавление предварительно загруженных скриптов

Apeekflow поддерживает импорт сторонних JS-библиотек и добавление предопределенного JS-кода, например, добавление глобальных методов или переменных для повторного использования на уровне приложения или рабочей области. Настройки на уровне приложения можно найти в разделе ⚙️ > Другие > Скрипты и стиль.

Для настройки на уровне рабочей области перейдите в раздел Настройки > Дополнительно.

На вкладке JavaScript вы можете добавить предварительно загруженный код JavaScript для определения глобальных методов и переменных, а затем повторно использовать их в своем приложении. Информацию об импорте библиотек смотрите в разделе .

Ограничения

PreviousИспользование JavascriptNextВстроенные функции JS

Last updated 5 months ago

Возвращаемый результат также может быть объектом . Например, query2.run() возвращает объект Promise.

Метод input 1.setValue() (или другие методы компонента) является асинхронным и возвращает объект . Обращение к input1.value сразу после установки значения input1 не возвращает обновленное значение.

По соображениям безопасности в Apeekflow отключены несколько глобальных переменных и функций window. Пожалуйста, сообщайте в , если у вас возникнут какие-либо проблемы.

Promise
Promise
Telegram