Painike moderni ohjausobjekti pohjaan perustuvissa sovelluksissa

Painike-ohjausobjekti tarjoaa napsautettavan elementin, joka käynnistää pohjaan perustuvan sovelluksen toiminnot. Se tarjoaa joustavat muotoilu- ja kattavat vuorovaikutusominaisuudet.

Kuvaus

Painike-ohjausobjekti tarjoaa napsautettavan elementin, joka käynnistää sovelluslogiikan, kun se on valittuna. Käytä sitä lomakkeen lähettämiseen, siirtymiseen, vahvistuksiin ja mihin tahansa vuorovaikutukseen, joka edellyttää käyttäjän syötettä. Ohjausobjekti tukee kuvake- ja tekstiyhdistelmiä, täyttä fonttityyliä ja useita ulkoasutyylejä sujuvan teeman avulla. Tämän ohjausobjektin tärkeimpiä ominaisuuksia ovat Teksti, Ulkoasu ja OnSelect.

Huomautus

Tässä artikkelissa kuvataan päivitettyä nykyaikaista Button-ohjausobjektia. Lisätietoja edellisestä versiosta on kohdassa Viimeaikaiset päivitykset.

Yleiset

Text – Painikkeessa näkyvä selite. Tukee mitä tahansa tekstiä tai Power Fx -kaavaa, joka antaa tulokseksi merkkijonon. Tämän ominaisuuden avulla voit määrittää tai muuttaa painikkeen tekstiä.

Visible – Onko ohjausobjekti näkyvissä vai piilotettuna. Näytä tai piilota painike sovelluksen tilan mukaan Power Fx -kaavan avulla.

Toimintatapa

OnSelect – Määritä OnSelect-ominaisuuden avulla, mitä tapahtuu, kun painike valitaan. Sovellus reagoi näin, kun käyttäjä valitsee painikkeen. Ohjausobjekti on käytettävissä: OnSelect käynnistyy myös, kun käyttäjä painaa Enter-näppäintä tai välilyöntiä, kun ohjausobjektissa on näppäimistö kohdistus.

Vinkki

Yleisiä OnSelect-toimintoja ovat muun muassa seuraavat:

  • Navigate(Screen2) – Toiseen näyttöön siirtyminen
  • SubmitForm(Form1) - Lähetä lomake
  • Set(varName, value) - Määritä muuttuja
  • Notify("Message", NotificationType.Success) – Näytä ilmoitus
  • Patch(DataSource, Record, Updates) - Tietojen päivittäminen

DisplayMode – Salliiko ohjausobjekti käyttäjän syötteen (Muokkaa), näyttääkö käyttäjä vain tietoja (Näytä) vai onko se poissa käytöstä (Ei käytössä). Kun painike on poistettu käytöstä, se himmennetään visuaalisesti eikä OnSelect käynnisty.

Aloitusopas

Painike modernin painikkeen ohjausobjekti on yksi Power Appsin yleisimmin käytetyistä ohjausobjekteista. Painikkeen ytimessä on kaksi tärkeää elementtiä: käyttäjien näkemä teksti ( Teksti-ominaisuus ) ja toiminto, joka tapahtuu, kun se valitaan ( OnSelect-ominaisuus ). Kun ymmärrät nämä perusteet, voit luoda vuorovaikutteisia sovelluksia, jotka vastaavat käyttäjien antamia tietoja.

Aseta painikkeen teksti

Voit muuttaa painikkeessa näkyvää tekstiä määrittämällä Text-ominaisuuden :

  • Ominaisuudet-ruudussa: Kirjoita teksti suoraan Teksti-kenttään
  • Kaavan käyttö: Text = "Click Me" tai Text = "Save " & TextInput1.Text

Tee painikkeista vuorovaikutteisia

Määritä, mitä tapahtuu, kun käyttäjät valitsevat painikkeen OnSelect-ominaisuuden avulla:

  1. Valitse painike sovelluksessasi.
  2. Etsi Ominaisuudet-ruudusta OnSelect-ominaisuus .
  3. Anna Power Fx -kaava, kuten Navigate(NextScreen).

Painikkeen ominaisuuksien määrittäminen

