# j-DynamicValue

> Ce composant est un composant très spécial. Il peut conserver une valeur par exemple Number et en même temps il peut restituer un autre texte lisible. Ce composant est optimisé pour une utilisation dynamique, il doit donc être l

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: 32f4819bca74817256a457acbe4399da9a769340ce8d6e14b31dc164d4a6e915
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Ce composant est un composant très spécial. Il peut conserver une valeur par exemple `Number` et en même temps rendre un autre `text` lisible. Ce composant est optimisé pour une utilisation dynamique, il doit donc être lié à un autre composant ou pièce.


- Icône `icon {String}` pour l'étiquette, par ex. maison, rouage, etc.
- Étiquette `label {String}` (la valeur par défaut est le contenu HTML)
- Icône `icon2 {String}` dans la case de droite, par ex. maison, rouage, etc. (par défaut : `angle-down`)
- `placeholder {String}` ajoute un texte d'espace réservé
- `disabled {Boolean}` désactive ce composant
- Lien `find {String}` __important__ vers `function(el, next(value))` pour lier une nouvelle valeur
- `read {String}` un lien vers `function(value, next(response))` pour lier un `text` lisible
- `url {String}` tente de lier une valeur via `AJAX()`, l'argument `{0}` dans l'URL est remplacé par la valeur
- Modèle `html {String}` Tangular pour le rendu d'une valeur (par défaut : `{{ name }}`)
- `remap {String}` une fonction de remappage (par défaut : `null`), exemple : `value.length ? value[0] : null`
- `required {Boolean}` active "obligatoire" (par défaut : `false`)
- `bind {String}` un chemin vers la méthode ou la variable où sera liée la valeur chargée (facultatif)
- `dirsource {String}` un lien vers la méthode `function(search, next(items_arr))` ou __NEW__ : peut contenir l'URL de recherche sous la forme `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` peut contenir un chemin vers function(val, next(new_val)) ou peut être booléen. Cette option peut permettre l'ajout d'une valeur personnalisée (valeur non définie dans la source de données)
- `dirrender {String}` un chemin vers `function(item, text)` (doit renvoyer du HTML pour j-Directory), cette fonction peut affecter la liste des éléments dans j-Directory
- `dirminwidth {Number}` une largeur minimale pour j-Directory, (par défaut : `200`)
- `dirmaxwidth {Number}` une largeur maximale pour j-Directory
- `dirplaceholder {String}` un espace réservé pour j-Directory
- `dirempty {String}` ajoute un champ vide pour j-Directory
- `dirkey {String}` un nom de clé pour la lecture du texte dans le répertoire (par défaut : `name`)
- `dirvalue {String}` un nom de clé pour la lecture de la valeur dans le répertoire (par défaut : `id`)
- `onresponse {String}` un chemin vers la propriété ou `function(response)`, exécuté si la réponse est traitée (par défaut : `undefined`)
- __NEW__ `tapi {Boolean}` permet d'appeler `TAPI()` au lieu de `AJAX()` (par défaut : false)

### Utilisation d'AJAX

Si le `value` est modifié, le composant effectue automatiquement l'appel `AJAX`.

```html
<ui-component name="dynamicvalue" path="path.to.property" config="url:/users/{0}/;dirsource:GET /users/?search={0}"></ui-component>
```

### Utilisation en ligne

Si le `value` doit être modifié, le composant exécute `config.exec` pour obtenir un texte lisible d'une valeur.

```html
<ui-component name="dynamicvalue" path="path.to.property" config="exec:my_function"></ui-component>

<script>
	function my_function(value, next) {
		next({ name: 'This text will be displayed as a value '});
	}
</script>
```

__Bon à savoir__ :

- `component.response` contient une réponse brute du résultat

Utilisez-le avec `<ui-component name="dynamicvalue">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

```html example.html
<div style="width:300px">
	<ui-component name="dynamicvalue" path="userid" config="exec:getuser;click:finduser;placeholder:Choose a user">User</ui-component>
</div>

<script>
	var userid = 1;

	function getuser(value, next) {
		// Here you can read a readable text
		// Value is binded according to the "config.html" Tangular template
		next({ name: 'Peter' });
	}

	function finduser(element, next, current_value) {
		// "next" must received a new value which will be binded from e.g. j-Suggestion or some j-Form
		// a value will be automatically binded according to the component "path"
		next(1);
	}

</script>
```