Usar la aplicación de ejemplo Cómo (versión preliminar)

[Este artículo es documentación preliminar y está sujeto a modificaciones].

La aplicación de plantilla Cómo para Microsoft Teams ofrece una forma sencilla de aprender a ser un creador de Power Apps guiándole paso a paso a través del diseño de modelos de datos, pantallas y la conexión de pantallas para crear una solución completa de préstamo de activos de Power Apps.

Ventajas de usar la aplicación Cómo:

• Conocimientos básicos de Power Apps.
• Aprenda a crear aplicaciones en Teams.
• Comparta la aplicación de préstamo de activos que crea con compañeros en Teams.
• Conviértase en creador

Nota

Antes de que pueda usar esta aplicación, es posible que se le soliciten sus permisos para usar la conexión. Más información: Permitir conexiones en aplicaciones de ejemplo Esta aplicación está disponible en tres temas de Teams diferentes: Predeterminado, Oscuro y Contraste alto. Al cambiar el tema en Teams, la aplicación se actualiza automáticamente para coincidir con el tema seleccionado. Más información: Obtener el tema de Teams usando el objeto de integración de Teams

Importante

• Esta es una Característica de vista previa (GB).
• Las vistas previas de características no se han diseñado para un uso de producción y pueden tener una funcionalidad restringida. Estas características están disponibles antes del lanzamiento oficial para que los clientes puedan tener un acceso anticipado y proporcionar comentarios.

Requisitos previos

Antes de usar esta aplicación:

1. Instale la aplicación Cómo.
2. Configure la aplicación para usarla por primera vez.

Para obtener detalles sobre los pasos anteriores, vaya a Usar aplicaciones de muestra de la tienda de Teams.

Creación de una aplicación de administración de activos

En la aplicación Cómo, crearemos una aplicación de administración de activos para que los usuarios tomen prestados activos de la biblioteca y los devuelvan cuando terminen de usarlos. Las instrucciones están incluidas en la aplicación y los creadores que abran la aplicación en la aplicación Power Apps en Teams verán las instrucciones en el estudio.

Este artículo incluye los pasos de la aplicación para los creadores que prefieren leerlos fuera de la aplicación. Por ejemplo, tiene dos monitores y desea que las instrucciones se abran en otra pantalla, o puede que desee imprimirlas.

Desde la pantalla principal, puede ver un resumen de los pasos para crear la aplicación Cómo y tener la poder obtener una vista previa de la aplicación.

Al seleccionar Introducción a Power Apps le llevará a la aplicación Power Apps de Teams, desde la que puede iniciar el recorrido del creador. Al seleccionar Vista previa de aplicación redirigirá al usuario a la pantalla Activos, desde la que el usuario puede usar la aplicación de préstamo de activos y ver cuál será la experiencia final cuando finalice la aplicación.

En la aplicación de préstamo de activos, al seleccionar un elemento le llevará a una pantalla donde puede revisarlo.

En la esquina superior izquierda, puede seleccionar el icono de los elementos de préstamo, que están disponibles en su cuenta.

Comenzar su recorrido de creador en Cómo

Cómo es una lección independiente sobre cómo crear una Power Apps. Todas las instrucciones están incluidas en la aplicación. Para empezar el aprendizaje, abra la aplicación Cómo usando la aplicación Power Apps en Teams:

1. En Teams, seleccione ... (puntos suspensivos) desde el panel izquierdo.

2. Busque Power Apps y seleccione la aplicación Power Apps.

3. Haga clic con el botón derecho en el botón Power Apps y seleccione Aplicación emergente para lanzar la aplicación Power Apps en una nueva ventana para que sea más fácil de usar.

4. Seleccione la pestaña Crear.

5. Seleccione el equipo asociado al proyecto.

6. Seleccione Aplicaciones instaladas.

7. En el icono Cómo, seleccione la aplicación Cómo. La aplicación se abrirá en la aplicación Power Apps.

   

8. Desde la vista de árbol, seleccione Pantalla de información general.

   

Comprender la pantalla de información general

La pantalla de información general es la guía para su recorrido de creador. Desde la pantalla de información general, puede ver en qué parte del proceso se encuentra. Para comenzar un paso, mantenga presionado la tecla Alt del teclado y seleccione el botón Iniciar. Esto lo llevará a la pantalla correspondiente, desde la que verá las instrucciones para completar el paso.

Cuando termine, vuelva a la pantalla de información general y seleccione el botón en el icono del paso actual para completar el paso y pasar a la siguiente lección.

Restablecer su progreso en Cómo

Por tanto, si ha empezado a leer las lecciones en Cómo y decide que desea empezar de nuevo, puede reiniciar el proceso siguiendo estos pasos:

1. Haga clic con el botón derecho en la aplicación Power Apps en Team y seleccione Emergente.

2. Seleccione la pestaña Crear.

3. Seleccione el equipo en el que está instalada la aplicación Cómo.

4. Seleccione la pestaña Aplicaciones instaladas.

5. En el icono Cómo, seleccione Ver todo.

6. Seleccione Tablas.

7. Seleccione Etapas de la aplicación de préstamo de elementos.

8. Seleccione Editar datos.

9. Seleccione las filas de la tabla.

10. Seleccione Eliminar registro(s).

Aprender a trabajar con un modelo de datos

En este paso, agregaremos tres tablas. Crear los nombres de las tablas como tipos de elementos, elementos y préstamos de elementos. Se crean tablas para almacenar los datos.

Para obtener instrucciones detalladas sobre cómo crear tablas, consulte Editar datos de tablas en Excel y volver a publicarlos en Dataverse for Teams

Cree las siguientes tablas y columnas:

Tipo de elemento

Nombre columna	Tipo de fecha	valor
Administrador de préstamos	Texto	No aplicable
Dirección de préstamo	Texto	No aplicable

Elemento

Nombre columna	Tipo de fecha	valor
Cantidad	Número entero	No aplicable
Descripción	Texto de varias líneas	No aplicable
Image	Image	No aplicable
Tipo de elemento	Búsqueda	Tabla relacionada = Tipo de elemento

Préstamo de elementos

Nombre columna	Tipo de fecha	valor
Asignar nombre	Numeración automática	No aplicable
Elemento	Búsqueda	Tabla relacionada = Elemento
Motivo del préstamo	Opción	Trabajo remoto, Nueva asignación de proyecto
Opción de préstamo	Opción	Recogida, Entrega
Duración del préstamo	Opción	7 días, 30 días
Estado del préstamo	Opción	Activo, devuelto

Datos de ejemplo

En este paso, debemos agregar datos a las tablas que creamos anteriormente. Estos datos serán los artículos y tipos de artículos para el proceso de préstamo de activos. Por ejemplo, si está usando esta aplicación para administrar artículos como ratones y teclados, puede definir tipos de artículos como ordenadores, teléfonos o escritorios que las personas pueden consultar.

Usaremos la cuadrícula editable de la tabla para completar los datos de ejemplo en la aplicación. Para usar la cuadrícula editable de la tabla, siga estos pasos:

1. Abra la aplicación de Power Apps en Teams.

2. Seleccione la pestaña Crear.

3. Seleccione el equipo en el que está instalada la aplicación Cómo.

