# j-WizardExpert

> Una solución sencilla para crear asistentes avanzados. El asistente descarga los pasos (como partes HTML) según el esquema. Los pasos están incluidos en ámbitos personalizados, por lo que están bajo validación.

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

Una solución sencilla para crear asistentes avanzados. El asistente descarga los pasos (como partes HTML) según el esquema. Los pasos están incluidos en ámbitos personalizados, por lo que están bajo validación.

__Configuración__

- `output {String}` una ruta para la salida, el objeto contendrá la salida completa (los pasos serán propiedades)
- `exec {String}` una ruta a `method(output_object)`, se ejecuta si el asistente no contiene ningún paso siguiente
- `next {String}` una ruta, aquí se asignará el siguiente paso con la propiedad `enabled {Boolean}`
- `back {String}` una ruta, aquí se asignará el paso anterior con la propiedad `enabled {Boolean}`
- `validate {Boolean}` habilita la validación (predeterminado: `true`)

__Esquema__:

```js
{
	'step1': { url: 'step1.html', next: 'step2', validate: false },
	'step2': { url: 'step2.html', next: 'step3' },
	'step3': { url: 'step3.html' }
}
```

- El componente amplía cada paso añadiendo nuevas propiedades `enabled {Boolean}`, `id {String}`, `prev {String}`.

Úselo con `<ui-component name="wizardexpert">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

```html example.html
<style>
	button { background-color: white; border: 1px solid #E0E0E0; font-size: 12px; padding: 5px 15px; }
	button:hover { background-color: #F8F8F8; }
	button:disabled { background-color: #F0F0F0; cursor: not-allowed; color: #A0A0A0; }
</style>

<div style="border:1px solid #E0E0E0;width:300px;height:150px;padding:20px;margin-bottom:20px">
	<ui-component name="wizardexpert" path="currentstep" config="output:currentoutput;next:nextstep;back:prevstep;exec:steps_finish">
		<script type="text/plain">
			{
				'step1': { url: 'step1.html', next: 'step2', validate: false },
				'step2': { url: 'step2.html', next: 'step3' },
				'step3': { url: 'step3.html' }
			}
		</script>
	</ui-component>

</div>

<nav>
	<ui-component name="validation" path="outputdata">
		<button is="is-button" path="prevstep" config="enabled:value && value.enabled;click:steps_back" disabled>Back</button>
		<button is="is-button" path="nextstep" config="enabled:!value||value.enabled;html:value?'Next':'Finish';click:steps_next" disabled>Next</button>
	</ui-component>
</nav>


<script type="text/html" id="step1">
	WELCOME
</script>

<script type="text/html" id="step2">
	<ui-component name="input" path="?.name" config="required:1">Type your name</ui-component>
</script>

<script type="text/html" id="step3">
	FINISH
</script>

<script>

	var currentstep = 'step1';
	var currentoutput = {};

	ON('request', function(options) {
		// Hijack response
		if (options.url.indexOf('step') !== -1)
			options.respond($('#' + options.url.replace('.html', '')).html());
	});

	function steps_next() {
		SET('currentstep', 'NEXT');
	}

	function steps_back() {
		SET('currentstep', 'BACK');
	}

	function steps_finish() {
		alert('DONE: ' + STRINGIFY(currentoutput));
	}

</script>
```