From c2119f758426adf4f82a5424ea4c53dcc19323e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Tue, 5 Mar 2024 14:50:36 +0300 Subject: [PATCH 1/2] update documentation for newly created properties in extensions --- docs/en/UI/Angular/Data-Table-Column-Extensions.md | 3 +++ docs/en/UI/Angular/Dynamic-Form-Extensions.md | 8 +++++++- docs/en/UI/Angular/Entity-Action-Extensions.md | 8 +++++++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Angular/Data-Table-Column-Extensions.md b/docs/en/UI/Angular/Data-Table-Column-Extensions.md index babb329feb..ca4320c203 100644 --- a/docs/en/UI/Angular/Data-Table-Column-Extensions.md +++ b/docs/en/UI/Angular/Data-Table-Column-Extensions.md @@ -220,6 +220,7 @@ type EntityPropOptions = { permission?: string; visible?: PropPredicate; columnVisible?: ColumnPredicate; + tooltip?: FormPropTooltip; }; ``` @@ -234,6 +235,7 @@ As you see, passing `type` and `name` is enough to create an entity prop. Here i - **permission** is the permission context which will be used to decide if a column for this entity prop should be displayed to the user or not. (_default:_ `undefined`) - **visible** is a predicate that will be used to decide if the cell content of this entity prop should be displayed on the table or not based on the data record. (_default:_ `() => true`) - **columnVisible** is a predicate that will be used to decide if the column of this entity prop should be displayed on the table or not. (_default:_ `() => true`) +- **tooltip** . is a tooltip for table column (_default:_ `undefined`) > Important Note: Do not use record in visibility predicates. First of all, the table header checks it too and the record will be `undefined`. Second, if some cells are displayed and others are not, the table will be broken. Use the `valueResolver` and render an empty cell when you need to hide a specific cell. > @@ -272,6 +274,7 @@ const options: EntityPropOptions = { const sessionStateService = getInjected(SessionStateService); return !sessionStateService.getTenant()?.isAvailable; // hide this column when the tenant is available. }, + tooltip: { text: 'AbpIdentity::EmailAddress_Tooltip', placement: 'top' } }; const prop = new EntityProp(options); diff --git a/docs/en/UI/Angular/Dynamic-Form-Extensions.md b/docs/en/UI/Angular/Dynamic-Form-Extensions.md index 52a1f6cb86..bef36049c1 100644 --- a/docs/en/UI/Angular/Dynamic-Form-Extensions.md +++ b/docs/en/UI/Angular/Dynamic-Form-Extensions.md @@ -163,6 +163,8 @@ type FormPropOptions = { options?: PropCallback[]>>; autocomplete?: string; isExtra? boolean; + formText?: string; + tooltip?: FormPropTooltip; }; ``` @@ -182,6 +184,8 @@ As you see, passing `type` and `name` is enough to create a form prop. Here is w - **options** is a callback that is called when a dropdown is needed. It must return an observable. (_default:_ `undefined`) - **autocomplete** will be set as the `autocomplete` attribute of the input for the field. Please check [possible values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values). (_default:_ `'off'`) - **isExtra** indicates this prop is an object extension. When `true`, the value of the field will be mapped from and to `extraProperties` of the entity. (_default:_ `undefined`) +- - **formText** is the definition placed under the field . (_default:_ `undefined`) +- - **tooltip** is the tooltip for the field placed near of the label (_default:_ `undefined`) > Important Note: Do not use `record` property of `PropData` in create form predicates and callbacks, because it will be `undefined`. You can use it on edit form contributors though. @@ -235,7 +239,9 @@ const options: FormPropOptions = { }, autocomplete: 'off', isExtra: true, - template: undefined | Type // Custom angular component + template: undefined | Type, + tooltip: { text: 'Default::MyPropName_Tooltip', placement: 'top' }, + formText: 'Default::MyPropName_Description', }; const prop = new FormProp(options); diff --git a/docs/en/UI/Angular/Entity-Action-Extensions.md b/docs/en/UI/Angular/Entity-Action-Extensions.md index b715479f12..ead1a39b72 100644 --- a/docs/en/UI/Angular/Entity-Action-Extensions.md +++ b/docs/en/UI/Angular/Entity-Action-Extensions.md @@ -311,6 +311,8 @@ type EntityActionOptions = { visible?: ActionPredicate, btnClass?: string, btnStyle?: string, + showOnlyIcon?: boolean, + tooltip?: FormPropTooltip; }; ``` @@ -323,7 +325,9 @@ As you see, passing `action` and `text` is enough to create an entity action. He - **visible** is a predicate that will be used to decide if the current record should have this grid action or not. (_default:_ `() => true`) - **btnClass** is the classes that will be applied to the button. (_default:_ `'btn btn-primary text-center'`) - **btnStyle** is the styles that will be applied to the button. (_default:_ `''`) - +- **showOnlyIcon** is shows only the icon itself. (_default:_ `false`) +- **tooltip** is only available in single entity action button. Adds an tooltip for button. (_default:_ undefined) + You may find a full example below. ### EntityAction\ @@ -342,6 +346,8 @@ const options: EntityActionOptions = { visible: data => data.record.isLockedOut, btnClass:'btn btn-warning text-center', btnStyle: '', //Adds inline style + showOnlyIcon: true, + tooltip: { text: 'AbpIdentity::Edit', placement: 'top' } }; const action = new EntityAction(options); From 4e3310708e59593eb8659121f9037ca2e6aa6904 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Tue, 5 Mar 2024 14:55:35 +0300 Subject: [PATCH 2/2] Update formText and tooltip properties in Dynamic-Form-Extensions.md --- docs/en/UI/Angular/Dynamic-Form-Extensions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/en/UI/Angular/Dynamic-Form-Extensions.md b/docs/en/UI/Angular/Dynamic-Form-Extensions.md index bef36049c1..2fb73a6fac 100644 --- a/docs/en/UI/Angular/Dynamic-Form-Extensions.md +++ b/docs/en/UI/Angular/Dynamic-Form-Extensions.md @@ -184,8 +184,8 @@ As you see, passing `type` and `name` is enough to create a form prop. Here is w - **options** is a callback that is called when a dropdown is needed. It must return an observable. (_default:_ `undefined`) - **autocomplete** will be set as the `autocomplete` attribute of the input for the field. Please check [possible values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values). (_default:_ `'off'`) - **isExtra** indicates this prop is an object extension. When `true`, the value of the field will be mapped from and to `extraProperties` of the entity. (_default:_ `undefined`) -- - **formText** is the definition placed under the field . (_default:_ `undefined`) -- - **tooltip** is the tooltip for the field placed near of the label (_default:_ `undefined`) +- **formText** is the definition of the field. Placed under the field. (_default:_ `undefined`) +- **tooltip** is the tooltip for the field placed near of the label (_default:_ `undefined`) > Important Note: Do not use `record` property of `PropData` in create form predicates and callbacks, because it will be `undefined`. You can use it on edit form contributors though. @@ -239,7 +239,7 @@ const options: FormPropOptions = { }, autocomplete: 'off', isExtra: true, - template: undefined | Type, + template: undefined | Type, // Custom angular component tooltip: { text: 'Default::MyPropName_Tooltip', placement: 'top' }, formText: 'Default::MyPropName_Description', };