Skip to content

Commit

Permalink
[EDP-DDM-28162] Translated select-overview.adoc
Browse files Browse the repository at this point in the history
Change-Id: I4b1c91a42fed3bd2d0684bb69fd2448bb52ab413
  • Loading branch information
Oleksandr Bilyi authored and Anton Tuhai committed Aug 30, 2023
1 parent 38e5ffe commit 8f3bb4d
Show file tree
Hide file tree
Showing 7 changed files with 175 additions and 38 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ include::platform:ROOT:partial$admonitions/language-en.adoc[]
The *Columns* component is a UI element that enables you to group other components. You can use columns to display more than one component in a single row or to save vertical space on a form.

//CAUTION: Використовуйте Columns з переліку _Оновлених_ компонентів.
CAUTION: Use the Columns component from the *Updated* components section.
CAUTION: Use the Columns component from the *Latest* components section.

//== Основні функції
== Main functions
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The *Data Import* component is a UI element that enables you to configure data i
CAUTION: _Admin portal_ does not have access to _digital-document-service_.

//CAUTION: Використовуйте Data Import з переліку _Оновлених_ компонентів.
CAUTION: Use the Data Import component from the *Updated* components section.
CAUTION: Use the Data Import component from the *Latest* components section.

//== Основні функції
== Main functions
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ include::platform:ROOT:partial$admonitions/language-en.adoc[]
The *Field Set* component is a UI element that enables you to add a header to a form area or a group of components. You can place this element inside layout components or between multiple related components.

//CAUTION: Використовуйте Field Set з переліку _Оновлених_ компонентів.
CAUTION: Use the Field Set component from the *Updated* components section.
CAUTION: Use the Field Set component from the *Latest* components section.

//== Основні функції
== Main functions
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
= Select component
include::platform:ROOT:partial$templates/document-attributes/default-set-en.adoc[]

include::platform:ROOT:partial$admonitions/language-en.adoc[]

//== Опис компонента
== Component overview

//Компонент *Select* є елементом інтерфейсу для роботи зі списками, з яких можна вибрати одну або кілька елементів. Цей список відображається у вигляді закритого блоку з одним або декількома елементами, і коли натиснути на поле вводу, список розкривається. На початку вводу список фільтрується. Компонент дозволяє вам налаштувати відображення, валідацію та завантаження даних з url.
The *Select* component is a UI element that enables you to create lists with one or more selectable items. By default, the list appears as a collapsed block with one or more elements. Clicking the input field expands the list; typing inside it filters the list. You can configure the display, validation, and loading data via URL.

//Розширення стандартного компонента * Select * включає додавання додаткових опцій, які спрощують моделювання. Це дозволяє розробникам та моделювальникам регламенту використовувати цей компонент більш гнучко та підлаштувати його під специфічні потреби різноманітних бізнес-сценаріїв.
An extension of the standard *Select* component includes additional options that simplify modeling. This gives regulations developers and modelers more flexibility to adapt the component to the specific needs of various business scenarios.

//CAUTION: Використовуйте Select з переліку _Оновлених_ компонентів.
CAUTION: Use the Select component from the *Latest* components section.

//== Основні функції
== Main functions

//Компонент *Select* підтримує велику кількість опцій для застосування при взаємодії із формою процесу, які розподілені за вкладками.
The *Select* component supports many options when interacting with the process forms. The options are divided into tabs.

