Förstå dataformulär i Microsoft PowerAppsUnderstand data forms in Microsoft PowerApps

Lägg till tre typer av kontroller, så att användaren kan bläddra efter en post, visas information om posten, och redigera eller skapa en post:Add three types of controls so that the user can browse for a record, display details about that record, and edit or create a record:

AktivitetActivity KontrollControl BeskrivningDescription
Söka efter en postBrowse for a record GallerikontrollGallery control Filtrera, sortera, söka efter och rulla igenom poster i en datakälla och välja en viss post.Filter, sort, search, and scroll through records in a data source, and select a specific record. Visa endast några fält från varje post om du, även på en liten skärm, vill visa flera poster i taget.Display only a few fields from each record to show several records at a time, even on a small screen.
Visa information om en postShow details of a record Visa formulärkontrollDisplay form control Visa flera eller alla fält för en enskild post.For a single record, display many or all fields in that record.
Redigera eller skapa en postEdit or create a record Redigera formulärkontrollEdit form control Uppdatera ett eller flera fält i en post (eller skapa en post som börjar med standardvärden) och spara ändringarna i den underliggande datakällan.Update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source.

Placera alla kontroller på en annan skärm så att de blir lättare att urskilja:Put each control on a different screen to make them easier to distinguish:

Bläddra, visa och redigera poster på tre skärmar

I det här avsnittet beskrivs hur du kan kombinera dessa kontroller med formler och därigenom skapa en heltäckande användarupplevelse.As this topic describes, combine these controls with formulas to create the overall user experience.

FörutsättningarPrerequisites

Utforska den genererade appenExplore a generated app

PowerApps kan automatiskt generera ett app utifrån en datakälla som du anger.PowerApps can automatically generate an app based on a data source that you specify. Varje app innehåller tre skärmar med kontroller, vilka beskrivits tidigare, och formler som förenar dem.Each app contains three screens with the controls described earlier and formulas that connect them. Kör dessa appar direkt, anpassa dem för dina specifika syften eller se hur de fungerar så att du kan lära dig användbara koncept som du kan tillämpa på dina egna appar.Run these apps "out of the box," customize them for your specific goals, or examine how they work so that you can learn useful concepts that apply to your own apps. I det här avsnittet ska vi titta närmare på skärmar, kontroller och formler som driver en genererad app.In the following sections, inspect the screens, controls, and formulas that drive a generated app.

BläddringsskärmenBrowse screen

Bläddringsskärmens kontroller

Den här skärmen är försedd med följande viktiga formler:This screen features these key formulas:

KontrollControl Beteende som stödsSupported behavior FormelFormula
BrowseGallery1BrowseGallery1 Visa poster från datakällan Assets.Display records from the Assets data source. Galleriets egenskap Items ställs in på en formel som baseras på datakällan Assets.The Items property of the gallery is set to a formula that's based on the Assets data source.
ImageNewItem1ImageNewItem1 Visa skärmen Redigera och skapa, där varje fält fått ett standardvärde, så att användaren lätt kan skapa en post.Display the Edit and Create screen with each field set to a default value, so that the user can easily create a record. Bildens egenskap OnSelect har fått den här formeln:The OnSelect property of the image is set to this formula:
NewForm(EditForm1);
Navigate(EditScreen1, None)
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1 (i galleriet)NextArrow1 (in the gallery) Visa skärmen Information om du vill visa flera eller alla fält för den markerade posten.Display the Details screen to view many or all fields of the currently selected record. Pilens egenskap OnSelect har fått den här formeln:The OnSelect property of the arrow is set to this formula:
Navigate(DetailScreen1, None)Navigate( DetailScreen1, None )

Den här skärmens primära kontroll, BrowseGallery1, täcker större delen av skärmen.The primary control on this screen, BrowseGallery1, covers most of the area of the screen. Användaren kan bläddra igenom galleriet och söka efter en viss post för att visa fler fält eller för att uppdatera.The user can scroll through the gallery to find a specific record to display more fields or to update.

Ange egenskapen Items för ett galleri om du vill visa poster från en datakälla i det.Set the Items property of a gallery to show records from a data source in it. Du kan t.ex. ge egenskapen värdet Assets om du vill visa poster från en datakälla med det namnet.For example, set that property to Assets to show records from a data source of that name.

Anteckning

I en genererad app ställs Items in på en formel som är betydligt mer komplicerad som standard, så att användaren kan sortera och söka efter poster.In a generated app, Items is set to a significantly more complicated formula by default so that the user can sort and search for records. Du lär dig hur du skapar formeln senare i det här avsnittet. För tillfället räcker det med den enklare versionen.You'll learn how to build that formula later in this topic; the simpler version is enough for now.

Istället för att söka efter en post som ska visas eller redigeras kan du skapa en post genom att välja symbolen "+" ovanför galleriet.Instead of finding a record to display or edit, the user can create a record by selecting the "+" symbol above the gallery. Skapa detta genom att lägga till en bildkontroll, visa symbolen "+" och ge dess egenskap OnSelect följande formel:Create this effect by adding an Image control, showing a "+" symbol in it, and setting its OnSelect property to this formula:
NewForm(EditForm1); Navigate(EditScreen1, None)NewForm( EditForm1 ); Navigate( EditScreen1, None )

