Interactions

Interactions får en side til å reagere når noen klikker på en knapp, skriver, endrer en verdi eller setter fokus på en kontroll. Bruk hendelser til å endre midlertidige verdier og elementegenskaper, arbeide med data eller kalle støttede funksjoner.

Slik fungerer hendelser

Legg en hendelsesegenskap på et element og gi den én eller flere handlinger. Datavju lagrer oppsettet med siden eller komponenten og kjører handlingene når hendelsen oppstår. En variabel holder en midlertidig verdi mens siden er åpen. En Table lagrer poster som skal beholdes etter besøket.

Bruk States for å la en variabel eller dataverdi styre et betinget utseende. Bruk Functions for oppførsel som fortsetter mens siden er åpen, som å følge rulleposisjonen. Hyperlink på en Link og Action på en Form har allerede sine vanlige kontroller for navigasjon og innsending.

Lag en meny som åpnes og lukkes

Dette eksemplet bruker en Boolean-variabel og Click Event for å bytte statusen som vises.

1. Åpne Variables, hold pekeren over roten og bruk plusstegnet → Add Local Variable. Velg My Variable, gi den navnet menuOpen, velg Boolean og sett Default Value uttrykkelig til False.
2. Sett inn en Button under Components. Skriv Toggle menu i Plain Text-elementet under knappen.
3. Velg Button, deretter Add property, og legg til Click Event.
4. Rediger den første handlingen. Sett Action Type til Change Variable og Variable to change til menuOpen.
5. Under Change Variable With velger du Apply Function to Value. Velg Switch og deretter Done.
6. Legg til Paragraph med et underliggende Plain Text-element som inneholder Menu closed. Gi dette Plain Text-elementet en tilstand som heter Open menu, med Value of Variable → menuOpen → Is True. Sett Plain Text for denne tilstanden til Menu open.
7. Åpne Preview. Klikk på Toggle menu to ganger. Statusen endres fra Menu closed til Menu open og deretter tilbake til Menu closed.

Velg en hendelse

Velg hendelsen som passer til hvordan noen skal bruke elementet.

• Click Event kjører når det omsluttende elementet klikkes. Velg Button eller Link for å legge den til. Rediger teksten i Plain Text-elementet under.
• Change Event kjører når en kontroll bekrefter en endret verdi, for eksempel når noen velger et annet alternativ i Select.
• Input Event kjører etter hvert som en inndataverdi endres. Bruk den for et søkefelt som reagerer mens noen skriver.
• Focus Event kjører når elementet får fokus. Kontroller tastaturfokus i Preview.
• Keyup Event kjører når en tast slippes mens elementet har fokus.
• Events er en egen egenskap for dokumenthendelser: DOMContentLoaded når dokumentet er tolket, eller Load når dokumentets innlastingshendelse utløses. Den har egne kontroller for Event Type og Action Type.

Legg til, rediger og sorter handlinger

Når du legger til en hendelse, opprettes en tom handling. Åpne redigeringskontrollen og fyll den ut, eller slett handlingen før du går videre. Add Action legger til en ny handling. Dra i håndtaket for å flytte handlinger innenfor hendelsen. Bruk redigeringsikonet for å endre en handling og knappen for å slette den. Done lukker handlingsredigeringen. Vanlig sidelagring beholder oppsettet.

Prevent Default starter av. Aktiver det når handlingen skal erstatte nettleserens vanlige oppførsel, som å følge en Link. Stop Propagation starter av. Aktiver det når et klikk skal behandles av dette elementet uten også å utløse en klikkhandling på et overordnet element. La begge være av for en vanlig knapp som åpner og lukker en meny.

Velg Action Type

Ingen Action Type er valgt fra start. Velg handlingen og målet før du angir verdien.

• Change Variable: Velg Variable to change og deretter den nye verdien. Bruk det for menuOpen, en valgt kategori eller en statusmelding.
• Change Property: Velg Component to Change og en eksisterende Property to Change. Velg den nye verdien. Hvis du velger dataFilters, velger du også Data Filter to Change.
• Execute Function: Velg Select Function og fyll ut innstillingene for funksjonen. Bruk det for å lese, skrive, laste ned eller validere Dataset-data.
• Invoke Method: Velg Component to Invoke og Method to Invoke. Valgene avhenger av elementet. Dialog tilbyr Show Modal og Close Modal, mens et element med datatilkobling tilbyr Dataset-metoder.
• Use Authentication Service: Velg Select Authentication Type og Select Authentication Task for den konfigurerte innloggingstjenesten. Konfigurer den tilhørende innloggingstjenesten og øktinnstillingene før du bruker handlingen.

Verdiinnstillinger

Verdivalgene starter uten et valg. Bruk en verditype som passer variabelen eller egenskapen du vil endre.

• Boolean: Velg True eller False. Sett for eksempel menuOpen til False for en lukkeknapp.
• Number: Skriv en tallverdi. Sett for eksempel det valgte trinnet til 2.
• Text: Skriv en tekstverdi. Sett for eksempel en statusvariabel til Ready.
• Object: Velg Set as null eller Set as empty object når du nullstiller en Object-variabel.
• Value from Event: Velg This Element eller Child Element. For et underliggende element skriver du CSS-velgeren. Velg Value, Checked, Text Content eller Attribute. Når du velger Attribute, må du også angi attributtnavnet. For eksempel leser This Element → Value det valgte alternativet fra en Select.
• Apply Function to Value: Decrement trekker fra én, Increment legger til én, og Switch snur en Boolean-verdi. Switch endrer for eksempel menuOpen fra False til True.
• Data Model of Dataset: Velg Select Component with Dataset for å lese datamodellen inn i målverdien.
• Object Mapping: Tilgjengelig for Object-variabler. Velg Object Operation og legg til koblinger. Hver kobling har en målsti, Path, og en Source, som en dataverdi, et hendelseselement, en variabel eller en skrevet verdi. Velg Select Path for data inni andre verdier. Bruk det for å samle flere skjemaverdier i ett Object.

Metoder for elementer og data

For en tilkoblet, gjenbrukbar Component velger du elementet inni komponenten når du blir bedt om det. Støttede metoder omfatter Dialog-kontroller og Next page/Previous page der de er tilgjengelige. Konfigurer annen oppførsel i kildekomponenten eller på siden rundt.

• Append Component og Remove Component endrer elementstrukturen som vises. Velg målet bevisst og kontroller hele resultatet i Preview.
• Show Modal og Close Modal er tilgjengelige for Dialog. Velg Dialog som mål.
• Filter Dataset velger Column to Filter og bruker verdien fra hendelsen. Filter Dataset (local) filtrerer radene som allerede er tilgjengelige for elementet. For en Object/Array-verdi velger du Path to Filter.
• Invoke Method → Query Dataset laster det valgte elementet på nytt med elementets Data Settings, inkludert Runtime Query når det er aktivert. Bruk den etter en radendring for å holde spørringens summer oppdatert. Next page og Previous page blar i et Dataset med flere rader; en Index Query med én rad tilbyr ikke sidebytte.
• Search Dataset søker i de valgte feltene. Search fields starter med alle lesbare Dataset-felt for en privat spørring, eller feltene som returneres av en Public-spørring. Velg bestemte felt for å avgrense søket. Hvis et offentlig resultat ikke returnerer noen felt og du heller ikke velger noen, lar søket resultatet være uendret.
• Sort Dataset leser et feltvalg fra Input eller Select. Verdien er feltets kolonnenøkkel, column:asc, column:desc eller none. Bare én sorteringskolonne beholdes.
• Download File by URL og Download Files from Dataset Column laster ned de valgte filadressene. Velg den faktiske URL-en eller filkolonnen i innstillingene.

Funksjoner for data og validering

Execute Function tilbyr valgene nedenfor. Velgere for mål, felt og variabler starter tomme. Velg ressursene du vil bruke, fremfor å stole på elementets navn.

Write context lar egnede felt motta tid eller øktverdier fra serveren. La genererte nøkler bruke standardverdiene i tabellen. For en betinget skriving velger du kilden for betingelsene, og Conditions path når du bruker en Object-variabel. Kontroller om resultatet er vellykket eller har feil før du viser en bekreftelse. Tilgangskontroll og tabellvalidering gjelder fortsatt ved hver skriving.

