Personalizar un diseño de galería en PowerAppsCustomize a gallery layout in PowerApps

Después de generar una aplicación automáticamente en PowerApps, personalice la pantalla de exploración que aparece de forma predeterminada.After you generate an app automatically in PowerApps, customize the browse screen, which appears by default. Especifique qué diseño se usará, qué columnas se mostrarán y qué columnas se deben usar al ordenar y filtrar registros.Specify which layout to use, which columns to show, and which columns to use when sorting and filtering records.

Requisitos previosPrerequisites

Puede consultar este tutorial para ver los conceptos generales o puede seguirlo exactamente y completar estos pasos.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Crear una conexión desde PowerApps a SharePoint.Create a connection from PowerApps to SharePoint.
  2. Cree una lista de SharePoint, llamada AppGen, que contenga estas columnas.Create a SharePoint list, named AppGen, that contains these columns.

    Columnas de ejemplo de SharePoint

  3. Agregue estos elementos a la lista que acaba de crear.Add these items to the list that you just created.

    Muestreo de los datos

  4. Genere una aplicación automáticamente basándose en la lista recién creada.Generate an app automatically based on the list that you just created.
  5. En la barra de navegación izquierda, haga clic o pulse en uno de los iconos de la esquina superior derecha para cambiar a la vista en miniatura.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Alternancia de las vistas

  1. En la barra de navegación izquierda, pulse o haga clic en la miniatura superior para asegurarse de que BrowseScreen1 (PantallaDeExploración1) esté seleccionada.In the left navigation bar, click or tap the top thumbnail to ensure that BrowseScreen1 is selected.

    Miniatura de BrowseScreen1

    BrowseScreen1 (PantallaDeExploración1) muestra AccountID (IdDeCuenta) y Title (Título) para cada elemento en la lista de SharePoint.BrowseScreen1 shows the AccountID and Title of each item in the SharePoint list.

    La pantalla de exploración muestra los títulos y los identificadores de cuenta

    Después, especifique que aparecerá el valor de OrderDate de cada elemento en lugar del valor de AccountID.Next, you'll specify that the OrderDate for each item will appear instead of the AccountID.

  2. Haga clic o pulse en AccountID para el primer elemento de la pantalla.Click or tap the AccountID for the first item on the screen.

    Al hacer clic o pulsar en un elemento de la interfaz de usuario (llamado control), se selecciona y aparece un borde de selección con controladores de tamaño alrededor de ese control.When you click or tap a UI element (called a control), you select it, and a selection border with resize handles appears around that control.

    Seleccionar el cuerpo del primer elemento

  3. En el panel derecho, abra la lista Title1 (Título1) y haga pulse o haga clic en OrderDate (FechaDePedido).In the right-hand pane, open the Title1 list, and then click or tap OrderDate.

    Mostrar título

    BrowseScreen1 refleja el cambio.BrowseScreen1 reflects your change.

    Diseño con fechas

Para más información sobre las galerías, consulte Mostrar una lista de elementos en PowerApps.For more information about galleries, see Show a list of items in PowerApps.