Den här formeln öppnar skärmen Redigera och skapa, där det finns en redigeringsformulärskontroll med namnet EditForm1.This formula opens the Edit and Create screen, which features an Edit form control named EditForm1. Formeln växlar också över formuläret till läget New, i vilket formuläret visar datakällans standardvärden, så att användaren lätt kan skapa en post från början.The formula also switches that form into New mode, in which the form shows default values from the data source so that the user can easily create a record from scratch.

Om du vill undersöka en kontroll som visas i BrowseGallery1, så välj kontrollen i galleriets första avsnitt, vilket fungerar som en mall för alla övriga avsnitt.To examine any control that appears in BrowseGallery1, select that control in the first section of that gallery, which serves as a template for all other sections. Du kan t.ex. markera den mellersta kontrollen Etikett till vänster:For example, select the middle Label control on the left edge:

Bläddringsskärmens kontroller

I det här exemplet får kontrollens egenskap Text värdet ThisItem.AssignedTo, vilket är ett fält i datakällan Assets.In this example, the control's Text property is set to ThisItem.AssignedTo, which is a field in the Assets data source. Egenskapen Text för de övriga tre kontrollerna Etikett i galleriet har ställts in på liknande formler och de enskilda kontrollerna visar olika fält i datakällan.The Text property of the other three Label controls in the gallery are set to similar formulas, and each control shows a different field in the data source.

Markera formkontrollen (pilen) och bekräfta att dess egenskap OnSelect har ställts in på följande formel:Select the Shape control (the arrow), and confirm that its OnSelect property is set to this formula:
Navigate(DetailScreen1, None)Navigate( DetailScreen1, None )

Om du hittar en post i BrowseGallery1 kan du välja pilen för den posten om du vill visa mer information om den i DetailScreen1.If the user finds a record in BrowseGallery1, the user can select the arrow for that record to show more information about it in DetailScreen1. När du markerar en pil ändras värdet för egenskapen Selected för BrowseGallery1.By selecting an arrow, the user changes the value of the Selected property of BrowseGallery1. I den här appen fastställer den här egenskapen vilken post visas inte bara i DetailScreen1, men även, om användaren väljer att uppdatera posten, på skärmen Redigera och skapa.In this app, that property determines which record appears in not only DetailScreen1 but also, if the user decides to update the record, the Edit and Create screen.

InformationsskärmDetail screen

Informationsskärmens kontroller

Den här skärmen är försedd med följande viktiga formler:This screen features these key formulas:

KontrollControl Beteende som stödsSupported behavior FormelFormula
DetailForm1DetailForm1 Visar en post i datakällan AssetsDisplays a record in the Assets data source Ställ in egenskapen DataSourceAssets.Set the DataSource property to Assets.
DetailForm1DetailForm1 Anger vilken post som ska visas.Determines which record to display. Visar den post, i en genererad app, som användaren har valt i galleriet.In a generated app, displays the record that the user selected in the gallery. Ställ in egenskapen Item för den här kontrollen på följande värde:Set the Item property of this control to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
KortkontrollerCard controls Visar ett enskilt fält i en post i en formulärvisningskontroll.In a Display form control, displays a single field in a record. Ställ in egenskapen DataField på namnet för ett fält, angivet inom dubbla citattecken (t.ex. "Name").Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageBackArrow1ImageBackArrow1 Om användaren väljer den här kontrollen öppnas BrowseScreen1.When the user selects this control, opens BrowseScreen1. Ställ in egenskapen OnSelect på den här formeln:Set the OnSelect property to this formula:
Back()Back()
ImageDelete1ImageDelete1 När du väljer den här kontrollen tas en post bort.When the user selects this control, deletes a record. Ställ in egenskapen OnSelect på den här formeln:Set the OnSelect property to this formula:
Remove(Assets, BrowseGallery1.Selected)Remove( Assets, BrowseGallery1.Selected )
ImageEdit1ImageEdit1 Om du väljer den här kontrollen öppnas skärmen Redigera och skapa med den aktuella posten.When the user selects this control, opens the Edit and Create screen to the current record. Ställ in egenskapen OnSelect på den här formeln:Set the OnSelect property to this formula:
Navigate(EditScreen1, None)Navigate( EditScreen1, None )

Överst på skärmen finns tre bilder utanför DetailForm1 som fungerar som knappar som samordnar appens tre skärmar.At the top of the screen, three images sit outside of DetailForm1 and act as buttons, orchestrating between the three screens of the app.