• Check Username Availability: Velg Dataset, kolonne og variabelen som skal motta tilgjengelighetsresultatet. Bruk det før du ber om et unikt brukernavn.
• Email Validation: Velg resultatvariabelen for kontroll av e-postadressen i inndatafeltet.
• Password Validation: Velg minste og største lengde, og om du skal kreve stor bokstav, liten bokstav, tall eller spesialtegn. Velg deretter resultatvariabelen. Sett kravene slik at de passer innloggingen.
• Filter Layer Dataset: Velg laget og filteroppsettet for å endre postene som vises.
• Execute Function → Query Dataset leser lagrede Dataset-rader. Velg Select Component with Dataset og eventuelt Index Query med indeks eller Index Variable. For en lagret View leses det lagrede resultatet; komponentens Runtime Query beregnes ikke på nytt. Bruk Invoke Method → Query Dataset til det.
• Refresh Dataset oppdaterer det lagrede Dataset fra kilden. For en lagret View oppdateres det lagrede resultatet. Dette er en annen operasjon enn å kjøre en besøkskomponents Runtime Query på nytt.
• Limit Dataset: Velg komponenten med datatilkobling og grensen for antall rader.
• Insert Dataset Row: Velg Dataset du kan skrive til, og angi feltverdiene. Valgfrie Progress Variable, Success Variable og Error Variable mottar fremdrift og resultat for operasjonen.
• Update Dataset Row: Velg Dataset, Operation, Update Source og felt. Les primærnøkkelen og den nye verdien fra hendelsen, en Object-variabel eller konfigurerte verdier. For et Object velger du Primary Key Object Path. Velg Conditions for raden når oppdateringen fortsatt må oppfylle en lagret betingelse.
• Delete Dataset Row: Velg Dataset du kan skrive til, og hvor postens nøkkel skal leses fra. Test sletting bare med poster du kan kaste.
• Update Item Model Property: Velg datamodellegenskapen du trenger å endre.
• Update Layer Property: Velg lagegenskapen som skal endres.
• Rename Columns from Mapping Table: Velg Select Data Table, Select Mapping Table og koblingens kolonner for nåværende og nytt navn.
• Replace File Dataset: Velg fildatakilden som skal motta erstatningsdata.
• Download Dataset: Velg gjeldende Dataset eller Saved View Result, Control Scope, filformat og, for CSV, skilletegn og anførselstegn. Et lagret resultat laster ned sine lagrede rader.
• Download Runtime Query Result: Velg spørringsresultatet og nedlastingsformatet for å eksportere resultatet som er laget nå.

Rader med egne handlinger og tilstander

Koble et inneholdende element til et Dataset. Det gjentas for hver valgt rad. Bind underordnede elementer til Data Items slik at etiketter, antall og betingelser leser gjeldende rad. Radene er allerede lagret; en ekstra liste i en sidevariabel er unødvendig.

Legg til Data Attributes på en radkontroll: navn pk, verdi Data Item → Primary Key; og navn column, verdi den nøyaktige skrivbare kolonne-ID-en. I Click Event → Execute Function → Update Dataset Row velger du tabellen, Update Source → Event Element og This Element. Les nøkkel og kolonne som Attribute med data-pk og data-column. Velg Increment Current Value eller Decrement Current Value for numeriske endringer på serveren. For Set Value bruker du en Input eller Select som inneholder den nye verdien.

Delete Dataset Row bruker samme radnøkkel. Insert Dataset Row kobler verdier til feltene i måltabellen; utelatte felt bruker tabellens standardverdier. Change Variable holder midlertidige verdier, for eksempel en valgt nøkkel eller melding. Det lagrer ikke en redigert rad.

Component States vurderer Data Item-betingelser separat for hver gjentatte rad. Et ikke-normativt eksempel er en kontroll med Column from Dataset → status → Equals → value → suggested. Den vises da bare for samsvarende rader. States styrer presentasjon; Data Settings-betingelser, Dataset-tilgang og gjeldende skrivebetingelser på serveren styrer tillatte rader og endringer.

Session-verdier identifiserer den innloggede besøkende gjennom valgt autentisering. Bruk gjeldende medlemsrader og Session-operander i lese- og skrivebetingelser, og serverens Write context for felt den besøkende ikke skal velge. Å skjule en kontroll verken tillater eller hindrer en forespørsel. Test både en avvist og en vellykket endring.

Hold antall og summer oppdatert

Bygg antall og summer i en View og bind oppsummeringskomponenten til feltene. Aktiver Runtime Query når View skal beregnes for gjeldende forespørsel. Etter godkjent innsetting, endring eller sletting legger du til Invoke Method → Query Dataset med oppsummeringskomponenten som mål. Kontroller oppsummeringen etter hver type endring.

To handlinger heter i dag Query Dataset. Invoke Method → Query Dataset kjører komponentens konfigurerte spørring, inkludert Runtime Query. Execute Function → Query Dataset leser lagrede rader, inkludert det lagrede resultatet til en View. Velges den siste for Runtime Query-summer, kan en gammel sum bli stående.

Send inn en Form

Velg Form og dens Action. For Dataset-innsendinger velger du Select Dataset og tabellen du kan skrive til. Sett Method til Post og velg Submission Type. AJAX holder siden åpen mens forespørselen kjører. Standard (HTML) bruker nettleserens vanlige navigasjon. Konfigurer handlingene du vil bruke ved vellykket og mislykket innsending.

Velg Input Type og det nøyaktige feltet i måltabellen under Name for hvert Input-element. Bruk Submit Button eller Input med typen submit. Forhåndsvis en eksempelinnsending og les den lagrede raden i måltabellen før du samler inn reelle data. Velg det nøyaktige tabellfeltet i Name på hvert Input-element. Kontroller både en lagret rad og en avvist innsending før publisering.

For en hovedrad med underrader oppretter du hovedraden først. On Form Success → Redirect kan velge en annen Page; Append Created Primary Key legger den godkjente nøkkelen til som spørringsparametere med kolonne-ID-ene som navn. Konfigurer målsiden til å lese nøkkelen, og sett inn hver underrad med fremmednøkkel til hovedraden. Avslutt med en autorisert statusendring og naviger til radens Page. Separate radskrivinger lover ikke én transaksjon for en vilkårlig liste med underrader.

Gjeldende begrensning: publiserte Dataset Forms bruker anonym Session-kontekst på den offentlige innsendingsruten. Skriving avhengig av et medlems Session bruker native radhandlinger; ikke anta at et skjult felt eller sideautentisering gir Form-skrivetilgang.

Funksjoner mens siden er åpen

Åpne Functions og velg Add Function. Observe Visibility starter uten observerte elementer eller egen rot, med tom rotmarg og terskel 0. Velg elementer med DOM access aktivert, velg hvordan observasjonen skal virke, og endre eventuelt rot eller terskel. Bruk det når et element som kommer inn i visningsområdet, skal oppdatere en synlig tilstand eller laste flere rader.

Scroll Position starter uten en variabel. Velg en passende variabel i redigeringen for å motta oppdateringer om rulleposisjonen. Bruk States for å vise eller utforme innhold ut fra verdien.

Update at Intervals starter på 1000 millisekunder, med Repeat på, Shuffle av og ingen elementer. Bruk Add Item og velg egenskaps- eller variabelverdier for hvert element. Endre intervallet for tiden mellom oppdateringene. Slå Repeat av for å avslutte etter sekvensen, eller Shuffle på for å variere rekkefølgen. Replay in Editor starter den på nytt for kontroll.

Eksempler

Switch snur den nåværende menytilstanden. Når du setter False, gir en lukkeknapp samme resultat ved hvert klikk.

Eksempel: åpne og lukk en meny

Bruk menuOpen-oppsettet ovenfor. Switch endrer False → True → False ved påfølgende klikk. Statusen går fra Menu closed til Menu open og tilbake til Menu closed. Når du laster siden på nytt, brukes den konfigurerte startverdien False igjen.

Eksempel: gi en knapp en tydelig lukkehandling

Legg til en ny Button med teksten Close menu. Legg til Click Event → Change Variable → menuOpen. Velg Boolean og False. Åpne menyen og velg deretter Close menu. Statusen går tilbake til Menu closed og forblir lukket ved neste klikk. Bruk en uttrykkelig verdi når en gjentatt handling skal gi samme resultat.

Begrensninger og vanlige feil

En handling trenger et fullstendig mål og en passende verdi før den kan reagere på en hendelse.

• Fullfør eller fjern den tomme handlingen som opprettes med hendelsen. Et ufullstendig mål kan ikke utføre oppgaven.
• Velg elementet som skal håndtere hendelsen. Plain Text endrer teksten. Button eller Link håndterer klikket.
• Skriv til en Table når en endring skal beholdes ved et nytt besøk. Variabler holder midlertidige sideverdier.
• Kontroller hendelser på nytt etter at du kopierer et underliggende element som var avhengig av data eller variabler fra elementet over.
• Test det interaktive utkastet og det genererte resultatet. Publiser deretter den kontrollerte versjonen. Forhåndsvisning av en Form som bruker en lagret Agent, starter ingen offentlig Agent-forespørsel.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

States · Story · Page · Component · Dataset

