From 2109c3db8fff61fea1243bdf6c0080056542185a Mon Sep 17 00:00:00 2001 From: "danil.moroz" Date: Mon, 30 Oct 2023 15:00:25 +0200 Subject: [PATCH 01/15] CC-31652 Introduced `datasource.dependable` and `datasource.trigger` services. --- _data/sidebars/scos_dev_sidebar.yml | 9 ++ .../datasources/datasource-dependable.md | 113 ++++++++++++++ .../datasources/datasource-http.md | 6 +- .../datasources/datasource-inline-table.md | 6 +- .../datasources/datasource-inline.md | 6 +- .../datasource-trigger-change.md | 84 +++++++++++ .../datasource-trigger-input.md | 84 +++++++++++ .../datasource-trigger/datasource-trigger.md | 140 ++++++++++++++++++ 8 files changed, 442 insertions(+), 6 deletions(-) create mode 100644 docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md create mode 100644 docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md create mode 100644 docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md create mode 100644 docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md diff --git a/_data/sidebars/scos_dev_sidebar.yml b/_data/sidebars/scos_dev_sidebar.yml index 14e920aadb8..14b9ec1e4ea 100644 --- a/_data/sidebars/scos_dev_sidebar.yml +++ b/_data/sidebars/scos_dev_sidebar.yml @@ -1782,6 +1782,15 @@ entries: - title: "Datasources" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasources.html nested: + - title: "Trigger" + url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html + nested: + - title: "Change" + url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.html + - title: "Input" + url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.html + - title: "Depenable" + url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-dependable.html - title: "HTTP" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-http.html - title: "Inline" diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md new file mode 100644 index 00000000000..8bbb2ab25df --- /dev/null +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md @@ -0,0 +1,113 @@ +--- +title: Datasource Dependable +description: This document provides details about the Datasource Dependable service in the Components Library. +template: concept-topic-template +related: + - title: Datasource Trigger + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html + - title: Datasource Http + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html + - title: Datasource Inline Table + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html + - title: Datasource Inline + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html +--- + +This document explains the Datasource Dependable service in the Components Library. + +## Overview + +Datasource Dependable is an Angular Service that resolves datasources for a component based on the value of a specific element. + +Check out an example usage of the Datasource Dependable. + +Service configuration: + +- `type` — a datasource type. +- `id` — an ID of the depended element. +- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)). + +```html + + + + + + + +``` + +The depended element (in our example it's a `SelectComponent`) must implement a `DatasourceDependableElement` abstract class (token) and return component value using `getValueChanges()` abstract method: + +```ts +@Component({ + ..., + providers: [ + { + provide: DatasourceDependableElement, + useExisting: SelectComponent, + }, + ], +}) +export class SelectComponent implements DatasourceDependableElement { + ... + getValueChanges(): Observable { + // This method must return an Observable of the component value. + } + ... +} +``` + +## Service registration + +Register the service: + +```ts +declare module '@spryker/datasource' { + interface DatasourceRegistry { + 'dependable-element': DatasourceDependableService; + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + 'dependable-element': DatasourceDependableService, + }), + ], +}) +export class RootModule {} +``` + +## Interfaces + +Below you can find interfaces for the Datasource Dependable: + +```ts +import { DatasourceConfig } from '@spryker/datasource'; +import { Observable } from 'rxjs'; + +export interface DatasourceDependableConfig extends DatasourceConfig { + id: string; + datasource: DatasourceConfig; +} + +export interface DatasourceDependableElementsConfig { + [id: string]: DatasourceDependableElement; +} + +export abstract class DatasourceDependableElement { + abstract getValueChanges(): Observable; +} +``` diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md index 0cd8a923f9e..30eb76cfa87 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md @@ -5,8 +5,10 @@ template: concept-topic-template redirect_from: - /docs/marketplace/dev/front-end/202212.0/ui-components-library/datasources/datasource-http.html related: - - title: Datasources - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasources.html + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Trigger + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html - title: Datasource Inline Table link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html - title: Datasource Inline diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md index a0a0e95c7e1..843193f2a25 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md @@ -5,8 +5,10 @@ template: concept-topic-template redirect_from: - /docs/marketplace/dev/front-end/202212.0/ui-components-library/datasources/datasource-inline-table.html related: - - title: Datasources - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasources.html + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Trigger + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html - title: Datasource Http link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html - title: Datasource Inline diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md index b9a20c4d26b..aa383eb417c 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md @@ -5,8 +5,10 @@ template: concept-topic-template redirect_from: - /docs/marketplace/dev/front-end/202212.0/ui-components-library/datasources/datasource-inline.html related: - - title: Datasources - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasources.html + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Trigger + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html - title: Datasource Http link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html - title: Datasource Inline Table diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md new file mode 100644 index 00000000000..f72397da730 --- /dev/null +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md @@ -0,0 +1,84 @@ +--- +title: Datasource Trigger Change +description: This document provides details about the Datasource Trigger Change service in the Components Library. +template: concept-topic-template +related: + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Http + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html + - title: Datasource Inline Table + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html + - title: Datasource Inline + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html +--- + +This document explains the Datasource Trigger Change service in the Components Library. + +## Overview + +Datasource Trigger Change is an Angular Service that extracts the value from the event trigger element and checks whether it meets certain criteria. If the value is valid, it emits an object containing the value. + +Check out an example usage of the Datasource Trigger Change. + +Service configuration: + +- `type` — a datasource type. +- `event` — an event type triggered by element. +- `debounce` - delays the emission of values the next datasource (default is `300ms`). +- `minCharacters` - emits the trigger element value if the length is greater than or equal to the `minCharacters` property (default is `2`). +- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)). + +```html + + +``` + +## Service registration + +Register the service: + +```ts +declare module '@spryker/datasource' { + interface DatasourceRegistry { + trigger: DatasourceTriggerService; + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + trigger: DatasourceTriggerService, + }), + DatasourceTriggerModule.withEvents({ + change: ChangeDatasourceTriggerService, + }), + ], +}) +export class RootModule {} +``` + +## Interfaces + +Below you can find interfaces for the Datasource Trigger Change: + +```ts +import { DatasourceTriggerConfig } from '@spryker/datasource.trigger'; + +export interface ChangeDatasourceTriggerConfig extends DatasourceTriggerConfig { + minCharacters?: number; +} + +export type ChangeDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; +``` diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md new file mode 100644 index 00000000000..b73b8e90191 --- /dev/null +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md @@ -0,0 +1,84 @@ +--- +title: Datasource Trigger Input +description: This document provides details about the Datasource Trigger Input service in the Components Library. +template: concept-topic-template +related: + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Http + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html + - title: Datasource Inline Table + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html + - title: Datasource Inline + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html +--- + +This document explains the Datasource Trigger Input service in the Components Library. + +## Overview + +Datasource Trigger Input is an Angular Service that extracts the value from the event trigger element and checks whether it meets certain criteria. If the value is valid, it emits an object containing the value. + +Check out an example usage of the Datasource Trigger Input. + +Service configuration: + +- `type` — a datasource type. +- `event` — an event type triggered by element. +- `debounce` - delays the emission of values the next datasource (default is `300ms`). +- `minCharacters` - emits the trigger element value if the length is greater than or equal to the `minCharacters` property (default is `2`). +- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)). + +```html + + +``` + +## Service registration + +Register the service: + +```ts +declare module '@spryker/datasource' { + interface DatasourceRegistry { + trigger: DatasourceTriggerService; + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + trigger: DatasourceTriggerService, + }), + DatasourceTriggerModule.withEvents({ + input: InputDatasourceTriggerService, + }), + ], +}) +export class RootModule {} +``` + +## Interfaces + +Below you can find interfaces for the Datasource Trigger Input: + +```ts +import { DatasourceTriggerConfig } from '@spryker/datasource.trigger'; + +export interface InputDatasourceTriggerConfig extends DatasourceTriggerConfig { + minCharacters?: number; +} + +export type InputDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; +``` diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md new file mode 100644 index 00000000000..dd28c48fde7 --- /dev/null +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md @@ -0,0 +1,140 @@ +--- +title: Datasource Trigger +description: This document provides details about the Datasource Trigger service in the Components Library. +template: concept-topic-template +related: + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Http + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html + - title: Datasource Inline Table + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html + - title: Datasource Inline + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html +--- + +This document explains the Datasource Trigger service in the Components Library. + +## Overview + +Datasource Trigger is an Angular Service that provides a flexible way to fetch data based on events triggered by the user. + +```html + + +``` + +The trigger element (in our example it's a `SelectComponent`) must implement a `DatasourceTriggerElement` abstract class (token) and return component instance using `getTriggerElement()` abstract method: + +```ts +@Component({ + ..., + providers: [ + { + provide: DatasourceTriggerElement, + useExisting: SelectComponent, + }, + ], +}) +export class SelectComponent implements DatasourceTriggerElement { + ... + getTriggerElement(): Observable { + // This method must return an Observable of the component instance. + } + ... +} +``` + +## Main Service + +The main module provides an opportunity to register any `datasource.trigger` by key via static method `withEvents()`. It assigns the object of datasources to the `DatasourceEventTypesToken` under the hood. + +`resolve()` method gets the trigger element using the `DatasourceTriggerElement` abstract class (token)`, finds specific service from the `DatasourceEventTypesToken` by `config.event` (from the argument) and returns observable with data (based on the data returned from trigger element) by `Datasource.resolve()`. + +## Datasource + +Datasource Trigger must implement a specific interface (DatasourceTriggerEvent) and then be registered to the Root Module via `DatasourceModule.withEvents()`. + +```ts +// Module augmentation +import { DatasourceConfig } from '@spryker/datasource'; + +declare module '@spryker/datasource' { + interface DatasourceRegistry { + trigger: DatasourceTriggerService; + } +} + +export interface CustomDatasourceTriggerConfig extends DatasourceTriggerConfig { + ... +} + +// Service implementation +@Injectable({ + providedIn: 'root', +}) +export class CustomDatasourceTriggerService implements DatasourceTriggerEvent { + subscribeToEvent( + config: CustomDatasourceTriggerConfig, + triggerElement: HTMLElement, + ): Observable> { + ... + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + trigger: DatasourceTriggerService, + }), + DatasourceTriggerModule.withEvents({ + custom: CustomDatasourceTriggerService, + }), + ], +}) +export class RootModule {} +``` + +The context within which Datasources operate is defined by the local injector where it’s being used. + +## Interfaces + +Below you can find interfaces for the Datasource Trigger configuration and types: + +```ts +export interface DatasourceTriggerEventRegistry {} + +export type DatasourceTriggerEventRegistryType = RegistryType; + +export type DatasourceTriggerEventDeclaration = RegistryDeclaration; + +export interface DatasourceTriggerConfig extends DatasourceConfig { + event: DatasourceTriggerEventRegistryType | string; + datasource: DatasourceConfig; + debounce?: number; +} + +export interface DatasourceTriggerEvent { + subscribeToEvent(config, triggerElement): Observable; +} + +export abstract class DatasourceTriggerElement { + abstract getTriggerElement(): Observable; +} +``` + +## Datasource types + +There are a few common Datasources that are available in UI library as separate packages: + +- [Change](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.html) — allows passing data along with the configuration of the Datasource using `change` event. +- [Input](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.html) — allows passing data along with the configuration of the Datasource using `input` event. From 3ca5262f7770b767553e8de0d5b36e85c86a2ff7 Mon Sep 17 00:00:00 2001 From: "danil.moroz" Date: Mon, 6 Nov 2023 12:56:23 +0200 Subject: [PATCH 02/15] CC-31652 Updated datasource-trigger.md. --- .../datasources/datasource-trigger/datasource-trigger.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md index dd28c48fde7..58990072448 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md @@ -17,7 +17,7 @@ This document explains the Datasource Trigger service in the Components Library. ## Overview -Datasource Trigger is an Angular Service that provides a flexible way to fetch data based on events triggered by the user. +Datasource Trigger is an Angular Service that provides a flexible way to fetch data based on user-triggered events. ```html Date: Mon, 6 Nov 2023 13:08:17 +0200 Subject: [PATCH 03/15] CC-31652 Updated ui-components-library.md --- .../ui-components-library/ui-components-library.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/ui-components-library.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/ui-components-library.md index 8ea4e8c1822..c4e24e3d467 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/ui-components-library.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/ui-components-library.md @@ -74,9 +74,13 @@ The following is a list of available UI components: - @spryker/data-transformer.object-map ([npm](https://www.npmjs.com/package/@spryker/data-transformer.object-map)) - @spryker/data-transformer.pluck ([npm](https://www.npmjs.com/package/@spryker/data-transformer.pluck)) - @spryker/datasource ([npm](https://www.npmjs.com/package/@spryker/datasource)) -- @spryker/datasource.http ([npm](https://www.npmjs.com/package/@spryker/datasource.http)) -- @spryker/datasource.inline ([npm](https://www.npmjs.com/package/@spryker/datasource.inline), [story](https://spy-storybook.web.app/?path=/story/datasourceinline--primary)) -- @spryker/datasource.inline.table ([npm](https://www.npmjs.com/package/@spryker/datasource.inline.table), [story](https://spy-storybook.web.app/?path=/story/tabledatasourceinlineservice--with-table)) + - @spryker/datasource.dependable ([npm](https://www.npmjs.com/package/@spryker/datasource.dependable), [story](https://spy-storybook.web.app/?path=/story/datasourcedependableservice--primary)) + - @spryker/datasource.http ([npm](https://www.npmjs.com/package/@spryker/datasource.http)) + - @spryker/datasource.inline ([npm](https://www.npmjs.com/package/@spryker/datasource.inline), [story](https://spy-storybook.web.app/?path=/story/datasourceinline--primary)) + - @spryker/datasource.inline.table ([npm](https://www.npmjs.com/package/@spryker/datasource.inline.table), [story](https://spy-storybook.web.app/?path=/story/tabledatasourceinlineservice--with-table)) + - @spryker/datasource.trigger ([npm](https://www.npmjs.com/package/@spryker/datasource.trigger)) + - @spryker/datasource.trigger.change ([npm](https://www.npmjs.com/package/@spryker/datasource.trigger.change), [story](https://spy-storybook.web.app/?path=/story/changedatasourcetriggerservice--primary)) + - @spryker/datasource.trigger.input ([npm](https://www.npmjs.com/package/@spryker/datasource.trigger.input), [story](https://spy-storybook.web.app/?path=/story/inputdatasourcetriggerservice--primary)) - @spryker/date-picker ([npm](https://www.npmjs.com/package/@spryker/date-picker), [story](https://spy-storybook.web.app/?path=/story/datepickercomponent--primary)) - @spryker/drawer ([npm](https://www.npmjs.com/package/@spryker/drawer), [story](https://spy-storybook.web.app/?path=/story/drawerscomponent--primary)) - @spryker/dropdown ([npm](https://www.npmjs.com/package/@spryker/dropdown), [story](https://spy-storybook.web.app/?path=/story/dropdowncomponent--primary)) From e6ce2605af0adc5c1863fb8b5a2d93253f78e754 Mon Sep 17 00:00:00 2001 From: Andrii Tserkovnyi Date: Tue, 9 Jan 2024 18:54:27 +0200 Subject: [PATCH 04/15] Update datasource-dependable.md --- .../datasources/datasource-dependable.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md index 8bbb2ab25df..1b8e4c81ea2 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md @@ -17,15 +17,17 @@ This document explains the Datasource Dependable service in the Components Libra ## Overview -Datasource Dependable is an Angular Service that resolves datasources for a component based on the value of a specific element. +Datasource Dependable is an Angular service that resolves datasources for a component based on the value of a specific element. Check out an example usage of the Datasource Dependable. Service configuration: -- `type` — a datasource type. -- `id` — an ID of the depended element. -- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)). +| ATTRIBUTE | DESCRIPTION | +| - | - | +| type | A datasource type. | +| id | An ID of the dependent element | +| datasource | The next datasource that runs based on the depended element value, like [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | ```html @@ -48,7 +50,7 @@ Service configuration: ``` -The depended element (in our example it's a `SelectComponent`) must implement a `DatasourceDependableElement` abstract class (token) and return component value using `getValueChanges()` abstract method: +The dependent element, `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return component value using the `getValueChanges()` abstract method: ```ts @Component({ @@ -92,7 +94,7 @@ export class RootModule {} ## Interfaces -Below you can find interfaces for the Datasource Dependable: +Datasource dependable interfaces: ```ts import { DatasourceConfig } from '@spryker/datasource'; From ae122479fc611aacf5d9c80c446c27c68542d9d4 Mon Sep 17 00:00:00 2001 From: Andrii Tserkovnyi Date: Wed, 10 Jan 2024 10:34:34 +0200 Subject: [PATCH 05/15] Update datasource-trigger-change.md --- .../datasource-trigger-change.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md index f72397da730..39654dcd6ad 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md @@ -17,17 +17,19 @@ This document explains the Datasource Trigger Change service in the Components L ## Overview -Datasource Trigger Change is an Angular Service that extracts the value from the event trigger element and checks whether it meets certain criteria. If the value is valid, it emits an object containing the value. +Datasource Trigger Change is an Angular service that extracts the value from an event trigger element and checks whether it meets a certain criteria. If the value is valid, it emits an object containing the value. Check out an example usage of the Datasource Trigger Change. Service configuration: -- `type` — a datasource type. -- `event` — an event type triggered by element. -- `debounce` - delays the emission of values the next datasource (default is `300ms`). -- `minCharacters` - emits the trigger element value if the length is greater than or equal to the `minCharacters` property (default is `2`). -- `datasource` — the next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html)). +| ATTRIBUTE | DESCRIPTION | +| - | - | +|type | A datasource type. | +|event | An event type triggered by element. | +|debounce | Delays the emission of values the next datasource (default is `300ms`). | +|minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | +|datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | ```html Date: Wed, 10 Jan 2024 10:44:49 +0200 Subject: [PATCH 06/15] review --- .../datasource-trigger-change.md | 12 +++++------ .../datasource-trigger-input.md | 20 +++++++++---------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md index 39654dcd6ad..09f7f6a1f44 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md @@ -13,14 +13,12 @@ related: link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html --- -This document explains the Datasource Trigger Change service in the Components Library. +This document explains the Datasource Trigger Change service in the components library. ## Overview Datasource Trigger Change is an Angular service that extracts the value from an event trigger element and checks whether it meets a certain criteria. If the value is valid, it emits an object containing the value. -Check out an example usage of the Datasource Trigger Change. - Service configuration: | ATTRIBUTE | DESCRIPTION | @@ -31,6 +29,10 @@ Service configuration: |minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | |datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | + +Usage example: + + ```html ``` -The dependent element, `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return component value using the `getValueChanges()` abstract method: +The dependent element, `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return a component value using the `getValueChanges()` abstract method: ```ts @Component({ @@ -92,9 +89,9 @@ declare module '@spryker/datasource' { export class RootModule {} ``` -## Interfaces +## Datasource Dependable interfaces -Datasource dependable interfaces: +Datasource Dependable interfaces: ```ts import { DatasourceConfig } from '@spryker/datasource'; diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasources.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasources.md index b38a27db68f..f0c33abb4ae 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasources.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasources.md @@ -12,12 +12,8 @@ related: link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html --- -This document explains the Datasources service in the Components Library. - -## Overview - -Datasources are responsible for providing any data to the system based on a given configuration. -This lets backend systems control where the data is coming from without changing the front-end (ex. table data, select options). +Datasources are responsible for providing data to the system based on a given configuration. +This lets backend systems control where data is coming from without changing the frontend. For example, table data or select options. Datasources are used in other components like Table, Select, Autocomplete. @@ -31,19 +27,19 @@ Datasources are used in other components like Table, Select, Autocomplete. ``` -## Main Service +## Main service -The main module provides an opportunity to register any datasource by key via static method `withDatasources()`. It assigns the object of datasources to the `DatasourceTypesToken` under the hood. +The main module lets you register a datasource by key using the `withDatasources()` static method. It assigns the object of datasources to`DatasourceTypesToken` under the hood. -The main service injects all registered types from the `DatasourceTypesToken` and `DataTransformerService` (see [Data Transformers](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/data-transformers/data-transformers.html)). +The main service injects all registered types from `DatasourceTypesToken` and `DataTransformerService`. For more details, see [Data Transformers](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/data-transformers/data-transformers.html). -`resolve()` method finds specific service from the `DatasourceTypesToken` by `config.type` (from the argument) and returns observable with data by `Datasource.resolve()`. Data is also transformed by `DataTransformerService` if `config.transform` exists. +The `resolve()` method locates a specific service from `DatasourceTypesToken` based on the argument from `config.type` and returns an observable with data by `Datasource.resolve()`. If `config.transform` exists, data is also transformed by `DataTransformerService`. ## Datasource -Datasource is basically an Angular Service that encapsulates the algorithm of how the data is loaded into the Component. +Datasource is an Angular service that encapsulates the algorithm of how the data is loaded into a component. -Datasource must implement a specific interface (Datasource) and then be registered to the Root Module via `DatasourceModule.withDatasources()`. +Datasource must implement a specific Datasource interface and be registered to the Root Module via `DatasourceModule.withDatasources()`. ```ts // Module augmentation @@ -88,7 +84,7 @@ The context within which Datasources operate is defined by the local injector wh ## Interfaces -Below you can find interfaces for the Datasource configuration and Datasource type: +Interfaces for the Datasource configuration and Datasource type: ```ts export interface DatasourceConfig { @@ -108,11 +104,12 @@ export interface Datasource { } ``` -## Datasource types +## Available Datasource -There are a few common Datasources that are available in UI library as separate packages: +The following common Datasources are available in the UI components library as separate packages: -- [HTTP](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html)—allows fetching data from URL via HTTP configured in the configuration of the Datasource. - HTTP Datasource supports caching strategy (see [Cache](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html)) that may be configured via config and used before the request is made when applicable. -- [Inline](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline.html)—allows passing data along with the configuration of the Datasource. -- [Inline.table](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline-table.html)—allows passing transformed for the table format data along with the configuration of the Datasource +| DATASOURCE | DESCRIPTION | +| - | - | +| [HTTP](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html) | Allows fetching data from a URL configured in the configuration of the Datasource via HTTP. HTTP Datasource supports the [caching strategy](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html) that can be configured via config and used before the request is made. | +| [Inline](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline.html)—allows passing data along with the configuration of the Datasource. | +| [Inline.table](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline-table.html)—allows passing transformed for the table format data along with the configuration of the Datasource. | diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md index 8ea4e8c1822..8a4461d29e5 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md @@ -1,6 +1,6 @@ --- -title: UI Components Library -description: This articles provides details about UI components library. +title: UI components library +description: UI components library contains Angular components. template: concept-topic-template redirect_from: - /docs/marketplace/dev/front-end/202212.0/ui-components-library/ @@ -17,11 +17,7 @@ related: link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/persistence/persistence.html --- -This document provides details about the UI components library. - -## Introduction - -Separate from Spryker Core, there is a set of UI Angular Components that are distributed independently via npm Registry. Each package can be installed via npm or yarn commands: +Separate from Spryker Core, there is a set of UI Angular components that are distributed independently via npm. Each package can be installed via npm or yarn commands: ```bash npm install @spryker/package_name @@ -31,12 +27,13 @@ npm install @spryker/package_name yarn add @spryker/package_name ``` -Under the hood, the UI Angular Components are built using Angular 9, rxjs and Ant Design. These components are used within the Spryker Core modules of the Merchant Portal. You can use them inside the angular ecosystem as default angular components, or you can transform them into web components and reuse them inside the Spryker `twig` modules (see [Web Components](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/web-components.html)). -Many UI Components have extension points, and some of them must be configured on a project-level (e.g `Table`, `Datasource`). +Under the hood, the components are built using Angular 9, rxjs and Ant Design. These components are used in the core modules of the Merchant Portal. You can use them in the Angular ecosystem as default Angular components, or you can transform them into web components and reuse them in Spryker Twig modules. For more details about web components in Twig modules, see [Web Components](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/web-components.html). + +Many UI Components have extension points, and some of them must be configured on a project-level. For example, `Table` or `Datasource`. -## UI Components List +## Available UI components -The following is a list of available UI components: +The following UI components are available: - @spryker/actions ([npm](https://www.npmjs.com/package/@spryker/actions)) - @spryker/actions.close-drawer ([npm](https://www.npmjs.com/package/@spryker/actions.close-drawer), [story](https://spy-storybook.web.app/?path=/story/closedraweractionhandlerservice--primary)) From 52757d8db998e960d54722907a12421db5648ed7 Mon Sep 17 00:00:00 2001 From: Andrii Tserkovnyi Date: Thu, 11 Jan 2024 10:45:25 +0200 Subject: [PATCH 11/15] Update datasource-trigger.md --- .../datasources/datasource-trigger/datasource-trigger.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md index eccf8532ad6..db06e9e019a 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md @@ -58,7 +58,10 @@ export class SelectComponent implements DatasourceTriggerElement { The main module lets you register any `datasource.trigger` by key using the `withEvents()` static method. It assigns the object of datasources to `DatasourceEventTypesToken` under the hood. -The `resolve()` method gets the trigger element using the `DatasourceTriggerElement` abstract class (token), finds a specific service from `DatasourceEventTypesToken` by `config.event` (from the argument) and returns observable with data (based on the data returned from trigger element) by `Datasource.resolve()`. +The `resolve()` method does the following: +1. Gets the trigger element using the `DatasourceTriggerElement` abstract class (token). +2. Locates a specific service from `DatasourceEventTypesToken` by an argument from `config.event`. +3. Based on the data returned from a trigger element, returns an observable with data by `Datasource.resolve()`. ## Datasource From 2eb38953daa3ee772d2cda82eae8aa3f4e86d65b Mon Sep 17 00:00:00 2001 From: Andrii Tserkovnyi Date: Thu, 11 Jan 2024 15:39:08 +0200 Subject: [PATCH 12/15] final --- .../datasources/datasource-dependable.md | 6 +++-- .../datasources/datasource-http.md | 20 +++++++++------- .../datasources/datasource-inline-table.md | 18 +++++++------- .../datasources/datasource-inline.md | 17 ++++++------- .../datasource-trigger-change.md | 12 ++++++---- .../datasource-trigger-input.md | 16 ++++++------- .../datasource-trigger/datasource-trigger.md | 24 +++++++++---------- .../datasources/datasources.md | 5 ++-- 8 files changed, 62 insertions(+), 56 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md index 604b3c634f9..c5fc3739ca6 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md @@ -14,7 +14,9 @@ related: --- -Datasource Dependable is an Angular service that resolves datasources for a component based on the value of a specific element. +Datasource Dependable is an Angular service in the components library that resolves datasources for a component based on the value of a specific element. + +## Usage Service configuration: @@ -47,7 +49,7 @@ Usage example: ``` -The dependent element, `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return a component value using the `getValueChanges()` abstract method: +The dependent element, being `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return a component value using the `getValueChanges()` abstract method: ```ts @Component({ diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md index 30eb76cfa87..978f6320626 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md @@ -15,20 +15,22 @@ related: link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html --- -This document explains the Datasource Http service in the Components Library. +Datasource Http is an Angular service in the components library that fetches data from URLs via HTTP as configured in the Datasource configuration. +Datasource Http supports the [caching strategy](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html) that can be configured via config and used before the request is made. -## Overview - -Datasource Http is an Angular Service that fetches data from URLs via HTTP as configured in the Datasource configuration. -Datasource Http supports caching strategy (see [Cache](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html)) that can be configured via config and used before the request is made, when applicable. +## Usage Check out an example usage of the Datasource Http. Service configuration: -- `type`—a datasource type. -- `url`—a datasource request URL. -- `method`—a datasource request method (`GET` by default). +| ATTRIBUTE | DESCRIPTION | +| - | - | +|`type` | A datasource type. | +|`url` | A datasource request URL. | +|`method` | A datasource request method; `GET` by default. | + +Usage example: ```html + + + + + + +``` + +The dependent element, being `SelectComponent` in the example, must implement a `DatasourceDependableElement` abstract class (token) and return a component value using the `getValueChanges()` abstract method: + +```ts +@Component({ + ..., + providers: [ + { + provide: DatasourceDependableElement, + useExisting: SelectComponent, + }, + ], +}) +export class SelectComponent implements DatasourceDependableElement { + ... + getValueChanges(): Observable { + // This method must return an Observable of the component value. + } + ... +} +``` + +## Service registration + +Register the service: + +```ts +declare module '@spryker/datasource' { + interface DatasourceRegistry { + 'dependable-element': DatasourceDependableService; + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + 'dependable-element': DatasourceDependableService, + }), + ], +}) +export class RootModule {} +``` + +## Datasource Dependable interfaces + +Datasource Dependable interfaces: + +```ts +import { DatasourceConfig } from '@spryker/datasource'; +import { Observable } from 'rxjs'; + +export interface DatasourceDependableConfig extends DatasourceConfig { + id: string; + datasource: DatasourceConfig; +} + +export interface DatasourceDependableElementsConfig { + [id: string]: DatasourceDependableElement; +} + +export abstract class DatasourceDependableElement { + abstract getValueChanges(): Observable; +} +``` diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-http.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-http.md index 0cd8a923f9e..8f299f76f4e 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-http.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-http.md @@ -13,20 +13,23 @@ related: link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html --- -This document explains the Datasource Http service in the Components Library. -## Overview +Datasource Http is an Angular service in the components library that fetches data from URLs via HTTP as configured in the Datasource configuration. +Datasource Http supports the [caching strategy](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html) that can be configured via config and used before the request is made. -Datasource Http is an Angular Service that fetches data from URLs via HTTP as configured in the Datasource configuration. -Datasource Http supports caching strategy (see [Cache](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html)) that can be configured via config and used before the request is made, when applicable. +## Usage Check out an example usage of the Datasource Http. Service configuration: -- `type`—a datasource type. -- `url`—a datasource request URL. -- `method`—a datasource request method (`GET` by default). +| ATTRIBUTE | DESCRIPTION | +| - | - | +|`type` | A datasource type. | +|`url` | A datasource request URL. | +|`method` | A datasource request method; `GET` by default. | + +Usage example: ```html + +``` + +## Service registration + +Register the service + +```ts +declare module '@spryker/datasource' { + interface DatasourceRegistry { + trigger: DatasourceTriggerService; + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + trigger: DatasourceTriggerService, + }), + DatasourceTriggerModule.withEvents({ + change: ChangeDatasourceTriggerService, + }), + ], +}) +export class RootModule {} +``` + +## Interfaces + +Datasource Trigger Change interfaces: + +```ts +import { DatasourceTriggerConfig } from '@spryker/datasource.trigger'; + +export interface ChangeDatasourceTriggerConfig extends DatasourceTriggerConfig { + minCharacters?: number; +} + +export type ChangeDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; +``` diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md new file mode 100644 index 00000000000..99f218f1dcc --- /dev/null +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md @@ -0,0 +1,84 @@ +--- +title: Datasource Trigger Input +description: Details about the Datasource Trigger Input service in the components library. +template: concept-topic-template +related: + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Http + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html + - title: Datasource Inline Table + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html + - title: Datasource Inline + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html +--- + +Datasource Trigger Input is an Angular service in the components library that extracts the value from an event trigger element and checks if it meets a certain criteria. If the value is valid, it emits an object containing the value. + +## Usage + +Service configuration: + +| ATTRIBUTE | DESCRIPTION | +| - | - | +| type | A datasource type. | +| event | An event type triggered by element. | +|debounce | Delays the emission of values of the next datasource; by default, delays by `300ms`. | +|minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | +| datasource | The next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | + +Usage example: + +```html + + +``` + +## Service registration + +Register the service: + +```ts +declare module '@spryker/datasource' { + interface DatasourceRegistry { + trigger: DatasourceTriggerService; + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + trigger: DatasourceTriggerService, + }), + DatasourceTriggerModule.withEvents({ + input: InputDatasourceTriggerService, + }), + ], +}) +export class RootModule {} +``` + +## Interfaces + +Interfaces for Datasource Trigger Input: + +```ts +import { DatasourceTriggerConfig } from '@spryker/datasource.trigger'; + +export interface InputDatasourceTriggerConfig extends DatasourceTriggerConfig { + minCharacters?: number; +} + +export type InputDatasourceTriggerHTMLElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement; +``` diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md new file mode 100644 index 00000000000..59532b5180d --- /dev/null +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.md @@ -0,0 +1,141 @@ +--- +title: Datasource Trigger +description: Details about the Datasource Trigger service in the components library. +template: concept-topic-template +related: + - title: Datasource Dependable + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html + - title: Datasource Http + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html + - title: Datasource Inline Table + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html + - title: Datasource Inline + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html +--- + +Datasource Trigger is an Angular service in the components library that provides a flexible way to fetch data based on user-triggered events. + +```html + + +``` + +The trigger element, being `SelectComponent` in the example, must implement a `DatasourceTriggerElement` abstract class (token) and return a component instance using the `getTriggerElement()` abstract method: + +```ts +@Component({ + ..., + providers: [ + { + provide: DatasourceTriggerElement, + useExisting: SelectComponent, + }, + ], +}) +export class SelectComponent implements DatasourceTriggerElement { + ... + getTriggerElement(): Observable { + // This method must return an Observable of the component instance. + } + ... +} +``` + +## Main service + +The main module lets you register any `datasource.trigger` by key using the `withEvents()` static method. It assigns the object of datasources to `DatasourceEventTypesToken` under the hood. + +The `resolve()` method does the following: +1. Gets the trigger element using the `DatasourceTriggerElement` abstract class (token). +2. Locates a specific service from `DatasourceEventTypesToken` by an argument from `config.event`. +3. Based on the data returned from a trigger element, returns an observable with data by `Datasource.resolve()`. + +## Datasource + +Datasource trigger must implement a specific interface (DatasourceTriggerEvent) and be registered to the root module using `DatasourceModule.withEvents()`. + +```ts +// Module augmentation +import { DatasourceConfig } from '@spryker/datasource'; + +declare module '@spryker/datasource' { + interface DatasourceRegistry { + trigger: DatasourceTriggerService; + } +} + +export interface CustomDatasourceTriggerConfig extends DatasourceTriggerConfig { + ... +} + +// Service implementation +@Injectable({ + providedIn: 'root', +}) +export class CustomDatasourceTriggerService implements DatasourceTriggerEvent { + subscribeToEvent( + config: CustomDatasourceTriggerConfig, + triggerElement: HTMLElement, + ): Observable> { + ... + } +} + +@NgModule({ + imports: [ + DatasourceModule.withDatasources({ + trigger: DatasourceTriggerService, + }), + DatasourceTriggerModule.withEvents({ + custom: CustomDatasourceTriggerService, + }), + ], +}) +export class RootModule {} +``` + +The context within which Datasources operate is defined by the local injector where it’s being used. + +## Interfaces + +Interfaces and types for the Datasource Trigger configuration: + +```ts +export interface DatasourceTriggerEventRegistry {} + +export type DatasourceTriggerEventRegistryType = RegistryType; + +export type DatasourceTriggerEventDeclaration = RegistryDeclaration; + +export interface DatasourceTriggerConfig extends DatasourceConfig { + event: DatasourceTriggerEventRegistryType | string; + datasource: DatasourceConfig; + debounce?: number; +} + +export interface DatasourceTriggerEvent { + subscribeToEvent(config, triggerElement): Observable; +} + +export abstract class DatasourceTriggerElement { + abstract getTriggerElement(): Observable; +} +``` + +## Available Datasources + +The following common Datasources are available in the UI library as separate packages: + +| DATASOURCE | DESCRIPTION | +|-|-| +| [Change](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.html) | Allows for passing data along with the configuration of the Datasource using the `change` event. | +| [Input](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.html) | Allows for passing data along with the configuration of the Datasource using the `input` event. | diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasources.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasources.md index b38a27db68f..ee0c1b2e7ac 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasources.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasources.md @@ -12,12 +12,7 @@ related: link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline.html --- -This document explains the Datasources service in the Components Library. - -## Overview - -Datasources are responsible for providing any data to the system based on a given configuration. -This lets backend systems control where the data is coming from without changing the front-end (ex. table data, select options). +Datasources are responsible for providing data to the system based on a given configuration. This lets backend systems control where data is coming from without changing the frontend. For example, table data or select options. Datasources are used in other components like Table, Select, Autocomplete. @@ -31,19 +26,19 @@ Datasources are used in other components like Table, Select, Autocomplete. ``` -## Main Service +## Main service -The main module provides an opportunity to register any datasource by key via static method `withDatasources()`. It assigns the object of datasources to the `DatasourceTypesToken` under the hood. +The main module lets you register a datasource by key using the `withDatasources()` static method. It assigns the object of datasources to`DatasourceTypesToken` under the hood. -The main service injects all registered types from the `DatasourceTypesToken` and `DataTransformerService` (see [Data Transformers](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/data-transformers/data-transformers.html)). +The main service injects all registered types from `DatasourceTypesToken` and `DataTransformerService`. For more details, see [Data Transformers](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/data-transformers/data-transformers.html). -`resolve()` method finds specific service from the `DatasourceTypesToken` by `config.type` (from the argument) and returns observable with data by `Datasource.resolve()`. Data is also transformed by `DataTransformerService` if `config.transform` exists. +The `resolve()` method locates a specific service from `DatasourceTypesToken` based on the argument from `config.type` and returns an observable with data by `Datasource.resolve()`. If `config.transform` exists, data is also transformed by `DataTransformerService`. ## Datasource -Datasource is basically an Angular Service that encapsulates the algorithm of how the data is loaded into the Component. +Datasource is an Angular service that encapsulates the algorithm of how the data is loaded into a component. -Datasource must implement a specific interface (Datasource) and then be registered to the Root Module via `DatasourceModule.withDatasources()`. +Datasource must implement a specific Datasource interface and be registered to the Root Module via `DatasourceModule.withDatasources()`. ```ts // Module augmentation @@ -88,7 +83,7 @@ The context within which Datasources operate is defined by the local injector wh ## Interfaces -Below you can find interfaces for the Datasource configuration and Datasource type: +Interfaces for the Datasource configuration and Datasource type: ```ts export interface DatasourceConfig { @@ -108,11 +103,12 @@ export interface Datasource { } ``` -## Datasource types +## Available Datasources -There are a few common Datasources that are available in UI library as separate packages: +The following common Datasources are available in the UI components library as separate packages: -- [HTTP](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html)—allows fetching data from URL via HTTP configured in the configuration of the Datasource. - HTTP Datasource supports caching strategy (see [Cache](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html)) that may be configured via config and used before the request is made when applicable. -- [Inline](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline.html)—allows passing data along with the configuration of the Datasource. -- [Inline.table](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline-table.html)—allows passing transformed for the table format data along with the configuration of the Datasource +| DATASOURCE | DESCRIPTION | +| - | - | +| [HTTP](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html) | Allows fetching data from a URL configured in the configuration of the Datasource via HTTP. HTTP Datasource supports the [caching strategy](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/cache/ui-components-library-cache-service.html) that can be configured via config and used before the request is made. | +| [Inline](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline.html)—allows passing data along with the configuration of the Datasource. | +| [Inline.table](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-inline-table.html)—allows passing transformed for the table format data along with the configuration of the Datasource. | diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md index 8a4461d29e5..7fae9cfb5f0 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/ui-components-library.md @@ -33,7 +33,7 @@ Many UI Components have extension points, and some of them must be configured on ## Available UI components -The following UI components are available: +The following is a list of available UI components: - @spryker/actions ([npm](https://www.npmjs.com/package/@spryker/actions)) - @spryker/actions.close-drawer ([npm](https://www.npmjs.com/package/@spryker/actions.close-drawer), [story](https://spy-storybook.web.app/?path=/story/closedraweractionhandlerservice--primary)) @@ -71,9 +71,13 @@ The following UI components are available: - @spryker/data-transformer.object-map ([npm](https://www.npmjs.com/package/@spryker/data-transformer.object-map)) - @spryker/data-transformer.pluck ([npm](https://www.npmjs.com/package/@spryker/data-transformer.pluck)) - @spryker/datasource ([npm](https://www.npmjs.com/package/@spryker/datasource)) -- @spryker/datasource.http ([npm](https://www.npmjs.com/package/@spryker/datasource.http)) -- @spryker/datasource.inline ([npm](https://www.npmjs.com/package/@spryker/datasource.inline), [story](https://spy-storybook.web.app/?path=/story/datasourceinline--primary)) -- @spryker/datasource.inline.table ([npm](https://www.npmjs.com/package/@spryker/datasource.inline.table), [story](https://spy-storybook.web.app/?path=/story/tabledatasourceinlineservice--with-table)) + - @spryker/datasource.dependable ([npm](https://www.npmjs.com/package/@spryker/datasource.dependable), [story](https://spy-storybook.web.app/?path=/story/datasourcedependableservice--primary)) + - @spryker/datasource.http ([npm](https://www.npmjs.com/package/@spryker/datasource.http)) + - @spryker/datasource.inline ([npm](https://www.npmjs.com/package/@spryker/datasource.inline), [story](https://spy-storybook.web.app/?path=/story/datasourceinline--primary)) + - @spryker/datasource.inline.table ([npm](https://www.npmjs.com/package/@spryker/datasource.inline.table), [story](https://spy-storybook.web.app/?path=/story/tabledatasourceinlineservice--with-table)) + - @spryker/datasource.trigger ([npm](https://www.npmjs.com/package/@spryker/datasource.trigger)) + - @spryker/datasource.trigger.change ([npm](https://www.npmjs.com/package/@spryker/datasource.trigger.change), [story](https://spy-storybook.web.app/?path=/story/changedatasourcetriggerservice--primary)) + - @spryker/datasource.trigger.input ([npm](https://www.npmjs.com/package/@spryker/datasource.trigger.input), [story](https://spy-storybook.web.app/?path=/story/inputdatasourcetriggerservice--primary)) - @spryker/date-picker ([npm](https://www.npmjs.com/package/@spryker/date-picker), [story](https://spy-storybook.web.app/?path=/story/datepickercomponent--primary)) - @spryker/drawer ([npm](https://www.npmjs.com/package/@spryker/drawer), [story](https://spy-storybook.web.app/?path=/story/drawerscomponent--primary)) - @spryker/dropdown ([npm](https://www.npmjs.com/package/@spryker/dropdown), [story](https://spy-storybook.web.app/?path=/story/dropdowncomponent--primary)) From a5ea1d39e7ea6d7d1a40533d571d1c66cc827644 Mon Sep 17 00:00:00 2001 From: Andrii Tserkovnyi Date: Mon, 15 Jan 2024 10:59:19 +0200 Subject: [PATCH 14/15] Update scos_dev_sidebar.yml --- _data/sidebars/scos_dev_sidebar.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_data/sidebars/scos_dev_sidebar.yml b/_data/sidebars/scos_dev_sidebar.yml index e7291277ace..4b35df35a80 100644 --- a/_data/sidebars/scos_dev_sidebar.yml +++ b/_data/sidebars/scos_dev_sidebar.yml @@ -1865,17 +1865,17 @@ entries: - title: "Trigger" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html include_versions: - - "202212.0" - - "202311.0" + - "202307.0" + - "202311.0" nested: - title: "Change" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.html - title: "Input" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.html - - title: "Depenable" + - title: "Dependable" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-dependable.html include_versions: - - "202212.0" + - "202307.0" - "202311.0" - title: "HTTP" url: /docs/scos/dev/front-end-development/marketplace/ui-components-library/datasources/datasource-http.html From 9cd3a48d97759f44746c9ea30448d85639d3da9a Mon Sep 17 00:00:00 2001 From: Andrii Tserkovnyi Date: Tue, 16 Jan 2024 10:52:30 +0200 Subject: [PATCH 15/15] links --- .../ui-components-library/datasources/datasource-dependable.md | 2 +- .../ui-components-library/datasources/datasource-http.md | 2 +- .../datasources/datasource-inline-table.md | 2 +- .../ui-components-library/datasources/datasource-inline.md | 2 +- .../datasources/datasource-trigger/datasource-trigger-change.md | 2 +- .../datasources/datasource-trigger/datasource-trigger-input.md | 2 +- .../ui-components-library/datasources/datasource-dependable.md | 2 +- .../datasources/datasource-trigger/datasource-trigger-change.md | 2 +- .../datasources/datasource-trigger/datasource-trigger-input.md | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md index c5fc3739ca6..237d6388963 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-dependable.md @@ -4,7 +4,7 @@ description: Details about the Datasource Dependable service in the components l template: concept-topic-template related: - title: Datasource Trigger - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html - title: Datasource Http link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html - title: Datasource Inline Table diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md index 978f6320626..819d4134b70 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-http.md @@ -8,7 +8,7 @@ related: - title: Datasource Dependable link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html - title: Datasource Trigger - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html - title: Datasource Inline Table link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-inline-table.html - title: Datasource Inline diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md index 4e694ad65c8..43730a1c128 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline-table.md @@ -8,7 +8,7 @@ related: - title: Datasource Dependable link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html - title: Datasource Trigger - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html - title: Datasource Http link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html - title: Datasource Inline diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md index c4cd43fdf0e..0c014405ac0 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-inline.md @@ -8,7 +8,7 @@ related: - title: Datasource Dependable link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-dependable.html - title: Datasource Trigger - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html - title: Datasource Http link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html - title: Datasource Inline Table diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md index cb74982e54f..9b6e5ccf259 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md @@ -25,7 +25,7 @@ Service configuration: |event | An event type triggered by element. | |debounce | Delays the emission of values of the next datasource; by default, delays by `300ms`. | |minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | -|datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | +|datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | Usage example: diff --git a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md index 99f218f1dcc..6f753a70019 100644 --- a/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md +++ b/docs/scos/dev/front-end-development/202307.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md @@ -25,7 +25,7 @@ Service configuration: | event | An event type triggered by element. | |debounce | Delays the emission of values of the next datasource; by default, delays by `300ms`. | |minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | -| datasource | The next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | +| datasource | The next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | Usage example: diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-dependable.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-dependable.md index c5fc3739ca6..237d6388963 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-dependable.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-dependable.md @@ -4,7 +4,7 @@ description: Details about the Datasource Dependable service in the components l template: concept-topic-template related: - title: Datasource Trigger - link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger.html + link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger.html - title: Datasource Http link: docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html - title: Datasource Inline Table diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md index cb74982e54f..9b6e5ccf259 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-change.md @@ -25,7 +25,7 @@ Service configuration: |event | An event type triggered by element. | |debounce | Delays the emission of values of the next datasource; by default, delays by `300ms`. | |minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | -|datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | +|datasource | the next datasource that runs based on the dependent element value, like [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | Usage example: diff --git a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md index 99f218f1dcc..6f753a70019 100644 --- a/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md +++ b/docs/scos/dev/front-end-development/202311.0/marketplace/ui-components-library/datasources/datasource-trigger/datasource-trigger-input.md @@ -25,7 +25,7 @@ Service configuration: | event | An event type triggered by element. | |debounce | Delays the emission of values of the next datasource; by default, delays by `300ms`. | |minCharacters | Emits the trigger element value if the length is greater than or equal to the `minCharacters` property. The default value is `2`. | -| datasource | The next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/page.version/marketplace/ui-components-library/datasources/datasource-http.html). | +| datasource | The next datasource that runs based on the depended element value (e.g. [http](/docs/scos/dev/front-end-development/{{page.version}}/marketplace/ui-components-library/datasources/datasource-http.html). | Usage example: