# j-DynamicValue

> This component is very special component. It can keep a value for example Number and at the same it can render another readable text. This component is optimized for dynamic usage, so it needs to be l

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

This component is very special component. It can keep a value for example `Number` and at the same it can render another readable `text`. This component is optimized for dynamic usage, so it needs to be linked with another component or part.


- `icon {String}` icon for label e.g. home, cog, etc.
- `label {String}` label (default is HTML content)
- `icon2 {String}` icon in the right box e.g. home, cog, etc. (default: `angle-down`)
- `placeholder {String}` adds a placeholder text
- `disabled {Boolean}` disables this component
- `find {String}` __important__ link to `function(el, next(value))` for binding a new value
- `read {String}` a link to `function(value, next(response))` for binding a readable `text`
- `url {String}` tries to bind a value via `AJAX()`, argument `{0}` in URL is replaced by the value
- `html {String}` Tangular template for rendering a value (default: `{{ name }}`)
- `remap {String}` a remap function (default: `null`), example: `value.length ? value[0] : null`
- `required {Boolean}` enables "required" (default: `false`)
- `bind {String}` a path to method or variable where will be binded loaded value (optional)
- `dirsource {String}` a link to method `function(search, next(items_arr))` or __NEW__: can contain URL for search in fhe form `GET /api/partners/?q={0}`
- `dircustom {String/Boolean}` can contain a path to function(val, next(new_val)) or can be Boolean. This option can enable adding a custom value (value not defined in data-source)
- `dirrender {String}` a path to `function(item, text)` (must return HTML for j-Directory), this function can affect list of items in j-Directory
- `dirminwidth {Number}` a minimum width for j-Directory, (default: `200`)
- `dirmaxwidth {Number}` a maximum width for j-Directory
- `dirplaceholder {String}` a placeholder for j-Directory
- `dirempty {String}` adds an empty field for j-Directory
- `dirkey {String}` a key name for reading of text in dirsource (default: `name`)
- `dirvalue {String}` a key name for reading of value in dirsource (default: `id`)
- `onresponse {String}` a path to property or `function(response)`, executed if the response is processed (default: `undefined`)
- __NEW__ `tapi {Boolean}` enables calling `TAPI()` insteadof `AJAX()` (default: false)

### AJAX usage

If the `value` will be changed then the component performs `AJAX` call automatically.

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

### Inline usage

If the `value` will be changed then the component performs `config.exec` for obtaining a readable text of a value.

```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>
```

__Good to know__:

- `component.response` contains a raw response from the result

Use it with `<ui-component name="dynamicvalue">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```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>
```