[tabs]
====
Display ::
include::../general/common-descriptions/display/index.adoc[]
Data ::
//* *`Multiple Values`*: дозволяє вибрати декілька значень.
* *Multiple Values*: Allow selecting multiple values.
//* *`Data Source Type`*: визначає звідки брати значення.
* *Data Source Type*: Define the data source.
+
//Щоб отримувати дані з серверу xref:bp-modeling/forms/components/select/bp-select-component-form-io.adoc[Див.]
To learn how to get server data, see xref:bp-modeling/forms/components/select/bp-select-component-form-io.adoc[].
//* *`Default Values`*: визначте Value Property — назва властивості із JSON-відповіді ендпоінту, яка зберігатиметься як значення після селекту (наприклад, formKey).
//TODO: Let's double-check Default Values description; it sounds dubious.
* *Default Values*: Define the Value property -- the name of the property from the endpoint's JSON response that will be stored as the value after the selection (for example, formKey).
//* *`Data Source Values`*: перелік значень, які відображаються в полі вибору.
* *Data Source Values*: The list of values displayed in the selection field.
//* *`ID Path`*: дозволяє вам вказати шлях до поля, яке містить унікальний ідентифікатор у відповіді отриманій з джерела даних. Цей ідентифікатор використовується для ідентифікації кожного елементу зі списку, що відображається у компоненті *Select*.
* *ID Path*: Specify the path to the field containing the unique ID in the response received from the data source. This ID is used to identify each item in the list displayed in the *Select* component.
//* *`Item Tamplate`*: дозволяє налаштувати вигляд кожного елемента у випадаючому списку компонента *Select*. Кожен елемент списку може включати не тільки текст, але й додаткові візуальні елементи, такі як значки, зображення або інші HTML-елементи.
* *Item Template*: Customize the appearance of each item in the dropdown list of the *Select* component. In addition to text, each list item may include visual elements such as icons, images, and other HTML elements.
//* *`Refresh Options On`*: перемальовує компонент, якщо інший компонент змінюється xref:bp-modeling/forms/components/select/select-refresh-options.adoc[Див.]
* *Refresh Options On*: Redraw the component when another component changes. For details, see xref:bp-modeling/forms/components/select/select-refresh-options.adoc[].
//* *`Refresh Options On Blur`*: контролює, коли компонент *Select* оновлює свої варіанти вибору.
* *Refresh Options On Blur*: Control when the *Select* component updates its choices.
//* *`Clear value when on refresh options`*: дозволяє визначити поведінку щодо видалення вибраного значення, коли відбувається оновлення опцій для вибору.
* *Clear value when on refresh options*: Define the behavior of the selected value when the selection options are updated.
//* *`Clear value when hidden`*: визначає, як буде поводитись вибране значення, коли компонент стає прихованим на сторінці.
* *Clear value when hidden*: Define the behavior of the selected value when the component becomes hidden.
//* *`Custom default value`*: дозволяє налаштувати власне, користувацьке значення за замовчуванням для компонента *Select*. Детальніше <<_custom_default_value>>.
//TODO: <<_custom_default_value>> - is this some kind of a placeholder?
* *Custom default value*: Set your own default value for the *Select* component.
//* *`Calculated value`*: дозволяє обчислювати значення компонента *Select* на підставі інших даних або умов. Детальніше <<_calculated_value>>.
* *Calculated value*: Enables you to calculate the value of the *Select* component based on other data or conditions.
//* *`Allow manual override of calculated value`*: дозволяє користувачам вручну перевизначити обчислене значення компонента *Select*.
* *Allow manual override of calculated value*: Allows users to override the calculated value of the *Select* component manually.
Validation ::
//* *`Validate On`*: визначає, коли цей компонент повинен активувати валідацію на клієнті (опції Зміна або Розмиття).
//* *Validate On*: Defines when this component should activate validation on the client side (onChange or onBlur).
include::general/common-descriptions/validation/validate-on.adoc[]
//* *`Required`*: поле обов'язкове для заповнення перед відправленням форми.
include::general/common-descriptions/validation/required.adoc[]
//* *`Custom error message`*: спеціальне повідомлення про помилку, яке відображається, коли дані не проходять валідацію.
include::general/common-descriptions/validation/custom-error-message.adoc[]
//* *`Custom validation`*: власна валідація, яка дозволяє вам створити специфічні для ваших потреб перевірки на валідність.
include::general/common-descriptions/validation/custom-validation.adoc[]
//* *`JSONLogic Validation`*: дозволяє описати логіку перевірки у форматі JSON, що спрощує створення та управління правилами валідації даних.
* *JSONLogic Validation*: Enables you to describe validation logic in JSON format, simplifying the creation and management of data validation rules.
API ::
//* *`Property name`*: ім'я цього поля для API-ендпоінту, яке відповідає назві таблиці у базі даних реєстру. Наприклад, *`licences`*.
* *Property Name*: Field name for the API endpoint, which corresponds to the table name in the registry database -- for example, *`licenses`*.
Conditions ::
//* *`Advanced Conditions`*: дозволяють вам налаштовувати складні умови для компонента *Select*. Ці умови визначають, коли компонент стає видимим, доступним для вибору, або коли він повинен мати певне значення на основі умов, виразів або логіки.
* *Advanced Conditions*: Configure advanced conditions for the *Select* component. These conditions determine when the component becomes visible, selectable, or when it should have a certain value based on conditions, expressions, or logic.
Layout ::
//* *`HTML Attributes`*: додаткові атрибути, які можна використовувати для налаштування та збільшення функціональності компонента *Select* в контексті HTML сторінки або додатка.
* *HTML Attributes*: Additional attributes that you can use to customize and increase the functionality of the *Select* component in the context of an HTML page or application.
//* *`PDF Overlay`*: додаткові параметри для налаштування відображення в PDF.
* *PDF Overlay*: Additional options for setting the display in PDF.
Table ::
//* *`Table View`*: визначає, чи відображувати елемент в таблиці та в *EditGrid*.
include::general/common-descriptions/table/table-view.adoc[]
//* *`Table column width`*: дозволяє налаштовувати ширину стовпця у таблиці, яка відображається під час використання компонента *Select* в EditGrid.
include::general/common-descriptions/table/table-column-width.adoc[]
//* *`Sort As Number`*: визначає, чи сортурувати значення як строку або як число при використані *Select* в EditGrid.
include::general/common-descriptions/table/sort-as-number.adoc[]
====