Interactions

Interactions får en side til å reagere når noen klikker på en knapp, skriver, endrer en verdi eller setter fokus på en kontroll. Bruk hendelser til å endre midlertidige verdier og elementegenskaper, arbeide med data eller kalle støttede funksjoner.

Slik fungerer hendelser

Legg en hendelsesegenskap på et element og gi den én eller flere handlinger. Datavju lagrer oppsettet med siden eller komponenten og kjører handlingene når hendelsen oppstår. En variabel holder en midlertidig verdi mens siden er åpen. En Table lagrer poster som skal beholdes etter besøket.

Bruk States for å la en variabel eller dataverdi styre et betinget utseende. Bruk Functions for oppførsel som fortsetter mens siden er åpen, som å følge rulleposisjonen. Hyperlink på en Link og Action på en Form har allerede sine vanlige kontroller for navigasjon og innsending.

Lag en meny som åpnes og lukkes

Dette eksemplet bruker en Boolean-variabel og Click Event for å bytte statusen som vises.

1. Åpne Variables, hold pekeren over roten og bruk plusstegnet → Add Local Variable. Velg My Variable, gi den navnet menuOpen, velg Boolean og sett Default Value uttrykkelig til False.
2. Sett inn en Button under Components. Skriv Toggle menu i Plain Text-elementet under knappen.
3. Velg Button, deretter Add property, og legg til Click Event.
4. Rediger den første handlingen. Sett Action Type til Change Variable og Variable to change til menuOpen.
5. Under Change Variable With velger du Apply Function to Value. Velg Switch og deretter Done.
6. Legg til Paragraph med et underliggende Plain Text-element som inneholder Menu closed. Gi dette Plain Text-elementet en tilstand som heter Open menu, med Value of Variable → menuOpen → Is True. Sett Plain Text for denne tilstanden til Menu open.
7. Åpne Preview. Klikk på Toggle menu to ganger. Statusen endres fra Menu closed til Menu open og deretter tilbake til Menu closed.

Velg en hendelse

Velg hendelsen som passer til hvordan noen skal bruke elementet.

• Click Event kjører når det omsluttende elementet klikkes. Velg Button eller Link for å legge den til. Rediger teksten i Plain Text-elementet under.
• Change Event kjører når en kontroll bekrefter en endret verdi, for eksempel når noen velger et annet alternativ i Select.
• Input Event kjører etter hvert som en inndataverdi endres. Bruk den for et søkefelt som reagerer mens noen skriver.
• Focus Event kjører når elementet får fokus. Kontroller tastaturfokus i Preview.
• Keyup Event kjører når en tast slippes mens elementet har fokus.
• Events er en egen egenskap for dokumenthendelser: DOMContentLoaded når dokumentet er tolket, eller Load når dokumentets innlastingshendelse utløses. Den har egne kontroller for Event Type og Action Type.

Legg til, rediger og sorter handlinger

Når du legger til en hendelse, opprettes en tom handling. Åpne redigeringskontrollen og fyll den ut, eller slett handlingen før du går videre. Add Action legger til en ny handling. Dra i håndtaket for å flytte handlinger innenfor hendelsen. Bruk redigeringsikonet for å endre en handling og knappen for å slette den. Done lukker handlingsredigeringen. Vanlig sidelagring beholder oppsettet.

Prevent Default starter av. Aktiver det når handlingen skal erstatte nettleserens vanlige oppførsel, som å følge en Link. Stop Propagation starter av. Aktiver det når et klikk skal behandles av dette elementet uten også å utløse en klikkhandling på et overordnet element. La begge være av for en vanlig knapp som åpner og lukker en meny.

Velg Action Type

Ingen Action Type er valgt fra start. Velg handlingen og målet før du angir verdien.

• Change Variable: Velg Variable to change og deretter den nye verdien. Bruk det for menuOpen, en valgt kategori eller en statusmelding.
• Change Property: Velg Component to Change og en eksisterende Property to Change. Velg den nye verdien. Hvis du velger dataFilters, velger du også Data Filter to Change.
• Execute Function: Velg Select Function og fyll ut innstillingene for funksjonen. Bruk det for å lese, skrive, laste ned eller validere Dataset-data.
• Invoke Method: Velg Component to Invoke og Method to Invoke. Valgene avhenger av elementet. Dialog tilbyr Show Modal og Close Modal, mens et element med datatilkobling tilbyr Dataset-metoder.
• Use Authentication Service: Velg Select Authentication Type og Select Authentication Task for den konfigurerte innloggingstjenesten. Konfigurer den tilhørende innloggingstjenesten og øktinnstillingene før du bruker handlingen.

Verdiinnstillinger

Verdivalgene starter uten et valg. Bruk en verditype som passer variabelen eller egenskapen du vil endre.

• Boolean: Velg True eller False. Sett for eksempel menuOpen til False for en lukkeknapp.
• Number: Skriv en tallverdi. Sett for eksempel det valgte trinnet til 2.
• Text: Skriv en tekstverdi. Sett for eksempel en statusvariabel til Ready.
• Object: Velg Set as null eller Set as empty object når du nullstiller en Object-variabel.
• Value from Event: Velg This Element eller Child Element. For et underliggende element skriver du CSS-velgeren. Velg Value, Checked, Text Content eller Attribute. Når du velger Attribute, må du også angi attributtnavnet. For eksempel leser This Element → Value det valgte alternativet fra en Select.
• Apply Function to Value: Decrement trekker fra én, Increment legger til én, og Switch snur en Boolean-verdi. Switch endrer for eksempel menuOpen fra False til True.
• Data Model of Dataset: Velg Select Component with Dataset for å lese datamodellen inn i målverdien.
• Object Mapping: Tilgjengelig for Object-variabler. Velg Object Operation og legg til koblinger. Hver kobling har en målsti, Path, og en Source, som en dataverdi, et hendelseselement, en variabel eller en skrevet verdi. Velg Select Path for data inni andre verdier. Bruk det for å samle flere skjemaverdier i ett Object.

Metoder for elementer og data

For en tilkoblet, gjenbrukbar Component velger du elementet inni komponenten når du blir bedt om det. Støttede metoder omfatter Dialog-kontroller og Next page/Previous page der de er tilgjengelige. Konfigurer annen oppførsel i kildekomponenten eller på siden rundt.

• Append Component og Remove Component endrer elementstrukturen som vises. Velg målet bevisst og kontroller hele resultatet i Preview.
• Show Modal og Close Modal er tilgjengelige for Dialog. Velg Dialog som mål.
• Filter Dataset velger Column to Filter og bruker verdien fra hendelsen. Filter Dataset (local) filtrerer radene som allerede er tilgjengelige for elementet. For en Object/Array-verdi velger du Path to Filter.
• Invoke Method → Query Dataset laster det valgte elementet på nytt med elementets Data Settings, inkludert Runtime Query når det er aktivert. Bruk den etter en radendring for å holde spørringens summer oppdatert. Next page og Previous page blar i et Dataset med flere rader; en Index Query med én rad tilbyr ikke sidebytte.
• Search Dataset søker i de valgte feltene. Search fields starter med alle lesbare Dataset-felt for en privat spørring, eller feltene som returneres av en Public-spørring. Velg bestemte felt for å avgrense søket. Hvis et offentlig resultat ikke returnerer noen felt og du heller ikke velger noen, lar søket resultatet være uendret.
• Sort Dataset leser et feltvalg fra Input eller Select. Verdien er feltets kolonnenøkkel, column:asc, column:desc eller none. Bare én sorteringskolonne beholdes.
• Download File by URL og Download Files from Dataset Column laster ned de valgte filadressene. Velg den faktiske URL-en eller filkolonnen i innstillingene.

Funksjoner for data og validering

Execute Function tilbyr valgene nedenfor. Velgere for mål, felt og variabler starter tomme. Velg ressursene du vil bruke, fremfor å stole på elementets navn.

Write context lar egnede felt motta tid eller øktverdier fra serveren. La genererte nøkler bruke standardverdiene i tabellen. For en betinget skriving velger du kilden for betingelsene, og Conditions path når du bruker en Object-variabel. Kontroller om resultatet er vellykket eller har feil før du viser en bekreftelse. Tilgangskontroll og tabellvalidering gjelder fortsatt ved hver skriving.

