Создание динамической формы для сценария типа Nodul

Для удовлетворения бизнес-потребностей может возникнуть необходимость динамически отображать поля в узле сценария типа Nodul.

Создадим кастомный узел с динамическим отображением полей. Для этого нужно создать вспомогательные сценарии с узлами NodulInput, NodulOutput, Nodul Form Input, Nodul Form Output, а затем проверить работу созданного узла.

Создание вспомогательных сценариев

1. Создайте сценарий типа Nodul:

• Добавьте узел NodulInput с настроенными параметрами:

URL — обязательный параметр типа String;

Method — обязательный параметр типа Select с возможностью одиночного выбора и списком значений: GET, POST, PUT, DELETE. В качестве значения по умолчанию можно выбрать GET;

Body type — опциональный параметр типа Select с возможностью одиночного выбора и списком значений: Raw, form-data, x-www-form-urlencoded. Заполните характеристику Fetch events значением Change, чтобы обновлять всю форму узла при выборе значения параметра.

• Добавьте узел для выполнения функции сценария, например, узел JavaScript для отправки запросов к внешнему приложению.
• Добавьте узел NodulOutput для получения ответа от сценария типа Nodul.

2. Сохраните и активируйте сценарий типа Nodul;

3. На той же странице создайте сценарий с использованием узлов Nodul Form Input и Nodul Form Output. Этот сценарий обеспечит динамическое отображение формы сценария типа Nodul на основе выбранных параметров:

• Добавьте узел Nodul Form Input для получения параметров из формы сценария типа Nodul;
• Добавьте узел JavaScript со следующим кодом:

export default async function run({execution_id, input, data}) {
    const current_form_values = data["{{3.`current_form_values`}}"];
    console.log(current_form_values);
    const formValuesRaw = JSON.parse(current_form_values);
    const formValues = formValuesRaw.reduce((acc, item) => {
        acc[item.key] = item.type === 'select' ? {
            ...item,
            value: {
                select: item.value.select[0],
            }
        } : item;
        return acc;
    }, {});
    const changedKeys = JSON.parse(data["{{3.event.`param_keys`}}"]).reduce((acc, item) => {
        acc[item] = true;
        return acc;
    }, {});

    return {
        formValues,
        changedKeys,
    }
}

• Создайте связь с условием {{4.changedKeys.bodytype = true and 4.formValues.bodytype.value.select = "raw"}}, чтобы запустить соответствующую ветку сценария при выборе значения «Raw» в параметре Body type;
• Добавьте ещё один узел JavaScript со следующим кодом:

export default async function run({execution_id, input, data}) {
    return {
        data: {
            params: {
                set: [{
                    key: 'body',
                    type: 'text',
                    title: 'Row',
                    required: true,

                }]
            }
        }
    }
}

• Добавьте узел Nodul Form Output для отображения параметров формы после выбора «Raw» в параметре Body type;
• Создайте связь с условием {{4.changedKeys.bodytype = true and (4.formValues.bodytype.value.select = "form-data" or 4.formValues.bodytype.value.select = "x-www-form-urlencoded")}}, чтобы запустить соответствующую ветку сценария при выборе значений «form-data» или «x-www-form-urlencoded» в параметре Body type;
• Добавьте ещё один узел JavaScript со следующим кодом:

export default async function run({execution_id, input, data}) {
    return {
        data: {
            params: {
                set: [{
                    key: 'body',
                    type: 'string_to_string',
                    title: data["{{4.`formValues`.bodytype.value.select}}"],
                }]
            }
        }
    }
}

• Добавьте узел Nodul Form Output для отображения параметров формы после выбора «Raw» в параметре Body type.

Результат вспомогательных сценариев

Чтобы проверить результат созданных сценариев, необходимо:

1. Создать новый сценарий;

2. Добавить созданный узел с помощью кнопки Add Node. Узел будет размещён в группе узлов согласно названию сценария, под типом Nodul.

Например, если название сценария Al Tools/Action/Nodul3, то узел будет размещён в группе Al Tools, в подгруппе Action, с названием Nodul3.

3. Добавленный узел отобразит поля, соответствующие параметрам узла NodulInput:

• При выборе параметра «Raw» в поле Body type форма узла обновится, и к существующим полям добавится обязательное поле Row;

• При выборе параметра «form-data» или «x-www-form-urlencoded» в поле Body type форма узла обновится, и к существующим полям добавятся пары полей Key-Value.

4. При каждом обновлении узла запускается вспомогательный сценарий. История и результаты выполнения отображаются в разделе History на странице сценария.