4. Seleccione la pestaña Aplicaciones instaladas.

5. En el icono Cómo, seleccione Ver todo.

6. Seleccione Tablas.

7. Seleccione Etapas de la aplicación de préstamo de elementos.

8. Seleccione Editar datos.

Nota

La cuadrícula editable de la tabla no puede importar fotos.

La pantalla de datos de ejemplo incluye una galería que le permite seleccionar elementos que se crearon en el paso anterior y asociar imágenes a ellos.

Componentes de la interfaz de usuario

En este paso, vamos a aprender acerca de los controles predefinidos, como los botones, para crear las aplicaciones. Esta aplicación se basa en el marco Fluid UI. Los nuevos controles son Button, Check box, Combo box, Date picker, Label, Radio group, Rating, Slider, Text box y Toggle.

Para obtener más información sobre el marco y los controles de Fluid UI, vaya a Marco de Fluent UI y Usar los controles de Fluent UI para Power Apps en Teams.

Crear pantalla de activos

En este paso, vamos a crear su primera pantalla que muestra los elementos disponibles para tomar prestados. Esta será la pantalla principal de la aplicación, desde la que los usuarios buscarán artículos y los seleccionarán para tomarlos prestados.

Siga estos pasos para empezar a crear su aplicación.

1. El contenedor horizontal conItemTypes se usará para contener una etiqueta de encabezado y una galería de tipos de elementos. Establezca sus propiedades como se muestra a continuación:

   Propiedad	Valor
   Asignar nombre	conItemTypes
   Espacio	20
   Desbordamiento vertical	LayoutOverflow.Scroll
   Minimum Width	300
   Padding Top	20
   Padding Bottom	20
   Rellenar	If(gblThemeDark.ColorValue("#141414"), gblThemeHiCo,Black,White)

2. Agregar nuevo contenedor horizontal a conItemTypes - conItemTypesHeader. Contendrá una etiqueta de encabezado y una imagen.

   Propiedad	Valor
   Asignar nombre	conItemTypesHeader
   Padding Right	10
   Minimum Height	0
   Altura	32
   Padding Left	20

3. Agregue una etiqueta a conItemTypesHeader - lblAllAssetsHeader. Es una etiqueta de encabezado para la pantalla.

   Propiedad	Valor
   Asignar nombre	lblAllAssetsHeader
   Fuente	Segoe UI
   Espesor de fuente	Negrita
   Altura	32
   Flexible Width	true
   X	20
   Texto	"Todos los activos"

4. Agregue una imagen a conItemTypesHeader - imgCheckout. Se usará para llevar a los usuarios a sus préstamos existentes.

   Propiedad	Valor
   Asignar nombre	imgCheckout
   Altura	32
   Ancho	32
   Image	If(gblThemeDark||gblThemeHiCo,Checkout_Dark,Checkout)

5. Agregue una galería vertical en blanco a conItemTypes - galItemTypes. Es una galería de tipos de elementos. Al seleccionar un tipo de elemento, se mostrarán los elementos relacionados.

   Propiedad	Valor
   Asignar nombre	galItemTypes
   Artículos	Item Types
   Alto mínimo	0
   Fill Portions	19
   Template Size	70
   Template Padding	0
   OnSelect	UpdateContext({ locSelectedItemType: ThisItem, locShowItems: true })
   Template Fill	If(!('Items Screen'.Size = ScreenSize.Small), If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent), Transparent)

6. Agregue una etiqueta a galItemTypes - lblName. Es una etiqueta para mostrar el nombre del tipo de elemento.

   Propiedad	Valor
   Asignar nombre	lblName
   Ancho	Parent.Width
   Altura	32
   X	20
   a	5
   Texto	ThisItem.Name
   Espesor de fuente	If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal)
   Tamaño de fuente	10.5

7. Agregue una etiqueta a galItemTypes - lblItemCount. Es una etiqueta para mostrar el recuento de elementos que pertenecen a un tipo de elemento en particular.

   Propiedad	Valor
   Asignar nombre	lblItemCount
   Ancho	Parent.Width
   Altura	32
   X	20
   a	lblName.Y + lblName.Height
   Texto	CountRows(ThisItem.Items.Item) & " items"
   Tamaño de fuente	10.5

8. El contenedor horizontal conItems se usará para contener una etiqueta de encabezado y una galería de elementos para el tipo de elemento seleccionado. Establezca sus propiedades como se muestra a continuación:

   Propiedad	Valor
   Asignar nombre	conItems
   Espacio	20
   Padding Top	20
   Padding Left	20
   Padding Right	20
   Desbordamiento vertical	Overflow.Scroll

9. Agregue una etiqueta a conItems - lblRelatedItemsHeader. Es una etiqueta para mostrar el recuento de elementos relacionados con el tipo de elemento seleccionado.

   Propiedad	Valor
   Asignar nombre	lblRelatedItemsHeader
   Texto	CountRows(locSelectedItemType.Items.Item) & " items available"
   Align in Container	AlignInContainer.Stretch
   Espesor de fuente	FontWeight.Semibold
   Tamaño de fuente	15
   X	707*1
   Y	265*1

10. Agregue una galería vertical en blanco a conItems - galItems. Esta es la galería que mostrará los elementos que pertenecen al tipo de elemento seleccionado.

    Propiedad	Valor
    Asignar nombre	galItems
    Artículos	locSelectedItemType.Items
    TemplateSize	130

11. Agregue un botón a galItems - btnItemsBackground. Esto es para agregar un fondo blanco para cada elemento.

    Propiedad	Valor
    Asignar nombre	btnItemsBackground
    X	5
    a	0
    Rellenar	Blanco
    Altura	Parent.TemplateHeight - 20
    Ancho	Parent.TemplateWidth - Self.X*2

12. Agregue una imagen a galItems - imgItem. Esto es para mostrar la imagen o el logotipo del elemento.

    Control	Propiedad	Valor
    Agregar una imagen a galItems	Asignar nombre	imgItem
    imgItem	X	5
    imgItem	Y	0
    imgItem	Ancho	125
    imgItem	Altura	110
    imgItem	ImagePosition	ImagePosition.Fill
    imgItem	Image	ThisItem.Image.Full

13. Agregue una etiqueta a galItems - lblItemName. Esto es para mostrar el nombre del elemento.

    Propiedad	Valor
    Asignar nombre	lblItemName
    Y	imgItem.Y + 5
    X	imgItem.X + imgItem.Width +20
    Texto	ThisItem.Name
    Ancho	btnItemsBackground.Width - Self.X
    Tamaño de fuente	10.5
    FontWeight	FontWeight.Semibold

14. Agregue una etiqueta a galItems - lblItemQuantity. Esto es para mostrar el recuento de un elemento disponible para préstamo.

    Propiedad	Valor
    Asignar nombre	lblItemQuantity
    X	lblItemName.X
    Y	lblItemName.Y + lblItemName.Height
    Texto	ThisItem.Quantity-CountRows(Filter('Item Checkouts',Item.Item=ThisItem.Item,'Checkout Status'='Checkout Statuses'.Active))&" available"
    Alineación vertical	Inferior
    Ancho	btnItemsBackground.Width - Self.X
    Tamaño de fuente	10.5