DetailForm1 dominerar den här skärmen och visar den post som du har valt i galleriet (eftersom formulärets egenskap Item har ställts in på BrowseGallery1.Selected).DetailForm1 dominates this screen and displays the record that the user selected in the gallery (because the form's Item property is set to BrowseGallery1.Selected). Formulärets egenskap DataSource tillhandahåller även metadata om datakällan, t.ex. användarvänliga visningsnamn för respektive fält.The DataSource property of the form also provides metadata about the data source, such as a user-friendly display name for each field.

DetailForm1 innehåller flera kortkontroller.DetailForm1 contains several Card controls. Du kan antingen välja kortkontrollen själv eller den kontroll som den innehåller om du vill ha ytterligare information.You can select either the Card control itself or the control that it contains to discover additional information.

Informationskort och kortkontroller som valts under redigeringen

Egenskapen DataField för en kortkontroll avgör vilket fält som kortet visar.The DataField property of a Card control determines which field the card displays. I det här fallet ställs egenskapen in på AssetID.In this case, that property is set to AssetID. Kortet innehåller en Etikett för vilken egenskapen Text har ställts in på Parent.Default.The card contains a Label control for which the Text property is set to Parent.Default. Den här kontrollen visar kortets Default-värde, vilket du ställer in genom egenskapen DataField.This control shows the Default value for the card, which is set through the DataField property.

I en genererad app låses kortkontrollerna som standard.In a generated app, Card controls are locked by default. När ett kort är låst är det vissa egenskaper du inte kan ändra på, t.ex. DataField, och för dessa egenskaper är formelfältet inte tillgängligt.When a card is locked, you can't modify some properties, such as DataField, and the formula bar is unavailable for those properties. Den här begränsningen säkerställer att dina anpassningar inte bryter mot den genererade appens grundläggande funktioner.This restriction helps ensure that your customizations don't break the basic functionality of the generated app. Du kan dock ändra vissa egenskaper för ett kort och dess kontroller i den högra rutan:However, you can change some properties of a card and its controls in the right-hand pane:

Informationsskärm med öppet alternativfönster

Du kan ange vilka fält som ska i den högra rutan, och i vilken typ av kontroller varje fält visas.In the right-hand pane, you can select which fields to display and in which kind of control each field displays.

Redigera/skapa-skärmenEdit/Create screen

Informationsskärmens kontroller

Den här skärmen är försedd med följande viktiga formler:This screen features these key formulas:

KontrollControl Beteende som stödsSupported behavior FormelFormula
EditForm1EditForm1 Visar en post i datakällan Assets.Displays a record in the Assets data source. Ställ in egenskapen DataSourceAssets.Set the DataSource property to Assets.
EditForm1EditForm1 Anger vilken post som ska visas.Determines which record to display. Visar den post, i en genererad app, som användaren har valt i BrowseScreen1.In a generated app, displays the record that the user selected in BrowseScreen1. Ställ in egenskapen Item till följande värde:Set the Item property to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
KortkontrollerCard controls En formulärredigeringskontroll tillhandahåller kontroller så att du kan redigera ett eller flera fält i en post.In a Edit form control, provides controls so that the user can edit one or more fields in a record. Ställ in egenskapen DataField på namnet för ett fält, angivet inom dubbla citattecken (t.ex. "Name").Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageCancel1ImageCancel1 När du väljer den här kontrollen raderas eventuella pågående ändringar, och skärmen Information visas.When the user selects this control, discards any changes in progress, and opens the Details screen. Ställ in egenskapen OnSelect på den här formeln:Set the OnSelect property to this formula:
ResetForm(EditForm1); Back()ResetForm( EditForm1 ); Back()
ImageAccept1ImageAccept1 När du väljer den här kontrollen skickas ändringar till datakällan.When the user selects this control, submits changes to the data source. Ställ in egenskapen OnSelect på den här formeln:Set the OnSelect property to this formula:
SubmitForm(EditForm1)SubmitForm( EditForm1 )
EditForm1EditForm1 Om ändringarna godkänns visas föregående skärm på nytt.If changes are accepted, returns to the previous screen. Ställ in egenskapen OnSuccess på den här formeln:Set the OnSuccess property to this formula:
Back()Back()
EditForm1EditForm1 Om ändringarna inte godkänns, fortsätter den aktuella skärmen att visas, så att du kan åtgärda eventuella problem och försöka skicka igen.If changes aren't accepted, remain on the current screen so that the user can fix any issues and try to submit again. Lämna egenskapen OnFailure tom.Leave the OnFailure property blank.
LblFormError1LblFormError1 Om ändringarna inte godkänns visas ett felmeddelande.If changes aren't accepted, shows an error message. Ställ in egenskapen Text på följande formel:Set the Text property to this value:
EditForm1.ErrorEditForm1.Error

Liksom på skärmen Information så dominerar en formulärkontroll med namnet EditForm1 skärmen Redigera och skapa.As in the Details screen, a form control, named EditForm1, dominates the Edit and Create screen. Dessutom har egenskapen Item för EditForm1 ställts in på BrowseGallery1.Selected, så att formuläret visar den post som du valde i BrowseScreen1.In addition, the Item property of EditForm1 is set to BrowseGallery1.Selected, so the form displays the record that the user selected in BrowseScreen1. När skärmen Information visar respektive fält som skrivskyddat, så kan du uppdatera värdet för ett eller flera fält med hjälp av kontrollerna i EditForm1.While the Details screen shows each field as read-only, the user can update the value of one or more fields by using the controls in EditForm1. Den använder också egenskapen DataSource för att få åtkomst till metadata om den här datakällan, t.ex. de användarvänliga visningsnamnen för respektive fält och den plats där ändringarna ska sparas.It also uses the DataSource property to access metadata about this data source, such as the user-friendly display name for each field and the location where changes should be saved.

Om du avbryter en uppdatering genom att markera "X"-ikonen tar funktionen ResetForm bort alla ej borttagna ändringar, och funktionen Back öppnar skärmen Information.If the user selects the "X" icon to cancel an update, the ResetForm function discards any unsaved changes, and the Back function opens the Details screen. Både skärmen Information och Redigera och skapa visar samma post fram till det att du väljer en annan på BrowseScreen1.Both the Details screen and the Edit and Create screen show the same record until the user selects a different one on BrowseScreen1. Fälten i den posten förblir inställda på de värden sparades senast, och inte på några eventuella ändringar som du gjort men inte sparat.The fields in that record remain set to the values that were most recently saved, not any changes that the user made and then abandoned.

Om du ändrar ett eller flera värden i formuläret och sedan väljer bockikonen så skickar funktionen SubmitForm användarens ändringar till datakällan.If the user changes one or more values in the form and then selects the "checkmark" icon, the SubmitForm function sends the user's changes to the data source.

  • Om ändringarna sparas så kör formulärets OnSuccess-formel, och funktionen Back() öppnar informationsskärmen så att den uppdaterade posten visas.If the changes are successfully saved, the form's OnSuccess formula runs, and the Back() function opens the detail screen to show the updated record.
  • Om ändringarna inte har sparats så kör formulärets OnFailure-formel, men den ändrar inte någonting eftersom den är tom.If the changes aren't successfully saved, the form's OnFailure formula runs, but it doesn't change anything because it's blank. Skärmen Redigera och skapa k förblir öppen så att du kan ångra ändringarna eller åtgärda felet.The Edit and Create screen remains open so that the user can either cancel the changes or fix the error. LblFormError1 visar ett användarvänligt felmeddelande, till vilket formulärets egenskap Error har ställts in.LblFormError1 shows a user-friendly error message, to which the form's Error property is set.

Liksom en formulärvisningskontroll innehåller en formulärredigeringskontroll kortkontroller, vilka innehåller andra kontroller som visar olika fält i en post:As with a Display form control, an Edit form control contains Card controls, which contain other controls that show different fields in a record:

Redigeringskort och kortkontroller som valts under redigeringen

I föregående bild kortet visar det markerade kortet AssetID-fältet och innehåller en textinmatningskontroll, så att du kan redigera fältets värde.In the previous image, the selected card shows the AssetID field and contains a Text input control so that the user can edit the value of that field. (Informationsskärmen, däremot, visar samma fält i en Etikett som är skrivskyddad.) Textinmatningskontrollen har en Default-egenskap som har ställts in på Parent.Default.(In contrast, the detail screen shows the same field in a Label control, which is read-only.) The Text input control has a Default property, which is set to Parent.Default. Om du höll på att skapa en post, istället för att redigera den, så skulle den kontrollen ha visat ett initialt värde som kan ändras för den nya posten.If the user were creating a record instead of editing one, that control would show an initial value that the user can change for the new record.

I den högra rutan kan du visa eller dölja de enskilda korten, och ordna eller konfigurera dem, så att du kan visa fält i olika typer av kontroller.In the right-hand pane, you can show or hide each card, rearrange them, or configure them to show fields in different types of controls.

Redigeringsskärm med öppet alternativfönster

Bygg en app från grundenBuild an app from scratch

Genom att förstå hur PowerApps genererar en app kan du lättare på egen hand skapa en som använder samma byggblock och formler som beskrivs ovan i det här avsnittet.By understanding how PowerApps generates an app, you can build one yourself that uses the same building blocks and formulas discussed earlier in this topic.

Identifiera testdataIdentify test data

Få ut mesta möjliga av det här avsnittet genom att välja en datakälla som du kan experimentera med.To get the most from this topic, start with a data source with which you can experiment. Den bör innehålla testdata som du kan läsa och uppdatera utan problem.It should contain test data that you can read and update without concern.

Anteckning

Om du använder en SharePoint-lista eller en Excel-tabell som innehåller kolumnnamn med blanksteg som datakälla ersätter PowerApps blankstegen med ”_x0020_”.If you use a SharePoint list or an Excel table that contains column names with spaces as your data source, PowerApps will replace the spaces with "_x0020_". Till exempel visas "Kolumnens namn" i SharePoint eller Excel som "Kolumnens_x0020_namn" i PowerApps när det visas i datalayouten eller används i en formel.For example, "Column Name" in SharePoint or Excel will appear as "Column_x0020_Name" in PowerApps when displayed in the data layout or used in a formula.

Skapa en SharePoint-lista med namnet "Ice Cream" som innehåller följande information:To follow the rest of this topic exactly, create a SharePoint list named "Ice Cream" that contains this data:

SharePoint-listan Ice Cream

  • Skapa en app för telefoner från början och anslut den till datakällan.Create an app from blank, for phones, and connect it to your data source.

    Anteckning

    Appar för surfplattor är snarlika, men du vill kanske använda en annan skärmlayout, så att du kan utnyttja det extra skärmutrymmet på bästa sätt.Tablet apps are very similar, but you may want a different screen layout to make the most of the extra screen space.

    Exemplen i resten av avsnittet baseras på en datakälla med namnet Ice Cream.The examples in the rest of the topic are based on a data source named Ice Cream.

Sök efter posterBrowse records

Skaffa information snabbt från en post genom att söka efter den i en bläddringsskärm i ett galleri.Get a quick piece of information from a record by finding it in a gallery on a browse screen.

  1. Lägg till ett Lodrätt galleri och ändra layouten till endast Rubrik.Add a Vertical gallery, and change the layout to Title only.

    Galleri anslutet till datakällan Ice Cream

  2. Ange galleriets Items-egenskap som Ice Cream.Set the gallery's Items property to Ice Cream.
  3. Ange egenskapen Text för den första etiketten i galleriet som ThisItem.Title, om det är inställt på något annat.Set the Text property of the first label in the gallery to ThisItem.Title if it's set to something else.

    Etiketten visar nu värdet i fältet Rubrik för varje post.The label now shows the value in the Title field for each record.

    Galleri anslutet till datakällan Ice Cream

  4. Ändra storlek på galleriet så att det fyller hela skärmen och ange egenskapen TemplateSize som 60.Resize the gallery to fill the screen, and set its TemplateSize property to 60.

    Skärmen liknar det här exemplet, vilket visar alla poster i datakällan:The screen resembles this example, which shows all records in the data source:

    Galleri anslutet till datakällan Ice Cream

Visa informationView details

Om galleriet inte visar den information du önskar, så markera pilen för en post, så öppnas informationsskärmen.If the gallery doesn't show the information that you want, select the arrow for a record to open the details screen. En formulärvisningskontroll på skärmen visar flera, eventuellt alla, fält för den post som du har valt.A Display form control on that screen shows more, possibly all, fields for the record that you selected.

Formulärvisningskontrollen använder två egenskaper för att visa posten:The Display form control uses two properties to display the record:

  • DataSource-egenskapen.DataSource property. Namnet på den datakälla som innehåller posten.The name of the data source that holds the record. Den här egenskapen fyller fälten i den högra panelen och fastställer respektive fälts visningsnamn och datatyp (sträng, nummer, datum osv).This property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) of each field.
  • Item-egenskapen.Item property. Den post som ska visas.The record to display. Den här egenskapen ofta är ansluten till egenskapen Selected för gallerikontrollen, så att du kan välja en post i gallerikontrollen och sedan gå in på detaljnivå i posten.This property is often connected to the Selected property of the Gallery control so that the user can select a record in the Gallery control and then drill into that record.