• Check Username Availability: Velg Dataset, kolonne og variabelen som skal motta tilgjengelighetsresultatet. Bruk det før du ber om et unikt brukernavn.
• Email Validation: Velg resultatvariabelen for kontroll av e-postadressen i inndatafeltet.
• Password Validation: Velg minste og største lengde, og om du skal kreve stor bokstav, liten bokstav, tall eller spesialtegn. Velg deretter resultatvariabelen. Sett kravene slik at de passer innloggingen.
• Filter Layer Dataset: Velg laget og filteroppsettet for å endre postene som vises.
• Execute Function → Query Dataset leser lagrede Dataset-rader. Velg Select Component with Dataset og eventuelt Index Query med indeks eller Index Variable. For en lagret View leses det lagrede resultatet; komponentens Runtime Query beregnes ikke på nytt. Bruk Invoke Method → Query Dataset til det.
• Refresh Dataset oppdaterer det lagrede Dataset fra kilden. For en lagret View oppdateres det lagrede resultatet. Dette er en annen operasjon enn å kjøre en besøkskomponents Runtime Query på nytt.
• Limit Dataset: Velg komponenten med datatilkobling og grensen for antall rader.
• Insert Dataset Row: Velg Dataset du kan skrive til, og angi feltverdiene. Valgfrie Progress Variable, Success Variable og Error Variable mottar fremdrift og resultat for operasjonen.
• Update Dataset Row: Velg Dataset, Operation, Update Source og felt. Les primærnøkkelen og den nye verdien fra hendelsen, en Object-variabel eller konfigurerte verdier. For et Object velger du Primary Key Object Path. Velg Conditions for raden når oppdateringen fortsatt må oppfylle en lagret betingelse.
• Delete Dataset Row: Velg Dataset du kan skrive til, og hvor postens nøkkel skal leses fra. Test sletting bare med poster du kan kaste.
• Update Item Model Property: Velg datamodellegenskapen du trenger å endre.
• Update Layer Property: Velg lagegenskapen som skal endres.
• Rename Columns from Mapping Table: Velg Select Data Table, Select Mapping Table og koblingens kolonner for nåværende og nytt navn.
• Replace File Dataset: Velg fildatakilden som skal motta erstatningsdata.
• Download Dataset: Velg gjeldende Dataset eller Saved View Result, Control Scope, filformat og, for CSV, skilletegn og anførselstegn. Et lagret resultat laster ned sine lagrede rader.
• Download Runtime Query Result: Velg spørringsresultatet og nedlastingsformatet for å eksportere resultatet som er laget nå.

Rader med egne handlinger og tilstander

Koble et inneholdende element til et Dataset. Det gjentas for hver valgt rad. Bind underordnede elementer til Data Items slik at etiketter, antall og betingelser leser gjeldende rad. Radene er allerede lagret; en ekstra liste i en sidevariabel er unødvendig.

Legg til Data Attributes på en radkontroll: navn pk, verdi Data Item → Primary Key; og navn column, verdi den nøyaktige skrivbare kolonne-ID-en. I Click Event → Execute Function → Update Dataset Row velger du tabellen, Update Source → Event Element og This Element. Les nøkkel og kolonne som Attribute med data-pk og data-column. Velg Increment Current Value eller Decrement Current Value for numeriske endringer på serveren. For Set Value bruker du en Input eller Select som inneholder den nye verdien.

Delete Dataset Row bruker samme radnøkkel. Insert Dataset Row kobler verdier til feltene i måltabellen; utelatte felt bruker tabellens standardverdier. Change Variable holder midlertidige verdier, for eksempel en valgt nøkkel eller melding. Det lagrer ikke en redigert rad.

Component States vurderer Data Item-betingelser separat for hver gjentatte rad. Et ikke-normativt eksempel er en kontroll med Column from Dataset → status → Equals → value → suggested. Den vises da bare for samsvarende rader. States styrer presentasjon; Data Settings-betingelser, Dataset-tilgang og gjeldende skrivebetingelser på serveren styrer tillatte rader og endringer.

Session-verdier identifiserer den innloggede besøkende gjennom valgt autentisering. Bruk gjeldende medlemsrader og Session-operander i lese- og skrivebetingelser, og serverens Write context for felt den besøkende ikke skal velge. Å skjule en kontroll verken tillater eller hindrer en forespørsel. Test både en avvist og en vellykket endring.

Hold antall og summer oppdatert

Bygg antall og summer i en View og bind oppsummeringskomponenten til feltene. Aktiver Runtime Query når View skal beregnes for gjeldende forespørsel. Etter godkjent innsetting, endring eller sletting legger du til Invoke Method → Query Dataset med oppsummeringskomponenten som mål. Kontroller oppsummeringen etter hver type endring.

To handlinger heter i dag Query Dataset. Invoke Method → Query Dataset kjører komponentens konfigurerte spørring, inkludert Runtime Query. Execute Function → Query Dataset leser lagrede rader, inkludert det lagrede resultatet til en View. Velges den siste for Runtime Query-summer, kan en gammel sum bli stående.

Send inn en Form

Velg Form og dens Action. For Dataset-innsendinger velger du Select Dataset og tabellen du kan skrive til. Sett Method til Post og velg Submission Type. AJAX holder siden åpen mens forespørselen kjører. Standard (HTML) bruker nettleserens vanlige navigasjon. Konfigurer handlingene du vil bruke ved vellykket og mislykket innsending.

Velg Input Type og det nøyaktige feltet i måltabellen under Name for hvert Input-element. Bruk Submit Button eller Input med typen submit. Forhåndsvis en eksempelinnsending og les den lagrede raden i måltabellen før du samler inn reelle data. Velg det nøyaktige tabellfeltet i Name på hvert Input-element. Kontroller både en lagret rad og en avvist innsending før publisering.

For en hovedrad med underrader oppretter du hovedraden først. On Form Success → Redirect kan velge en annen Page; Append Created Primary Key legger den godkjente nøkkelen til som spørringsparametere med kolonne-ID-ene som navn. Konfigurer målsiden til å lese nøkkelen, og sett inn hver underrad med fremmednøkkel til hovedraden. Avslutt med en autorisert statusendring og naviger til radens Page. Separate radskrivinger lover ikke én transaksjon for en vilkårlig liste med underrader.

Gjeldende begrensning: publiserte Dataset Forms bruker anonym Session-kontekst på den offentlige innsendingsruten. Skriving avhengig av et medlems Session bruker native radhandlinger; ikke anta at et skjult felt eller sideautentisering gir Form-skrivetilgang.

Funksjoner mens siden er åpen

Åpne Functions og velg Add Function. Observe Visibility starter uten observerte elementer eller egen rot, med tom rotmarg og terskel 0. Velg elementer med DOM access aktivert, velg hvordan observasjonen skal virke, og endre eventuelt rot eller terskel. Bruk det når et element som kommer inn i visningsområdet, skal oppdatere en synlig tilstand eller laste flere rader.

Scroll Position starter uten en variabel. Velg en passende variabel i redigeringen for å motta oppdateringer om rulleposisjonen. Bruk States for å vise eller utforme innhold ut fra verdien.

Update at Intervals starter på 1000 millisekunder, med Repeat på, Shuffle av og ingen elementer. Bruk Add Item og velg egenskaps- eller variabelverdier for hvert element. Endre intervallet for tiden mellom oppdateringene. Slå Repeat av for å avslutte etter sekvensen, eller Shuffle på for å variere rekkefølgen. Replay in Editor starter den på nytt for kontroll.

Eksempler

Switch snur den nåværende menytilstanden. Når du setter False, gir en lukkeknapp samme resultat ved hvert klikk.

Eksempel: åpne og lukk en meny

Bruk menuOpen-oppsettet ovenfor. Switch endrer False → True → False ved påfølgende klikk. Statusen går fra Menu closed til Menu open og tilbake til Menu closed. Når du laster siden på nytt, brukes den konfigurerte startverdien False igjen.

Eksempel: gi en knapp en tydelig lukkehandling

Legg til en ny Button med teksten Close menu. Legg til Click Event → Change Variable → menuOpen. Velg Boolean og False. Åpne menyen og velg deretter Close menu. Statusen går tilbake til Menu closed og forblir lukket ved neste klikk. Bruk en uttrykkelig verdi når en gjentatt handling skal gi samme resultat.

Begrensninger og vanlige feil

En handling trenger et fullstendig mål og en passende verdi før den kan reagere på en hendelse.

• Fullfør eller fjern den tomme handlingen som opprettes med hendelsen. Et ufullstendig mål kan ikke utføre oppgaven.
• Velg elementet som skal håndtere hendelsen. Plain Text endrer teksten. Button eller Link håndterer klikket.
• Skriv til en Table når en endring skal beholdes ved et nytt besøk. Variabler holder midlertidige sideverdier.
• Kontroller hendelser på nytt etter at du kopierer et underliggende element som var avhengig av data eller variabler fra elementet over.
• Test det interaktive utkastet og det genererte resultatet. Publiser deretter den kontrollerte versjonen. Forhåndsvisning av en Form som bruker en lagret Agent, starter ingen offentlig Agent-forespørsel.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

States · Story · Page · Component · Dataset