15. Agregue una etiqueta a galItems - lblItemDesc. Esto es para mostrar la descripción del elemento.

    Propiedad	Valor
    Asignar nombre	lblItemDesc
    X	lblItemName.X
    Y	lblItemQuantity.Y + lblItemQuantity.Height
    Texto	ThisItem.Description
    Alineación vertical	Inferior
    Ancho	btnItemsBackground.Width - Self.X
    Ajuste	false

16. Agregue un botón a galItems - btnItemsForeground. Este es un botón de superposición para que se pueda seleccionar una fila entera.

    Valor	Propiedad
    btnItemsForeground	Asignar nombre
    RGBA(128, 128, 128, .06)	HoverFill
    Transparente	Todos los demás Fill excepto Hover Fill
    btnItemsBackground.X	X
    btnItemsBackground.Y	Y
    btnItemsBackground.Width	Ancho

Ahora establezca la propiedad Fill Portions para los controles conItems y conItemTypes como se muestra a continuación: los tipos de elementos cubren el 25% de la pantalla y el 75% restante lo cubre la lista de elementos.

Control	Propiedad	Valor
conItems	Fill Portions	3
conItemTypes	Fill Portions	1

Pantalla Crear préstamo

En este paso, crearemos la segunda pantalla, la pantalla de préstamos de elementos. Esta pantalla muestra los detalles del elemento que se va a prestar y la cantidad disponible.

Desde esta pantalla, el usuario proporciona detalles del motivo del préstamo, la duración y otros detalles e inicia el proceso de préstamo.

Control	Propiedad	Valor
Pantalla Préstamo	OnVisible	UpdateContext({locShowCheckoutConfirmation: false})
contenedor primario	Asignar nombre	conParent_Checkout
primer contenedor secundario	Asignar nombre	conItemTypes_Checkout
segundo contenedor secundario	Asignar nombre	conCheckout
conItemTypes_Checkout	Espacio	20
conItemTypes_Checkout	Desbordamiento vertical	LayoutOverflow.Scroll
conItemTypes_Checkout	Minimum Width	300
conItemTypes_Checkout	Padding Top	20
conItemTypes_Checkout	Padding Bottom	20
conItemTypes_Checkout	Rellenar	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)

1. Agregue un contenedor horizontal al control conItemTypes_Checkout - conItemTypesHeader_Checkout.

   Control	Propiedad	Valor
   Agregar un contenedor horizontal a conItemTypes_Checkout	Asignar nombre	conItemTypesHeader_Checkout
   conItemTypesHeader_Checkout	Padding Left	20
   conItemTypesHeader_Checkout	Padding Right	20
   conItemTypesHeader_Checkout	Minimum Height	0
   conItemTypesHeader_Checkout	Altura	32

2. Agregue una etiqueta al control conItemTypesHeader_Checkout - lblAllAssetsHeader_Checkout.

   Control	Propiedad	Valor
   Agregar una etiqueta a conItemTypesHeader_Checkout	Asignar nombre	lblAllAssetsHeader_Checkout
   lblAllAssetsHeader_Checkout	Fuente	Segoe UI
   lblAllAssetsHeader_Checkout	Font Weight	Negrita
   lblAllAssetsHeader_Checkout	Altura	32
   lblAllAssetsHeader_Checkout	Flexible Width	true
   lblAllAssetsHeader_Checkout	Texto	"Todos los activos"
   lblAllAssetsHeader_Checkout	Tamaño de fuente	15
   lblAllAssetsHeader_Checkout	Minimum Width	150

3. Agregue una imagen al control conItemTypesHeader_Checkout - imgCheckout_Checkout.

   Control	Propiedad	Valor
   Agregar una imagen a conItemTypesHeader_Checkout	Asignar nombre	imgCheckout_Checkout
   imgCheckout_Checkout	Altura	32
   imgCheckout_Checkout	Peso	32
   imgCheckout_Checkout	Image	If(gblThemeDark||gblThemeHiCo,Checkout_Dark,Checkout)

4. Agregue una galería vertical en blanco al control conItemTypes_Checkout - galItemTypes_Checkout.

   Control	Propiedad	Valor
   Agregar una galería vertical en blanco a conItemTypes_Checkout	Asignar nombre	galItemTypes_Checkout
   galItemTypes_Checkout	Artículos	Tipos de elemento
   galItemTypes_Checkout	Minimum Height	0
   galItemTypes_Checkout	Fill Portions	19
   galItemTypes_Checkout	Template Size	70
   galItemTypes_Checkout	Template Padding	0
   	Template Fill	If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent)

5. Agregue una etiqueta al control galItemTypes_Checkout - lblIName_Checkout.

   Control	Propiedad	Valor
   Agregar una etiqueta a galItemTypes_Checkout	Asignar nombre	lblIName_Checkout
   lblIName_Checkout	Ancho	Parent.Width
   lblIName_Checkout	Altura	32
   lblIName_Checkout	X	20
   lblIName_Checkout	Y	5
   lblIName_Checkout	Texto	ThisItem.Name
   lblIName_Checkout	Espesor de fuente	If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal)

6. Agregue una etiqueta al control galItemTypes_Checkout - lblItemCount_Checkout.

   Control	Propiedad	Valor
   Agregar una etiqueta a galItemTypes_Checkout	Asignar nombre	lblItemCount_Checkout
   lblItemCount_Checkout	Ancho	Parent.Width
   lblItemCount_Checkout	Altura	32
   lblItemCount_Checkout	X	20
   lblItemCount_Checkout	Y	lblIName_Checkout.Y + lblIName_Checkout.Height
   lblItemCount_Checkout	Texto	CountRows(ThisItem.Items.Item) & " items"

7. Ahora establezca la propiedad Fill Portions para los controles conMyCheckouts y conItemTypes_MyCheckouts como se muestra a continuación: los tipos de elementos cubren el 25% de la pantalla y el 75% restante lo cubre la lista de mis préstamos".

   Control	Propiedad	Valor
   conCheckout	Espacio	10
   conCheckout	Padding Top	20
   conCheckout	Padding Left	20
   conCheckout	Padding Right	20
   conCheckout	Desbordamiento vertical	Overflow.Scroll
   conCheckout	Visible	!locShowCheckoutConfirmation

8. Agregue una etiqueta al control conCheckout - lblCheckoutHeader.

   Control	Propiedad	Valor
   Agregar una etiqueta a conCheckout	Asignar nombre	lblCheckoutHeader
   lblCheckoutHeader	Texto	"Tomar prestado"
   lblCheckoutHeader	Altura	32
   lblCheckoutHeader	AlignInContainer	AlignInContainer.Stretch
   lblCheckoutHeader	Tamaño de fuente	15
   lblCheckoutHeader	Font Weight	Semibold

9. Agregue una imagen al control conCheckout - imgItem_Checkout.

   Control	Propiedad	Valor
   Agregar una imagen a conCheckout	Asignar nombre	imgItem_Checkout
   imgItem_Checkout	Image	locSelectedItem.Image.Full
   imgItem_Checkout	Ancho	375
   imgItem_Checkout	Altura	300
   imgItem_Checkout	Border Radius	8