När du anger egenskapen DataSource kan du lägga till och ta bort fält i panelen till höger och ändra hur de visas.When the DataSource property is set, you can add and remove fields through the right-hand pane and change how they're displayed.

På den här skärmen kan du inte ändra postens värden vare sig oavsiktligt eller avsiktligt.On this screen, users can't intentionally or accidentally change any values of the record. Formulärvisningskontrollen är skrivskyddad, så den kan inte användas för att ändra en post.The Display form control is a read-only control, so it won't modify a record.

Lägga till en Formulärvisningskontroll:To add a Display form control:

  1. Lägga till en skärm och lägg sedan till en formulärvisningskontroll på denAdd a screen, and then add a Display form control to it
  2. Ge formulärkontrollens egenskap DataSource värdet 'Ice Cream'.Set the DataSource property of the form control to 'Ice Cream'.

Du kan markera de fält som ska visas på skärmen i panelen till höger, och vilken typ av kort som ska visas för respektive fält.In the right-hand pane, you can select the fields to display on your screen and which type of card to display for each field. När du gör ändringar i den högra panelen ställs egenskapen DataField för respektive kortkontroll in på det fält som användaren ska interagera med.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field that the user will interact with. Skärmen bör se ut ungefär så här:Your screen should resemble this example:

Visningsformulär för datakällan Ice Cream

