Lägg till en listruta, en listruta, en kombinationsruta eller alternativknappar i en arbetsyteapp

Artikel
04/18/2023

Visa en enstaka kolumn med data (till exempel från en tabell med flera kolumner) i en app för arbetsytor så att användarna kan välja ett eller flera objekt i en lista.

Lägg till en listruta för att tillåta användarna att välja mer än ett alternativ.
Lägg till en listruta eller kombinationsruta för att ta mindre plats på en skärm.
Lägg till en uppsättning alternativknappar för att åstadkomma en särskild designeffekt.

Det här avsnittet fokuserar på listrutor och alternativknappar, men samma principer gäller för nedrullningsbara listrutor.

Förutsättningar

Skapa en tom arbetsyteapp.
Lär dig att lägga till och konfigurera kontroller.

Skapa en enkel lista

Lägg till en Listruta-kontroll, döp den till MyListBox och ställ in dess Items-egenskap enligt följande uttryck:

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

Din designer ser ut ungefär så här:
Välj Ikoner på fliken Infoga, markera cirkeln och flytta den så att den hamnar under MyListBox:
Lägg till en triangel och en rektangel och ordna sedan figurerna i en rad under MyListBox:

Ställ in egenskapen Synlig för följande figurer på följande funktioner:

Form	Ställ in funktionen Synlig på
cirkel	`If("circle" in MyListBox.SelectedItems.Value, true)`
triangel	`If("triangle" in MyListBox.SelectedItems.Value, true)`
rektangel	`If("rectangle" in MyListBox.SelectedItems.Value, true)`

Håll ned Alt-tangenten och välj en eller flera figurer i MyListBox.

Endast den eller de figurer som du markerar visas.

Under de här stegen har du använt ett uttryck för att skapa en lista med objekt. Du kan använda detta även för andra element i din verksamhet. Du kan t.ex. använda en listrutekontroll för att visa produktbilder, produktbeskrivningar osv.

Lägg till alternativknappar

På fliken Start väljer du Ny skärm och sedan Tom.
Välj Kontroller på fliken Infoga och välj sedan Alternativ.
Byt namn på Radio-kontrollen till Val och ställ in dess egenskap Items på följande formel:
["red","green","blue"]

Ändra storlek på kontrollen, om så behövs, så att alla alternativ visas.
Välj Ikoner på fliken Infoga och markera sedan cirkeln.
Ställ in cirkelns egenskap Fyllning på följande funktion:
If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

I den här formeln ändrar cirkeln färg beroende på vilken alternativknapp du väljer.
Flytta cirkeln och placera den under Radio-kontroll, som i följande exempel:
Håll ned Alt-tangenten och välj en annan alternativknapp för ändra färg på cirkeln.

Lägg till ett objekt i en befintlig lista

Lägg till en Knapp-kontroll och ge den namnet "btnReset".

Vet du inte hur du lägger till, namnger och konfigurerar en kontroll?

Ange egenskapen OnSelect på btnReset till den här formeln:

ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})

Ställ in egenskapen text på btnReset till"Reset".
Lägg en listruta kontroll som heter lbItems, och ställ in Items egendomMyItems.
Håll Alt-tangenten intryckt och tryck på knappen Återställ.

Anteckning

Listrutan ska fylla i objekten från samlingen "MyItems".
Ordna listrutan och knappen så att de är uppradade vertikalt.
Lägg till en Textinmatning kontroll och namnge den "txtAdd".
Set Text egendom txtAdd till"".
Lägg till en Knapp-kontroll och ge den namnet "btnAdd".
Ställ in egenskapen Text för btnAdd till"Add".
Ange egenskapen OnSelect till följande formel btnAdd:
```
Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
```
Anteckning
- Samlingsfunktionen lägger till texten från Text Input som ett objekt i samlingen.
- Återställningsfunktionen återställer Text Input till standardläget.
Ordna txtAdd och btnAdd så att de är uppradade vertikalt under lbItems och btnReset.
Förhandsgranska appen genom att trycka på F5.
Lägg till ett textvärde i txtLägg till Textinmatning-kontroll.

Tryck på knappen Lägg till.

Anteckning

Listrutan ska fylla i objekten från MyItems-samlingen.

(Valfritt) Ta bort ett objekt från en befintlig lista

Lägg till en Knapp-kontroll och ge den namnet "btnDelete".
Ställ in egenskapen Text för btnDelete till"Delete".
Ange egenskapen OnSelect till följande formel btnDelete:
```
Remove(MyItems, lbItems.Selected)
```
Ordna btnTa bort så att det är i linje vertikalt under btnReset
Förhandsgranska appen genom att trycka på F5.
Tryck på återställningsknappen för att återställa listrutan.
Tryck på ett objekt i listrutan för att välja det.

Tryck på Delete-knappen för att radera objektet.

Anteckning

Kan du berätta om dina inställningar för dokumentationsspråk? Svara i en kort undersökning. (observera att undersökningen är på engelska)

Undersökningen tar ungefär sju minuter. Inga personuppgifter samlas in (sekretesspolicy).

Dela via