-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EDP-DDM-28162] Translated select-overview.adoc
Change-Id: I4b1c91a42fed3bd2d0684bb69fd2448bb52ab413
- Loading branch information
Oleksandr Bilyi
authored and
Anton Tuhai
committed
Aug 30, 2023
1 parent
38e5ffe
commit 8f3bb4d
Showing
7 changed files
with
175 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
159 changes: 159 additions & 0 deletions
159
...registry-develop/pages/bp-modeling/forms/components/select/select-overview.adoc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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[]. | ||
-- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.