Slutligen måste vi ansluta den formulärvisningskontrollen till gallerikontrollen så att vi kan se detaljinformationen för en viss post.Finally, we need to connect the Display form control to the Gallery control so that we can look at details for a specific record. Så snart vi är klara med inställningen av egenskapen Item visas den första posten från galleriet i vårt formulär.As soon as we complete setting the Item property, the first record from the gallery will appear in our form.

  • Ställ in egenskapen Item för Visa formulärvisningskontrollenGallery1.Selected.Set the Item property of the Display form control to Gallery1.Selected.

    Information om det markerade objektet visas i formuläret.The details for the selected item appear in the form.

    Visningsformulär för datakällan Ice Cream, anslutet till gallerikontrollen

Toppen!Great! Nu riktar vi in oss på navigeringen: hur du öppnar informationsskärmen från galleriskärmen och öppnar galleriskärmen från informationsskärmen.We now turn to navigation: how a user opens the details screen from the gallery screen and opens the gallery screen from the details screen.

  • Lägg till en knappkontroll och ställ in dess egenskap Text så att Back visas, och ställ in dess egenskap OnSelectBack().Add a Button control to the screen, set its Text property to show Back, and set its OnSelect property to Back().

    Med den här formeln kommer du tillbaka till galleriet där du avslutar visningen av information.This formula returns the user back to the gallery when they finish viewing details.

    Visningsformulär för datakällan Ice Cream med en bakåtknapp

Låt oss gå tillbaka till gallerikontrollen och lägga till lite navigering i vår informationsskärm.Now, let's return to the Gallery control and add some navigation to our detail screen.

  1. Växla till den första skärmen, som är värd för kontrollen Galleri, och markera pilen i det första objektet i galleriet.Switch to the first screen, which is hosting our Gallery control, and select the arrow in the first item in the gallery.

  2. Ange formens egenskap OnSelect enligt den här formeln:Set the OnSelect property of the shape to this formula:
    Navigate(Screen2, None)Navigate( Screen2, None )

    Visningsformulär för datakällan Ice Cream med en bakåtknapp

  3. Visa informationen om ett objekt genom att trycka på F5 och sedan markera en pil i galleriet.Press F5, and then select an arrow in the gallery to show the details for an item.

  4. Gå tillbaka till produktgalleriet genom att klicka på bakåtknappen och tryck sedan på Esc.Select the Back button to return to the gallery of products, and then press Esc.

RedigeringsinformationEditing details

Vår avslutande kärnaktivitet ändrar en posts innehåll, vilket du åstadkommer i en formulärredigeringskontroll.Finally, our last core activity is changing the contents of a record, which users accomplish in an Edit form control.