Power Apps käyttää virtaviivaistettua lähestymistapaa ohjausobjektien muokkaamiseen.

  • Valitse pohjan painike:
    • Muokkaa perusominaisuuksia oikealla olevan Ominaisuudet-ruudun avulla.
    • Käytä edistyneen kaavan luomiseen kaavariviä yläreunassa.
    • Siirry yksityiskohtaisia mukautuksia varten lisäominaisuuksiin.

Koko ja sijainti

X – Ohjausobjektin vasemman reunan ja pääsäilön (näytön, jos pääsäilöä ei ole) vasemman reunan välinen etäisyys.

Y – Ohjausobjektin yläreunan ja pääsäilön (näytön, jos pääsäilöä ei ole) yläreunan välinen etäisyys.

Leveys – Ohjausobjektin vasemman ja oikean reunan välinen etäisyys. Oletusarvo on 96.

Korkeus – Ohjausobjektin ylä- ja alareunan välinen etäisyys. Oletusarvo on 32.

Align – Painikkeen sisällön vaakatasaus ohjausobjektin sisällä. Align Hyväksyy luetteloinnin arvot: Align.Left, Align.Center, Align.Right, Align.Justify.

VerticalAlign – Painikkeen sisällön pystytasaus. VerticalAlign Hyväksyy luetteloinnin arvot: VerticalAlign.Top, VerticalAlign.Middle, VerticalAlign.Bottom.

PaddingTop – Etäisyys painikkeen sisällön ja ohjausobjektin yläreunan välillä.

PaddingBottom – Etäisyys painikkeen sisällön ja ohjausobjektin alareunan välillä.

PaddingLeft – Etäisyys painikkeen sisällön ja ohjausobjektin vasemman reunan välillä.

PaddingRight – Etäisyys painikkeen sisällön ja ohjausobjektin oikean reunan välillä.

Tyyli ja teema

Ulkoasu – Painikkeen visuaalinen tyyli. ButtonAppearance Hyväksyy luetteloinnin arvot:

Arvo Kuvaus
ButtonAppearance.Primary Täytetty painike brändivärin avulla. Oletus.
ButtonAppearance.Secondary Hienovarainen täytetty tyyli, toissijainen korostus.
ButtonAppearance.Outline Korostettu painike, jolla ei ole taustan täyttöä.
ButtonAppearance.Subtle Minimaalinen muotoilu, ei reunaa tai täyttöä.
ButtonAppearance.Transparent Ei näkyvää muotoilua; sekoitetaan taustaan.

BasePaletteColor – Ohjausobjektin värivalikoiman luomiseen käytettävä teeman perusväri. Voit käyttää painikkeessa eri teemaväriä muuttamalla tätä ominaisuutta.

Kuvake – Fluent-kuvakkeen nimi, joka näytetään painikkeen tekstin rinnalla (esimerkiksi "Add", "Save", "Delete"). Jätä tyhjäksi vain teksti -painiketta varten.

IconStyle – Hahmontaako kuvake ääriviivalla vai täytetyllä tyylillä. IconStyle Hyväksyy luetteloinnin arvot: IconStyle.Outline (oletus) tai IconStyle.Filled.

IconRotation – Kuvakkeeseen käytetty kierto asteina. Oletusarvo on 0.

Asettelu – Kuvakkeen sijainti suhteessa painikkeen tekstiin. ButtonLayout Hyväksyy luetteloinnin arvot:

Arvo Kuvaus
ButtonLayout.IconBefore Kuvake näkyy tekstin vasemmalla puolella. Oletus.
ButtonLayout.IconAfter Kuvake näkyy tekstin oikealla puolella.
ButtonLayout.IconOnly Vain kuvake näkyy; ei tekstiotsikkoa.

Fontti – Painikkeen selitteen fonttiperhe.

Koko – Painikkeen otsikon fonttikoko pisteinä.

Color – Painikkeen otsikon tekstin väri.

FontWeight – Painikkeen otsikon paksuus. FontWeight Hyväksyy luetteloinnin arvot: FontWeight.Bold, FontWeight.Semibold, FontWeight.Normal (oletus), FontWeight.Lighter.

Kursivoitu – Näytetäänkö painikkeen selite kursivoituna.

Underline – Näytetäänkö rivi painikkeen selitteen tekstin alla.

Strikethrough – Onko painikeotsikon tekstin keskellä yliviivaus.

BorderColor – Ohjausobjektin reunan väri.