10. Agregue una etiqueta al control conCheckout - lblItemName_Checkout.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblItemName_Checkout
    lblItemName_Checkout	Texto	locSelectedItem.Name
    lblItemName_Checkout	Altura	32

11. Agregue una etiqueta al control conCheckout - lblItemQuantity_Checkout.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblItemQuantity_Checkout
    lblItemQuantity_Checkout	Texto	locSelectedItem.Quantity-CountRows(Filter('Item Checkouts',Item.Item=locSelectedItem.Item,'Checkout Status'='Checkout Statuses'.Active))&" available"
    lblItemQuantity_Checkout	Altura	32

12. Agregue una etiqueta al control conCheckout - lblItemDesc_Checkout.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblItemDesc_Checkout
    lblItemDesc_Checkout	Texto	locSelectedItem.Description
    lblItemDesc_Checkout	Altura	59

13. Agregue una etiqueta al control conCheckout - lblCheckoutOptionsHeader.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblCheckoutOptionsHeader
    lblCheckoutOptionsHeader	Texto	"¿Cómo desea recibir el artículo?"
    lblCheckoutOptionsHeader	Altura	32

14. Agregue un grupo de botones de opción al control conCheckout - rdoCheckoutOptions.

    Control	Propiedad	Valor
    Agregar un grupo de botones de opción a conCheckout	Asignar nombre	rdoCheckoutOptions
    rdoCheckoutOptions	Artículos	Choices('Checkout Options')
    rdoCheckoutOptions	Altura	50
    rdoCheckoutOptions	Campos	valor

15. Agregue una etiqueta al control conCheckout - lblCheckoutDurationHeader.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblCheckoutDurationHeader
    lblCheckoutDurationHeader	Texto	"¿Durante cuánto tiempo desea tener el artículo?"
    lblCheckoutDurationHeader	Altura	32

16. Agregue un cuadro combinado al control conCheckout - drpCheckoutDurationHeader.

    Control	Propiedad	Valor
    Agregar un cuadro combinado a conCheckout	Asignar nombre	drpCheckoutDurationHeader
    drpCheckoutDurationHeader	Artículos	Choices('Checkout Durations')
    drpCheckoutDurationHeader	Campos	valor

17. Agregue una etiqueta al control conCheckout - lblCheckoutReasonHeader.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblCheckoutReasonHeader
    lblCheckoutReasonHeader	Texto	"Razón para tomar prestado el artículo"
    lblCheckoutReasonHeader	Altura	32

18. Agregue un cuadro combinado al control conCheckout - drpCheckoutReasonHeader.

    Control	Propiedad	Valor
    Agregar un cuadro combinado a conCheckout	Asignar nombre	drpCheckoutReasonHeader
    drpCheckoutReasonHeader	Artículos	Choices('Checkout Reasons')
    drpCheckoutReasonHeader	Campos	valor

19. Agregue una etiqueta al control conCheckout - lblPickupAddressHeader.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblPickupAddressHeader
    lblPickupAddressHeader	Texto	"Dirección de recogida"
    lblPickupAddressHeader	Altura	32
    lblPickupAddressHeader	Visible	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Pickup

20. Agregue una etiqueta al control conCheckout - lblPickupAddress.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblPickupAddress
    lblPickupAddress	Texto	LookUp('Item Types','Item Type'=locSelectedItem.'Item Type'.'Item Type').'Checkout Address'
    lblPickupAddress	Altura	32*1
    lblPickupAddress	Visible	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Pickup
    lblPickupAddress	DisplayMode	Deshabilitados

21. Agregue una etiqueta al control conCheckout - lblDeliveryAddressHeader.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckout	Asignar nombre	lblDeliveryAddressHeader
    lblDeliveryAddressHeader	Texto	"Dirección de entrega"
    lblDeliveryAddressHeader	Altura	32
    lblDeliveryAddressHeader	Visible	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery

22. Agregue un cuadro de texto al control conCheckout - txtDeliveryAddress.

    Control	Propiedad	Valor
    Agregar un cuadro de texto a conCheckout	Asignar nombre	txtDeliveryAddress
    lblPickupAddress	Altura	32*1
    lblPickupAddress	Visible	rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery
    lblPickupAddress	valor	"Escriba aquí su dirección"

23. Agregue un contenedor horizontal al control conCheckout - conCheckoutActions.

    Control	Propiedad	Valor
    Agregar un contenedor horizontal a conCheckout	Asignar nombre	conCheckoutActions
    conCheckoutActions	LayoutJustifyContent	LayoutJustifyContent.End
    conCheckoutActions	LayoutAlignItems	LayoutAlignItems
    conCheckoutActions	Espacio	20
    conCheckoutActions	Ancho	500
    conCheckoutActions	Fill Portions	1
    conCheckoutActions	Minimum Height	100

24. Agregue un botón al control conCheckoutActions - btnCancelCheckout.

    Control	Propiedad	Valor
    Agregar un botón a conCheckoutActions	Asignar nombre	btnCancelCheckout
    btnCancelCheckout	Altura	32*1
    btnCancelCheckout	Ancho	110
    btnCancelCheckout	Button Type	Estándar
    btnCancelCheckout	Espesor de fuente	Semibold

25. Agregue un botón al control conCheckoutActions - btnSaveCheckout.

    Control	Propiedad	Valor
    Agregar un botón a conCheckoutActions	Asignar nombre	btnSaveCheckout
    btnCancelCheckout	Altura	32*1
    btnCancelCheckout	Ancho	110
    btnCancelCheckout	Button Type	Principal
    btnCancelCheckout	Espesor de fuente	Semibold
    btnCancelCheckout	OnSelect	Patch( 'Item Checkouts', Defaults('Item Checkouts'), { Item: locSelectedItem, Name: CountRows('Item Checkouts')+1000, 'Checkout Status': 'Checkout Statuses'.Active, 'Checkout Duration': drpCheckoutDurationHeader.Selected.Value, 'Checkout Option': rdoCheckoutOptions.Selected.Value, 'Checkout Reason': drpCheckoutReasonHeader.Selected.Value, 'Delivery Address': If( rdoCheckoutOptions.Selected.Value = 'Checkout Options'.Delivery, txtDeliveryAddress ) }); UpdateContext({locShowCheckoutConfirmation: true})

26. Agregue un contenedor vertical al control conParent_MyCheckouts - conCheckoutConfirmation.

    Control	Propiedad	Valor
    Agregar un contenedor vertical a conParent_MyCheckouts	Asignar nombre	conCheckoutConfirmation
    conCheckoutConfirmation	Espacio	20
    conCheckoutConfirmation	Padding Left	20
    conCheckoutConfirmation	Padding Top	80
    conCheckoutConfirmation	Padding Right	20
    conCheckoutConfirmation	Fill Portions	3
    conCheckoutConfirmation	Visible	locShowCheckoutConfirmation

27. Agregue una imagen al control conCheckoutConfirmation - imgCheckoutConfirmation.

    Control	Propiedad	Valor
    Agregar una imagen a conCheckoutConfirmation	Asignar nombre	imgCheckoutConfirmation
    imgCheckoutConfirmation	Ancho	200
    imgCheckoutConfirmation	Altura	200
    imgCheckoutConfirmation	ImagePosition	ImagePosition.Fill
    imgCheckoutConfirmation	Image	pedido de compra