Formulärredigeringskontrollen använder två egenskaper för att visa och redigera posten:The Edit form control uses two properties to display and edit the record:

  • DataSource-egenskapen.DataSource property. Namnet på den datakälla som innehåller posten.The name of the data source that holds the record. Precis som i formulärvisningskontrollen fyller den här egenskapen fälten i den högra panelen och fastställer respektive fälts visningsnamn och datatyp (sträng, nummer, datum osv).Just as with the Display form control, this property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) for each field. Den här egenskapen anger även om varje fälts värde är giltigt innan det skickas till den underliggande datakällan.This property also determines whether each field's value is valid before submitting it to the underlying data source.
  • Item-egenskapen.Item property. Den post som ska redigeras, och som ofta är ansluten till gallerikontrollens egenskap Selected.The record to edit, which is often connected to the Selected property of the Gallery control. På så sätt kan du välja en post i gallerikontrollen, visa den på detaljskärmen och redigera den på skärmen Redigera och skapa.That way, you can select a record in the Gallery control, show it in the details screen, and edit it in the Edit and Create screen.

Lägga till en formulärredigeringskontroll:To add an Edit form control:

  1. Lägg till en skärm, lägga till en redigera formulärredigeringskontroll och ge sedan formulärets egenskap DataSource värdet 'Ice Cream'.Add a screen, add an Edit form control, and then set the form's DataSource property to 'Ice Cream'.
  2. Ställ in egenskapen ItemGallery1.Selected.Set the Item property to Gallery1.Selected.

Nu kan du välja vilka fält som ska visas på din skärm.You can now select the fields to display on your screen. Du kan även välja vilken typ av kort som ska visas för respektive fält.You can also select which type of card to display for each field. När du gör ändringar i den högra panelen ställs egenskapen DataField för respektive kortkontroll in på det fält som användaren ska interagera med.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field your user will interact with. Skärmen bör se ut ungefär så här:Your screen should resemble this example:

Visningsformulär för datakällan Ice Cream

Dessa två egenskaper är desamma som egenskaperna på formulärvisningskontrollen.These two properties are the same as the properties on the Display form control. Och med enbart dessa kan vi visa information om en post.And with these alone, we can display the details of a record.

Formulärredigeringskontrollen går ännu längre med funktionen SubmitForm, som används för att skriva tillbaka ändringar till datakällan.The Edit form control goes further by offering the SubmitForm function to write back changes to the data source. Du använder detta med en knapp- eller bildkontroll för att spara användarens ändringar.You use this with a button or image control to save a user's changes.

  • Lägg till en knappkontroll och ställ in dess Text-egenskap så att Save visas, och ställ in dess OnSelect-egenskap enligt följande formel:Add a Button control, set its Text property to show Save, and set its OnSelect property to this formula:
    SubmitForm( Form1 )SubmitForm( Form1 )

Redigeringsformulär för datakällan Ice Cream

Lägga till navigering till och från den här skärmen:To add navigation to and from this screen:

  1. Lägg till ytterligare en knappkontroll, ställ in dess Text-egenskap så att Cancel visas och ange dess OnSelect-egenskap enligt följande formel:Add another Button control, set its Text property to show Cancel, and set its OnSelect property to this formula:
    ResetForm(Form1); Back()ResetForm( Form1 ); Back()

    Den här formeln tar bort alla osparade ändringar och öppnar den föregående skärmen.This formula discards any unsaved edits and opens the previous screen.

    Visningsformulär för datakällan Ice Cream

  2. Ställ in formulärets egenskap OnSuccessBack().Set the OnSuccess property of the form to Back().

    När uppdateringarna sparas öppnas den föregående skärmen (i det här fallet informationsskärmen) automatiskt.When updates are successfully saved, the previous screen (in this case, the details screen) opens automatically.

    Redigeringsformulär med den tillagda OnSuccess-regeln

  3. Lägg till en knapp på visningsskärmenkontroll och ställ dess egenskap Text så att Edit visas, och ställ in dess egenskap OnSelect enligt följande formel:On the Display screen, add a button, set its Text property to show Edit, and set its OnSelect property to this formula:
    Navigate(Screen3, None)Navigate( Screen3, None )

    Visningsformulär med den tillagda knappen Redigera

Du har skapat en grundläggande app med tre skärmar för att visa och ange data.You've built a basic app with three screens for viewing and entering data. Du kan testa den genom att visa galleriskärmen och sedan trycka på F5 (eller markera förhandsvisningsknappen i skärmens övre vänstra hörn).To try it out, show the gallery screen, and then press F5 (or select the forward arrow "Preview" button near the upper-left corner of the screen). Den rosa punkten indikerar var användaren klickar eller trycker på skärmen för varje steg.The pink dot indicates where the user clicks or taps the screen at each step.

Testa glassappen

Skapa en postCreate a record

Du interagerar med samma redigeringsformulär både när du uppdaterar och när du skapar poster.The user interacts with the same Edit form to both update and create records. När du vill skapa en post växlar funktionen NewForm om formuläret till läget New.When the user wants to create a record, the NewForm function switches the form to New mode.

När formuläret är i läget New läge ställs värdet för respektive fält på datakällans standardvärden.When the form is in New mode, the value of each field is set to the defaults of the data source. Den post som tillhandahölls för formulärets egenskap Item ignoreras.The record that's provided to the form's Item property is ignored.

När du är redo att spara den nya posten körs SubmitForm.When the user is ready to save the new record, SubmitForm runs. När formuläret har skickats växlas det tillbaka till EditMode.After the form is successfully submitted, the form is switched back to EditMode.