//== Формат даних
== Data format

//Компонент приймає масив об'єктів. Кожен об'єкт у масиві може містити різні поля та їх значення. У прикладі нижче наведено один об'єкт з полем "value" та значенням '123'. Label те що буде відображатися у списку.
The component accepts an array of objects. Each object in an array can contain different fields with values. The example below shows a single object with a "value" field and a value of "123." The `Label` is what will be displayed in the list.

.Submission
[source,typescript]
----
Object
// Example: [{ value: 123, label: 'Label' }]
----

//== Основні положення
== Key points

=== Custom Default Value
[sidebar]

value = instance.getOriginalValues()[0].value
--
//У цій функції використовується JS вставка. xref:bp-modeling/forms/components/general/eval.adoc[Див.]
This function uses JS plugins. For details, see xref:bp-modeling/forms/components/general/eval.adoc[].
--

=== Calculated Value

//Досить часто необхідно відфільтрувати з API один елемент та одразу обрати його. Так можно організувати сценарій однозначного вибору одного поля відповідно до значення іншого. Можна використати перевірку ``instance.getOriginalValues().length === 1`` - якщо у нас в списку тільки один елемент, ми одразу присвоюємо цей елемента в значення ``value``.
You might need to filter one element from the API and select it right away. This way, you can set a scenario of unambiguously selecting one field according to the value of another. You can use the following check: `instance.getOriginalValues().length === 1`, and if there is only one element in the list, you can assign this element to the `value` field right away.

//Необхідно заповнити значення параметра *Calculated Value* таким чином:
Fill in the following value of the *Calculated Value* parameter:

.Latest Select
[source,javascript]
----
if (instance.getOriginalValues().length === 1) {
value = instance.getOriginalValues()[0].value;
}
----

.Legacy Select
[source,javascript]
----
if (instance.selectOptions.length === 1) {
value = instance.selectOptions[0].value;
}
----

[sidebar]
--
//У цій функції використовується JS вставка. xref:bp-modeling/forms/components/general/eval.adoc[Див.]
This function uses JS plugins. For details, see xref:bp-modeling/forms/components/general/eval.adoc[].
--
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
:toc-title: On this page:
:toc: auto
:toclevels: 5
:experimental:
:sectnums:
:sectnumlevels: 5
:sectanchors:
:sectlinks:
:partnums:

//= Використання функції "Refresh Options on" в оновленому компоненті Select
= Using the "Refresh Options On" function in the updated Select component
include::platform:ROOT:partial$templates/document-attributes/default-set-en.adoc[]

include::platform:ROOT:partial$admonitions/language-en.adoc[]

//Адміністратор регламенту має змогу одночасно підключати декілька стилізованих компонентів до функції `Refresh Options on` в рамках компонента Select.
The regulations administrator can simultaneously connect several stylized components to the `Refresh Options On` function within the Select component.
Expand Down Expand Up @@ -44,7 +37,7 @@ image:registry-develop:bp-modeling/forms/component-file-multiple-values/componen
image:registry-develop:bp-modeling/forms/bp-select/bp-select-refresh-option-on-1.png[]
+
//. Оберіть розділ `Оновлені`. Зі списку оберіть компонент `Select` і перетягніть його до області налаштування форми.
. In the components panel on the left, select *Updated*.
. In the components panel on the left, select *Latest*.
. Find the *Select* component and drag it onto the modeling canvas.
+
//Далі натисніть `Save`.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ include::platform:ROOT:partial$admonitions/language-en.adoc[]
The *Table* component is a UI element that presents data as rows and columns.

//CAUTION: Використовуйте Table з переліку _Оновлених_ компонентів.
CAUTION: Use the Table component from the *Updated* components section.
CAUTION: Use the Table component from the *Latest* components section.

//== Основні функції
== Main functions
Expand Down
Loading

0 comments on commit 8f3bb4d

Please sign in to comment.