BorderStyle – Ohjausobjektin reunan tyyli. BorderStyle Hyväksyy luetteloinnin arvot: BorderStyle.Solid, BorderStyle.Dashed, BorderStyle.Dotted, tai BorderStyle.None.

BorderThickness – Ohjausobjektin reunan paksuus kuvapisteinä.

RadiusTopLeft – Ohjausobjektin vasemman yläkulman kulmasäde.

RadiusTopRight – Ohjausobjektin oikean yläkulman kulmasäde.

RadiusBottomLeft – Ohjausobjektin vasemman alakulman kulmasäde.

RadiusBottomRight – Ohjausobjektin oikean alakulman kulmasäde.

Lisäominaisuudet

AccessibleLabel – Selite, jonka näytönlukuohjelmat lukevat. Anna kuvaava kuvaus, kun pelkkä painikkeen selite ei riitä (esimerkiksi käytettäessä vain kuvake -painiketta).

Tooltip – Ohjeteksti, joka ilmestyy näkyviin osoittimen ollessa painikkeen päällä.

ContentLanguage – Ohjausobjektin sisällön näyttökieli, jos se eroaa sovelluksen kielestä.

Esimerkki

Seuraavassa YAML-esimerkissä näkyy lähetä-painike ja Peruuta-painike, jossa on OnSelect-toimintoja:

- SubmitButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Submit"
      OnSelect: |
        SubmitForm(DataForm1);
        Navigate(SuccessScreen)
      Appearance: =ButtonAppearance.Primary
      Icon: ="Checkmark"
      IconStyle: =IconStyle.Outline
      Layout: =ButtonLayout.IconBefore
      AccessibleLabel: ="Submit the form"
      Tooltip: ="Submit your response"
      Width: =120
      Height: =36

- CancelButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Cancel"
      OnSelect: =Navigate(HomeScreen)
      Appearance: =ButtonAppearance.Outline
      Width: =120
      Height: =36

Yleiset painikemallit

Seuraavassa on tavallisia painiketoteutuksia:

Siirtymispainike:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

Tietojen lähettäminen:

OnSelect = SubmitForm(Form1); Notify("Data saved!", NotificationType.Success)

Muuttujapäivitys:

OnSelect = Set(IsVisible, !IsVisible)

Vahvistusikkunassa:

OnSelect = If(
    Confirm("Are you sure you want to delete this item?"),
    Remove(Collection1, ThisItem)
)

Viimeaikaiset päivitykset

Painike modernin painikkeen päivitetty versio sisältää seuraavat parannukset ja toimintamuutokset.

Ominaisuuden uudelleennimeäminen

Seuraavat ominaisuudet nimetään uudelleen. Päivitä kaikki sovelluksesi kaavat, jotka viittaavat vanhoisiin ominaisuuksien nimiin.

Edellinen-ominaisuus Uusi ominaisuus
FontSize Size
FontColor Color
FontItalic Italic
FontUnderline Underline
FontStrikethrough Strikethrough
BorderRadius RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, RadiusBottomRight

Poistetut ominaisuudet

Poistettu ominaisuus Huomautuksia
AcceptsFocus Poistettu. Nykyaikainen Painike-ohjausobjekti hyväksyy aina näppäimistön kohdistuksen. Korvaamista ei tarvita.

Virheenkorjauksia ja parannuksia

  • Päivitetyt luetteloinnit: Appearance, Layoutja IconStyle käyttävät nyt kirjoitettuja Power Fx -luettelointeja (ButtonAppearance, ButtonLayout, IconStyle) merkkijonoarvojen sijaan, mikä parantaa IntelliSense-arvoa ja vähentää kaavavirheitä.
  • Työkaluvihjeiden tuki: Uusi Tooltip ominaisuus näyttää selittävän tekstin hiiren osoittimen päällä.
  • Reunan parannukset: Lisätty BorderStyle ja BorderThickness tarkempaa rajavalvontaa varten. Neljä kulmakohtaista ominaisuutta korvaa BorderRadius itsenäisen kulman ohjausobjektin.
  • Täysi fonttiohjausobjekti: Fontin ominaisuudet ovat nyt yhdenmukaisia muiden nykyaikaisten ohjausobjektien kanssa. Käytä Font-, - Size, Color- Italic, Underline-, - ja -parametria Strikethrough.

Katso myös