På den första skärmen lägger du till en New-knapp:On the first screen, you'll add a New button:

  1. På skärmen med galleriet lägger du till en knappkontroll.On the screen with the gallery, add a Button control.
  2. Ställ in knappens egenskap TextNew och dess egenskap OnSelect enligt följande formel:Set the button's Text property to New and its OnSelect property to this formula:
    NewForm( Form1 ); Navigate( Screen3, None )NewForm( Form1 ); Navigate( Screen3, None )

    Den här formeln växlar om redigera formulärredigeringskontrollen för Screen3 till läget New och öppnar skärmen så att du kan fylla i den.This formula switches the Edit form control on Screen3 to New mode and opens that screen so that the user can fill it in.

Visningsformulär med den tillagda knappen Redigera

När du öppnar skärmen Redigera och skapa så är formuläret tomt och redo för att ta emot ett objekt.When the Edit and Create screen opens, the form is empty, ready for the user to add an item. När du markerar knappen Save ser funktionen SubmitForm till att en post skapas istället för att uppdateras.When the user selects the Save button, the SubmitForm function ensures that a record is created instead of being updated. Om du markerar knappen Cancel växlar funktionen ResetForm tillbaka formuläret till läget Edit läge och funktionen Back öppnar skärmen för att bläddra i galleriet.If the user selects the Cancel button, the ResetForm function switches the form back to Edit mode, and the Back function opens the screen for browsing the gallery.

Ta bort en postDelete a record

  1. Lägg till en knapp på visningsskärmen och ställ in dess egenskap Text så att Delete visas.On the Display screen, add a button, and set its Text property to show Delete..
  2. Ställ in knappens egenskap OnSelect enligt den här formeln:Set the button's OnSelect property to this formula:
    Remove('Ice Cream', Gallery1.Selected); Back()Remove( 'Ice Cream', Gallery1.Selected ); Back()

    Visningsformulär med den tillagda knappen Redigera

Hantera felHandling errors

I den här appen uppstår ett fel när värdet för ett fält inte är giltigt, när ett obligatoriskt fält är tom, när du är bortkopplad från nätverket eller när något annat problem dyker upp.In this app, an error occurs when the value of a field is not valid, a required field is blank, you're disconnected from the network, or any number of other problems pop up.

Om SubmitForm misslyckas av någon anledning misslyckas så visar formulärredigeringskontrollens egenskap Error ett felmeddelande för användaren.If SubmitForm fails for any reason, the Error property of the Edit form control contains an error message to show the user. Med den här informationen kan du lösa problemet och skicka om ändringen, eller så kan du avbryta uppdateringen.With this information, the user should be able to correct the issue and resubmit the change, or they can cancel the update.

  1. Lägg till kontrollen Etikett på skärmen Redigera och skapa och flytta den så att den hamnar under knappen Save.On the Edit and Create screen, add a Label control, and move it just below the Save button. När du väljer att använda den här kontrollen när du sparar ändringarna blir det lättare att upptäcka eventuella fel.Any error will be easy to see after the user selects this control to save changes.

  2. Ställ in egenskapen Text för kontrollen Etikett så att Form1.Error visas.Set the Text property of the Label control to show Form1.Error.

    Visningsformulär med den tillagda knappen Redigera

I en app som PowerApps genererar från data, så ställs egenskapen AutoHeight för den här kontrollen in på true, så att inget utrymme förbrukas om inga fel inträffar.In an app that PowerApps generates from data, the AutoHeight property on this control is set to true so that no space is consumed if no error occurs. Egenskaperna Height och Y för formulärredigeringskontrollen kontroll justeras också dynamiskt för att ta hänsyn till att den här kontrollen växer när ett fel inträffar.The Height and Y properties of the Edit form control are also adjusted dynamically to account for this control growing when an error occurs. Mer information om hur du genererar appar från befintliga data, och granska dessa egenskaper.For more details, generate an app from existing data, and inspect these properties. Textrutekontrollen för fel är väldigt kort om inget fel har inträffat. Du kan behöva öppna vyn Advanced (som är tillgänglig på fliken View) om du vill välja den här kontrollen.The text-box control for errors is very short when no error has occurred, you may need to open the Advanced view (available on the View tab) to select this control.

App från ett dataredigeringsformulär med markerad feltextkontroll

App från ett dataredigeringsformulär med markerad formulärkontroll

Uppdatera dataRefresh data

Datakällan uppdateras varje gång som du öppnar appen, men du kan vilja uppdatera posterna i galleriet utan att stänga appen.The data source is refreshed whenever the user opens the app, but the user might want to refresh the records in the gallery without closing the app. Lägg till en uppdateringsknapp knappen så att användaren kan välja att uppdatera data manuellt:Add a Refresh button so that the user can select it to manually refresh the data:

  1. Lägg till en knappkontroll på skärmen med gallerikontrollen, och ställ in dess egenskap Text så att Refresh visas.On the screen with the Gallery control, add a Button control and set its Text property to show Refresh.

  2. Ställ in den här kontrollens egenskap OnSelect enligt den här formeln:Set the OnSelect property of this control to this formula:
    Refresh('Ice Cream')Refresh( 'Ice Cream' )

    Uppdatera datakällan

I den app som PowerApps genererade från data var det två kontroller högst upp på bläddringsskärmen som vi inte diskuterade.In the app that PowerApps generated from data, we neglected to discuss two controls at the top of the Browse screen. Genom att använda dessa kontroller kan du söka efter en eller flera poster, sortera listan över poster i stigande eller fallande ordning, eller både och.By using these controls, the user can search for one or more records, sort the list of records in ascending or descending order, or both.