Interactions

Interactions får en side til å reagere når noen klikker på en knapp, skriver, endrer en verdi eller setter fokus på en kontroll. Bruk hendelser til å endre midlertidige verdier og elementegenskaper, arbeide med data eller kalle støttede funksjoner.

Slik fungerer hendelser

Legg en hendelsesegenskap på et element og gi den én eller flere handlinger. Datavju lagrer oppsettet med siden eller komponenten og kjører handlingene når hendelsen oppstår. En variabel holder en midlertidig verdi mens siden er åpen. En Table lagrer poster som skal beholdes etter besøket.

Bruk States for å la en variabel eller dataverdi styre et betinget utseende. Bruk Functions for oppførsel som fortsetter mens siden er åpen, som å følge rulleposisjonen. Hyperlink på en Link og Action på en Form har allerede sine vanlige kontroller for navigasjon og innsending.

Lag en meny som åpnes og lukkes

Dette eksemplet bruker en Boolean-variabel og Click Event for å bytte statusen som vises.

1. Åpne Variables, hold pekeren over roten og bruk plusstegnet → Add Local Variable. Velg My Variable, gi den navnet menuOpen, velg Boolean og sett Default Value uttrykkelig til False.
2. Sett inn en Button under Components. Skriv Toggle menu i Plain Text-elementet under knappen.
3. Velg Button, deretter Add property, og legg til Click Event.
4. Rediger den første handlingen. Sett Action Type til Change Variable og Variable to change til menuOpen.
5. Under Change Variable With velger du Apply Function to Value. Velg Switch og deretter Done.
6. Legg til Paragraph med et underliggende Plain Text-element som inneholder Menu closed. Gi dette Plain Text-elementet en tilstand som heter Open menu, med Value of Variable → menuOpen → Is True. Sett Plain Text for denne tilstanden til Menu open.
7. Åpne Preview. Klikk på Toggle menu to ganger. Statusen endres fra Menu closed til Menu open og deretter tilbake til Menu closed.

Velg en hendelse

Velg hendelsen som passer til hvordan noen skal bruke elementet.

• Click Event kjører når det omsluttende elementet klikkes. Velg Button eller Link for å legge den til. Rediger teksten i Plain Text-elementet under.
• Change Event kjører når en kontroll bekrefter en endret verdi, for eksempel når noen velger et annet alternativ i Select.
• Input Event kjører etter hvert som en inndataverdi endres. Bruk den for et søkefelt som reagerer mens noen skriver.
• Focus Event kjører når elementet får fokus. Kontroller tastaturfokus i Preview.
• Keyup Event kjører når en tast slippes mens elementet har fokus.
• Events er en egen egenskap for dokumenthendelser: DOMContentLoaded når dokumentet er tolket, eller Load når dokumentets innlastingshendelse utløses. Den har egne kontroller for Event Type og Action Type.

Legg til, rediger og sorter handlinger

Når du legger til en hendelse, opprettes en tom handling. Åpne redigeringskontrollen og fyll den ut, eller slett handlingen før du går videre. Add Action legger til en ny handling. Dra i håndtaket for å flytte handlinger innenfor hendelsen. Bruk redigeringsikonet for å endre en handling og knappen for å slette den. Done lukker handlingsredigeringen. Vanlig sidelagring beholder oppsettet.

Prevent Default starter av. Aktiver det når handlingen skal erstatte nettleserens vanlige oppførsel, som å følge en Link. Stop Propagation starter av. Aktiver det når et klikk skal behandles av dette elementet uten også å utløse en klikkhandling på et overordnet element. La begge være av for en vanlig knapp som åpner og lukker en meny.

Velg Action Type

Ingen Action Type er valgt fra start. Velg handlingen og målet før du angir verdien.

• Change Variable: Velg Variable to change og deretter den nye verdien. Bruk det for menuOpen, en valgt kategori eller en statusmelding.
• Change Property: Velg Component to Change og en eksisterende Property to Change. Velg den nye verdien. Hvis du velger dataFilters, velger du også Data Filter to Change.
• Execute Function: Velg Select Function og fyll ut innstillingene for funksjonen. Bruk det for å lese, skrive, laste ned eller validere Dataset-data.
• Invoke Method: Velg Component to Invoke og Method to Invoke. Valgene avhenger av elementet. Dialog tilbyr Show Modal og Close Modal, mens et element med datatilkobling tilbyr Dataset-metoder.
• Use Authentication Service: Velg Select Authentication Type og Select Authentication Task for den konfigurerte innloggingstjenesten. Konfigurer den tilhørende innloggingstjenesten og øktinnstillingene før du bruker handlingen.

Verdiinnstillinger

Verdivalgene starter uten et valg. Bruk en verditype som passer variabelen eller egenskapen du vil endre.

• Boolean: Velg True eller False. Sett for eksempel menuOpen til False for en lukkeknapp.
• Number: Skriv en tallverdi. Sett for eksempel det valgte trinnet til 2.
• Text: Skriv en tekstverdi. Sett for eksempel en statusvariabel til Ready.
• Object: Velg Set as null eller Set as empty object når du nullstiller en Object-variabel.
• Value from Event: Velg This Element eller Child Element. For et underliggende element skriver du CSS-velgeren. Velg Value, Checked, Text Content eller Attribute. Når du velger Attribute, må du også angi attributtnavnet. For eksempel leser This Element → Value det valgte alternativet fra en Select.
• Apply Function to Value: Decrement trekker fra én, Increment legger til én, og Switch snur en Boolean-verdi. Switch endrer for eksempel menuOpen fra False til True.
• Data Model of Dataset: Velg Select Component with Dataset for å lese datamodellen inn i målverdien.
• Object Mapping: Tilgjengelig for Object-variabler. Velg Object Operation og legg til koblinger. Hver kobling har en målsti, Path, og en Source, som en dataverdi, et hendelseselement, en variabel eller en skrevet verdi. Velg Select Path for data inni andre verdier. Bruk det for å samle flere skjemaverdier i ett Object.

Metoder for elementer og data

For en tilkoblet, gjenbrukbar Component velger du elementet inni komponenten når du blir bedt om det. Støttede metoder omfatter Dialog-kontroller og Next page/Previous page der de er tilgjengelige. Konfigurer annen oppførsel i kildekomponenten eller på siden rundt.

• Append Component og Remove Component endrer elementstrukturen som vises. Velg målet bevisst og kontroller hele resultatet i Preview.
• Show Modal og Close Modal er tilgjengelige for Dialog. Velg Dialog som mål.
• Filter Dataset velger Column to Filter og bruker verdien fra hendelsen. Filter Dataset (local) filtrerer radene som allerede er tilgjengelige for elementet. For en Object/Array-verdi velger du Path to Filter.
• Invoke Method → Query Dataset laster det valgte elementet på nytt med elementets Data Settings, inkludert Runtime Query når det er aktivert. Bruk den etter en radendring for å holde spørringens summer oppdatert. Next page og Previous page blar i et Dataset med flere rader; en Index Query med én rad tilbyr ikke sidebytte.
• Search Dataset søker i de valgte feltene. Search fields starter med alle lesbare Dataset-felt for en privat spørring, eller feltene som returneres av en Public-spørring. Velg bestemte felt for å avgrense søket. Hvis et offentlig resultat ikke returnerer noen felt og du heller ikke velger noen, lar søket resultatet være uendret.
• Sort Dataset leser et feltvalg fra Input eller Select. Verdien er feltets kolonnenøkkel, column:asc, column:desc eller none. Bare én sorteringskolonne beholdes.
• Download File by URL og Download Files from Dataset Column laster ned de valgte filadressene. Velg den faktiske URL-en eller filkolonnen i innstillingene.

Funksjoner for data og validering

Execute Function tilbyr valgene nedenfor. Velgere for mål, felt og variabler starter tomme. Velg ressursene du vil bruke, fremfor å stole på elementets navn.

Write context lar egnede felt motta tid eller øktverdier fra serveren. La genererte nøkler bruke standardverdiene i tabellen. For en betinget skriving velger du kilden for betingelsene, og Conditions path når du bruker en Object-variabel. Kontroller om resultatet er vellykket eller har feil før du viser en bekreftelse. Tilgangskontroll og tabellvalidering gjelder fortsatt ved hver skriving.

