Merge pull request #19214 from abpframework/issue-19177

Update documentation for newly created properties in extensions

docs/en/UI/Angular/Data-Table-Column-Extensions.md

@@ -220,6 +220,7 @@ type EntityPropOptions<R = any> = {
   permission?: string;
   visible?: PropPredicate<R>;
   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<IdentityUserDto> = {
     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);

docs/en/UI/Angular/Dynamic-Form-Extensions.md

@@ -163,6 +163,8 @@ type FormPropOptions<R = any> = {
   options?: PropCallback<R, Observable<ABP.Option<any>[]>>;
   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 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.
 
@@ -235,7 +239,9 @@ const options: FormPropOptions<IdentityUserDto> = {
   },
   autocomplete: 'off',
   isExtra: true,
-  template: undefined | Type<any> // Custom angular component
+  template: undefined | Type<any>, // Custom angular component
+  tooltip: { text: 'Default::MyPropName_Tooltip', placement: 'top' },
+  formText: 'Default::MyPropName_Description',
 };
 
 const prop = new FormProp(options);

docs/en/UI/Angular/Entity-Action-Extensions.md

@@ -311,6 +311,8 @@ type EntityActionOptions<R = any> = {
   visible?: ActionPredicate<R>,
   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\<R = any\>
@@ -342,6 +346,8 @@ const options: EntityActionOptions<IdentityUserDto> = {
   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);