Sortera och söka efter kontroller på bläddringsskärmen

När du väljer sorteringsknappen byter galleriets sorteringsordning riktning.When the user selects the sort button, the sort order of the gallery reverses. Om du vill skapa det här beteendet använder du kontextvariabeln för att spåra i vilken riktning galleriet sorteras.To create this behavior, we use a context variable to track the direction in which the gallery is sorted. När du klickar på knappen uppdateras variabeln uppdateras och riktningen kastas om.When the user selects the button, the variable is updated, and the direction reverses. Sorteringsknappens egenskap OnSelect har ställts in enligt formeln: UpdateContext ({SortDescending1:! SortDescending1})The OnSelect property of the sort button is set to this formula: UpdateContext( {SortDescending1: !SortDescending1} )

Funktionen UpdateContext skapar kontextvariabeln SortDescending1 om den inte redan finns.The UpdateContext function creates the SortDescending1 context variable if it doesn't already exist. Funktionen läser variabelns värde och ställer in det på logiska motsatsen med hjälp av !The function will read the value of the variable and set it to the logical opposite by using the ! -operatorn.operator. Om värdet är true blir den false.If the value is true, it becomes false. Om värdet är false blir den true.If the value is false, it becomes true.

Formeln för gallerikontrollens egenskap Items använder den här kontextvariabeln, tillsammans med texten i kontrollen TextSearchBox1:The formula for the Items property of the Gallery control uses this context variable, along with the text in the TextSearchBox1 control:

Gallery1.Items = Sort( If( IsBlank(TextSearchBox1.Text),
                           Assets,
                           Filter( Assets,
                                   TextSearchBox1.Text in Text(ApproverEmail) ) ),
                        ApproverEmail,
                        If(SortDescending1, Descending, Ascending) )

Låt oss ta det här steg för steg:Let's break this down:

  • På utsidan, vi har funktionen Sort, vilken har tre argument: en tabell, ett fält att sortera efter och sorteringsriktningen.On the outside, we have the Sort function, which takes three arguments: a table, a field on which to sort, and the direction in which to sort.

    • Sorteringsriktningen hämtas från den kontextvariabel som växlar när du väljer kontrollen ImageSortUpDown1.The sort direction is taken from the context variable that toggles when the user selects the ImageSortUpDown1 control. Värdet true/false översätts till konstanterna Descending och Ascending.The true/false value is translated to the constants Descending and Ascending.
    • Fältet för att sortera efter är låst till ApproverEmail.The field to sort on is fixed to ApproverEmail. Om du ändrar vilka fält som visas i galleriet måste du ändra det här argumentet också.If you change the fields that appear in the gallery, you'll need to change this argument too.
  • På insidan har vi har funktionen Filter som använder en tabell som argument och ett uttryck som ska utvärderas för varje enskild post.On the inside, we have the Filter function, which takes a table as an argument and an expression to evaluate for each record.

    • Tabellen är den råa datakällan Assets, vilket är utgångspunkten före filtrering och sortering.The table is the raw Assets data source, which is the starting point before filtering or sorting.
    • Uttrycket söker efter en instans av strängen i TextSearchBox1 i fältet ApproverEmail.The expression searches for an instance of the string in TextSearchBox1 within the ApproverEmail field. Om du ändrar vilka fält som ska visas i galleriet, måste du också uppdatera det här argumentet.Again, if you change the fields that appear in the gallery, you'll also need to update this argument.
    • Om TextSearchBox1 är tomt vill användaren kanske visa alla poster, och funktionen Filter kringgås.If TextSearchBox1 is empty, the user wants to show all records, and the Filter function is bypassed.

Detta är bara ett exempel. Du kan skapa din egen formel för egenskapen Items, beroende på vad din app behöver, genom att skapa Filter, Sort och andra funktioner och operatorer tillsammans.This is but one example; you can craft your own formula for the Items property, depending on the needs of your app, by composing Filter, Sort, and other functions and operators together.

SkärmdesignScreen design

Hittills har vi inte diskuterat några andra metoder för att distribuera kontroller över flera skärmar.So far, we haven't discussed other ways to distribute controls across screens. Det beror på att du har flera alternativ, och att det bästa valet beror på din specifika apps behov.That's because you have many options, and the best selection depends on your specific app's needs.

Eftersom fastigheter är så begränsade så vill du förmodligen söka efter, visa och redigera/skapa på olika skärmar.Because real estate on phone screens is so limited, you probably want to browse, display, and edit/create on different screens. I det här avsnittet öppnar funktionerna Navigate och Back respektive skärm.In this topic, the Navigate and Back functions open each screen.

På en surfplatta kan du bläddra, visa och redigera/skapa på två eller t.o.m. en enda skärm.On a tablet, you can browse, display, and edit/create on two or even one screen. För det senare krävs ingen av funktionerna Navigate eller Back.For the latter, no Navigate or Back function would be required.

Om du arbetar på samma skärm måste du ta hänsyn till att det inte går att ändra valet i Gallery och eventuellt förlora ändringar som gjorts i formulärredigeringskontrollen.If the user is working on the same screen, you need to be careful that the user can't change the selection in the Gallery and potentially lose edits in the Edit form control. Om du vill förhindra att användaren väljer en annan post när ändringar av en annan post inte har sparats ännu, så ställ in galleriets egenskap Disabled enligt följande formel:To keep the user from selecting a different record when changes to another record haven't been saved yet, set the Disabled property of the gallery to this formula:
EditForm.UnsavedEditForm.Unsaved