• Check Username Availability: Velg Dataset, kolonne og variabelen som skal motta tilgjengelighetsresultatet. Bruk det før du ber om et unikt brukernavn.
• Email Validation: Velg resultatvariabelen for kontroll av e-postadressen i inndatafeltet.
• Password Validation: Velg minste og største lengde, og om du skal kreve stor bokstav, liten bokstav, tall eller spesialtegn. Velg deretter resultatvariabelen. Sett kravene slik at de passer innloggingen.
• Filter Layer Dataset: Velg laget og filteroppsettet for å endre postene som vises.
• Execute Function → Query Dataset leser lagrede Dataset-rader. Velg Select Component with Dataset og eventuelt Index Query med indeks eller Index Variable. For en lagret View leses det lagrede resultatet; komponentens Runtime Query beregnes ikke på nytt. Bruk Invoke Method → Query Dataset til det.
• Refresh Dataset oppdaterer det lagrede Dataset fra kilden. For en lagret View oppdateres det lagrede resultatet. Dette er en annen operasjon enn å kjøre en besøkskomponents Runtime Query på nytt.
• Limit Dataset: Velg komponenten med datatilkobling og grensen for antall rader.
• Insert Dataset Row: Velg Dataset du kan skrive til, og angi feltverdiene. Valgfrie Progress Variable, Success Variable og Error Variable mottar fremdrift og resultat for operasjonen.
• Update Dataset Row: Velg Dataset, Operation, Update Source og felt. Les primærnøkkelen og den nye verdien fra hendelsen, en Object-variabel eller konfigurerte verdier. For et Object velger du Primary Key Object Path. Velg Conditions for raden når oppdateringen fortsatt må oppfylle en lagret betingelse.
• Delete Dataset Row: Velg Dataset du kan skrive til, og hvor postens nøkkel skal leses fra. Test sletting bare med poster du kan kaste.
• Update Item Model Property: Velg datamodellegenskapen du trenger å endre.
• Update Layer Property: Velg lagegenskapen som skal endres.
• Rename Columns from Mapping Table: Velg Select Data Table, Select Mapping Table og koblingens kolonner for nåværende og nytt navn.
• Replace File Dataset: Velg fildatakilden som skal motta erstatningsdata.
• Download Dataset: Velg gjeldende Dataset eller Saved View Result, Control Scope, filformat og, for CSV, skilletegn og anførselstegn. Et lagret resultat laster ned sine lagrede rader.
• Download Runtime Query Result: Velg spørringsresultatet og nedlastingsformatet for å eksportere resultatet som er laget nå.

Rader med egne handlinger og tilstander

Koble et inneholdende element til et Dataset. Det gjentas for hver valgt rad. Bind underordnede elementer til Data Items slik at etiketter, antall og betingelser leser gjeldende rad. Radene er allerede lagret; en ekstra liste i en sidevariabel er unødvendig.

Legg til Data Attributes på en radkontroll: navn pk, verdi Data Item → Primary Key; og navn column, verdi den nøyaktige skrivbare kolonne-ID-en. I Click Event → Execute Function → Update Dataset Row velger du tabellen, Update Source → Event Element og This Element. Les nøkkel og kolonne som Attribute med data-pk og data-column. Velg Increment Current Value eller Decrement Current Value for numeriske endringer på serveren. For Set Value bruker du en Input eller Select som inneholder den nye verdien.

Delete Dataset Row bruker samme radnøkkel. Insert Dataset Row kobler verdier til feltene i måltabellen; utelatte felt bruker tabellens standardverdier. Change Variable holder midlertidige verdier, for eksempel en valgt nøkkel eller melding. Det lagrer ikke en redigert rad.

Component States vurderer Data Item-betingelser separat for hver gjentatte rad. Et ikke-normativt eksempel er en kontroll med Column from Dataset → status → Equals → value → suggested. Den vises da bare for samsvarende rader. States styrer presentasjon; Data Settings-betingelser, Dataset-tilgang og gjeldende skrivebetingelser på serveren styrer tillatte rader og endringer.

Session-verdier identifiserer den innloggede besøkende gjennom valgt autentisering. Bruk gjeldende medlemsrader og Session-operander i lese- og skrivebetingelser, og serverens Write context for felt den besøkende ikke skal velge. Å skjule en kontroll verken tillater eller hindrer en forespørsel. Test både en avvist og en vellykket endring.

Hold antall og summer oppdatert

Bygg antall og summer i en View og bind oppsummeringskomponenten til feltene. Aktiver Runtime Query når View skal beregnes for gjeldende forespørsel. Etter godkjent innsetting, endring eller sletting legger du til Invoke Method → Query Dataset med oppsummeringskomponenten som mål. Kontroller oppsummeringen etter hver type endring.

To handlinger heter i dag Query Dataset. Invoke Method → Query Dataset kjører komponentens konfigurerte spørring, inkludert Runtime Query. Execute Function → Query Dataset leser lagrede rader, inkludert det lagrede resultatet til en View. Velges den siste for Runtime Query-summer, kan en gammel sum bli stående.

Send inn en Form

Velg Form og dens Action. For Dataset-innsendinger velger du Select Dataset og tabellen du kan skrive til. Sett Method til Post og velg Submission Type. AJAX holder siden åpen mens forespørselen kjører. Standard (HTML) bruker nettleserens vanlige navigasjon. Konfigurer handlingene du vil bruke ved vellykket og mislykket innsending.

Velg Input Type og det nøyaktige feltet i måltabellen under Name for hvert Input-element. Bruk Submit Button eller Input med typen submit. Forhåndsvis en eksempelinnsending og les den lagrede raden i måltabellen før du samler inn reelle data. Velg det nøyaktige tabellfeltet i Name på hvert Input-element. Kontroller både en lagret rad og en avvist innsending før publisering.

For en hovedrad med underrader oppretter du hovedraden først. On Form Success → Redirect kan velge en annen Page; Append Created Primary Key legger den godkjente nøkkelen til som spørringsparametere med kolonne-ID-ene som navn. Konfigurer målsiden til å lese nøkkelen, og sett inn hver underrad med fremmednøkkel til hovedraden. Avslutt med en autorisert statusendring og naviger til radens Page. Separate radskrivinger lover ikke én transaksjon for en vilkårlig liste med underrader.

Gjeldende begrensning: publiserte Dataset Forms bruker anonym Session-kontekst på den offentlige innsendingsruten. Skriving avhengig av et medlems Session bruker native radhandlinger; ikke anta at et skjult felt eller sideautentisering gir Form-skrivetilgang.

Funksjoner mens siden er åpen

Åpne Functions og velg Add Function. Observe Visibility starter uten observerte elementer eller egen rot, med tom rotmarg og terskel 0. Velg elementer med DOM access aktivert, velg hvordan observasjonen skal virke, og endre eventuelt rot eller terskel. Bruk det når et element som kommer inn i visningsområdet, skal oppdatere en synlig tilstand eller laste flere rader.

Scroll Position starter uten en variabel. Velg en passende variabel i redigeringen for å motta oppdateringer om rulleposisjonen. Bruk States for å vise eller utforme innhold ut fra verdien.

Update at Intervals starter på 1000 millisekunder, med Repeat på, Shuffle av og ingen elementer. Bruk Add Item og velg egenskaps- eller variabelverdier for hvert element. Endre intervallet for tiden mellom oppdateringene. Slå Repeat av for å avslutte etter sekvensen, eller Shuffle på for å variere rekkefølgen. Replay in Editor starter den på nytt for kontroll.

Eksempler

Switch snur den nåværende menytilstanden. Når du setter False, gir en lukkeknapp samme resultat ved hvert klikk.

Eksempel: åpne og lukk en meny

Bruk menuOpen-oppsettet ovenfor. Switch endrer False → True → False ved påfølgende klikk. Statusen går fra Menu closed til Menu open og tilbake til Menu closed. Når du laster siden på nytt, brukes den konfigurerte startverdien False igjen.

Eksempel: gi en knapp en tydelig lukkehandling

Legg til en ny Button med teksten Close menu. Legg til Click Event → Change Variable → menuOpen. Velg Boolean og False. Åpne menyen og velg deretter Close menu. Statusen går tilbake til Menu closed og forblir lukket ved neste klikk. Bruk en uttrykkelig verdi når en gjentatt handling skal gi samme resultat.

Begrensninger og vanlige feil

En handling trenger et fullstendig mål og en passende verdi før den kan reagere på en hendelse.

• Fullfør eller fjern den tomme handlingen som opprettes med hendelsen. Et ufullstendig mål kan ikke utføre oppgaven.
• Velg elementet som skal håndtere hendelsen. Plain Text endrer teksten. Button eller Link håndterer klikket.
• Skriv til en Table når en endring skal beholdes ved et nytt besøk. Variabler holder midlertidige sideverdier.
• Kontroller hendelser på nytt etter at du kopierer et underliggende element som var avhengig av data eller variabler fra elementet over.
• Test det interaktive utkastet og det genererte resultatet. Publiser deretter den kontrollerte versjonen. Forhåndsvisning av en Form som bruker en lagret Agent, starter ingen offentlig Agent-forespørsel.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

States · Story · Page · Component · Dataset