Establecer las columnas de ordenación y búsquedaSet the sort and search columns

  1. Seleccione el control Gallery haciendo clic o pulsando en cualquier registro, excepto en el primero.Select the Gallery control by clicking or tapping any record except the first one.

    Seleccionar la galería

  2. Cerca de la esquina superior izquierda, asegúrese de que la lista de propiedades muestra Items.Near the upper-left corner, ensure that the property list shows Items.

    Propiedad Items

    El valor de esta propiedad, que aparece en la barra de fórmulas, determina no solo el origen de los datos que aparecen en la pantalla, sino también las columnas de filtro y ordenación.The value of this property, which appears in the formula bar, determines not only the source of data that appears on the screen but also the filter and sort columns.

    Por ejemplo, la barra de fórmulas podría contener esta fórmula de forma predeterminada.For example, the formula bar might contain this formula by default.

    Propiedad Items predeterminada

    Con esta fórmula, los usuarios pueden mostrar solamente los registros que comienzan por una o varias letras en la columna AccountID (IdDeCuenta).Based on this formula, users can show only those records that start with one or more letters in the AccountID column.

    Columnas de búsqueda predeterminadas

    Si un usuario escribe la letra "A" en la barra de búsqueda, la pantalla muestra el registro para Europa.If a user typed, for example, the letter "A" into the search bar, the screen would show the record for Europa. El título de ese registro no coincide con el criterio de búsqueda, pero el identificador de cuenta sí.The title of that record doesn't match the search criterion, but the account ID does. Más adelante en este procedimiento, cambiaremos la fórmula para filtrar los registros según la columna Título.Later in this procedure, you'll change the formula to filter records based on the Title column.

    En cualquier aplicación generada, los usuarios pueden ordenar los registros alfabéticamente en orden ascendente o descendente haciendo clic o pulsando en el botón de ordenación cerca de la esquina superior derecha.In any generated app, users can sort records alphabetically in ascending or descending order by clicking or tapping the sort button near the upper-right corner. Esta fórmula especifica que los registros se ordenarán en función de la columna AccountID.This formula specifies that the records will be sorted based on the AccountID column.

    Columna de ordenación predeterminada

    Más adelante en este procedimiento, cambiaremos la fórmula para ordenar los registros según la columna Title.Later in this procedure, you'll change the formula to sort the records based on the Title column instead.

  3. En la barra de fórmulas, reemplace ambas instancias de AccountID (IdDeCuenta) por Title (Título) (incluidas las comillas dobles de la segunda instancia).In the formula bar, replace both instances of AccountID with Title (including the double quotation marks around the second instance).

    La barra de fórmulas ahora contendrá una fórmula que se parece a la de este ejemplo:The formula bar should now contain a formula that resembles this example:
    SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))SortByColumns(Filter(AppGen, StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))

    Nota: El número que aparece después de TextSearchBox podría ser mayor, según las acciones que haya realizado previamente.Note: The number that appears after TextSearchBox might be higher, depending on what actions you took previously. Sin embargo, la fórmula seguirá funcionando según lo previsto.However, the formula should still work as expected.

Prueba de ordenación y búsquedaTest sorting and searching

  1. Para abrir el modo de vista previa, presione F5 (o haga clic o pulse en el icono de reproducción situado cerca de la esquina superior derecha).Open Preview mode by pressing F5 (or by clicking or tapping the play button near the upper-right corner).

    Abrir el modo de vista previa

  2. Cerca de la esquina superior derecha de BrowseScreen1, haga clic o pulse en el botón de ordenación una o varias veces para cambiar el orden alfabético de ordenación entre ascendente y descendente.Near the upper-right corner of BrowseScreen1, click or tap the sort button one or more times to change the alphabetical sort order between ascending and descending.

    Probar el botón de ordenación

  3. En el cuadro de búsqueda, escriba una o varias letras para mostrar solo aquellos registros cuyo título empiece por la letra o letras que escriba.In the search box, type one more letters to show only those records of which the title starts with the letter or letters that you type.

    Probar la barra de búsqueda

  4. Quite todo el texto de la barra de búsqueda y cierre el modo de vista previa; para ello, presione F5 (o haga clic o pulse en el icono Cerrar situado debajo de la barra de título de PowerApps).Remove all text from the search bar, and then close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar for PowerApps).

    Cerrar el modo de vista previa

Cambiar el título de la pantallaChange the title of the screen

  1. Haga clic o pulse en el título de la pantalla para seleccionarla.Click or tap the title of the screen to select it.

    Seleccionar el título de la pantalla

  2. Asegúrese de que la lista muestra Text, y, después, escriba el nombre que desee, entre comillas dobles, en la barra de fórmulas.Ensure that the property list shows Text, and then type the name that you want, surrounded by double quotation marks, in the formula bar.

    Actualizar el título de la pantalla

    BrowseScreen1 refleja el cambio.BrowseScreen1 reflects your change.

    Nuevo título de pantalla

Pasos siguientesNext steps

  • Presione Ctrl+S para guardar los cambios.Press Ctrl-S to save your changes.
  • Personalice los formularios en la aplicación; para ello, muestre, oculte o reordene los campos que muestran los formularios.Customize the forms in the app by showing, hiding, and reordering the fields that the forms show.