28. Agregue una etiqueta al control conCheckoutConfirmation - lblCheckoutInfoMessage.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckoutConfirmation	Asignar nombre	lblCheckoutInfoMessage
    lblCheckoutInfoMessage	X	707*1
    lblCheckoutInfoMessage	Y	225*1
    lblCheckoutInfoMessage	Texto	Ya está todo listo. &If(rdoCheckoutOptions.Selected.Value='Checkout Options'.Delivery,"The "&locSelectedItem.Name&" se entregará a "&txtDeliveryAddress&".","Puede recoger "&locSelectedItem.Name&" de "&locSelectedItem.'Item Type'.'Checkout Address'&".")
    lblCheckoutInfoMessage	Ancho	300*1
    lblCheckoutInfoMessage	Altura	44
    lblCheckoutInfoMessage	Fuente	Segoe UI
    lblCheckoutInfoMessage	Tamaño de fuente	10.5
    lblCheckoutInfoMessage	Alineación	Alinear.Centro

29. Agregue una etiqueta al control conCheckoutConfirmation - lblCheckoutHelpMessage.

    Control	Propiedad	Valor
    Agregar una etiqueta a conCheckoutConfirmation	Asignar nombre	lblCheckoutHelpMessage
    lblCheckoutHelpMessage	X	707*1
    lblCheckoutHelpMessage	Y	225*1
    lblCheckoutHelpMessage	Texto	"Si desea cancelar y ayuda, póngase en contacto con:"
    lblCheckoutHelpMessage	Ancho	400*1
    lblCheckoutHelpMessage	Altura	32*1
    lblCheckoutHelpMessage	Fuente	Segoe UI
    lblCheckoutHelpMessage	Tamaño de fuente	10.5
    lblCheckoutHelpMessage	Alineación vertical	VerticalAlign.Bottom

30. Agregue una galería vertical en blanco al control conCheckoutConfirmation - galCheckoutAdminContact.

    Control	Propiedad	Valor
    Agregar una galería vertical en blanco a conCheckoutConfirmation	Asignar nombre	galCheckoutAdminContact
    galCheckoutAdminContact	TemplateSize	100
    galCheckoutAdminContact	Altura	100
    galCheckoutAdminContact	Rellenar	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)
    galCheckoutAdminContact	Ancho	400
    galCheckoutAdminContact	ShowScrollbar	false
    galCheckoutAdminContact	Artículos	[1]

31. Agregue una imagen al control galCheckoutAdminContact - imgCheckoutAdmin_Photo.

    Control	Propiedad	Valor
    Agregar una imagen a galCheckoutAdminContact	Asignar nombre	imgCheckoutAdmin_Photo
    imgCheckoutAdmin_Photo	X	10
    imgCheckoutAdmin_Photo	Y	(Parent.TemplateHeight - Self.Height) / 2
    imgCheckoutAdmin_Photo	Ancho	64
    imgCheckoutAdmin_Photo	Altura	64
    imgCheckoutAdmin_Photo	Image	If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'), Office365Users.UserPhotoV2(locSelectedItem.'Item Type'.'Checkout Admin') )

32. Agregue una etiqueta al control galCheckoutAdminContact - lblCheckoutAdmin_DisplayName.

    Control	Propiedad	Valor
    Agregar una etiqueta a galCheckoutAdminContact	Asignar nombre	lblCheckoutAdmin_DisplayName
    lblCheckoutAdmin_DisplayName	X	imgCheckoutAdmin_Photo.X + imgCheckoutAdmin_Photo.Width + 10
    lblCheckoutAdmin_DisplayName	Y	imgCheckoutAdmin_Photo.Y
    lblCheckoutAdmin_DisplayName	Texto	If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').displayName)
    lblCheckoutAdmin_DisplayName	Altura	32*1
    lblCheckoutAdmin_DisplayName	Ancho	Parent.Width - Self.X - 80
    lblCheckoutAdmin_DisplayName	Fuente	Segoe UI
    lblCheckoutAdmin_DisplayName	Tamaño de fuente	10.5
    lblCheckoutAdmin_DisplayName	Font Weight	Semibold
    lblCheckoutAdmin_DisplayName	VerticalAlign	VerticalAlign.Top

33. Agregue una etiqueta al control galCheckoutAdminContact - lblCheckoutAdmin_JobTitle.

    Control	Propiedad	Valor
    Agregar una etiqueta a galCheckoutAdminContact	Asignar nombre	lblCheckoutAdmin_JobTitle
    lblCheckoutAdmin_JobTitle	X	imgCheckoutAdmin_Photo.X + imgCheckoutAdmin_Photo.Width + 10
    lblCheckoutAdmin_JobTitle	Y	lblCheckoutAdmin_DisplayName.Y+lblCheckoutAdmin_DisplayName.Height
    lblCheckoutAdmin_JobTitle	Texto	If(!IsBlank(locSelectedItem.'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').jobTitle)
    lblCheckoutAdmin_JobTitle	Altura	32*1
    lblCheckoutAdmin_JobTitle	Ancho	Parent.Width - Self.X - 80
    lblCheckoutAdmin_JobTitle	Fuente	Segoe UI
    lblCheckoutAdmin_JobTitle	Tamaño de fuente	10.5
    lblCheckoutAdmin_JobTitle	Font Weight	Semibold
    lblCheckoutAdmin_JobTitle	VerticalAlign	VerticalAlign.Top

