Tags

Hoy os voy a explicar como añadir un elemento a mi appbar de tipo “Flyout”.

En mi caso necesitaba añadir alguna opción para mover elementos de una lista a otra ,pero no quería modificar demasiado el HTML ,ni añadir otra vista nueva.

Para ello pensé en añadir un botón a la barra,pero hasta ahora lo único que había estado añadiendo, eran botones normales que desencadenaban alguna acción programada.

Lo que yo andaba buscando era muy simple, sólo necesitaba recuperar unos datos de la bd y mostrarlos en un “select” para seleccionar una de ellos.

Algo así:

image

 

Para eso,añadimos el botón a la appbar :

<button 
data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdMove',label:'Move',icon:'switch',
section:'selection',tooltip:'Move',type:'flyout', flyout:'MoveFlyout'}"
>
</button>

 

Añado el HTML de mi Flyout que quiero asociar:

<div id="MoveFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm move}">
<div >Select a list</div>
<br />
<select id="listID">

</select>
<button id="OK">Move</button>

</div>

 

En este momento lo único que muestro es esto:

image

 

Ya sólo faltaría bindear los datos del origen de datos.

Espero que os sea útil.

 

Saludos!!!