Een keuzelijst, een vervolgkeuzelijst, een keuzelijst met invoervak of keuzerondjes toevoegen aan een canvas-app

Geef één kolom met gegevens (bijvoorbeeld uit een tabel met meerdere kolommen) weer in een canvas-app, zodat gebruikers een of meer items uit een lijst kunnen selecteren.

  • Voeg een keuzelijst toe, zodat gebruikers meer dan één optie kunnen kiezen.
  • Een vervolgkeuzelijst of een keuzelijst met invoervak toevoegen om minder ruimte op een scherm in te nemen.
  • Voeg een set keuzerondjes toe voor een bepaald ontwerpeffect.

In dit onderwerp worden keuzelijsten en keuzerondjes besproken, maar dezelfde principes zijn van toepassing op vervolgkeuzelijsten.

Vereisten

  1. Maak een volledig nieuwe canvas-app.
  2. Leer hoe u besturingselementen toevoegt en configureert.

Een eenvoudige lijst maken

  1. Voeg een besturingselement Keuzelijst toe met de naam MyListBox en stel de eigenschap Items in op deze expressie:

    ["circle","triangle","rectangle"]

    Uw ontwerp ziet er ongeveer als volgt uit:

    Scherm met besturingselement Keuzelijst

  2. Op het tabblad Invoegen selecteert u Pictogrammen en vervolgens de cirkel. Verplaats deze naar onder MyListBox:

    Pictogram toevoegen

  3. Voeg een driehoek en een rechthoek toe en plaats de vormen in een rij onder MyListBox:

    Vormen toevoegen

  4. Stel de eigenschap Visible van de volgende vormen in op de volgende functies:

    Shape Stel de functie Visible in op
    cirkel If("circle" in MyListBox.SelectedItems.Value, true)
    driehoek If("triangle" in MyListBox.SelectedItems.Value, true)
    rechthoek If("rectangle" in MyListBox.SelectedItems.Value, true)
  5. Selecteer een of meer vormen in MyListBox terwijl u de Alt-toets ingedrukt houdt.

    Alleen de vorm of vormen die u selecteert worden weergegeven.

Tijdens deze stappen hebt u gebruikgemaakt van een expressie om een lijst met items te maken. U kunt dit toepassen op andere elementen binnen uw bedrijf. U kunt bijvoorbeeld het besturingselement Vervolgkeuzelijst gebruiken om productafbeeldingen, productbeschrijvingen e.d. weer te geven.

Keuzerondjes toevoegen

  1. Selecteer op het tabblad Start de optie Nieuw scherm en selecteer vervolgens Leeg.

  2. Selecteer op het tabblad Invoegen de optie Besturingselementen en selecteer vervolgens Keuzerondje.

    Keuzerondje toevoegen

  3. Wijzig de naam van het besturingselement Keuzerondje in Choices en stel de eigenschap Items in op deze formule:
    ["red","green","blue"]

    Naam van besturingselement wijzigen

    Indien nodig wijzigt u het formaat van het besturingselement zodat alle opties worden weergegeven.

  4. Selecteer op het tabblad Invoegen de optie Pictogrammen en selecteer de cirkel.

  5. Stel de eigenschap Fill van de cirkel in op de volgende functie:
    If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

    Met deze formule verandert de kleur van de cirkel op basis van welk keuzerondje u selecteert.

  6. Plaats de cirkel onder het besturingselement Keuzerondje, zoals in dit voorbeeld:

    Cirkel verplaatsen onder besturingselement Keuzerondje

  7. Selecteer een ander keuzerondje terwijl u de Alt-toets ingedrukt houdt om de kleur van de cirkel te wijzigen.

Een item toevoegen aan een bestaande lijst

  1. Voeg een besturingselement Knop toe en geef dit de naam "btnReset".

    Weet u niet hoe u een besturingselement kunt toevoegen, een naam kunt geven of kunt configureren?

  2. Stel de eigenschap OnSelect van btnReset in op deze formule:

    ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
    
  3. Stel de eigenschap Text op btnReset in op "Reset".

  4. Voeg een Keuzelijst-besturingselement met de naam Items toe en stel de eigenschap Items in op MyItems.

  5. Houd de Alt-toets ingedrukt en druk op de knop Reset.

    Notitie

    De keuzelijst wordt gevuld met items uit de verzameling "MyItems".

  6. Schik de keuzelijst en de knop zo dat ze verticaal in lijn staan.

    Knop Keuzelijst.

  7. Voeg een besturingselement Tekstinvoer toe en geef dit de naam "txtAdd".

  8. Stel de eigenschap Tekst van txtAdd in op "".

  9. Voeg een besturingselement Knop toe en geef dit de naam "btnAdd".

  10. Stel de eigenschap Text van btnAdd in op "Add".

  11. Stel de eigenschap OnSelect van btnAdd in op de volgende formule:

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    Notitie

    • De functie collect voegt de tekst van de tekstinvoer toe als een item in de verzameling.
    • De resetfunctie zet de tekstinvoer terug in de standaardstatus.
  12. Schik txtAdd en btnAdd zo dat ze verticaal op een lijn staan onder lbItems en btnReset.

    Alle besturingselementen - alvorens toe te voegen.

  13. Voorbeeld van de app bekijken door op F5 te drukken.

  14. Voeg een tekstwaarde toe aan het tekstinvoerbesturingselement txtAdd.

  1. Druk op de knop Toevoegen.

    Notitie

    De keuzelijst wordt gevuld met items uit de verzameling MyItems.

(Optioneel) Een item uit een bestaande lijst verwijderen

  1. Voeg een besturingselement Knop toe en geef dit de naam "btnDelete".

  2. Stel de eigenschap Text van btnDelete in op"Delete".

  3. Stel de eigenschap OnSelect van btnDelete in op de volgende formule:

    Remove(MyItems, lbItems.Selected)
    
  4. Schik btnDelete zo dat het verticaal op een lijn staat onder btnReset

    Alle besturingselementen met knop Verwijderen.

  5. Voorbeeld van de app bekijken door op F5 te drukken.

  6. Druk op de knop Reset om de keuzelijst te resetten.

  7. Druk op een item in de keuzelijst om het te selecteren.

  1. Druk op de knop Verwijderen om een item verwijderen.

Notitie

Laat ons uw taalvoorkeuren voor documentatie weten! Beantwoord een korte enquête. (houd er rekening mee dat deze in het Engels is)

De enquête duurt ongeveer zeven minuten. Er worden geen persoonlijke gegevens verzameld (privacyverklaring).