Interactions

Interactions får en side til å reagere når noen klikker på en knapp, skriver, endrer en verdi eller setter fokus på en kontroll. Bruk hendelser til å endre midlertidige verdier og elementegenskaper, arbeide med data eller kalle støttede funksjoner.

Slik fungerer hendelser

Legg en hendelsesegenskap på et element og gi den én eller flere handlinger. Datavju lagrer oppsettet med siden eller komponenten og kjører handlingene når hendelsen oppstår. En variabel holder en midlertidig verdi mens siden er åpen. En Table lagrer poster som skal beholdes etter besøket.

Bruk States for å la en variabel eller dataverdi styre et betinget utseende. Bruk Functions for oppførsel som fortsetter mens siden er åpen, som å følge rulleposisjonen. Hyperlink på en Link og Action på en Form har allerede sine vanlige kontroller for navigasjon og innsending.

Lag en meny som åpnes og lukkes

Dette eksemplet bruker en Boolean-variabel og Click Event for å bytte statusen som vises.

1. Åpne Variables, hold pekeren over roten og bruk plusstegnet → Add Local Variable. Velg My Variable, gi den navnet menuOpen, velg Boolean og sett Default Value uttrykkelig til False.
2. Sett inn en Button under Components. Skriv Toggle menu i Plain Text-elementet under knappen.
3. Velg Button, deretter Add property, og legg til Click Event.
4. Rediger den første handlingen. Sett Action Type til Change Variable og Variable to change til menuOpen.
5. Under Change Variable With velger du Apply Function to Value. Velg Switch og deretter Done.
6. Legg til Paragraph med et underliggende Plain Text-element som inneholder Menu closed. Gi dette Plain Text-elementet en tilstand som heter Open menu, med Value of Variable → menuOpen → Is True. Sett Plain Text for denne tilstanden til Menu open.
7. Åpne Preview. Klikk på Toggle menu to ganger. Statusen endres fra Menu closed til Menu open og deretter tilbake til Menu closed.

Velg en hendelse

Velg hendelsen som passer til hvordan noen skal bruke elementet.

• Click Event kjører når det omsluttende elementet klikkes. Velg Button eller Link for å legge den til. Rediger teksten i Plain Text-elementet under.
• Change Event kjører når en kontroll bekrefter en endret verdi, for eksempel når noen velger et annet alternativ i Select.
• Input Event kjører etter hvert som en inndataverdi endres. Bruk den for et søkefelt som reagerer mens noen skriver.
• Focus Event kjører når elementet får fokus. Kontroller tastaturfokus i Preview.
• Keyup Event kjører når en tast slippes mens elementet har fokus.
• Events er en egen egenskap for dokumenthendelser: DOMContentLoaded når dokumentet er tolket, eller Load når dokumentets innlastingshendelse utløses. Den har egne kontroller for Event Type og Action Type.

Legg til, rediger og sorter handlinger

Når du legger til en hendelse, opprettes en tom handling. Åpne redigeringskontrollen og fyll den ut, eller slett handlingen før du går videre. Add Action legger til en ny handling. Dra i håndtaket for å flytte handlinger innenfor hendelsen. Bruk redigeringsikonet for å endre en handling og knappen for å slette den. Done lukker handlingsredigeringen. Vanlig sidelagring beholder oppsettet.

Prevent Default starter av. Aktiver det når handlingen skal erstatte nettleserens vanlige oppførsel, som å følge en Link. Stop Propagation starter av. Aktiver det når et klikk skal behandles av dette elementet uten også å utløse en klikkhandling på et overordnet element. La begge være av for en vanlig knapp som åpner og lukker en meny.

Velg Action Type

Ingen Action Type er valgt fra start. Velg handlingen og målet før du angir verdien.

• Change Variable: Velg Variable to change og deretter den nye verdien. Bruk det for menuOpen, en valgt kategori eller en statusmelding.
• Change Property: Velg Component to Change og en eksisterende Property to Change. Velg den nye verdien. Hvis du velger dataFilters, velger du også Data Filter to Change.
• Execute Function: Velg Select Function og fyll ut innstillingene for funksjonen. Bruk det for å lese, skrive, laste ned eller validere Dataset-data.
• Invoke Method: Velg Component to Invoke og Method to Invoke. Valgene avhenger av elementet. Dialog tilbyr Show Modal og Close Modal, mens et element med datatilkobling tilbyr Dataset-metoder.
• Use Authentication Service: Velg Select Authentication Type og Select Authentication Task for den konfigurerte innloggingstjenesten. Konfigurer den tilhørende innloggingstjenesten og øktinnstillingene før du bruker handlingen.

Verdiinnstillinger

Verdivalgene starter uten et valg. Bruk en verditype som passer variabelen eller egenskapen du vil endre.

• Boolean: Velg True eller False. Sett for eksempel menuOpen til False for en lukkeknapp.
• Number: Skriv en tallverdi. Sett for eksempel det valgte trinnet til 2.
• Text: Skriv en tekstverdi. Sett for eksempel en statusvariabel til Ready.
• Object: Velg Set as null eller Set as empty object når du nullstiller en Object-variabel.
• Value from Event: Velg This Element eller Child Element. For et underliggende element skriver du CSS-velgeren. Velg Value, Checked, Text Content eller Attribute. Når du velger Attribute, må du også angi attributtnavnet. For eksempel leser This Element → Value det valgte alternativet fra en Select.
• Apply Function to Value: Decrement trekker fra én, Increment legger til én, og Switch snur en Boolean-verdi. Switch endrer for eksempel menuOpen fra False til True.
• Data Model of Dataset: Velg Select Component with Dataset for å lese datamodellen inn i målverdien.
• Object Mapping: Tilgjengelig for Object-variabler. Velg Object Operation og legg til koblinger. Hver kobling har en målsti, Path, og en Source, som en dataverdi, et hendelseselement, en variabel eller en skrevet verdi. Velg Select Path for data inni andre verdier. Bruk det for å samle flere skjemaverdier i ett Object.

Metoder for elementer og data

For en tilkoblet, gjenbrukbar Component velger du elementet inni komponenten når du blir bedt om det. Støttede metoder omfatter Dialog-kontroller og Next page/Previous page der de er tilgjengelige. Konfigurer annen oppførsel i kildekomponenten eller på siden rundt.

• Append Component og Remove Component endrer elementstrukturen som vises. Velg målet bevisst og kontroller hele resultatet i Preview.
• Show Modal og Close Modal er tilgjengelige for Dialog. Velg Dialog som mål.
• Filter Dataset velger Column to Filter og bruker verdien fra hendelsen. Filter Dataset (local) filtrerer radene som allerede er tilgjengelige for elementet. For en Object/Array-verdi velger du Path to Filter.
• Invoke Method → Query Dataset laster det valgte elementet på nytt med elementets Data Settings, inkludert Runtime Query når det er aktivert. Bruk den etter en radendring for å holde spørringens summer oppdatert. Next page og Previous page blar i et Dataset med flere rader; en Index Query med én rad tilbyr ikke sidebytte.
• Search Dataset søker i de valgte feltene. Search fields starter med alle lesbare Dataset-felt for en privat spørring, eller feltene som returneres av en Public-spørring. Velg bestemte felt for å avgrense søket. Hvis et offentlig resultat ikke returnerer noen felt og du heller ikke velger noen, lar søket resultatet være uendret.
• Sort Dataset leser et feltvalg fra Input eller Select. Verdien er feltets kolonnenøkkel, column:asc, column:desc eller none. Bare én sorteringskolonne beholdes.
• Download File by URL og Download Files from Dataset Column laster ned de valgte filadressene. Velg den faktiske URL-en eller filkolonnen i innstillingene.

Funksjoner for data og validering

Execute Function tilbyr valgene nedenfor. Velgere for mål, felt og variabler starter tomme. Velg ressursene du vil bruke, fremfor å stole på elementets navn.

Write context lar egnede felt motta tid eller øktverdier fra serveren. La genererte nøkler bruke standardverdiene i tabellen. For en betinget skriving velger du kilden for betingelsene, og Conditions path når du bruker en Object-variabel. Kontroller om resultatet er vellykket eller har feil før du viser en bekreftelse. Tilgangskontroll og tabellvalidering gjelder fortsatt ved hver skriving.