34. Agregue una imagen al control galCheckoutAdminContact - imgCheckoutAdmin_Chat.

    Control	Propiedad	Valor
    Agregar una imagen a galCheckoutAdminContact	Asignar nombre	imgCheckoutAdmin_Chat
    imgCheckoutAdmin_Chat	X	Parent.Width - Self.Width - 20
    imgCheckoutAdmin_Chat	Y	(Parent.TemplateHeight - Self.Height)/2
    imgCheckoutAdmin_Chat	Ancho	32
    imgCheckoutAdmin_Chat	Altura	32
    imgCheckoutAdmin_Chat	PaddingTop	4
    imgCheckoutAdmin_Chat	paddingBottom	4
    imgCheckoutAdmin_Chat	PaddingLeft	4
    imgCheckoutAdmin_Chat	PaddingRight	4
    imgCheckoutAdmin_Chat	ImagePosition	ImagePosition.Fit
    imgCheckoutAdmin_Chat	Image	If(gblThemeDark||gblThemeHiCo,ChatDark,Chat)
    ImgCheckoutAdmin_Chat	OnSelect	With( {varUserName: Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').userPrincipalName}, If( Param("hostClientType") = "web", Launch( "https://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ), Launch( "msteams://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ) ) )

35. Agregue un botón al control conCheckoutConfirmation - btnCheckoutBackToHome.

    Control	Propiedad	Valor
    Agregar un botón a conCheckoutConfirmation	Asignar nombre	btnCheckoutBackToHome
    btnCheckoutBackToHome	X	40
    btnCheckoutBackToHome	Y	105
    btnCheckoutBackToHome	Ancho	160
    btnCheckoutBackToHome	Tamaño de fuente	10.5
    btnCheckoutBackToHome	Font Weight	Semibold
    btnCheckoutBackToHome	Texto	"Volver a la página principal"
    btnCheckoutBackToHome	Button Type	Estándar

Pantalla Crear mi préstamo

En este paso, crearemos la pantalla final de la aplicación, la pantalla Mi préstamo. Desde esta pantalla, un usuario puede ver los artículos que ha tomado prestados y devolverlos.

Control	Propiedad	Valor
Pantalla Mis préstamos	OnVisible	UpdateContext({locShowReturnConfirmation: false})
contenedor primario	Asignar nombre	conParent_MyCheckouts
primer contenedor secundario	Asignar nombre	conItemTypes_MyCheckouts
segundo contenedor secundario	Asignar nombre	conMyCheckouts
conItemTypes_MyCheckouts	Espacio	20
conItemTypes_MyCheckouts	Desbordamiento vertical	LayoutOverflow.Scroll
conItemTypes_MyCheckouts	Minimum Width	300
conItemTypes_MyCheckouts	Padding Top	20
conItemTypes_MyCheckouts	Padding Bottom	20
conItemTypes_MyCheckouts	Rellenar	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)

1. Agregue un nuevo contenedor horizontal al control conItemTypes_MyCheckouts - conItemTypesHeader_MyCheckouts.

   Control	Propiedad	Valor
   Agregar un nuevo contenedor horizontal a conItemTypes_MyCheckouts	Asignar nombre	conItemTypesHeader_MyCheckouts
   conItemTypesHeader_MyCheckouts	Padding Right	10
   conItemTypesHeader_MyCheckouts	Minimum Height	0
   conItemTypesHeader_MyCheckouts	Altura	32
   conItemTypesHeader_MyCheckouts	Padding Left	20

2. Agregar una etiqueta a conItemTypesHeader_MyCheckouts - lblAllAssetsHeader_MyCheckouts

   Control	Propiedad	Valor
   Agregar una etiqueta a conItemTypesHeader_MyCheckouts	Asignar nombre	lblAllAssetsHeader_MyCheckouts
   lblAllAssetsHeader_MyCheckouts	Fuente	Segoe UI
   lblAllAssetsHeader_MyCheckouts	Espesor de fuente	Negrita
   lblAllAssetsHeader_MyCheckouts	Altura	32
   lblAllAssetsHeader_MyCheckouts	Flexible Height	false
   lblAllAssetsHeader_MyCheckouts	AlignInContainer	AlignInContainer.Stretch
   lblAllAssetsHeader_MyCheckouts	Texto	"Todos los activos"

3. Agregue una galería vertical en blanco al control conItemTypes_MyCheckouts - galItemTypes_MyCheckouts.

   Control	Propiedad	Valor
   Agregar una galería vertical en blanco a conItemTypes_MyCheckouts	Asignar nombre	galItemTypes_MyCheckouts
   galItemTypes_MyCheckouts	Artículos	Tipos de elemento
   galItemTypes_MyCheckouts	Fill Portions	19
   galItemTypes_MyCheckouts	Template Size	70
   galItemTypes_MyCheckouts	Template Padding	0
   galItemTypes_MyCheckouts	Template Fill	If(!('Items Screen'.Size = ScreenSize.Small), If(ThisItem.IsSelected, ColorValue("#E2E2F6"), Transparent), Transparent)

4. Agregue una etiqueta al control galItemTypes_MyCheckouts - lblIName_MyCheckouts.

   Control	Propiedad	Valor
   Agregar una etiqueta a galItemTypes_MyCheckouts	Asignar nombre	lblIName_MyCheckouts
   lblIName_MyCheckouts	Ancho	Parent.Width
   lblIName_MyCheckouts	Altura	32
   lblIName_MyCheckouts	X	20
   lblIName_MyCheckouts	Y	5
   lblIName_MyCheckouts	Texto	Thisitem.Name
   lblIName_MyCheckouts	Espesor de fuente	If(ThisItem.IsSelected,FontWeight.Semibold,FontWeight.Normal)
   lblIName_MyCheckouts	Tamaño de fuente	10.5

5. Agregue una etiqueta al control galItemTypes_MyCheckouts - lblItemCount_MyCheckouts.

   Control	Propiedad	Valor
   Agregar una etiqueta a galItemTypes_MyCheckouts	Asignar nombre	lblItemCount_MyCheckouts
   lblItemCount_MyCheckouts	Ancho	Parent.Width
   lblItemCount_MyCheckouts	Altura	32
   lblItemCount_MyCheckouts	X	20
   lblItemCount_MyCheckouts	a	lblIName_MyCheckouts.Y + lblIName_MyCheckouts.Height
   lblItemCount_MyCheckouts	Texto	CountRows(ThisItem.Items.Item) & " items"
   lblItemCount_MyCheckouts	Tamaño de fuente	10.5

6. El contenedor horizontal conMyCheckouts se usará para contener una etiqueta de encabezado y una galería de préstamos Establezca sus propiedades como se muestra a continuación.

   Control	Propiedad	Valor
   conMyCheckouts	Espacio	20
   conMyCheckouts	Padding Top	20
   conMyCheckouts	Padding Left	20
   conMyCheckouts	Padding Right	20
   conMyCheckouts	Desbordamiento vertical	Overflow.Scroll
   conMyCheckouts	Visible	!locShowReturnConfirmation

7. Agregue una etiqueta al control conMyCheckouts - lblMyCheckoutsHeader.

   Control	Propiedad	Valor
   Agregar una etiqueta a conMyCheckouts	Asignar nombre	lblMyCheckoutsHeader
   lblMyCheckoutsHeader	Texto	"Mis préstamos"
   lblMyCheckoutsHeader	Align in Container	AlignInContainer.Stretch
   lblMyCheckoutsHeader	Espesor de fuente	FontWeight.Semibold
   lblMyCheckoutsHeader	Tamaño de fuente	15
   lblMyCheckoutsHeader	X	707*1
   lblMyCheckoutsHeader	Y	265*1

8. Agregar una galería vertical en blanco a conMyCheckouts - galMyCheckouts

   Control	Propiedad	Valor
   Agregar una galería vertical en blanco a conMyCheckouts	Asignar nombre	galMyCheckouts
   galMyCheckouts	Artículos	Sort(Filter('Item Checkouts','Created By'.User=gblCurrUser.User,'Checkout Status'='Checkout Statuses'.Active),'Created On',Ascending)
   galMyCheckouts	TemplateSize	130

9. Agregue un botón al control galMyCheckouts - btnMyCheckouts_Background.

   Control	Propiedad	Valor
   Agregar un botón a galMyCheckouts	Asignar nombre	btnMyCheckouts_Background
   btnMyCheckouts_Background	X	5
   btnMyCheckouts_Background	a	0
   btnMyCheckouts_Background	Rellenar	Blanco
   btnMyCheckouts_Background	Altura	Parent.TemplateHeight - 20
   btnMyCheckouts_Background	Ancho	Parent.TemplateWidth - Self.X*2

10. Agregue una imagen al control galMyCheckouts - imgMyCheckouts_Item.

    Control	Propiedad	Valor
    Agregar una imagen a galMyCheckouts	Asignar nombre	imgMyCheckouts_Item
    imgMyCheckouts_Item	X	5
    imgMyCheckouts_Item	Y	0
    imgMyCheckouts_Item	Ancho	125
    imgMyCheckouts_Item	Altura	110
    imgMyCheckouts_Item	ImagePosition	ImagePosition.Fill
    imgMyCheckouts_Item	Image	ThisItem.Item.Image.Full

11. Agregue una etiqueta al control galMyCheckouts - lblIMyCheckouts_ItemName.

    Control	Propiedad	Valor
    Agregar una etiqueta a galMyCheckouts	Asignar nombre	lblIMyCheckouts_ItemName
    lblIMyCheckouts_ItemName	Y	imgMyCheckouts_Item.Y + 5
    lblIMyCheckouts_ItemName	X	imgMyCheckouts_Item.X + imgMyCheckouts_Item.Width +20
    lblIMyCheckouts_ItemName	Texto	ThisItem.Name
    lblIMyCheckouts_ItemName	Ancho	btnMyCheckouts_Background.Width - Self.X
    lblIMyCheckouts_ItemName	Tamaño de fuente	10.5
    lblIMyCheckouts_ItemName	FontWeight	FontWeight.Semibold

12. Agregue una etiqueta al control galMyCheckouts - lblMyCheckouts_DueDate.

    Control	Propiedad	Valor
    Agregar una etiqueta a galMyCheckouts	Asignar nombre	lblMyCheckouts_DueDate
    lblMyCheckouts_DueDate	X	lblIMyCheckouts_ItemName.X
    lblMyCheckouts_DueDate	Y	lblIMyCheckouts_ItemName.Y + lblIMyCheckouts_ItemName.Height
    lblMyCheckouts_DueDate	Texto	With({varDays:DateDiff(Today(),Switch(ThisItem.'Checkout Duration','Checkout Durations'.'7 days',DateAdd(ThisItem.'Created On',7,Days),'Checkout Durations'.'30 days',DateAdd(ThisItem.'Created On',30,Days)))},If(varDays<0,"Overdue by "&0-varDays&" days","Due in "&varDays&" days"))
    lblMyCheckouts_DueDate	Alineación vertical	Inferior
    lblMyCheckouts_DueDate	Ancho	btnMyCheckouts_Background.Width - Self.X
    lblMyCheckouts_DueDate	Tamaño de fuente	10.5

13. Agregue un botón al control galMyCheckouts - btnCheckoutsForeground.

    Control	Propiedad	Valor
    Agregar un botón a galMyCheckouts	Asignar nombre	btnCheckoutsForeground
    btnCheckoutsForeground	HoverFill	RGBA(128, 128, 128, .06)
    btnCheckoutsForeground	Todos los demás Fill excepto Hover Fill	Transparente
    btnCheckoutsForeground	X	btnMyCheckouts_Background.X
    btnCheckoutsForeground	Y	btnMyCheckouts_Background.Y
    btnCheckoutsForeground	Ancho	btnMyCheckouts_Background.Width

14. Agregue un botón al control galMyCheckouts - btnMyCheckouts_Return.

    Control	Propiedad	Valor
    Agregar un botón a galMyCheckouts	Asignar nombre	btnMyCheckouts_Return
    btnMyCheckouts_Return	Texto	"Devolución"
    btnMyCheckouts_Return	X	lblIMyCheckouts_ItemName.X + 20
    btnMyCheckouts_Return	Y	lblMyCheckouts_DueDate.Y + lblMyCheckouts_DueDate.Height
    btnMyCheckouts_Return	Ancho	96
    btnMyCheckouts_Return	OnSelect	Patch('Item Checkouts',ThisItem,{'Checkout Status':'Checkout Statuses'.Returned});UpdateContext({locSelectedItemForReturn:ThisItem.Item,locShowReturnConfirmation: true });

15. Ahora establezca la propiedad Fill Portions para los controles comMyCheckouts y conItemTypes_MyCheckouts como se muestra a continuación: los tipos de elementos cubren el 25% de la pantalla y el 75% restante lo cubre la lista de mis préstamos.

    Control	Propiedad	Valor
    conMyCheckouts	Fill Portions	3
    conItemTypes_MyCheckouts	Fill Portions	1

16. Agregue un contenedor vertical al control conParent_MyCheckouts - conReturnConfirmation.

    Control	Propiedad	Valor
    Agregar un contenedor vertical a conParent_MyCheckouts	Asignar nombre	conReturnConfirmation
    conReturnConfirmation	Espacio	20
    conReturnConfirmation	Padding Left	20
    conReturnConfirmation	Padding Top	80
    conReturnConfirmation	Padding Right	20
    conReturnConfirmation	Fill Portions	3
    conReturnConfirmation	Visible	locShowReturnConfirmation

17. Agregue una imagen al control conReturnConfirmation - imgReturnConfirmation.

    Control	Propiedad	Valor
    Agregar una imagen a conReturnConfirmation	Asignar nombre	imgReturnConfirmation
    imgReturnConfirmation	Ancho	200
    imgReturnConfirmation	Altura	200
    imgReturnConfirmation	ImagePosition	ImagePosition.Fill
    imgReturnConfirmation	Image	pedido de compra

18. Agregue una etiqueta al control conReturnConfirmation - lblReturnInfoMessage.

    Control	Propiedad	Valor
    Agregar una etiqueta a conReturnConfirmation	Asignar nombre	lblReturnInfoMessage
    lblReturnInfoMessage	X	707*1
    lblReturnInfoMessage	Y	225*1
    lblReturnInfoMessage	Texto	"Ya está todo listo. Devuelva "&locSelectedItemForReturn.Name&" a "&LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Address'&"."
    lblReturnInfoMessage	Ancho	300*1
    lblReturnInfoMessage	Altura	44
    lblReturnInfoMessage	Fuente	Segoe UI
    lblReturnInfoMessage	Tamaño de fuente	10.5
    lblReturnInfoMessage	Alineación	Alinear.Centro

19. Agregue una etiqueta al control conReturnConfirmation - lblReturnHelpMessage.

    Control	Propiedad	Valor
    Agregar una etiqueta a conReturnConfirmation	Asignar nombre	lblReturnHelpMessage
    lblReturnHelpMessage	X	707*1
    lblReturnHelpMessage	Y	225*1
    lblReturnHelpMessage	Texto	"Si desea cancelar y ayuda, póngase en contacto con:"
    lblReturnHelpMessage	Ancho	400*1
    lblReturnHelpMessage	Altura	32*1
    lblReturnHelpMessage	Fuente	Segoe UI
    lblReturnHelpMessage	Tamaño de fuente	10.5
    lblReturnHelpMessage	Alineación vertical	VerticalAlign.Bottom

20. Agregue una galería vertical en blanco al control conReturnConfirmation - galReturnAdminContact.

    Control	Propiedad	Valor
    Agregar una galería vertical en blanco a conReturnConfirmation	Asignar nombre	galReturnAdminContact
    galReturnAdminContact	TemplateSize	100
    galReturnAdminContact	Altura	100
    galReturnAdminContact	Rellenar	If(gblThemeDark.ColorValue("#141414"),gblThemeHiCo,Black,White)
    galReturnAdminContact	Ancho	400
    galReturnAdminContact	ShowScrollbar	false
    galReturnAdminContact	Artículos	[1]

21. Agregue una imagen al control galReturnAdminContact - imgReturnAdmin_Photo.

    Control	Propiedad	Valor
    Agregar una imagen a galReturnAdminContact	Asignar nombre	imgReturnAdmin_Photo
    imgReturnAdmin_Photo	X	10
    imgReturnAdmin_Photo	Y	(Parent.TemplateHeight - Self.Height) / 2
    imgReturnAdmin_Photo	Ancho	64
    imgReturnAdmin_Photo	Altura	64
    imgReturnAdmin_Photo	Image	If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserPhotoV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'))

22. Agregue una etiqueta al control galReturnAdminContact - lblReturnAdmin_DisplayName.

    Control	Propiedad	Valor
    Agregar una etiqueta a galReturnAdminContact	Asignar nombre	lblReturnAdmin_DisplayName
    lblReturnAdmin_DisplayName	X	imgReturnAdmin_Photo.X + imgReturnAdmin_Photo.Width + 10
    lblReturnAdmin_DisplayName	Y	imgReturnAdmin_Photo.Y
    lblReturnAdmin_DisplayName	Texto	If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin').displayName)
    lblReturnAdmin_DisplayName	Altura	32*1
    lblReturnAdmin_DisplayName	Ancho	Parent.Width - Self.X - 80
    lblReturnAdmin_DisplayName	Fuente	Segoe UI
    lblReturnAdmin_DisplayName	Tamaño de fuente	10.5
    lblReturnAdmin_DisplayName	Font Weight	Semibold
    lblReturnAdmin_DisplayName	VerticalAlign	VerticalAlign.Top

23. Agregue una etiqueta al control galReturnAdminContact - lblReturnAdmin_JobTitle.

    Control	Propiedad	Valor
    Agregar una etiqueta a galReturnAdminContact	Asignar nombre	lblReturnAdmin_JobTitle
    lblReturnAdmin_JobTitle	X	imgReturnAdmin_Photo.X + imgReturnAdmin_Photo.Width + 10
    lblReturnAdmin_JobTitle	Y	lblReturnAdmin_DisplayName.Y + lblReturnAdmin_DisplayName.Height
    lblReturnAdmin_JobTitle	Texto	If(!IsBlank(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin'),Office365Users.UserProfileV2(LookUp(Items,Item=locSelectedItemForReturn.Item).'Item Type'.'Checkout Admin').jobTitle)
    lblReturnAdmin_JobTitle	Altura	32*1
    lblReturnAdmin_JobTitle	Ancho	Parent.Width - Self.X - 80
    lblReturnAdmin_JobTitle	Fuente	Segoe UI
    lblReturnAdmin_JobTitle	Tamaño de fuente	10.5
    lblReturnAdmin_JobTitle	Font Weight	Semibold
    lblReturnAdmin_JobTitle	VerticalAlign	VerticalAlign.Top

24. Agregue una imagen al control galReturnAdminContact - imgReturnAdmin_Chat.

    Control	Propiedad	Valor
    Agregar una imagen a galReturnAdminContact	Asignar nombre	imgReturnAdmin_Chat
    imgReturnAdmin_Chat	X	Parent.Width - Self.Width - 20
    imgReturnAdmin_Chat	Y	(Parent.TemplateHeight - Self.Height)/2
    imgReturnAdmin_Chat	Ancho	32
    imgReturnAdmin_Chat	Altura	32
    imgReturnAdmin_Chat	PaddingTop	4
    imgReturnAdmin_Chat	paddingBottom	4
    imgReturnAdmin_Chat	PaddingLeft	4
    imgReturnAdmin_Chat	PaddingRight	4
    imgReturnAdmin_Chat	ImagePosition	ImagePosition.Fit
    imgReturnAdmin_Chat	Image	If(gblThemeDark||gblThemeHiCo,ChatDark,Chat)
    ImgReturnAdmin_Chat	OnSelect	With( {varUserName: Office365Users.UserProfileV2(locSelectedItem.'Item Type'.'Checkout Admin').userPrincipalName}, If( Param("hostClientType") = "web", Launch( "https://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ), Launch( "msteams://teams.microsoft.com/l/chat/0/0?users=" & varUserName & "&topicName=&message=Hi!", {}, LaunchTarget.New ) ) )

25. Agregue un botón al control conReturnConfirmation - btnReturnBackToHome.

    Control	Propiedad	Valor
    Agregar un botón a conReturnConfirmation	Asignar nombre	btnReturnBackToHome
    btnReturnBackToHome	X	40
    btnReturnBackToHome	Y	105
    btnReturnBackToHome	Ancho	160
    btnReturnBackToHome	Tamaño de fuente	10.5
    btnReturnBackToHome	Font Weight	Semibold
    btnReturnBackToHome	Texto	"Volver a la página principal"
    btnReturnBackToHome	Button Type	Estándar

Conectar pantallas

En este paso, vamos a organizar las pantallas que diseñó para su aplicación y a conectar las tres pantallas que hemos creado en los pasos anteriores.

Actualice las siguientes expresiones para conectar las pantallas en esta aplicación.

Control	Propiedad	Valor
galItemTypes_Checkout	OnSelect	Navigate('Items Screen',ScreenTransition.Fade,{locSelectedItemType:ThisItem,locShowItems: true })
imgCheckout_Checkout	OnSelect	Navigate('My Checkouts Screen',ScreenTransition.Fade)
btnCancelCheckout	OnSelect	Navigate('Items Screen',ScreenTransition.Fade)
btnCheckoutBackToHome	OnSelect	Navigate('Items Screen',ScreenTransition.Fade)
galItems	OnSelect	Navigate('Checkout Screen',ScreenTransition.Fade,{locSelectedItem:ThisItem})
imgCheckout	OnSelect	Navigate('My Checkouts Screen',ScreenTransition.Fade)
galItemTypes_MyCheckouts	OnSelect	Navigate( 'Items Screen', ScreenTransition.Fade, { locSelectedItemType: ThisItem, locShowItems: true })
btnReturnBackToHome	OnSelect	Navigate('Items Screen',ScreenTransition.Fade)

Publicar la aplicación en Teams

En este paso, vamos a publicar la aplicación en Teams.

1. Siempre que guarde cambios en una aplicación de lienzo, se publican automáticamente solo para usted y para quien tenga permisos para modificar la aplicación.

2. Cuando termine de realizar cambios, debe publicarlos explícitamente para que estén disponibles para todos los usuarios con quién se comparta la aplicación.

3. Para conocer los pasos detallados para publicar la aplicación en Teams, consulte Publicar su aplicación en Teams

Compartir su aplicación con compañeros

En este paso, vamos a compartir la aplicación con compañeros y sus datos subyacentes con otros compañeros dentro de su empresa que no son miembros del equipo en el que está instalada la aplicación.

Para obtener más información sobre cómo compartir una aplicación, consulte Establecer permisos y compartir aplicaciones con compañeros.

Consultar también

• Conocer la arquitectura de la aplicación de ejemplo Cómo
• Personalizar aplicaciones de ejemplo
• Preguntas frecuentes de aplicaciones de ejemplo
• Usar aplicaciones de ejemplo desde la tienda de Microsoft Teams

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).