• Check Username Availability: Velg Dataset, kolonne og variabelen som skal motta tilgjengelighetsresultatet. Bruk det før du ber om et unikt brukernavn.
• Email Validation: Velg resultatvariabelen for kontroll av e-postadressen i inndatafeltet.
• Password Validation: Velg minste og største lengde, og om du skal kreve stor bokstav, liten bokstav, tall eller spesialtegn. Velg deretter resultatvariabelen. Sett kravene slik at de passer innloggingen.
• Filter Layer Dataset: Velg laget og filteroppsettet for å endre postene som vises.
• Execute Function → Query Dataset leser lagrede Dataset-rader. Velg Select Component with Dataset og eventuelt Index Query med indeks eller Index Variable. For en lagret View leses det lagrede resultatet; komponentens Runtime Query beregnes ikke på nytt. Bruk Invoke Method → Query Dataset til det.
• Refresh Dataset oppdaterer det lagrede Dataset fra kilden. For en lagret View oppdateres det lagrede resultatet. Dette er en annen operasjon enn å kjøre en besøkskomponents Runtime Query på nytt.
• Limit Dataset: Velg komponenten med datatilkobling og grensen for antall rader.
• Insert Dataset Row: Velg Dataset du kan skrive til, og angi feltverdiene. Valgfrie Progress Variable, Success Variable og Error Variable mottar fremdrift og resultat for operasjonen.
• Update Dataset Row: Velg Dataset, Operation, Update Source og felt. Les primærnøkkelen og den nye verdien fra hendelsen, en Object-variabel eller konfigurerte verdier. For et Object velger du Primary Key Object Path. Velg Conditions for raden når oppdateringen fortsatt må oppfylle en lagret betingelse.
• Delete Dataset Row: Velg Dataset du kan skrive til, og hvor postens nøkkel skal leses fra. Test sletting bare med poster du kan kaste.
• Update Item Model Property: Velg datamodellegenskapen du trenger å endre.
• Update Layer Property: Velg lagegenskapen som skal endres.
• Rename Columns from Mapping Table: Velg Select Data Table, Select Mapping Table og koblingens kolonner for nåværende og nytt navn.
• Replace File Dataset: Velg fildatakilden som skal motta erstatningsdata.
• Download Dataset: Velg gjeldende Dataset eller Saved View Result, Control Scope, filformat og, for CSV, skilletegn og anførselstegn. Et lagret resultat laster ned sine lagrede rader.
• Download Runtime Query Result: Velg spørringsresultatet og nedlastingsformatet for å eksportere resultatet som er laget nå.

Rader med egne handlinger og tilstander

Koble et inneholdende element til et Dataset. Det gjentas for hver valgt rad. Bind underordnede elementer til Data Items slik at etiketter, antall og betingelser leser gjeldende rad. Radene er allerede lagret; en ekstra liste i en sidevariabel er unødvendig.

Legg til Data Attributes på en radkontroll: navn pk, verdi Data Item → Primary Key; og navn column, verdi den nøyaktige skrivbare kolonne-ID-en. I Click Event → Execute Function → Update Dataset Row velger du tabellen, Update Source → Event Element og This Element. Les nøkkel og kolonne som Attribute med data-pk og data-column. Velg Increment Current Value eller Decrement Current Value for numeriske endringer på serveren. For Set Value bruker du en Input eller Select som inneholder den nye verdien.

Delete Dataset Row bruker samme radnøkkel. Insert Dataset Row kobler verdier til feltene i måltabellen; utelatte felt bruker tabellens standardverdier. Change Variable holder midlertidige verdier, for eksempel en valgt nøkkel eller melding. Det lagrer ikke en redigert rad.

Component States vurderer Data Item-betingelser separat for hver gjentatte rad. Et ikke-normativt eksempel er en kontroll med Column from Dataset → status → Equals → value → suggested. Den vises da bare for samsvarende rader. States styrer presentasjon; Data Settings-betingelser, Dataset-tilgang og gjeldende skrivebetingelser på serveren styrer tillatte rader og endringer.

Session-verdier identifiserer den innloggede besøkende gjennom valgt autentisering. Bruk gjeldende medlemsrader og Session-operander i lese- og skrivebetingelser, og serverens Write context for felt den besøkende ikke skal velge. Å skjule en kontroll verken tillater eller hindrer en forespørsel. Test både en avvist og en vellykket endring.

Hold antall og summer oppdatert

Bygg antall og summer i en View og bind oppsummeringskomponenten til feltene. Aktiver Runtime Query når View skal beregnes for gjeldende forespørsel. Etter godkjent innsetting, endring eller sletting legger du til Invoke Method → Query Dataset med oppsummeringskomponenten som mål. Kontroller oppsummeringen etter hver type endring.

To handlinger heter i dag Query Dataset. Invoke Method → Query Dataset kjører komponentens konfigurerte spørring, inkludert Runtime Query. Execute Function → Query Dataset leser lagrede rader, inkludert det lagrede resultatet til en View. Velges den siste for Runtime Query-summer, kan en gammel sum bli stående.

Send inn en Form

Velg Form og dens Action. For Dataset-innsendinger velger du Select Dataset og tabellen du kan skrive til. Sett Method til Post og velg Submission Type. AJAX holder siden åpen mens forespørselen kjører. Standard (HTML) bruker nettleserens vanlige navigasjon. Konfigurer handlingene du vil bruke ved vellykket og mislykket innsending.

Velg Input Type og det nøyaktige feltet i måltabellen under Name for hvert Input-element. Bruk Submit Button eller Input med typen submit. Forhåndsvis en eksempelinnsending og les den lagrede raden i måltabellen før du samler inn reelle data. Velg det nøyaktige tabellfeltet i Name på hvert Input-element. Kontroller både en lagret rad og en avvist innsending før publisering.

For en hovedrad med underrader oppretter du hovedraden først. On Form Success → Redirect kan velge en annen Page; Append Created Primary Key legger den godkjente nøkkelen til som spørringsparametere med kolonne-ID-ene som navn. Konfigurer målsiden til å lese nøkkelen, og sett inn hver underrad med fremmednøkkel til hovedraden. Avslutt med en autorisert statusendring og naviger til radens Page. Separate radskrivinger lover ikke én transaksjon for en vilkårlig liste med underrader.

Gjeldende begrensning: publiserte Dataset Forms bruker anonym Session-kontekst på den offentlige innsendingsruten. Skriving avhengig av et medlems Session bruker native radhandlinger; ikke anta at et skjult felt eller sideautentisering gir Form-skrivetilgang.

Funksjoner mens siden er åpen

Åpne Functions og velg Add Function. Observe Visibility starter uten observerte elementer eller egen rot, med tom rotmarg og terskel 0. Velg elementer med DOM access aktivert, velg hvordan observasjonen skal virke, og endre eventuelt rot eller terskel. Bruk det når et element som kommer inn i visningsområdet, skal oppdatere en synlig tilstand eller laste flere rader.

Scroll Position starter uten en variabel. Velg en passende variabel i redigeringen for å motta oppdateringer om rulleposisjonen. Bruk States for å vise eller utforme innhold ut fra verdien.

Update at Intervals starter på 1000 millisekunder, med Repeat på, Shuffle av og ingen elementer. Bruk Add Item og velg egenskaps- eller variabelverdier for hvert element. Endre intervallet for tiden mellom oppdateringene. Slå Repeat av for å avslutte etter sekvensen, eller Shuffle på for å variere rekkefølgen. Replay in Editor starter den på nytt for kontroll.

Eksempler

Switch snur den nåværende menytilstanden. Når du setter False, gir en lukkeknapp samme resultat ved hvert klikk.

Eksempel: åpne og lukk en meny

Bruk menuOpen-oppsettet ovenfor. Switch endrer False → True → False ved påfølgende klikk. Statusen går fra Menu closed til Menu open og tilbake til Menu closed. Når du laster siden på nytt, brukes den konfigurerte startverdien False igjen.

Eksempel: gi en knapp en tydelig lukkehandling

Legg til en ny Button med teksten Close menu. Legg til Click Event → Change Variable → menuOpen. Velg Boolean og False. Åpne menyen og velg deretter Close menu. Statusen går tilbake til Menu closed og forblir lukket ved neste klikk. Bruk en uttrykkelig verdi når en gjentatt handling skal gi samme resultat.

Begrensninger og vanlige feil

En handling trenger et fullstendig mål og en passende verdi før den kan reagere på en hendelse.

• Fullfør eller fjern den tomme handlingen som opprettes med hendelsen. Et ufullstendig mål kan ikke utføre oppgaven.
• Velg elementet som skal håndtere hendelsen. Plain Text endrer teksten. Button eller Link håndterer klikket.
• Skriv til en Table når en endring skal beholdes ved et nytt besøk. Variabler holder midlertidige sideverdier.
• Kontroller hendelser på nytt etter at du kopierer et underliggende element som var avhengig av data eller variabler fra elementet over.
• Test det interaktive utkastet og det genererte resultatet. Publiser deretter den kontrollerte versjonen. Forhåndsvisning av en Form som bruker en lagret Agent, starter ingen offentlig Agent-forespørsel.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

States · Story · Page · Component · Dataset